小程序框架学习笔记

一、文件结构

1、一个小程序主体部分由三个文件：app.js，app.json，app.wxss

2、一个小程序页面由四个文件组成：js wxml wxss json

二、app.json配置

{
"pages": [
"pages/index/index",
"pages/logs/index"
],
"window": {
"navigationBarTitleText": "Demo"
},
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
}, {
"pagePath": "pages/logs/logs",
"text": "日志"
}]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true
}

三逻辑层

1、App() 函数用来注册一个小程序

App({
onLaunch: function(options) {
// Do something initial when launch.
},
onShow: function(options) {
// Do something when show.
},
onHide: function() {
// Do something when hide.
},
onError: function(msg) {
console.log(msg)
},
globalData: 'I am global data'
})
2、Page() 函数用来注册一个页面
//index.js
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// Do some initialize when page load.
},
onReady: function() {
// Do something when page ready.
},
onShow: function() {
// Do something when page show.
},
onHide: function() {
// Do something when page hide.
},
onUnload: function() {
// Do something when page close.
},
onPullDownRefresh: function() {
// Do something when pull down.
},
onReachBottom: function() {
// Do something when page reach bottom.
},
onShareAppMessage: function () {
// return custom share data when user share.
},
onPageScroll: function() {
// Do something when page scroll
},
onTabItemTap(item) {
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
},
// Event handler.
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
}, function() {
// this is setData callback
})
},
customData: {
hi: 'MINA'
}
})

页面路由：在小程序中所有页面的路由全部由框架进行管理。框架以栈的形式维护了当前的所有页面。

三视图层

数据绑定：WXML 中的动态数据均来自对应 Page 的 data

1、简单绑定

<view> {{ message }} </view>

2、组件属性(需要在双引号之内

<view id="item-{{id}}"> </view>

3、控制属性(需要在双引号之内)

<view wx:if="{{condition}}"> </view>

4、关键字(需要在双引号之内)

<checkbox checked="{{false}}"> </checkbox>

5、运算

（1）三元运算

<view hidden="{{flag ? true : false}}"> Hidden </view>

（2）算数运算

<view> {{a + b}} + {{c}} + d </view>

（3）逻辑判断

<view wx:if="{{length > 5}}"> </view>

（4）字符串运算

<view>{{"hello" + name}}</view>

（5）数据路径运算

<view>{{object.key}} {{array[0]}}</view>

（6）数组

<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>

（7）对象

<template is="objectCombine" data="{{for: a, bar: b}}"></template>

（8）也可以用扩展运算符 ... 来将一个对象展开

<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>

6、wx:for

（1）

<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>

（2）使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>

7、wx:key

wx:key 的值以两种形式提供：

（1）字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。

（2）保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：

<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
<button bindtap="switch"> Switch </button>
<button bindtap="addToFront"> Add to the front </button>
<switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>
<button bindtap="addNumberToFront"> Add to the front </button>

data: {
objectArray: [
{id: 5, unique: 'unique_5'},
{id: 4, unique: 'unique_4'},
{id: 3, unique: 'unique_3'},
{id: 2, unique: 'unique_2'},
{id: 1, unique: 'unique_1'},
{id: 0, unique: 'unique_0'},
],
numberArray: [1, 2, 3, 4]

8、wx:if

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

9、模板

<template name="odd">
<view> odd </view>
</template>
<template name="even">
<view> even </view>
</template>

<block wx:for="{{[1, 2, 3, 4, 5]}}">
<template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

10、事件

事件分为冒泡事件和非冒泡事件：冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递；非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

（1）事件绑定和冒泡

key 以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。自基础库版本 1.5.0 起，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、、catch:touchstart。

value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。
bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

<view id="outer" bindtap="handleTap1">
outer view
<view id="middle" catchtap="handleTap2">
middle view
<view id="inner" bindtap="handleTap3">
inner view
</view>
</view>
</view>

11、引用

（1）WXML 提供两种文件引用方式import和include。

（2）include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置

12、wxs

（1）、模块

var foo = "'hello world' from tools.wxs";

var bar = function (d) {
return d;
}
module.exports = {
FOO: foo,
bar: bar,
};
module.exports.msg = "some msg";

<wxs src="./../tools.wxs" module="tools" />
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.FOO)}} </view