一小时上手微信小程序开发

刚接触小程序的时候，我用一周的时间阅读微信官方文档，而后面的同事只需要1小时就可以了，这是因为我将20%常用内容提炼成了文档。这就是这篇文章。

一 创建小程序

下载开发者工具，打开后根据ui提示操作就可创建一个小程序框架。

二 创建页面

微信客户端通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径，而写在 pages 字段的第一个页面就是这个小程序的首页（打开小程序看到的第一个页面）。

在小程序开发者工具中，我们修改 app.json 的 pages 字段后保存，开发者工具会根据我们的配置，在对应的路径创建页面文件，如果我们手动创建了文件，也需要在该字段中进行配置。

下面这段代码就代表这个小程序中有2个页面。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]
}
1
2
3
4
5
6

这时我们通过开发者工具修改该字段，添加一个虚拟的页面路径。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/logs2/logs2",
  ]
}
1
2
3
4
5
6
7

点击保存我们看到在pages文件夹下多了一个logs2文件夹。里面有logs2页面的四个文件。并且logs2页面也可以被访问了。

三 常用配置

3.1 实现小程序底部标签栏

实现小程序底部标签栏，我们只需要准备好对应页面，然后在刚刚的 app.json 文件中对tabBar进行简单配置。tabBar有几项，小程序底部就有几个标签按钮。

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/index",
      "text": "日志"
    }]
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3.2 页面顶部导航栏设置

上面提到开发者工具会根据我们的配置，在对应的路径创建页面文件，四个文件组成一个页面，页面对应的 .json 文件可以对本页面的表现进行配置。

其中主要是对页面顶部导航栏设置的设置。

下面实例中，navigationBarBackgroundColor设置导航栏背景颜色，navigationBarTextStyle设置导航栏字体颜色，navigationBarTitleText设置导航栏文字，也就是页面标题。

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
}
1
2
3
4
5

四 常用的生命周期

4.1 页面

上面提到自动创建的四个页面文件，其中有js文件，用来放置页面js。

自动生成的js文件会包括一个page对象，对象中有很多属性，可以看到生命周期函数已经给出了，我们只要填充逻辑即可。

普通的数据更新写在onLoad中，实时性较强的数据更新写在onShow中，区别在于部分场景（如返回上一个页面）onLoad不会重新触发，但是onShow会在页面展示出来的每个场景中触发。

时间上onLoad早于onShow触发。

Page({
  ...
  onLoad: function(options) {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onPullDownRefresh: function() {
    // 触发下拉刷新时执行
  },
  onReachBottom: function() {
    // 页面触底时执行
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

五 页面跳转

微信小程序的跳转不需要特殊配置，就使用上面app.json 的 pages 字段种的页面路径进行跳转。

这里5种跳转的api都需要了解，各自对应不同的使用场景。

navigateTo：打开新页面，对应新页面入栈，是最常用的api。
redirectTo：页面重定向，当前页面出栈，新页面入栈，可用于表单填写页面，填写后使用重定向跳转，返回上一页不会返回到表单填写页。
navigateBack：页面返回，页面不断出栈，直到目标返回页，不填写参数的时候就是返回上一页。
switchTab：Tab 切换，页面全部出栈，只留下新的 Tab 页面。
reLaunch：重加载，页面全部出栈，只留下新的页面。

api的使用方式有两种，js调用或使用navigator标签调用。
下面使用switchTab演示，其余四种只要将switchTab替换成对应api即可。

wx.switchTab({
  url: '/pages/logs/index'
})
1
2
3

<navigator open-type="switchTab" url="/pages/logs/index" >跳转到新页面navigator>
1

5.1 携带参数的跳转

携带参数跳转只要在url后面加入参数，格式和get请求相同。
调用页面路由带的参数可以在目标页面的onLoad中以参数的形式获取。

wx.switchTab({
  url: '/pages/logs/index?param1=1&¶m2=2'
})
1
2
3

下面代码中的options就是参数对象。

// /pages/logs/index
Page({
  ...
  onLoad: function(options) {
    // 页面创建时执行
  },
})
1
2
3
4
5
6
7

这里有几个注意事项：

1. navigateTo, redirectTo 只能打开非 tabBar 页面。
2. switchTab 只能打开 tabBar 页面。
3. 调用页面路由带的参数可以在目标页面的onLoad中获取。
4. 返回上一页时onload方法不会触发。

六 进入页面开发

6.1 wxml

wxml是html的变种，里面可以使用一些类似html标签的标签，这些标签可以看作是微信将原有的html标签封装成组件，用来作wxml的基础开发标签。

下面给出必备标签组件的简介，开发简单的小程序下面的简介足够了，更多更详细的组件介绍可以查阅官方组件文档，用到哪儿查到哪儿。

1. view：类似于div，是最常使用的容器标签之一。
2. text: 类似于span。
3. button：按钮，该组件常用属性有size（default|mini）、 disabled（是否可用）、hover-class（点击样式）、 type（primary|default|warn）、plain（样式是否镂空）。
4. checkbox：多选框，需要使用checkbox-group包裹，常用属性有value（checkbox标识，选中时触发checkbox-group的 change 事件，并携带 checkbox 的 value）、disabled、checked（当前是否选中）。
5. input：输入框，常用属性有value、type（用来限制输入类型）、password（是否是密码）、placeholder（占位文字）、placeholder-class（占位文字类）、disabled（是否可用）、bindinput（键盘输入时触发）、bindfocus（输入框聚焦时触发）、bindblur（输入框失去焦点时触发）。
6. label：点击label可选中其中的表单组件。
7. picker：从底部弹起的滚动选择器，该选择器是将对应结构的数据通过range属性绑定到picker标签上，绑定一个选中值到value属性，绑定bindchange事件，当选中项变化的时候触发change事件，手动更新value对应的index变量的值。
8. radio：单选。
9. switch：开关选择器。
10. textarea：多行输入框。
11. image：图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式。

6.2 逻辑命令

wxml中也可以使用一些类似vue的逻辑命令。

6.2.1 数据绑定

<view> {{message}} view>
1

// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})
1
2
3
4
5
6

<view> {{message}} view>
1

6.2.2 列表渲染

<view style="color:{{color}};" />
1

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})
1
2
3
4
5
6

6.2.3 条件渲染

<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW view>
<view wx:elif="{{view == 'APP'}}"> APP view>
<view wx:else="{{view == 'MINA'}}"> MINA view>
1
2
3

6.2.4 绑定事件

事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。

小程序绑定事件无法直接传递参数，可以将参数绑定到标签data开头的属性上。

<view id="tapTest" data-hi="Weixin" bindtap="tapName"> Click me! view>
1

Page({
  tapName: function(event) {
    console.log(event.target.id, event.target.dataset)
    // "tapTest" { "hi":"Weixin" }
  }
})
1
2
3
4
5
6

6.2.5 双向绑定

<input model:value="{{value}}" />
1

目前只能是一个单一字段的绑定，不支持路径表达式和对象。
自定义组件中可以通过表单联动或者手动触发额方式实现双向绑定。

表单联动

<input model:value="{{myValue}}" />
1
2

<custom-component model:my-value="{{pageValue}}" />
1

// custom-component.js
Component({
  properties: {
    myValue: String
  }
})
1
2
3
4
5
6

手动触发

// custom-component.js
Component({
  properties: {
    myValue: String
  },
  methods: {
    update: function() {
      // 更新 myValue
      this.setData({
        myValue: 'leaf'
      })
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14