前(che)言(dan):

  近几天,微信小程序的内测引起了众多开发人员的热议,很多人都认为这将会成为一大热门,那么好吧,虽然我是一个小白,但这是个新玩意,花点时间稍稍钻研一下也是无妨的,谁让我没有女朋友呢,给我提供了大量的闲暇时光,对此我只想说:呵呵!。现在微信小程序刚发布还在测试阶段,可以说是1.0版本,所以框架和结构内容都还不多,这时候不学什么时候学?万一成为大牛了呢?万一有哪个妹子看上我了呢?想想还有点小激动呢。。。

正文:

  1.什么是微信小程序?

    简单的说很像 H5,它将 应用(功能与app相当) 嵌入到微信公众号中,用户无需安装应用,就能访问。相比app轻便了许多。

  2.开发者学习

    既然我们是程序员,乱七八糟的言论就不说了,像“这个东西以后会不会火啊?会不会取代app啊?好不好用啊?能不能找到女朋友啊?”这些问题,我只想说:除了最后一个问题,其他的管我吊事?好的!bb完了直接过来,干正事,代码看起来

    

    1.首先,我们需要下载安装 微信Web开发者工具,地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

    2.打开开发者工具后,扫码进去创建项目,普通用户是没有appid(这里的appid不是普通公众号的appid)的,选择没有appid就好了,然后输入项目名称比如:HelloWorld,选择项目保存地址的时候选择一个新创建的空文件夹,并且勾选 quick start, 它就会帮我们创建一个简易的小程序demo,方便我们学习理解

    3.进入我们的项目以后,我们看到了一个简单的demo页面,在左边菜单栏中选择“编辑”,可以查看我们这个项目的文件和结构,从文件结构中我们可以看到他的文件类型无非 4种:

      .js : 这就是一个javascript文件,只不过它是微信基于javascript封装过的,所以很多js函数是不能使用的,比如localhost.href,微信加入了很多自身的接口,比如跳转页面是: wx.navigationTo()函数

      .json : 配置文件,可以配置页面头部title信息等

      .wxml : 视图结构文件,功能就像html文件差不多,用于描述页面结构,只不过它有自己独特的标签,不使用html标签

      .wxss : 视图样式文件,格式跟css文件一样,他在css的基础上扩展了几个特性 比如:尺寸单位 / 样式导入

    4.这时候我们在项目文件夹下看到了三个特别的文件app.js、app.json、app.wxss,你还别说,这三个文件是一个项目必不可少的文件,删除任意一个文件项目都会崩掉,它们都是干吗用的呢?

      app.js: 小程序逻辑,里面用了一个App()函数来注册一个小程序,他有一个object类型的自定义参数,普通页面的js文件中可以通过 getApp()函数拿到App()函数所拥有的参数,并调用其中的数据

      app.json: 这里是项目的全局配置 比如 每一个页面(一个页面包括四个部分[js、json、wxml、wxss])都要在 pages数组中声明不然是访问不到的, windows对象中可以设置窗口的样式

      app.wxss: 这里是一个全局的样式文件,会对项目的每个页面其作用,就如一个全局的css文件

    5: 项目运行过程:

      第一步:加载项目根目录下的 app.js、 app.json、 app.wxss文件,同时会执行app.js文件,并触发其中的onLaunch 和 onShow 函数

      第二步:加载app.json中pages数组中配置的第一个页面,作为项目的欢迎页,同时会执行对应页面js文件,并触发 onLoad / onReady 和 onShow 函数

      往后:页面可以通过事件与js文件交互,比如 在标签元素上绑定点击事件,并且指向js文件中的一个函数,就能用js中的逻辑去处理这个事件了

     

    6:几个小问题: 

      第一个问题:他这个东西没有初始访问路径,不科学啊,为什么他一运行就给我进到index.wxml页面了呢?

        答:那是因为我们在配置 app.json的时候,在pages数组中声明了所有页面,而它运行的时候就会默认打开第一个页面,简单粗暴,谁排第一谁就是爸爸!

      第二个问题:他这个index.wxml文件中没有引入index.js、index.wxss和index.json,他是如何调用到它们呢?

        答:我们可以理解为 index 页面被拆分成了四个后缀不同的文件,但事实上他们是一体的,嘻嘻,这种关联方式莫名的很爽  (index页面 = index.js + index.json + index.wxml + index.wxss  , 其中wxss和json文件在没必要时可以没有)

      第三个问题:虽然我知道了他们四个文件是互通的,但是我在index.wxml里要如何调用index.js中的数据和函数呢??

        答:index.js中需要调用一个 Page()函数来注册一个页面,他有一个object类型的参数,其中有一个data对象,比如 Page({data:{key:'hello'}}),这样我们在页面中就可以直接使用{{key}} 双大括号来指向这个变量了,而且是同步的哟,js文件中data值变化后,页面中调用他的值也会跟着变。如果要调用的是个function对象的话,那我们就需要通过事件来调用了,比如页面加载事件,他会去js中找onLoad函数,这个他是自动的,如果我们想在我们点击了某个元素后调用一个函数处理相应逻辑,那么我们需要在元素标签中添加 属性了 比如 <view bindtap="myTapEvent">按钮</view>  ,当我点击了“按钮”文字后, 他就能调用到 js > Page()参数 > myTapEvent函数。

最后我还是把微信 官方的文档放在这里, 大家可以直接看文档,现在初期内容不多,赶紧学起来

https://mp.weixin.qq.com/debug/wxadoc/dev/

好吧。初级的入门学习算是结束啦,之后会写一些更加深入的学习内容。 ^ ^

               

  

  

微信小程序入门学习的更多相关文章

  1. 微信小程序入门学习-- 简易Demo:计算器

    简单学习下微信小程序 官网 简易教程 · 小程序 https://mp.weixin.qq.com/debug/wxadoc/dev/ 需要通过开发者工具,来完成小程序创建和代码编辑. 下载安装,运行 ...

  2. 微信小程序入门学习之事件 事件对象 冒泡非冒泡事件(1)

    这关于事件的学习,可以自己复制到微信开发者工具上自己运行试试. 首先这里有两个文件.js 和.wxml 文件 首先给出.js文件下代码 // pages/news/news.js Page({ /** ...

  3. 天河微信小程序入门《三》:打通任督二脉,前后台互通

    原文链接:http://www.wxapp-union.com/forum.php?mod=viewthread&tid=505&extra=page%3D1 天河君在申请到https ...

  4. 我的微信小程序入门踩坑之旅

    前言 更好的阅读体验请:我的微信小程序入门踩坑之旅 小程序出来也有一段日子了,刚出来时也留意了一下.不过赶上生病,加上公司里也有别的事,主要是自己犯懒,就一直没做.这星期一,赶紧趁着这股热乎劲,也不是 ...

  5. 微信小程序入门正确姿势(一)

    [未经作者本人同意,请勿以任何形式转载] >>>前言 这是 [认真学编程] 系列的 第4篇 文章(微信小程序入门系列),欢迎点赞分享.写留言,这些都是对我最好的支持. 本系列适合有一 ...

  6. 微信小程序入门篇

    微信小程序入门篇: 准备工作 IDE搭建 就不多说了,没有内测码去下载个破解版吧,我用了一下,学习完全够了!IDE破解版+安装教程 图片发自简书App 知识准备 JavaScrip还是要看看的,推荐教 ...

  7. 从零开始的微信小程序入门教程(一)

    之前说要和同事一起开发个微信小程序项目,现在也在界面设计,功能定位等需求上开始实施了.所以在还未正式写项目前,打算在空闲时间学习下小程序.本意是在学习过程中结合实践整理出一个较为入门且不是很厚的教程, ...

  8. 微信小程序入门与实战 常用组件API开发技巧项目实战*全

    第1章 什么是微信小程序? 第2章 小程序环境搭建与开发工具介绍 第3章 从一个简单的“欢迎“页面开始小程序之旅 第4章 第二个页面:新闻阅读列表 第5章 小程序的模板化与模块化 第6章 构建新闻详情 ...

  9. 微信小程序入门与实战 从0到1进行细致讲解 涵盖小程序开发核心技能下载

    第1章 什么是微信小程序? 第2章 小程序环境搭建与开发工具介绍 第3章 从一个简单的“欢迎“页面开始小程序之旅 第4章 第二个页面:新闻阅读列表 第5章 小程序的模板化与模块化 第6章 构建新闻详情 ...

随机推荐

  1. WPF 自定义标题栏

    在做客户端应用程序时,往往觉得Windows自带的标题栏没有样式,不太好看,下面分享自自定义的一个Windows工具 效果图: <Style x:Key="Buttonclock&qu ...

  2. 基于Bootstrap设计网页

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  3. 原生js中slice()方法和splice()区别

    slice()方法和splice()方法都是原生js中对数组操作的方法. slice(),返回一个新的数组,该方法可从已有的数组中返回选定的元素.例如:arrObject(start,end),sta ...

  4. PHP+Jquery+Ajax 实现动态生成GUID、加载GUID

    GUID: 全局唯一标识符(GUID,Globally Unique Identifier)是一种由算法生成的二进制长度为128位的数字标识符.GUID主要用于在拥有多个节点.多台计算机的网络或系统中 ...

  5. 弹出层js要这样加才不会失效

    $('body').on('click','.check_eln',function(){    $('#eln_show').toggleClass('hidden'); });

  6. JS入门(五)

    前面提了很多JS的基础知识,像一些基本输出语句啊,JS中的关键字呐.然后是JS中的一些循环,数组之类的,在之后就是函数了.这些都是在JS中很基础的一些东西,在我刚开始学JS的时候,这些我就觉得很简单, ...

  7. JavaScript数据结构——栈的实现

    栈(stack)是一种运算受限的线性表.栈内的元素只允许通过列表的一端访问,这一端被称为栈顶,相对地,把另一端称为栈底.装羽毛球的盒子是现实中常见的栈例子.栈被称为一种后入先出(LIFO,last-i ...

  8. Hibernate打印SQL及附加参数

    今天在项目运行过程中,一直报一个org.hibernate.exception.GenericJDBCException: could not insert 异常,Root Cause是IBM  DB ...

  9. ES3:ElasticSearch 索引

    ElasticSearch是文档型数据库,索引(Index)定义了文档的逻辑存储和字段类型,每个索引可以包含多个文档类型,文档类型是文档的集合,文档以索引定义的逻辑存储模型,比如,指定分片和副本的数量 ...

  10. 关于如何介绍spring框架。

    一.介绍Spring 1.Spring是一个分层的JavaSE/EEfull-stack(一站式) 轻量级开源框架. 2.概念:轻量级的IOC(控制反转或者依赖注入).AOP(面向切面或者面向方面) ...