小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。微信小程序则是微信平台的小程序，背靠微信的用户体系、数据。
| - |
传统 web |
微信小程序 |
| 结构 |
HTML |
WXML |
| 样式 |
CSS |
WXSS |
| 逻辑 |
JavaScript |
JavaScript |
| 配置 |
- |
JSON |
注册微信小程序开发者账号，进入开发设置页面复制 AppID
下载微信开发者工具，功能按照界面描述理解就可以了。
- index : 首页
- index.js : index 页面下的 JS
- index.wxml : index 页面下的页面结构
- index.wxss : index 页面下的样式文件
- page1 : 子页面
- page1.js
- page1.json : page1 页面的配置文件
- page1.wxml
- page1.wxss
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。完整配置项说明请参考小程序全局配置
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
|
// 常用配置
{
"pages": [
"pages/index/index",
"pages/logs/index"
],
"window": {
"navigationBarTitleText": "Demo"
},
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
}, {
"pagePath": "pages/logs/logs",
"text": "日志"
}]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true,
"navigateToMiniProgramAppIdList": [
"wxe5f52902cf4de896"
]
}
|
每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。完整配置项说明请参考小程序页面配置
1
2
3
4
5
6
7
8
|
// 常用配置
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
|
每个小程序都需要在 app.js 中调用 App 方法注册小程序示例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。详细的参数含义和使用请参考 App 参考文档。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
// app.js
App({
onLaunch (options) {
// Do something initial when launch.
},
onShow (options) {
// Do something when show.
},
onHide () {
// Do something when hide.
},
onError (msg) {
console.log(msg)
},
globalData: 'I am global data'
})
|
对于小程序中的每个页面，都需要在页面对应的 js 文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等。
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
|
//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() {
// 页面尺寸变化时执行
},
onTabItemTap(item) {
// tab 点击时执行
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
},
// 事件响应函数
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
}, function() {
// this is setData callback
})
},
// 自由数据
customData: {
hi: 'MINA'
}
})
|
开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。
1
2
3
4
|
<!--xxx.json-->
{
"component": true
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
Component({
properties: {
// 这里定义了innerText属性，属性值可以在组件使用时指定
innerText: {
type: String,
value: 'default value',
}
},
data: {
// 这里是一些组件内部数据
someData: {}
},
methods: {
// 这里是一个自定义方法
customMethod: function(){}
}
})
|
1
2
3
4
5
6
|
<!--xxx.json-->
{
"usingComponents": {
"component-tag-name": "path/to/the/custom/component"
}
}
|
1
2
3
4
|
<view>
<!-- 以下是对一个自定义组件的引用 -->
<component-tag-name inner-text="Some text"></component-tag-name>
</view>
|
1
2
|
<!--wxml-->
<view> {{message}} </view>
|
1
2
3
4
5
6
|
// page.js
Page({
data: {
message: 'Hello MINA!'
}
})
|
1
2
|
<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>
|
1
2
3
4
5
6
|
// page.js
Page({
data: {
array: [1, 2, 3, 4, 5]
}
})
|
1
2
3
4
|
<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
|
1
2
3
4
5
6
|
// page.js
Page({
data: {
view: 'MINA'
}
})
|
微信小程序的块级标签，类似 HTML 的<div>。
- hover-class : 指定按下去的样式类。当
hover-class="none" 时，没有点击态效果。
微信小程序的行级标签，类似 HTML 的<span>。只能嵌套自己。
- selectable : 文本是否可选
- space : 显示连续空格
- decode : 是否解码
- src : 图片资源地址
- lazy-load : 图片是否懒加载
轮播视图容器。其中只能放swiper-item。
