1.小程序的声明周期
//app.js
App({
/**
* 当小程序初始化完成是。会触发onLaunch，（全局触发一次）
*/
onLaunch: function () {
console.log("onLaunch")
},
/**
* 当小程序启动，回执从后台进去前台显示，会触发onShow
*/
onShow:function(options){
console.log("onShow")
},
/**
* 当小程序从前台进去后台，会触发onHide
*/
onHide:function(){
console.log("onHide")
}
})
1.刚开始会显现onLaunch,onShow
2.只有切换到后台才会显示触发onHide，然后切换到前台又是出触发onShow
3.页面的全部的生命周期
// pages/index/index.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
2.跳转navigator
<navigator url="/pages/detail/detail">打开详情页</navigator>
3.数据绑定
1。动态绑定数据
1. 先在data中定义name
data: {
name:'张三'
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log("onLoad,页面加载")
setTimeout(()=>{
this.setData({
name: '李四'
})
},2000)
},
- 注意：这里一定是setData({}), this.setData(Object),这里是一个Object的对象
2.在页面中写<view>{{name}}</view>,两秒过后就是显示李四了
4.条件判断
<view wx:if="{{is_ok}}">{{name}}</view>
data: {
name:'张三',
is_ok: false
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log("onLoad,页面加载")
setTimeout(()=>{
this.setData({
name: '李四',
is_ok: true
})
},2000)
},
5.列表渲染
<view wx:for="{{ages}}" wx:for-item="age" wx:for-index="ids">{{age}}-{{ids}}</view>
<!--
item:当前变量 的默认值
index:当前下标的默认值
-->
data: {
name:'张三',
is_ok: false,
ages: [12,13,14,15]
},
2.uni-app的安装
vue create -p dcloudio/uni-preset-vue 项目名称
vue create -p dcloudio/uni-preset-vue test-uniapp
