⼩程序框架解析：逻辑层和视图层的逻辑层由js完成，视图层由提供的WXML(WeiXin Mark Language)和WXSS(WeiXin Style Sheet)⽂件来完成。
其中官⽅给出的解释：页⾯的脚本逻辑是在JsCore中运⾏，JsCore是⼀个没有窗⼝对象的环境，所以不能在脚本中使⽤window，也⽆法在脚本中操作组件。同时由于zepto/jQuery 会使⽤到window对象和document对象，所以在⼩程序中均⽆法使⽤。
逻辑层
逻辑层将数据进⾏处理后发送给视图层，同时接受视图层的事件反馈。在 JavaScript的基础上，增加和修改了以下特性：增加 App 和 Page ⽅法，进⾏程序和页⾯的注册。
增加 getApp 和 getCurrentPages ⽅法，分别⽤来获取 App 实例和当前页⾯栈。
提供丰富的 API，如⽤户数据，扫⼀扫，⽀付等特有能⼒。
每个页⾯有独⽴的作⽤域，并提供模块化能⼒。
由于框架并⾮运⾏在浏览器中，所以 JavaScript 在 web 中⼀些能⼒都⽆法使⽤，如 document，window 等。
开发者写的所有代码最终将会打包成⼀份 JavaScript，并在⼩程序启动的时候运⾏，直到⼩程序销毁。类似 ServiceWorker，所以逻辑层也称之为 App Service。
注册程序
quikstart⽰例中App.js⽂件内容如下：
/
/app.js
App({
onLaunch: function () {
//调⽤API从本地缓存中获取数据
var logs = wx.getStorageSync('logs') || []
logs.w())
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 () {
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
//调⽤应⽤实例的⽅法获取全局数据
//更新数据
that.setData({
userInfo:userInfo
})
})
}
})
Page()函数
Page() 函数⽤来注册⼀个页⾯。接受⼀个 object 参数，其指定页⾯的初始数据、⽣命周期函数、事件处理函数等。
object 参数说明：
属性
类型
描述
dataObject页⾯的初始数据
onLoadFunction⽣命周期函数–监听页⾯加载
onReadyFunction⽣命周期函数–监听页⾯初次渲染完成
onShowFunction⽣命周期函数–监听页⾯显⽰
onHideFunction⽣命周期函数–监听页⾯隐藏
onUnloadFunction⽣命周期函数–监听页⾯卸载
古代弓箭手onPullDownRefreshFunction页⾯相关事件处理函数–监听⽤户下拉动作
onReachBottomFunction页⾯上拉触底事件的处理函数
其他Any开发者可以添加任意的函数或数据到 object 参数中，在页⾯的函数
系统错误Page还提供了setData() 和getCurrentPages()函数。
setData()函数：
setData 函数⽤于将数据从逻辑层发送到视图层，同时改变对应的 this.data 的值。
注意：
直接修改 this.data ⽆效，⽆法改变页⾯的状态，还会造成数据不⼀致。
单次设置的数据不能超过1024kB，请尽量避免⼀次设置过多的数据。
getCurrentPages()函数：
getCurrentPages() 函数⽤于获取当前页⾯栈的实例，以数组形式按栈的顺序给出，第⼀个元素为⾸页，最后⼀个元素为当前页⾯。注意：不要尝试修改页⾯栈，会导致路由以及页⾯状态错误。
API
提供了诸多JavaScript形式的原⽣ API，可以⽅便的调起提供的能⼒，如获取⽤户信息，本地存储，⽀付功能等。API将在专门的章节介绍。
视图层WXML
怎样调节电脑屏幕亮度WXML(WeiXin Markup Language)是框架设计的⼀套标签语⾔，结合基础组件、事件系统，可以构建出页⾯的结构。
⽤以下⼀些简单的例⼦来看看 WXML 具有什么能⼒：
数据绑定
<!--wxml-->
<view> {{message}} </view>
// page.js
Page({
data: {
message: 'Hello MINA!'
北京最好眼科医院}
})
列表渲染
<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>
// page.js
Page({
data: {
array: [1, 2, 3, 4, 5]
}
})
条件渲染
<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
// page.js
Page({
data: {
view: 'MINA'
}
})
模板
<!--wxml-->
<template name="staffName">
<view>
FirstName: {{firstName}}, LastName: {{lastName}}
</view>
</template>
<template is="staffName" data="{{...staffA}}"></template> <template is="staffName" data="{{...staffB}}"></template> <template is="staffName" data="{{...staffC}}"></template> // page.js
Page({
data: {
staffA: {firstName: 'Hulk', lastName: 'Hu'},
staffB: {firstName: 'Shang', lastName: 'You'},
staffC: {firstName: 'Gideon', lastName: 'Lin'}
}
})
事件
<view bindtap="add"> {{count}} </view>
Page({
data: {
count: 1
},
add: function(e) {
this.setData({
count: unt + 1
})
}
})
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论