小程序运行机制分析

当我们选择使用微信小程序开发工具生成默认的javascript模版之后，在我们深入学习如何开发小程序之前，其实可以来研究一下这个模版。

以下是默认生成的文件目录树。

.
├── app.js
├── app.json
├── app.wxss
├── pages
│   ├── index
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
│   └── logs
│       ├── logs.js
│       ├── logs.json
│       ├── logs.wxml
│       └── logs.wxss
├── project.config.json
├── project.private.config.json
├── sitemap.json
├── utils
│   └── util.js
│    
└── .eslintrc.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

初步看小程序可能有点懵，这里我们不如先尝试修改一下hello world吧，这里我们先查看index.wxml文件。

<view class="container">
  <view class="userinfo">
    <block wx:if="{{canIUseOpenData}}">
      <view class="userinfo-avatar" bindtap="bindViewTap">
        <open-data type="userAvatarUrl">open-data>
      view>
      <open-data type="userNickName">open-data>
    block>
    <block wx:elif="{{!hasUserInfo}}">
      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 button>
      <button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 button>
      <view wx:else> 请使用1.4.4及以上版本基础库 view>
    block>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover">image>
      <text class="userinfo-nickname">{{userInfo.nickName}}text>
    block>
  view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}text>
  view>
view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

位于倒数第二行的{{ motto }}其实就是一个值的绑定，在mac系统下按住command+鼠标就可以跳转到index.js文件。

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    canIUseGetUserProfile: false,
    canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
  },
  // 事件处理函数
  bindViewTap() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log(res)
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  getUserInfo(e) {
    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
    console.log(e)
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

我们很容易就可以看到Hello World在第7行左右（如果你使用的版本和我差不多的话）。这里我们修改成博主的id（Hello JIeJaitt）。

修改后我们返回微信小程序开发者工具查看我们的小程序，可以看到已经被修改成Hello JIeJaitt。

配置文件

我们先来查看小程序的一个配置文件app.json。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

可以发现我们所有的页面都需要在pages下面注册。而window则是对小程序一些窗口的配置，这里的命名十分的容易理解，比如说我们修改"navigationBarTitleText": "Weixin" 为"navigationBarTitleText": "租辆小车出行服务" 。

sitemapLocation参数则是配置了我们小程序的一个搜索的功能，可以把小程序内部的一些文字暴露给微信的搜一搜，增加我们小程序的一个曝光度，默认就是对所有页面都允许。
其他配置可以查看小程序的配置文档：微信小程序配置文档。

除此之外我们还有一个页面的json，index.json。

{
  "usingComponents": {}
}
1
2
3

这里基本没有，就不展开讲了，需要的话直接查看官方文档中的页面配置即可。

运行与setdata渲染机制