小程序框架分析
0 Views H5 with
本文字数:767 字 | 阅读时长 ≈ 3 min

小程序框架分析

0 Views H5 with
本文字数:767 字 | 阅读时长 ≈ 3 min

本节主要讲述 小程序的框架

目录结构介绍

框架全局文件

文件 必填 作用
App.js 小程序逻辑
App.json 小程序公共设置
App.wxss 小程序公共样式表

App.js

用来定义全局数据和函数的使用。

App.json

对5个功能进行设置:

页面路径定义了一个数组,存放多个页面的访问数据

导航条背景色 navigationBarBackgroundColor
导航条文字 navigationBarTitleText
导航条文字颜色 navigationBarTextStyle
下拉刷新 enablePullDownRefresh
窗口背景色 backgroundColor
背景字体 backgroundTextStyle

App.wxss

工具类文件

存放工具栏的JS函数(比如放置一些日期格式化函数,时间格式化的函数),要通过module.exports将定义的函数名称注册起来

框架页面文件

注册页面的使用

属性 类型 描述
data Object 页面的初始数据
onLoad Function 监听页面加载
onReady Function 监听页面初次渲染完成
onShow Function 监听页面显示
onHide Function 监听页隐藏
onUnload Function 监听页面卸载
onPullDownRefresh Function 监听用户下拉动作
onReachBottom Function 页面上拉触底事件的处理函数
onShareAppMessage Function 用户点击右上角分享
其他 Any 使用this访问

页面初始化数据

1
2
3
4
5
6
7
8
9
10
11
12
<view class='content'>
<view class='today'>
<view class='info'>
<view class='temp'>{{temp}}°C</view>
<view class='lowhigh'>{{low}}/{{high}}</view>
<view class='type'>{{type}}</view>
<view class='city'>{{city}}</view>
<view class='week'>{{week}}</view>
<view class='weather'>{{weather}}</view>
</view>
</view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
data: {
temp:"4",
low:"-1°C",
hight:'10°C',
type:"晴",
city:"上海",
week:"星期二",
weather:"无持续风行,微风级",
item:{
index:0,
msg:"this is a template",
time:"2016-90-9"
}
},

生命周期函数

页面相关事件处理函数

onPullDownRefresh下拉刷新。

监听用户下拉刷新事件,需要在config的window选项中开启enablePullDownRefresh。当处理完数据刷新后,可以用wx.stopPullDownRefresh停止页面的下拉

onShareAPPMessage用户分享

字段 说明 默认值
title 标题 名称
desc 描述 名称
path 路径 path

自定义函数

1
<view id="0" class="{{ currentTab == 0 ? 'select' : 'normal' }}" bindtap="switchNav">火车票</view>
1
2
3
4
5
6
switchNav: function(e) {
var id = e.currentTarget.id;
this.setData({
currentTab: id
})
},

setData设值函数

1
2
3
4
5
6
data: {
date: "",
trainList: [],
winHeight: 600,
cuurentTab: "1"
},
1
2
3
this.setData({
date: date
});

setData()参数格式:接受一个对象,以key、value的形式表示将this.data中的key对应的值改变成value。

绑定数据

组件属性绑定

1
<view id="item-{{ id }}"></view>
1
2
3
4
5
Page({
data:{
id:0
}
})

控制属性绑定

1
<view wx:if="{{ condition }}"></view>
1
2
3
4
5
Page({
data: {
condition: true
}
})

条件渲染

wx:if

判断单个组件

wx:elif、wx:else

和wx:if配套使用

block wx:if

判断多个组件

列表渲染

wx:for

渲染单个组件

block wx:for

渲染多个组件

wx:key

指定唯一标识符

May 06, 2018
H5
May 06, 2018
H5
May 06, 2018
H5