小程序开发系列(一)结构组成

在申请了小程序的appid之后，可以通过官方的《简易教程》创建hello world的页面，然后直接在【项目】中【预览】，生成二维码，再用微信扫描即可。微信上看到hello world的页面后，说明项目的流程已经走通了。现在我们回过头来看看，其结构是如何组成的。

我们展开pages->index目录，看到如下图

index目录下有index.js、index.json、index.wxml、index.wxss四个文件，其中js是处理页面逻辑的，相当于web的javascript页；json是一个数据文件，是对于index页面才有效的数据；wxml是界面布局文件，相当于web的html文件，但又和html有所不同，因为wxml中是纯粹的界面布局，不可参入js；wxss是样式文件，相当于web的css，其语法与css的相容，又有些差异。我们每新建一个页面的，原则上都需要有这几个文件组成。

我们来看index.js文件。

为了能方便获取全局程序的数据，该文件中先通过getApp来获取全局的程序实例app，这个有点像桌面程序里的全局单例。在app变量中，可以得到app.js中附加的一些函数和变量。那app.js是什么文件呢？

app.js是程序的入口，当于控制台程序的Main函数。假如我们要定义一个数据交互的wep api接口的URL集，那么我们可以定义一个urls.js的文件，然后将其导出为模块，然后在app.js中引入。假定将urls.js文件放到utils目录下，其代码如下

//urls.js
var urlPrefix="https://xxx.xxx.com/api/";
var CloudData={
    'getList':urlPrefix+'CloudData/getList'
};

module.exports = {
  CloudData: CloudData
}

那么app里面引入的代码如下:

//app.js
var urls=require('/utils/urls')
App({
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              console.log(res);
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  globalData:{
    userInfo:null
  },
  urls:urls
})

在最后面的部分有urls:urls的key-value对，这样在index.js的代码中我们就可以通过app来直接调用，代码如下

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
  },
  //事件处理函数
  onLoad: function () {
    var that = this
    console.log(app);
    console.log(app.urls.CloudData.getList)
  }
}）

我们再来看index.json文件，该文件可以对一些全局的配置进行个行化的配置，比如页面标题。

{
    "navigationBarTitleText": "全新测试追踪系统"
}

有了这个设置后，那么进入到index页面时，微信页的标题Web Chat将被替换成【全新测试追踪系统】。

再看index.wxml文件，该文件里使用的标记必须是微信小程序规定的，具体可以参看官方教程【小程序组件】。官方教程中详细介绍了相关控件的用法，以及数据绑定，数据循环呈现等。

再看index.wxss，该文件是样式文件，基本可以使用css的语法。就是有的时候会遇见特别的坑，因为没有太多的文档说明，有时一些呈现常常需要不断试验才能有结果。

由于每个页面都要由js、json、wxml、wxss四个文件组成，所以我们每新建一个页面，这些文件都要具足。如果是要单独定义一些工具类的js，可以放到util目录下，然后在要引用的地方引入。也可以在app中进行全局引入，然后要用的地方通过app.xxx来调用。

转载请注明出处。