1.配置文件 page.json来决定 初始化项目的时候,文件自动生成app.json来对小程序进行全局配置。 2.逻辑层(App Server) 小程序开发框架的逻辑层是由JavaScript编写。 逻辑层将数据进行处理后
1.配置文件 page.json来决定 初始化项目的时候,文件自动生成app.json来对小程序进行全局配置。 2.逻辑层(App Server) 小程序开发框架的逻辑层是由JavaScript编写。 逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。 在 JavaScript的基础上,做了一些修改,以方便地开发小程序。 1)增加 App 和 Page方法,进行程序和页面的注册。 App()函数用来注册一个小程序。接受一个 object 参数,其指定小程序的生命周期函数等。
App.prototype.getCurrentPage() var appInstance = getApp() console.log(appInstance.globalData) // I am global data 2)App()叫做注册程序,Page()叫做注册页面
Page()接受一个 object参数, 3)初始化数据
初始化数据将作为页面的第一次渲染。
渲染层可以通过WXML 对数据进行绑定。 <view>{{text}}</view> <view>{{array[0].msg}}</view> 下面这个是一段.js代码,data是初始化页面数据 Page({ data: { text: 'init data', array: [{msg: '1'}, {msg: '2'}] } }) 4)页面的生命周期函数
a)onLoad: 页面加载 onLoad:function(options){ // options 就是参数 // options.redirect } b)onShow: 页面显示 每次打开页面都会调用一次。 c)onReady: 页面初次渲染完成 一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互 对界面的设置如wx.setNavigationBarTitle请在onReady之后设置 d)onHide: 页面隐藏 当navigateTo或底部tab切换时调用。 e)onUnload: 页面卸载 当redirectTo或navigateBack的时候调用。 5)页面相关事件处理函数 onPullDownRefresh: 下拉刷新
监听用户下拉刷新事件。 6)事件处理函数 除了初始化数据和生命周期函数,Page 中还可以定义一些特殊的函数:事件处理函数。在渲染层可以在组件中加入事件绑定,当达到触发事件时,就会执行Page 中定义的事件处理函数。 eg: // .wxml <view bindtap="tap_view"> click me!</view> // .js Page({ tap_view:function(){ console.log('view taped!'); } }) 7)Page.prototype.setData() setData函数用于将数据从逻辑层发送到视图层,同时改变对应的this.data的值。
注意: <!--index.wxml--> <view>{{text}}</view> <button bindtap="changeText"> Change normal data </button> <view>{{array[0].text}}</view> <button bindtap="changeItemInArray"> Change Array data </button> <view>{{obj.text}}</view> <button bindtap="changeItemInObject"> Change Object data </button> <view>{{newField.text}}</view> <button bindtap="addNewField"> Add new data </button> //index.js Page({ data: { text: 'init data', array: [{text: 'init data'}], object: { text: 'init data' } }, changeText: function() { // this.data.text = 'changed data' // bad, it can not work this.setData({ text: 'changed data' }) }, changeItemInArray: function() { // you can use this way to modify a danamic data path this.setData({ 'array[0].text':'changed data' }) }, changeItemInObject: function(){ this.setData({ 'object.text': 'changed data' }); }, addNewField: function() { this.setData({ 'newField.text': 'new data' }) } }) 这里的this指的是.js文件 8).页面的路由
小程序中所有页面的路由全部由框架进行管理
a.初始化
b.打开新页面,相当于iOS中的nav的push
c.页面重定向
d.页面返回 e.Tab切换 多Tab模式下用户切换Tab 9)文件作用域 在 JavaScript 文件中声明的变量和函数只在该文件中有效;不同的文件中可以声明相同名字的变量和函数,不会互相影响。 通过全局函数 getApp() 可以获取全局的应用实例,如果需要全局的数据可以在 App() 中设置 10)模块化
我们可以将一些公共的代码抽离成为一个单独的js 文件,作为一个模块。模块只有通过 module.exports module.exports = { sayHello: sayHello } function sayHello(name){ console.log('Hello' + name + '!'); } // 使用 var common = require('common.js'); Page({ helloMaer:function(){ common.sayHello('Maer'); } }) 11)API 小程序开发框架提供许多原生api,可以方便的掉漆微信提供的功能,eg:获取用户信息,本地存储,微信支付等.
wx.on开头的API是监听某个时间发生的API接口,接受一个CALLBACK函数作为参数。当该时间触发的时候,会调用callback函数。 success Function 接口调用成功的回调函数 fail Function 接口调用失败的回调函数 complete Function 接口调用结束的回调函数(调用成功、失败都会执行) 这里举例几个常用的api接口: wx.request 发起的是https请求。**一个微信小程序,同时只能有5个网络请求连接。** 数据 API 列表: wx.getStorage // 获取本地数据缓存 wx.setStorage // 设置本地数据缓存 wx.clearStorage // 清除本地数据缓存 获取网络类型 wx.getNetworkType(OBJECT) eg: wx.getNetworkType({ success:function(res){ var networkType = res.networkType; // 返回网络类型2g,3g,4g,wifi } }) 界面 API 列表: 参考:https://mp.weixin.qq.com/debug/wxadoc/dev/api/ 3.视图层 框架的视图层由WXML 与 WXSS编写,由组件来进行展示。 将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。 组件(Component)是视图的基本组成单元。 1)WXML WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。 wxml作用主要有:数据绑定、列表渲染、条件渲染、模板、事件、引用 数据绑定: // wxml <view>{{message}}</view> // page.js
Page({ 列表渲染 // wxml <view wx:for="{{array}}">{{item}}</view> // page.js Page({ data:{ array:[0, 1, 2, 3, 4] } }) 条件渲染 <!--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' } }) <block/>并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性 <block wx:if="{{true}}"> <view> view1 </view> <view> view2 </view> </block> 模板
总结:在属性中的值都要加“”.<template is="staffName" data="{{...staffA}}"></template> Page({ data:{ staffA:{firstname:'a', lastname:'b'} } })
注意: 如果js:Page({ <template data={{foo, bar}}> data组合对象为:{foo:'a', bar:'b'} <template data={{'A':foo, 'B':bar}}> data组合对象为:{'A':'a', 'B':'b'} 模板拥有自己的作用域,只能使用data传入的数据。
事件 <view bindtap="add">{{count}}</view> Page({ data:{ count:1 } add: function(e){ this.setData({ count:this.data.count + 1 }) } }) 2)wxml
|