在申请了小程序的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来调用。
转载请注明出处。