微信小程序初步认识

微信小程序初步认识

写在前面：本文不是官方文档的照搬，也不是官方文档的简写。而是笔者写了几个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？可在其中配置的全部信息如下：

{
  "