文件类型
- .js ———— JavaScript文件
- .json —— 配置文件,定义窗口颜色、字体颜色等
- .wxml —— Weixin Markdown language,类似HTML
- .wxss —— Weixin Style Sheets,类似CSS
入口文件
小程序根目录一般有三个文件:app.js
、app.json
、app.wxss
-
app.json
- 必须要有这个文件!!否则IDE会报错!这是小程序的配置入口,可对整个小程序进行全局配置,包括页面路径、窗体表现、设置网络超时时间,设置多tab等。
// app.json { "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black" } }
-
app.js
- 必须要有这个文件!!否则IDE会报错!可用来声明全局变量,监听并处理小程序生命周期函数。
//app.js 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) { that.globalData.userInfo = res.userInfo typeof cb == "function" && cb(that.globalData.userInfo) } }) } }) } }, globalData:{ userInfo: null } })
-
app.wxss
- 不是必须的,用于定义全局样式。
运行机制
微信小程序背后运行的是一个MINA框架。这里做简单的描述其运行机制。
在微信开发工具的console中输入openVendor()
,会打开文件夹,其中包含以下四个文件:wcc、wcsc、WAService.js、WAWebview.js
- wcc 将wxml转化成一个generateFunc,执行后可得到一个virtual_dom。
- wcsc 将wxss转化成css
- WAService.js 提供service层大部分功能,包含WeixinJSBridge、Reporter、wx、appServiceEngine等。
- WAWebview.js 提供view层大部分功能,包含WeixinJSBridge、Reporter、wx、esparser等。
对这块感兴趣的童鞋,我找了一些相关文章:
- 微信小程序架构分析 (上)
- 微信小程序架构分析 (中)
- 微信小程序架构分析 (下)
逻辑层
-
注册程序
-
App()
函数用来注册一个小程序。接受一个 object 参数,其指定小程序的生命周期函数等。 -
object参数包含:
onLaunch
onShow
onHide
-
getApp()
全局函数,可获取到小程序实例。
-
-
注册页面
-
Page()
函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。 -
object参数包含:
data
onLoad
onReady
onShow
onHide
onUnload
onPullDownRefresh
onReachBottom
-
生命周期:
-
Page.prototype.setData()
-
setData()
用于将数据从逻辑层发送到视图层,并更改对应this.data
的值 -
参数格式,接受一个对象,以key和value的形式表示将this.data中的key对应的值改成value,其中
key
可以非常灵活,如array[2].message
,a.b.c
。
-
-
-
模块化
-
目前不支持node_modules,可以通过
require(path)
自行引入,但要注意不能引入使用了window
和document
对象的模块。
-
目前不支持node_modules,可以通过
视图层
-
WXML (Weixin Markup Language) 这部分比较简单,可直接看官方文档。
-
WXSS (Weixin Style Sheets) 官方文档
-
注意事项:
background-image
在模拟器中可使用相对路径中的图片,但在真机中必须使用 外链图片 或者base64图片
-
组件库
在小程序中我们只能使用官方推出的标签组件,目前大致分为 视图容器、基础内容、表单组件、操作反馈、导航、媒体组件、地图、画布。
这里放点干货:
-
view 类似div一样的盒模型,不能识别
\n
。 -
navigator 导航,支持相对路径和绝对路径,最多存在5级页面。小程序中不能跳转到外部url,默认是打开新页面,如果要重定向需添加
redirect
。 -
image 与img最大区别在于,小程序是通过
background-image
来实现的,有默认高宽320*240
,不支持auto。此外提供了3中缩放模式和9中裁剪模式。详情点击官方文档
API
小程序提供了丰富的微信原生API,如获取用户信息,本地存储,支付功能等。详情点击官方文档
说明:
* wx.on
开头的API是监听某个事件发生的接口,接受一个CALLBACK函数作为参数。
* 若无特殊约定,其他API都是接受一个OBJECT作为参数,可通过指定 success
, fail
, complete
来接收接口调用结果。
此处为注意事项:
wx.request
最多同时进行5个请求,而且在真机调试中需要使用 https 协议,并且域名需要在微信管理后台添加。
这里有一个官方没说明的 坑 :POST请求。
POST请求需要添加header: { "content-type": "application-x-www-form-urlencoded" }
,并且data
不能使用object的方式,要自行转码为a=1&b=2
。