小程序框架
目录
- 一、小程序视图层
- 二、小程序事件
-
- 1、什么是事件
- 2、事件的使用方式
- 三、小程序生命周期
一、小程序视图层
小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。
整个小程序框架系统分为两部分：逻辑层（App Service）和 视图层（View）。小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。
响应的数据绑定：
test.wxml:
<view> Hello {{name}}! view>
<button bindtap="changeName"> Click me! button>
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW view>
<view wx:elif="{{view == 'APP'}}"> APP view>
<view wx:else="{{view == 'MINA'}}"> MINA view>
<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>
<view id="tapTest" data-hi="Weixin" bindtap="{{wxs.tapName}}"> Click me! view>
<view>
<button bindtap="toc">跳转c页面button>
view>
test.js:
// pages/test/test.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
name: 'Weixin',
array: [1, 2, 3, 4, 5],
view:'APP',
staffA: {firstName: 'Hulk', lastName: 'Hu'},
staffB: {firstName: 'Shang', lastName: 'You'},
staffC: {firstName: 'Gideon', lastName: 'Lin'}
},
/**
* 组件的方法列表
*/
methods: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
console.log("test onload")
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
console.log("test onReady")
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
console.log("test onShow")
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
console.log("test onHide")
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
console.log("test onUnload")
},
changeName: function(e) {
// sent data change to view
this.setData({
name: 'MINA'
})
},
tapName: function(event) {
console.log(event)
},
toc: function(event){
wx.navigateTo({
url: '/pages/c/c',
})
}
})
二、小程序事件
1、什么是事件
事件是视图层到逻辑层的通讯方式。
事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
事件对象可以携带额外信息，如 id, dataset, touches。
2、事件的使用方式
在组件中绑定一个事件处理函数。
<view id="tapTest" data-hi="Weixin" bindtap="tapName"> Click me! </view>
在相应的 Page 定义中写上相应的事件处理函数，参数是event。
Page({
tapName: function(event) {
console.log(event)
}
})
可以看到 log 出来的信息大致如下：
{
"type":"tap",
"timeStamp":895,
"target": {
"id": "tapTest",
"dataset": {
"hi":"Weixin"
}
},
"currentTarget": {
"id": "tapTest",
"dataset": {
"hi":"Weixin"
}
},
"detail": {
"x":53,
"y":14
},
"touches":[{
"identifier":0,
"pageX":53,
"pageY":14,
"clientX":53,
"clientY":14
}],
"changedTouches":[{
"identifier":0,
"pageX":53,
"pageY":14,
"clientX":53,
"clientY":14
}]
}
app.json:
{
"pages":[
"pages/test/test",
"pages/c/c",
"pages/d/d",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "weixin",
"navigationBarTextStyle":"black"
},
"tabBar": {
"list": [
{
"pagePath": "pages/test/test",
"text": "首页"
},
{
"pagePath": "pages/logs/logs",
"text": "日志"
}
]
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
三、小程序生命周期
c.js:
// pages/c/c.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
console.log("test onload")
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
console.log("test onReady")
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
console.log("test onShow")
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
console.log("test onHide")
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
console.log("test onUnload")
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
