小程序开发指南
申请账号
进入小程序注册页 根据指引填写信息和提交相应的资料，就可以拥有自己的小程序账号。
Hello World
第一步，请前往https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 微信开发者工具下载页面根据自己的操作系统下载对应的安装包进行安装。
第二步，打开微信开发者工具，选择新建小程序项目，我们先不需理解AppID的概念，新建项目时选择无AppID，并取消勾选“建立普通快速启动模板”的选项。
最后一步，我们来添加必要的代码。
在根目录下创建app.json，其内容如下。
1
2
3
4
5
| {
"pages": ["pages/index/index"]
}
|
在根目录下新建pages目录，然后在pages目录下新建index目录，接着在index目录下创建两个文件index.wxml和index.js。
index.wxml的内容如下所示。<text>Hello World</text>
index.js的内容如下所示。Page({})
通过编写以上短短的几行代码，微信开发者工具的模拟器界面上显示出Hello World。
目录结构
小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：
app.js 小程序逻辑
app.json 小程序公共配置
app.wxss 小程序公共样式表
一个小程序页面由四个文件组成，分别是：
js 页面逻辑
wxml 页面结构
json 页面配置
wxss 页面样式表
app.json配置
我们简单说一下这个配置各个项的含义:
pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。- tabBar如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
entryPagePath 小程序默认启动首页
pages 页面路径列表
window 全局的默认窗口表现
tabBar 底部 tab 栏的表现
networkTimeout 网络超时时间
debug 是否开启 debug 模式，默认关闭
等等。。。
其他配置项细节可以参考文档 小程序的配置 app.json 。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| {
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
}, {
"pagePath": "pages/logs/logs",
"text": "日志"
}]
},
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
|
还需要注意的是 JSON 文件中无法使用注释，试图添加注释将会引发报错。
window在取值时我用rgb未生效，变成默认白色
后转成16进制色生效
https://www.sioe.cn/yingyong/yanse-rgb-16/
全局配置项
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
| https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
详细参数
坑：
tabBar pagePath路径里一定要有一个index否则不显示
"tabBar": {
"color": "#a9b7b7",
"selectedColor": "#02C8F9",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "pages/img/shouye.png",
"selectedIconPath": "pages/img/shouye3.png",
"text": "消息"
},
{
"pagePath": "pages/page1/psage",
"iconPath": "pages/img/wenda.png",
"selectedIconPath": "pages/img/wenda2.png",
"text": "通讯录"
},
{
"pagePath": "pages/page2/page2",
"iconPath": "pages/img/xianzhi.png",
"selectedIconPath": "pages/img/xianzhi2.png",
"text": "我的"
}
]
},
坑：
window里的标题
方法一：
如果改动其中一个页面的部分内容如名称，不要把window整个复制给page1.json,只复制一条即可，否则无效
page1.json
{
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#ccc",
"navigationBarTitleText": "my_iM",
"navigationBarTextStyle": "black"
},
}
page1.json
{
"usingComponents": {},
"navigationBarTitleText": "群组1"
}
方法二：
动态绑定window里的标题
wx.setNavigationBarTitle({
title: '修改后的导航栏标题',
success: function (res) {
// success
}
})
|
状态栏沉浸式渲染
1
2
3
4
5
6
7
8
| "window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle": "black",
"navigationStyle": "custom"
},
navigationStyle
|
获取状态栏高度
1
2
3
4
5
6
7
8
9
10
11
12
13
| js
const res = wx.getSystemInfoSync()
var statusbarH = res.statusBarHeight
console.log('res', res);
this.setData({
statusbar: statusbarH
})
console.log('statusbar', this.statusbar);
html
<view style="height:{{statusbar}}px"></view>
|
自定义组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| 创建组件
新建组件文件夹components/statusbar
右键 新建组件component
需要引用组件的json文件引用组件
"usingComponents": {
"statusbar": "../components/statusbar/statusbar"
},
使用组件
需要使用组件的xhml文件引用组件
<statusbar/>
|
工具配置 project.config.json
通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。
考虑到这点，小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。
其他配置项细节可以参考文档 开发者工具的配置 。
页面配置 page.json
这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。
如果你整个小程序的风格是蓝色调，那么你可以在 app.json 里边声明顶部颜色是蓝色即可。实际情况可能不是这样，可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块，因此我们提供了 page.json，让开发者可以独立定义每个页面的一些属性，例如刚刚说的顶部颜色、是否允许下拉刷新等等。
navigationBarBackgroundColor 导航栏背景颜色，如 #000000
navigationBarTextStyle 导航栏标题、状态栏颜色，仅支持 black / white
navigationBarTitleText 导航栏标题文字内容
navigationStyle 导航栏样式，仅支持以下值： default 默认样式 custom 自定义导航栏，只保留右上角胶囊按钮。
homeButton 在非首页、非页面栈最底层页面或非tabbar内页面中的导航栏展示home键
backgroundColor 窗口的背景色
backgroundColorContent 页面容器背景色，点击查看设置背景色详情
backgroundTextStyle 下拉 loading 的样式，仅支持 dark / light
等。。。
其他配置项细节可以参考文档 页面配置 。
配置示例
1
2
3
4
5
6
7
| {
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
|
WXML 文件
模板
1
2
3
4
5
6
7
8
9
10
11
12
13
| <template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
|
取值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| // pages/wxml/index.js
Page({
/**
* 页面的初始数据
*/
data: {
time: (new Date()).toString()
},
})
标签——内容数值绑定
<text>当前时间：{{time}}</text>
属性——数值绑定
<text data-test="{{test}}"> hello world</text>
|
数据绑定
1
2
|
<view> {{message}} </view>
|
1
2
3
4
5
6
| // page.js
Page({
data: {
message: 'Hello MINA!'
}
})
|
逻辑语法
三元
1
| <text>{{ a === 10? "变量 a 等于10": "变量 a 不等于10"}}</text>
|
算数
1
2
3
4
5
6
|
<view> {{a + b}} + {{c}} + d </view>
|
字符串拼接
1
| <view>{{"hello " + name}}</view>
|
条件逻辑
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| WXML 中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：
<view wx:if="{{condition}}"> True </view>
使用 wx:elif 和 wx:else 来添加一个 else 块：
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
|
列表渲染
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
|
使用 wx:for-item 指定数组当前元素的变量名，使用 wx:for-index 指定数组当前下标的变量名：
1
2
3
4
5
6
7
8
9
| <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
类似 block wx:if ，也可以将 wx:for 用在 <block/> 标签上，以渲染一个包含多节点的结构块。例如：
<block wx:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
|
wx:key 的值以两种形式提供：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <switch wx:for="{{objectArray}}" wx:key="unique" > {{item.id}} </switch>
data: {
objectArray: [
{id: 5, unique: 'unique_5'},
{id: 4, unique: 'unique_4'},
{id: 3, unique: 'unique_3'},
{id: 2, unique: 'unique_2'},
{id: 1, unique: 'unique_1'},
{id: 0, unique: 'unique_0'},
],
numberArray: [1, 2, 3, 4]
},
|
引用
WXML 提供两种文件引用方式import和include。
import
1
2
3
4
5
6
7
8
9
10
11
12
| WXML 提供两种文件引用方式import和include。
import 可以在该文件中使用目标文件定义的 template，如：
在 item.wxml 中定义了一个叫 item的 template ：
<template name="item">
<text>{{text}}</text>
</template>
在 index.wxml 中引用了 item.wxml，就可以使用 item模板：
<import src="item.wxml"/>
|
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
| <template is="item" data="{{text: 'forbar'}}"/>
需要注意的是 import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件中 import 的 template，简言之就是 import 不具有递归的特性。
例如：C 引用 B，B 引用A，在C中可以使用B定义的 template，在B中可以使用A定义的 template ，但是C不能使用A定义的template ，如代码2-19、代码2-20、代码2-21所示
代码清单2-19 模板 A
<template name="A">
<text> A template </text>
</template>
代码清单2-20 模板 B
<import src="a.wxml"/>
<template name="B">
<text> B template </text>
</template>
代码清单2-21 模板 C
<import src="b.wxml"/>
<template is="A"/>
<template is="B"/>
|
include
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| include 可以将目标文件中除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置，如代码2-22、代码2-23、代码2-24所示。
代码清单2-22 index.wxml
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
代码清单2-23 header.wxml
<view> header </view>
代码清单2-24 footer.wxml
<view> footer </view>
|
共同属性
1
2
3
4
5
6
7
8
9
10
| 所有wxml 标签都支持的属性称之为共同属性，如表2-1所示。
属性名 类型 描述 注解
id String 组件的唯一标识 整个页面唯一
class String 组件的样式类 在对应的 WXSS 中定义的样式类
style String 组件的内联样式 可以动态设置的内联样式
hidden Boolean 组件是否显示 所有组件默认显示
data-* Any 自定义属性 组件上触发的事件时，会发送给事件处理函数
bind*/catch* EventHandler 组件的事件
https://developers.weixin.qq.com/ebook?action=get_post_info&docid=000ee2c29d4f805b0086a37a254c0a
|
WXSS 样式
app.wxss为项目公共样式，它会被注入到小程序的每个页面。
单位rpx
1
2
3
| 小程序编译后，rpx会做一次px换算。换算是以375个物理像素为基准，也就是在一个宽度为375物理像素的屏幕下，1rpx = 1px。
举个例子：iPhone6屏幕宽度为375px，共750个物理像素，那么1rpx = 375 / 750 px = 0.5px。
|
WXSS引用
1
2
3
| 在CSS中，开发者可以这样引用另一个样式文件：@import url('./test_0.css')
这种方法在请求上不会把test_0.css合并到index.css中，也就是请求index.css的时候，会多一个test_0.css的请求。
|
内联样式
1
2
3
4
5
6
| WXSS内联样式与Web开发一致:
<view style="color: red; font-size: 48rpx"></view>
|
动态跟新内联样式（数据绑定）
1
| <view style="color: {{eleColor}}; font-size: {{eleFontsize}}"></view>
|
选择器
1
2
3
4
5
6
| 类型 选择器 样例 样例描述
类选择器 .class .intro 选择所有拥有 class="intro" 的组件
id选择器 #id #firstname 选择拥有 id="firstname" 的组件
元素选择器 element view checkbox 选择所有文档的 view 组件和所有的 checkbox 组件
伪元素选择器 ::after view::after 在 view 组件后边插入内容
伪元素选择器 ::before view::before 在 view 组件前边插入内容
|
小程序提供的样式库
JS 逻辑交互
一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。
1
2
| <view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>
|
点击 button 按钮的时候，我们希望把界面上 msg 显示成 "Hello World"，于是我们在 button 上声明一个属性: bindtap ，在 JS 文件里边声明了 clickMe 方法来响应这次点击操作：
1
2
3
4
5
| Page({
clickMe: function() {
this.setData({ msg: "Hello World" })
}
})
|