微信小程序开发总结

微信小程序官方文档链接

目录结构

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：app.js(小程序逻辑)，app.json(小程序公共配置)，app.wxss(小程序公共样式表)

一个小程序页面由四个文件组成，分别是js(页面逻辑)，wxml(页面结构)，json(页面配置)，wxss(页面样式表)

为了方便开发者减少配置项，页面的四个文件必须具有相同的路径与文件名。

在app.json文件中，需要在pages中注册所有使用到的页面

进入小程序时，会默认进入pages中第一个页面

如果进入小程序时，接口请求较多，建议增加一个加载页面，将接口请求放在加载页面中

如果使用到第三方采集等需要使用唯一标识，可先在加载页面中获取到用户的openid

注册小程序

每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。

// app.js
App({
  onLaunch (options) {
    //生命周期回调——监听小程序初始化。小程序初始化完成时触发，全局只触发一次
  },
  onShow (options) {
    //生命周期回调——监听小程序启动或切前台。小程序启动，或从后台进入前台显示时触发
  },
  onHide () {
    //生命周期回调——监听小程序切后台。小程序从前台进入后台时触发
  },
  onError (msg) {
    console.log(msg)
    //错误监听函数。
  },
  globalData: 'I am global data'//小程序全局变量，可以是Object
})

整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 实例，获取App上的数据或调用开发者注册在 App 上的函数。

注册页面

对于小程序中的每个页面，都需要在页面对应的 js 文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等。

其中页面生命周期中，页面加载时方法的加载顺序是先加载onLoad，再是onShow，最后onReady

//index.js
Page({
  data: {
    text: "This is page data."
  },
  
  onLoad: function(options) {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
  onPullDownRefresh: function() {
    // 触发下拉刷新时执行
  },
  onReachBottom: function() {
    // 页面触底时执行
  },
  onShareAppMessage: function () {
    // 页面被用户分享时执行
  },
  onPageScroll: function() {
    // 页面滚动时执行
  },
  onResize: function() {
    // 页面尺寸变化时执行
  },
})

自定义组件Component

官网链接

自定义组件与页面相同，也是由四个文件组成，分别是js(页面逻辑)，wxml(页面结构)，json(页面配置)，wxss(页面样式表)，

同时要求对应 json 文件中包含 usingComponents 定义段。

父组件在使用组件时，需要在json文件中usingComponents引入，定义使用名称与路径。

slot

在组件的 wxml 中可以包含 slot 节点，用于承载组件使用者提供的 wxml 结构。

默认情况下，一个组件的wxml文件中只能有一个slot，需要多个slot时，可在组件js中声明启用。

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: { /* ... */ },
  methods: { /* ... */ }
})

可以在这个组件的 wxml 中使用多个 slot ，以不同的 name 来区分。

组件样式

组件和引用组件的页面不能使用id选择器（#a）、属性选择器（[a]）和标签名选择器

组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用

子元素选择器（.a>.b）只能用于 view 组件与其子节点之间，用于其他组件可能导致非预期的情况

继承样式，如 font 、 color ，会从组件外继承到组件内

除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效

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

组件间通信与事件

• WXML 数据绑定：用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容数据。

此方法需要组件在js文件中的properties中设置属性名称，类型，与默认值

在调用的父组件中

• 事件：用于子组件向父组件传递数据，可以传递任意数据。

自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项：

在父组件调用组件时使用bind:绑定方法，类似Vue中的使用。

• 父组件还可以通过 this.selectComponent 方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法。

获取用户数据

2021年4月28日后，小程序新版本，无法通过wx.getUserInfo与获取用户个人信息（头像、昵称、性别与地区），将直接获取匿名数据（包括userInfo与encryptedData中的用户个人信息）

小程序通过wx.login接口获取的登录凭证可直接换取unionID

新增wx.getUserProfile(Object object)，开发者每次通过该接口获取用户个人信息均需用户确认。

若需要在界面中展示用户的头像昵称信息，可以通过****组件进行渲染，该组件无需用户确认，可以在界面中直接展示。

WXML语法参考

数据绑定

WXML 中的动态数据均来自对应 Page 的 data。

简单绑定

数据绑定使用 Mustache 语法（双大括号）将变量包起来，在双大括号中，可进行三元运算、算数运算、逻辑判断、字符串运算、数据路径运算

循环wx:for

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名，

也可以将 wx:for 用在<block/>标签上，以渲染一个包含多节点的结构块

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态，需要使用 wx:key 来指定列表中项目的唯一的标识符。

条件渲染wx:if

使用 wx:if="" 来判断是否需要渲染该代码块，也可以用 wx:elif 和 wx:else 来添加一个 else 块

wx:if vs hidden

因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。

同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。

相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好

注意：wx:for和wx:if不要在同一个标签中使用，因为for的优先级比if的优先级高，要使用时，需要分层处理

路由跳转

小程序API中，页面跳转有5种方法：

wx.switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

wx.reLaunch：关闭所有页面，打开到应用内的某个页面

wx.redirectTo：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面

wx.navigateTo：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面

wx.navigateBack：关闭当前页面，返回上一页面或多级页面

需要注意，小程序中有页面栈，用来存放当前打开的页面，当页面栈达到10层时，使用wx.navigateTo会跳转失败并报错，所以在使用路由跳转时，需要注意是否会形成循环，使页面栈超过10层。

setData

整个小程序框架系统分为两部分：逻辑层与视图层。小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架。

框架的核心是一个响应的数据绑定系统，可以让数据与视图非常简单地保持同步。当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。

setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）

注意：直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致

WXSS

尺寸单位rpx

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素

样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束