微信小程序学习文档指南

一、开发前准备

1、开发工具下载。

2、微信小程序设计指南

3、首先要通读一遍官方文档，看看都有哪些东西，都能干什么。

二、目录结构

1、components 小程序自定组件（组件生命周期，组件间通信与事件，数据监听器）

2、images 小程序内图片资源

3、miniprogram_npm 使用npm包安装的组件

4、pages 小程序页面文件夹放置微信小程序所有的小程序页面，每个小程序页面基本有.js .json .wxml .wxss 四个文件组成

js：文件帮我们去处理微信小程序里面的逻辑和数据交互（数据双向绑定，获取界面上的节点信息）

json：文件帮我们配置微信小程序页面的一个配置信息

wxml：文件是用来帮我们展示我们小程序页面的元素和内容（数据绑定、列表渲染、条件渲染、模板、引用）

wxss：文件帮我们设置小程序页面元素的样式

5、utils 小程序公用类目录

6、app.js：注册小程序

7、app.json：文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

8、app.wxss：小程序公共样式表

三、开发详解系列

1、APP生命周期（app.js注册小程序，小程序运行机制）

//必须在 app.js 中调用，必须调用且只能调用一次。
App({onLaunch (options) {// Do something initial when launch.},onShow (options) {// Do something when show.},onHide () {// Do something when hide.},onError (msg) {console.log(msg)},globalData: 'I am global data'
})

2、页面生命周期和参数传递（生命周期，页面路由）

navigateTo, redirectTo 只能打开非 tabBar 页面。
switchTab 只能打开 tabBar 页面，路径后不能带参数。
reLaunch 可以打开任意页面。
页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
调用页面路由带的参数可以在目标页面的onLoad中获取。

3、事件

冒泡事件（bind）：当一个组件上的事件被触发后，该事件会向父节点传递。
非冒泡事件（catch）：当一个组件上的事件被触发后，该事件不会向父节点传递。
互斥事件（mut-bind）：如果事件冒泡到其他节点上，其他节点上的 mut-bind 绑定函数不会被触发，但 bind 绑定函数和 catch 绑定函数依旧会被触发。
事件的捕获（capture-bind、capture-catch）：触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。

4、获取用户信息（小程序登录、UnionID 机制说明，获取手机号，头像昵称、位置、运动步数等授权）

5、发起 HTTPS 网络请求

wx.request({url: 'test.php', //仅为示例，并非真实的接口地址data: {x: '',y: ''},header: {'content-type': 'application/json' // 默认值},success (res) {console.log(res.data)}
})

每个微信小程序需要事先设置通讯域名，小程序只可以跟指定的域名进行网络通信。
域名必须经过 ICP 备案
域名只支持 https，域名不能使用 IP 地址（在微信开发者工具中，可以临时开启 开发环境不校验请求域名、TLS版本及HTTPS证书 选项，跳过服务器域名的校验。此时，在微信开发者工具中及手机开启调试模式时，不会进行服务器域名的校验。）

四、Tip

1、setData接口的调用涉及逻辑层与渲染层间的线程通信，通信过于频繁可能导致处理队列阻塞，界面渲染不及时而导致卡顿，应避免无用的频繁调用。

视图层绑定的变量使用this.setData({a:'1'})，同时this.data.a同步改变。
要在页面渲染后执行的方法可以写在setData的回调方法中this.setData({a:'1'},()=>{ // Do something.})
setData操作会引起框架处理一些渲染界面相关的工作，一个未绑定的变量意味着与界面渲染无关，传入setData会造成不必要的性能消耗。

2、组件对应 wxss 文件的样式，只对组件wxml内的节点生效。

继承样式，如 font 、 color ，会从组件外继承到组件内。
组件和引用组件的页面不能使用id选择器（#a）、属性选择器（[a]）和标签名选择器，请改用class选择器。
分包中不可使用其他分包资源，可使用主包资源；主包不可使用分包资源。

#a { } /* 在组件中不能使用 */
[a] { } /* 在组件中不能使用 */
button { } /* 在组件中不能使用 */
.a > .b { } /* 除非 .a 是 view 组件节点，否则不一定会生效 */

3、小程序分包，单个包最大2M，代码包总大小20M

 "pages": [ //主包页面配置"pages/index/index",],"subpackages": [ // 配置分包{"root": "pages/activity", // 分包根目录"pages": [  // 分包页面"perInvite/index"  ]},{"root": "pages/subPages","pages": ["camp/index"]}],

分包中不可使用其他分包资源，可使用主包资源；主包不可使用分包资源。