小程序框架解析《一》逻辑层和视图层，微信小程序原理
小程序的逻辑层由js完成视图层由微信提供的WXML（WeiXin Mark Language）和WXSS（WeiXin Style Sheet）文件来完成。
其中官方给出的解释：页面的脚本逻辑是在JsCore中运行JsCore是一个没有窗口对象的环境SEO排名服务JsCore是一个没有窗口对象的环境所以不能在脚本中使用window也无法在脚本中操作组件。同时由于zepto/jQuery 会使用到window对象和document对象关键词排名也无法在脚本中操作组件。同时由于zepto/jQuery 会使用到window对象和document对象所以在小程序中均无法使用。
逻辑层将数据进行处理后发送给视图层同时接受视图层的事件反馈。 在 JavaScript 的基础上微信增加和修改了以下特性：
增加 App 和 Page 方法进行程序和页面的注册。
提供丰富的 API如微信用户数据关键词排名如微信用户数据扫一扫支付等微信特有能力。
每个页面有独立的作用域并提供模块化能力。
由于框架并非运行在浏览器中所以 JavaScript 在 web 中一些能力都无法使用如 documentwindow 等。
开发者写的所有代码最终将会打包成一份 JavaScript并在小程序启动的时候运行直到小程序销毁。类似 ServiceWorker所以逻辑层也称之为 App Service。
注册程序quikstart示例中App.js文件内容如下：
//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()函数
App() 函数用来注册一个小程序。接受一个 object 参数其指定小程序的生命周期函数等。
其中onLaunch为系统的生命周期函数getUserInfo和globalData分别为用户自定义函数和数据结构对象。
App() 函数的object参数说明：
属性
类型
描述
触发时机
onLaunchFunction生命周期函数–监听小程序初始化当小程序初始化完成时会触发 onLaunch（全局只触发一次）
onShowFunction生命周期函数–监听小程序显示当小程序启动或从后台进入前台显示会触发 onShow
onHideFunction生命周期函数–监听小程序隐藏当小程序从前台进入后台会触发 onHide
其他Any开发者可以添加任意的函数或数据到 Object 参数中用 this 可以访问
getApp()函数
我们提供了全局的 getApp() 函数可以获取到小程序实例。
示例代码：
// other.js
var appInstance = getApp()
console.log(appInstance.globalData) // I am global data
注册页面
index页面中index.js代码如下：
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {}
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据
that.setData({
userInfo:userInfo
})
})
}
})
Page（）函数
Page() 函数用来注册一个页面。接受一个 object 参数其指定页面的初始数据、生命周期函数、事件处理函数等。
object 参数说明：
属性