app.js
每个小程序都需要在 app.js 中调用 App 方法注册小程序实例,绑定生命周期回调函数、错误监听和页面不存在监听函数等。
App(object)注册小程序。接受一个
Object
参数,其指定小程序的生命周期回调等。App({})
App() 必须在 app.js 中调用,必须调用且只能调用一次。不然会出现无法预期的后果。
生命周期
生命周期回调函数:小程序从创建到销毁的整个过程,小程序会自动创建一些函数,在每个阶段会自动触发,不需要调用。
包含的内容:
1)生命周期函数 (自动创建的--使用的时候直接在函数里面写)
2)错误监听等函数
3)小程序的全局变量 globalData:{}
4)自定义函数
App({
/**
* 生命周期回调—监听小程序初始化
小程序初始化完成时触发,全局只触发一次。 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
*/
onLaunch: function () {
},
/**
* 当小程序启动,或从后台进入前台显示,会触发 onShow
*/
onShow: function (options) {
},
/**
* 当小程序从前台进入后台,会触发 onHide
*/
onHide: function () {
},
/**
* 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
*/
onError: function (msg) {
},
/*
小程序的全局变量,可以实现页面共享数据
*/
globalData: {
userName:'admin',//账号
}
})
整个小程序只有一个 App 实例,是全部页面共享的。开发者可以通过getApp方法获取到全局唯一的 App 实例,获取App上的数据或调用开发者注册在 `App` 上的函数。
// xxx.js
//引入app.js文件
const app=getApp();
console.log(app);
pages.js当前页面逻辑
对于小程序中的每个页面,都需要在页面对应的 js 文件中进行注册,指定页面的初始数据、生命周期回调、事件处理函数等
包含的内容:
1)data界面视图的数据内容
2)生命周期函数
3)事件处理函数,比如下拉触发函数
4)自定义函数
简单的页面可以使用 Page()
进行构造。
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
* 页面加载时触发。一个页面只会调用一次,可以在 onLoad 的参数中获取打开当前页面路径中的参数。
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
JS模块使用(js导入)
import ss from './'
export defaul
导出语法:
//1、直接暴露函数名字
module.exports=fun;
//2、直接暴露对象{属性名:函数}
module.exports={
fun:fun,
demo:demo
}
引入语法:
const obj=require('../')
数据绑定
WXML 中的动态数据均来自对应 Page 的 data。
数据绑定使用 Mustache 语法(双大括号)将变量包起来。
<!--语法-->
<组件>{{变量}}</组件>
//wxml
//<view>数据绑定{{msg}}--{{num}}</view>
//<view>{{arr[0]}}</view>
//<view>书名:{{book.bookName}} 价格:{{book.price}}</view>
data: {
msg:"hello 小程序",
num:20,
arr:[10,20,30],
book:{
bookName:'西游记',
price:109
}
},
组件属性(需要在双引号之内)
<组件 class="{{}}" data-xx="{{}}"></组件>
//<view class="{{active}}">属性获取数据绑定</view>
//相当于 class="red"
data: {
active:'red'
},
三目运算(三元运算)
//<view class="{{flag?'red':'green'}}">是否加样式</view>
data: {
flag:false,
},
列表渲染
wx:for
在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item使用
wx:for-item
可以指定数组当前元素的变量名,使用
wx:for-index
可以指定数组当前下标的变量名:默认不修改,循环嵌套的时候必须修改。
<view wx:for="{{objArr}}" wx:for-index="i" wx:for-item="itemName">
{{i}}: {{itemName.message}}
</view>
<view wx:for="{{info}}">
{{index}}:{{item}}
</view>
Page({
data: {
info: ['周一', '周二', '周三', '周四', '周五'],
}
})
案例
<view wx:for="{{objArr}}">
<view>
标题:{{item.title}}
</view>
<view>
内容:{{item.desc}}
</view>
</view>
Page({
data: {
objArr: [{
title: '新闻1',
desc: '最新消息,xxxx'
},
{
title: '新闻1',
desc: '最新消息,xxxx'
},
{
title: '新闻1',
desc: '最新消息,xxxx'
},
]
}
})
block wx:for
可以将
wx:for
用在<block/>
标签上,以渲染一个包含多节点的结构块。block只起到包裹作用,不会被渲染。
<block wx:for="{{objArr}}">
<view>{{item.title}}</view>
<view>{{item.desc}}</view>
</block>
wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态,需要使用
wx:key
来指定列表中项目的唯一的标识符。
wx:key
的值以两种形式提供
字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。
保留关键字
*this
代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字。如不提供
wx:key
,会报一个warning
, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。
<block wx:for="{{objArr}}" wx:key="index">
<view>{{item.title}}</view>
<view>{{item.desc}}</view>
</block>
条件渲染
在框架中,使用
wx:if=""
来判断是否需要渲染该代码块:说明:
变量、表达式值为true时显示组件
变量、表达式值为false时隐藏组件
<!--语法-->
<组件 wx:if="{{变量、表达式}}"></组件>
wx:elif
和 wx:else
常用wx:if="{{}}"和wx:else来判断:
<view wx:if="{{flag}}">是否显示:wx:if</view>
<view wx:else>取反操作:wx:else</view>
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
block wx:if
因为
wx:if
是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个<block/>
标签将多个组件包装起来,并在上边使用wx:if
控制属性。注意:
<block/>
并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
hidden
表示是否隐藏该代码块。
<!--语法-->
<组件 hidden="{{变量、表达式}}"></组件>
<view hidden="{{3<2}}">易烊千玺</view>
wx:if
vs hidden
wx:if:控制组件显示隐藏通过控制组件是否==添加和删除==
hidden:控制组件显示隐藏是==通过控制wxss样式display属性==
一般来说,
wx:if
有更高的切换消耗而hidden
有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用hidden
更好,如果在运行时条件不大可能改变则wx:if
较好。