⼩程序开发---逻辑层(AppService)
再说逻辑层之前,先说说⼩程序框架(MINA)
⼩程序开发框架的⽬标是通过尽可能简单、⾼效的⽅式让开发者可以在中开发具有原⽣APP体验的服务。
框架提供了⾃⼰的视图层描述语⾔WXML和WXSS,以及基于JavaScript的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,可以让开发者可以⽅便的聚焦于数据与逻辑上。
框架的核⼼是⼀个响应的数据绑定系统。整个系统分为两块视图层(View)和逻辑层(App Service)
框架可以让数据与视图⾮常简单地保持同步。当做数据修改的时候,只需要在逻辑层修改数据,视图层就会做相应的更新。
框架管理了整个⼩程序的页⾯路由,可以做到页⾯间的⽆缝切换,并给以页⾯完整的⽣命周期。开发者需要做的只是将页⾯的数据,⽅法,⽣命周期函数注册进框架中,其他的⼀切复杂的操作都交由框架处理。
框架提供了⼀套基础的组件,这些组件⾃带风格的样式以及特殊的逻辑,开发者可以通过组合基础组件,创建出强⼤的⼩程序 。
框架提供丰富的原⽣API,可以⽅便的调起提供的能⼒,如获取⽤户信息,本地存储,⽀付功能等。
接下来就要介绍逻辑层
⼩程序开发框架的逻辑层是由JavaScript编写,逻辑层将数据进⾏处理后发送给视图层,同时接受视图层的事件反馈。
注册程序APP()函数
App()函数⽤来注册⼀个⼩程序。接受⼀个object参数,其指定⼩程序的⽣命周期函数等。
getApp()函数是⽤来获取⼩程序实例,其中App()必须在app.js中注册,且不能注册多个。不要在定义于App()内的函数中调⽤getApp(),使⽤this就可以拿到app实例。不要在onLaunch的时候调⽤getCurrentPage(),此时page还没有⽣成。通过getApp()获取实例之后,不要私⾃调⽤⽣命周期函数。
场景值
通过什么样的⽅式进⼊⼩程序。⽐如1001--通过发现栏界⾯的⼩程序⼊⼝进⼊;1005--通过顶部搜索栏搜索进⼊⼩程序;1011---通过扫描⼆维码进⼊⼩程序
页⾯注册
我们⽤Page() 函数⽤来注册⼀个页⾯。接受⼀个 object 参数,其指定页⾯的初始数据、⽣命周期函数、事件处理函数等。
初始化数据
初始化数据将作为页⾯的第⼀次渲染。data 将会以 JSON 的形式由逻辑层传⾄渲染层,所以其数据必须是可以转成 JSON 的格式:字符串,数字,布尔值,对象,数组。
渲染层可以通过 WXML 对数据进⾏绑定。例如:
<view>{{text}}</view>
<view>{{array[0].msg}}</view>
Page({
data: {
text: 'init data',
array: [{msg: '1'}, {msg: '2'}]
}
})
事件处理函数
在渲染层可以在组件中加⼊事件绑定,当达到触发事件时,就会执⾏ Page 中定义的事件处理函数。例如
<view bindtap="viewTap"> click me </view>
Page({
viewTap: function() {
console.log('view tap')
}
})
常⽤函数
ute:route 字段可以获取到当前页⾯的路径。
Page.prototype.setData():setData 函数⽤于将数据从逻辑层发送到视图层,同时改变对应的 this.data 的值。
setData() 参数格式:key-value对形式,注意的是直接修改 this.data ⽽不调⽤ this.setData 是⽆法改变页⾯的状态的,还会造成数据不⼀致
⽣命周期
页⾯路由
路由简单来说就是数据包从源到⽬的地,那么页⾯路由就是⼀个页⾯到另⼀个页⾯的跳转
会发⽣页⾯跳转的情况有
⼩程序启动
打开新页⾯---调⽤ API wx.navigateTo 或使⽤组件 <navigator open-type="navigateTo"/>
页⾯重定向---调⽤ directTo 或使⽤组件 <navigator open-type="redirectTo"/>
页⾯返回---调⽤ API wx.navigateBack 或使⽤组件<navigator open-type="navigateBack">或⽤户按左上⾓返回按钮
tarbar切换
⽂件作⽤域
在 JavaScript ⽂件中声明的变量和函数只在该⽂件中有效;不同的⽂件中可以声明相同名字的变量和函数,不会互相影响。
通过全局函数 getApp() 可以获取全局的应⽤实例,如果需要全局的数据可以在 App() 中设置
*模块化
可以将⼀些公共的代码抽离成为⼀个单独的 js ⽂件,作为⼀个模块。模块只有通过 ports 或者 exports 才能对外暴露接⼝。注意的是exports 是 ports 的⼀个引⽤,因此在模块⾥边随意更改 exports 的指向会造成未知的错误。所以更推荐开发者采
⽤ ports来暴露模块接⼝,除⾮你已经清晰知道这两者的关系。
// common.js
function sayHello(name) {
console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
console.log(`Goodbye ${name} !`)
}
exports.sayGoodbye = sayGoodbye
var common = require('common.js')//通过require(path)将公共代码引⼊
Page({
helloMINA: function() {
common.sayHello('MINA')
},
goodbyeMINA: function() {
common.sayGoodbye('MINA')mina框架
}
})
API
⼩程序开发框架提供丰富的原⽣ API,可以⽅便的调起提供的能⼒,如获取⽤户信息,本地存储,⽀付功能等。详细介绍请参
考 。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论