微信小程序初步认识

写在前面：本文不是官方文档的照搬，也不是官方文档的简写。而是笔者写了几个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。