微信小程序初步认识
写在前面:本文不是官方文档的照搬,也不是官方文档的简写。而是笔者写了几个demo后的一些感受与总结,按照笔者的思路进行介绍。例如会在介绍app
与page
时拿android作对比,介绍数据绑定
时拿vue
作对比,来方便初次接触微信小程序的开发者快速理解认识。如果您已经有过微信小程序开发经验,那么本文可能不适合您,但也希望您能阅读此文并留下宝贵建议。
代码结构
代码分三部分:页面,库,全局。
全局即app,包括app.js
全局逻辑代码、app.json
全局配置信息、app.wxss
全局样式设置。文件全部在根目录。
页面在根目录的pages文件夹下,每个页面分别是一个文件夹。页面文件夹下有同样有上述三种文件,作用与上述相同,但作用域仅限本页面。另外还有一个.wxml
格式的文件用来编辑页面内容。需要注意的是,页面文件夹及其下四个文件,名称必须一致。
库一般在根下的某个文件夹内,文件夹名称自定,文件名称自定,通常为.js
格式。
app
app.js
该文件类似Android中的Application.java
,调用App()
方法,并传入一个对象参数,对象中可定义一些回调方法。例如onLaunch()
方法监听小程序启动,onShow()
监听小程序显示,onHide()
监听小程序隐藏,onError()
监听小程序出错。很类似Android中的onCreate()
、onDestroy()
。另外还可以在对象中添加一些自己的方法,就像在android中的Application.java
中定义public
方法一样。
App({
onLanuch: function (options) {
console.log('lanuch')
}
})
在android中,通常给Application.java
写个单例,通过Application.getInstance()
来获取实例并调用方法。在微信小程序同样有类似的操作,例如在某个page的js代码中可以通过getApp()
来获取App实例,从而可以调用其内部方法。例如getApp().myFunction()
。需要注意的是,在app.js
内部不能调用该方法,而应使用this
来指代实例,例如this.myFunction()
。
app.json
类似android中的AndroidManifest.xml
,用于小程序的全局配置。例如每个page都需要在app.json
中配置,是不是很像在AndroidManifest.xml
中配置activity?可在其中配置的全部信息如下:
{
"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
}
提示:这个先看看就好,用开发工具新建项目的时候会有一个已有的app.json
。
注意:在pages
数组中配置的第一个页面为小程序启动时第一个展示的页面,其他的需要代码控制跳转。
app.wxss
该文件类似css文件,用来设定页面上组件(即HTML中的元素,或android中的控件)样式。与每个页面下的.wxss
不同的是,app.wxss
用来全局配置。其语法类似css,支持的选择器有:
选择器 | 实例 | 说明 |
---|---|---|
.class | .name | 所有class="name" 的组件 |
id | name | 所有id="name" 的组件 |
element | button | 所有button 组件 |
element,element | button,text | 所有的button 与text 组件 |
::after | text::after | text后插入的内容 |
::before | text::before | text前插入的内容 |
page
所有的页面均在根下的pages
文件夹内。举个例子,假设有index、main两个页面,则pages
下有两个分别以index与main命名的文件夹,index文件夹下又有index.wxml、index.js、index.wxss、index.json四个文件,同样main下也有四个以mian命名的四个文件。
wxml
此文件类似android中的layout.xml
或前端中的html
,用来编辑页面布局。其支持的组件种类不再一一列举,可以从官方文档查阅https://mp.weixin.qq.com/debug/wxadoc/dev/component/
。
此处更像html
的地方在于,它可以像vue
一样支持数据的动态绑定,例如用{{}}
来绑定某一数据,wx:for
类似vue
中的v-for
,wx:if
类似vue
中的v-if
。具体内容可参考https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/
js
此文件类似android中的Activity.java
,用来组织wxml
。但与android不同的是,此出不能使用类似findViewById()
的方式来获取某一组件,更不能直接操作组件。所有的数据更新均需要通过上述的数据绑定完成,也就是说需要通过改变js中的数据来间接完成页面更新。
与app.js
类似的是,此文件也是一上来就调用一个方法,并传入一个对象。
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// Do some initialize when page load.
},
onReady: function() {
// Do something when page ready.
},
onShow: function() {
// Do something when page show.
},
onHide: function() {
// Do something when page hide.
},
onUnload: function() {
// Do something when page close.
},
onPullDownRefresh: function() {
// Do something when pull down.
},
onReachBottom: function() {
// Do something when page reach bottom.
},
onShareAppMessage: function () {
// return custom share data when user share.
},
// Event handler.
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
})
},
customData: {
hi: 'MINA'
}
})
提示:这个先看看就好,用开发工具新建项目的时候会有一个已有的js文件。
数据绑定
在介绍另外两个文件之前,先来简单介绍一下数据绑定。
例如在page.js
中的data
中有一个字段name:"hello"
,此时可以在page.wxml
中通过{{name}}
来绑定该数据。例如使用button
组件来显示:<button>{{name}}</button>
就会在页面上显示一个按钮,且按钮的文本为“hello”。更高级的绑定请参阅官方文档https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/data.html
wxss
此文件除了在作用域上与app.wxss
不同,其它与之完全一样,每个page的wxss
只能设定该page内的组件。如果page下对某类组件的样式设定与app.wxss
冲突,则以page下的设定为准,就像写在html
中的css
会覆盖所导入的css
文件中对同类元素的样式设定。
json
此文件用来配置该页面,与app.json
冲突的部分同样以page下的为主。第一次接触暂时用不到此文件,因此搁置不讲。有兴趣或需要的请自行移步官方文档https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html
。
库
“库”的作用类似android中utils
包,将公共逻辑代码提取到一处以便复用。
例如我们在根目录下新建utils
文件夹,并在其下新建util.js
文件。在其中写一个log方法,通过module.exports
来使其对外可见。
function log(obj){
console.log("my-log:"+JSON.stringify(obj))
}
module.exports.log = log
然后再需要调用的js文件中,通过require
来依赖该文件:var util=require('utils/util.js')
,随后即可调用util.log()
方法来打印日志了。
需要注意的是require
中所写的必须是被依赖文件相对该文件的相对路径,例如在index页面中使用该js需要传入的路径为../../utils/util.js
。