微信小程序初步认识
写在前面：本文不是官方文档的照搬，也不是官方文档的简写。而是笔者写了几个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。