小程序开发系列(一)结构组成
来源:互联网 发布:湖南工业大学淘宝地址 编辑:程序博客网 时间:2024/06/09 20:16
在申请了小程序的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.jsvar urlPrefix="https://xxx.xxx.com/api/";var CloudData={ 'getList':urlPrefix+'CloudData/getList'};module.exports = { CloudData: CloudData}
那么app里面引入的代码如下:
//app.jsvar 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来调用。
转载请注明出处。
- 小程序开发系列(一)结构组成
- 小程序开发系列之基础部分-代码结构
- 微信小程序开发系列(一) ——怎样开始进入小程序开发
- iOS开发工程师对比学习微信小程序(一)----- 小程序基本结构
- Android Studio 程序组成结构
- 一.Html的组成结构
- 小程序开发系列(二)九宫格
- 微软小娜开发系列教程<一>
- Android开发小技巧系列(一)
- Multi-Tier结构程序开发基础教程 (一)
- storm 开发系列一 第一个程序
- 支付宝小程序开发教程一
- 支付宝小程序开发(一)
- java实现小程序开发(一)
- 小程序开发系列之基础部分-开发工具
- linux学习笔记(一、微型计算机组成结构)
- Gensee Android SDK(一)组成结构
- 微信小程序小技巧系列《一》幻灯片,tab导航切换
- 常用Bootstrap工具类(各种按钮/清除浮动/居中对齐)
- maven在pom资料里引用本地jar
- spring @autowired和@resource的区别
- php验证码的制作
- mysql表名大小写
- 小程序开发系列(一)结构组成
- Hello World
- Context都没弄明白,还怎么做Android开发?
- 二叉树的序列化
- 即时通讯方案之第三方选择比较(参考)
- memcached出现failed to install service or service already installed解决办法
- 解决切换不等高的系统键盘时,会有黑条闪现
- 整maven+ssm出现的错误 java.lang.UnsupportedClassVersionError: .... : Unsupported major.minor version 51.0
- 【洛谷P1632】点的移动