【微信】小程序开发尝鲜

微信小程序最近貌似比较火, 研究一番觉得和React写法很相似, 也是封装了一系列自己的组件, 同为JS写代码, 且还定义了自己的wxss样式表等。


官方文档传送门

项目基本结构


主项目结构如下:
-app.js 脚本入口文件
-app.json 主配置文件
-app.wxss 公共样式表文件(可以在page中直接使用)
-pages文件夹 放页面文件
-utils文件夹 工具方法

每一个小程序Page页面是由同路径下同名的四个不同后缀文件的组成,如:
-index.js 脚本文件(负责数据与交互)
-index.wxml 页面结构文件(单独用一个文件来做布局)
-index.wxss 样式表文件
-index.json 配置文件

模块化

var app = getApp()全局函数, 获取小程序应用实例。
如果需要全局的数据可以在app.js的 App() 中设置, 如:
注意: 全局变量修改之后是会保持的。

1
2
3
4
// app.js
App({
globalData: 1
})

1
2
3
4
5
6
7
// a.js
// The localValue can only be used in file a.js.
var localValue = 'a'
// Get the app instance.
var app = getApp()
// Get the global data and change it.
app.globalData++

我们可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。

注意
-exports 是 module.exports 的一个引用,因此在模块里边随意更改 exports 的指向会造成未知的错误。推荐采用 module.exports 来暴露模块接口。
-小程序目前不支持直接引入 node_modules , 需要用到 node_modules 时建议拷贝相关的代码到小程序的目录中。

1
2
3
4
5
6
7
8
9
10
// common.js
function sayHello(name) {
console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
console.log(`Goodbye ${name} !`)
}
module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye

在需要使用这些模块的文件中,使用require将代码引入:

1
2
3
4
5
6
7
8
9
var common = require('common.js')
Page({
helloMINA: function() {
common.sayHello('MINA')
},
goodbyeMINA: function() {
common.sayGoodbye('MINA')
}
})

页面Page

Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。

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
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {}
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据
that.setData({
userInfo:userInfo
})
})
}
})

页面生命周期

主要是以下几个方法(与React中的很类似):
-onLoad 加载
-onReady 加载好后
-onShow 显示
-onHide 隐藏
-onUnload 卸载资源

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
//index.js
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// Do some initialize when page load.
console.log("onLoad")
},
onReady: function() {
// Do something when page ready.
console.log("onReady")
},
onShow: function() {
// Do something when page show.
console.log("onShow")
},
onHide: function() {
// Do something when page hide.
console.log("onHide")
},
onUnload: function() {
// Do something when page close.
console.log("onUnload")
},
//以下为自带的几个事件
onPullDownRefresh: function() {
// Do something when pull down.
},
onReachBottom: function() {
// Do something when page reach bottom.
},
// Event handler.
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
})
},
customData: {
hi: 'MINA'
}
})

页面数据绑定

数据绑定使用双大括号将变量包起来.
在.wxml文件中:

1
<view> {{ message }} </view>

在.js文件中:

1
2
3
4
5
6
7
8
9
10
11
12
13
Page({
data: {
message: 'Hello MINA!'
}
})
```
### 事件
[事件文档传送门](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html)
如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。
在.wxml文件中:
```javascript
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

在.js文件中:

1
2
3
4
5
Page({
tapName: function(event) {
console.log(event)
}
})

引用

wxml文件是可以引用其他wxml文件的.
WXML 提供两种文件引用方式import和include。
import:有作用域的概念,即只会 import 目标文件中定义的 template,而不会 import 目标文件 import 的 template。
include:可以将目标文件除了

1
2
3
4
<!-- item.wxml -->
<template name="item">
<text>{{text}}</text>
</template>

在index.wxml中引用item.wxml

1
2
3
<!-- index.wxml -->
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

使用include:

1
2
3
4
5
6
7
8
9
10
<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
<!-- header.wxml -->
<view> header </view>
<!-- footer.wxml -->
<view> footer </view>

总结

基本把开发文档看了一遍,会React的话很好上手。

转载请注明出处,有疑问欢迎留言!