微信小程序学习文档指南

 

一、开发前准备

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"
      ]
    }
  ],

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