前端Jeek

微信小程序基础

2022/2/10 小程序

🌙 目录结构 (opens new window)

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

project
|—pages
|   |—index
|   |   |—index.json        index 页面配置
|   |   |—index.js          index 页面逻辑
|   |   |—index.wxml        index 页面结构（html） 
|   |   |—index.wxss        index 页面样式
|   |__log
|   |   |—log.json           log 页面配置
|   |   |—log.js             log 页面逻辑
|   |   |—log.wxml           log 页面结构（html） 
|   |   |—log.wxss           log 页面样式
|—app.js                     小程序逻辑代码
|—app.json                   小程序全局配置
|—app.wxss                   小程序公共样式表
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

🌙 全局配置👉 (opens new window)

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象。具体配置参考官网👉 (opens new window)

{
  // 基础页面配置
  "pages": [
    "pages/farm/index",
    "pages/comp/index",
    "pages/api/index",
    "pages/other/index"
  ],
  // 分包页面配置
  "subpackages": [
    {
      "root": "comp",
      "pages": [
        "scroll-view/index"
      ]
    }
  ],
  // 页面配置规则
  "preloadRule": {
    "pages/farm/index": {
      "network": "all",
      "packages": [
        "farm"
      ]
    }
  },
  // 默认启动路径
  "entryPagePath": "pages/farm/index",
  // 全局默认窗口表现（可以被页面表现覆盖）
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#f1f1f1",
    "navigationBarTitleText": "金迅教育 · 微信小程序",
    "navigationBarTextStyle": "black"
  },
  // 底部导航栏目配置
  "tabBar": {
		"color": "#000",
		"selectedColor": "#0050FF",
		"list": [
			{
				"iconPath": "/static/tabbar-icons/store.png",
				"selectedIconPath": "/static/tabbar-icons/store_s.png",
				"text": "框架",
				"pagePath": "pages/farm/index"
      },
      {
				"iconPath": "/static/tabbar-icons/home.png",
				"selectedIconPath": "/static/tabbar-icons/home_s.png",
				"text": "组件",
				"pagePath": "pages/comp/index"
			},
			{
				"iconPath": "/static/tabbar-icons/sns.png",
				"selectedIconPath": "/static/tabbar-icons/sns_s.png",
				"text": "API",
				"pagePath": "pages/api/index"
			},
			{
				"iconPath": "/static/tabbar-icons/user.png",
				"selectedIconPath": "/static/tabbar-icons/user_s.png",
				"text": "其他",
				"pagePath": "pages/other/index"
			}
		]
	},
  // 小程序接口权限配置
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  },
  // weui 组件库相关配置
  "style": "v2",
  "useExtendedLib": {
    "weui": true
  },
  // 网络超时时间配置
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  // 是否开启调试模式
  "debug": true,
  // 指明 sitemap 配置文件位置
  "sitemapLocation": "sitemap.json"
}
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

🌙 页面配置👉 (opens new window)

app.json 中的部分配置，也支持对单个页面进行配置，可以在页面对应的.json 文件来对本页面的表现进行配置。👉 (opens new window)

页面中配置项在当前页面会覆盖 app.json 中相同的配置项（样式相关的配置项属于app.json 中的 window 属性，但这里不需要额外指定 window 字段），具体的取值和含义可参考全局配置文档 (opens new window)中说明。

配置示例:

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

注：并不是所有 app.json 中的配置都可以在页面覆盖或单独指定，仅限于本文档包含的选项。 注：iOS/Android 客户端 7.0.0 以下版本，navigationStyle 只在 app.json 中生效。

🌙 sitemap 配置👉 (opens new window)

小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象，如果没有sitemap.json，则默认为所有页面都允许被索引。

{
  "rules":[{
    "action": "allow",  // 命中该规则的页面是否能被索引
    "page": "path/to/page", // * 表示所有页面，不能作为通配符使用
    "params": ["a", "b"],
    "matching": "exact"
  }, {
    "action": "disallow",
    "page": "path/to/page"
  }]
}
1
2
3
4
5
6
7
8
9
10
11

🌙 框架接口👉 (opens new window)

🌙 1.小程序App&生命周期函数

  • App({})注册小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。 App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。
// app.ts
App<IAppOption>({
  globalData: {msg: 'Hello weixin mini program!'},
  onLaunch(options) {
    console.log('onLaunch', options);
    
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        console.log(res.code)
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      },
    })
  },
  onShow(options) {
    console.log('onShow', options.path); 
  },
  onHide() {
    console.log('onHide');
  },
  onError(err) {
    console.log('onError', err);
  },
  onPageNotFound(options) {
    console.log('onPageNotFound', options);
    wx.redirectTo({url: '/'})
  },
  onUnhandledRejection(options) {
    console.log('onPageNotFound', options);
  },
  onThemeChange(options) {
    console.log('onThemeChange', options);
  }
})
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

生命周期函数

  • onLaunch(Object object) 小程序初始化完成时触发，全局只触发一次。参数也可以使用 wx.getLaunchOptionsSync 获取。

参数：与 wx.getLaunchOptionsSync (opens new window) 一致

  • onShow(Object object) 小程序启动，或从后台进入前台显示时触发。也可以使用wx.onAppShow 绑定监听。

参数：与 wx.onAppShow (opens new window) 一致

  • onHide() 小程序从前台进入后台时触发。也可以使用 wx.onAppHide 绑定监听。

  • onError(String error) 小程序发生脚本错误或 API 调用报错时触发。也可以使用 wx.onError 绑定监听。

参数：与 wx.onError (opens new window) 一致

  • onPageNotFound(Object object) 基础库 1.9.90 开始支持，低版本需做兼容处理。

小程序要打开的页面不存在时触发。也可以使用 wx.onPageNotFound绑定监听。注意事项请参考 wx.onPageNotFound。

参数：与 wx.onPageNotFound (opens new window) 一致

示例代码：

App({
  onPageNotFound(res) {
    wx.redirectTo({
      url: 'pages/...'
    }) // 如果是 tabbar 页面，请使用 wx.switchTab
  }
})
1
2
3
4
5
6
7

+onUnhandledRejection(Object object) 基础库 2.10.0 开始支持，低版本需做兼容处理。

小程序有未处理的 Promise 拒绝时触发。也可以使用 wx.onUnhandledRejection 绑定监听。注意事项请参考 wx.onUnhandledRejection。

参数：与 wx.onUnhandledRejection (opens new window) 一致

  • onThemeChange(Object object) 基础库 2.11.0 开始支持，低版本需做兼容处理。

系统切换主题时触发。也可以使用 wx.onThemeChange 绑定监听。

参数：与 wx.onThemeChange (opens new window) 一致

🌙 数据绑定👉 (opens new window)

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

视图层demo.wxml:

<view>Hello {{name}}</view>
<button bindtap="changeName">click me</button>
1
2

逻辑层demo.js:

// data
const helloData = {
    name: 'weixin',
}

// Register a page
Page({
    data: helloData,
    changeName() {
        this.setData({name: 'world'})
    },
1
2
3
4
5
6
7
8
9
10
11

🌙 1.简单绑定

<view> {{ message }} </view>
1
Page({
    data: {
        message: 'hello world'
    }
})
1
2
3
4
5

🌙 2.组件属性(需要在双引号之内)

<view id="item-{{id}}"></view>
1

🌙 3.控制属性(需要在双引号之内wx:if)

<view wx:if="visible"></view>
1

🌙 4.关键字(需要在双引号之内)

<checkbox checked="{{true}}"></checkbox>
1

🌙 5.运算

<!-- 三元运算符 -->
<view hidden="{{flag ? true : false}}"></view>
<!-- 算术运算 -->
<view>{{ 1+ 2}}{{a + b}}</view>
<!-- 逻辑判断 -->
<view wx:if="{{length > 0}}"></view>
<!-- 字符串运算 -->
<view>{{"hello" + name}}</view>
<!-- 属性取值 -->
<view>{{object.key}} {{array[0]}}</view>
1
2
3
4
5
6
7
8
9
10

🌙 6.组合

也可以在 Mustache 内直接进行组合，构成新的对象或者数组。

<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>

<view wx:for="{{[1,2,3]}} ">
  {{item}}
</view>

<template is="objectCombine" data="{{for: a, bar: b}}"></template>
1
2
3
4
5
6
7
Page({
    data: {
        zero: 0,
        a: 1,
        b: 2
    }
})
1
2
3
4
5
6
7

微信小程序事件绑定