微信开发文档 https://developers.weixin.qq.com/miniprogram/dev/framework/
一、app.js中的生命周期函数与globalData(全局变量)
指南 - - - 小程序框架 - - - 注册小程序
删除app.js里的东西,输入App回车,调用生命周期
选项 - - - 重新打开此项目
当小程序初始化完成时,会触发 onLaunch
(全局只触发一次)
当小程序启动,或从后台进入前台显示,会触发 onShow
当小程序从前台进入后台,会触发 onHide
当小程序发生脚本错误,或者 api 调用失败时,会触发 onError
并带上错误信息
onLaunch: function () {
console.log('hi')
},
// globalData 自己添加
globalData:{
name:'weixin'
}
在js文件里调用
// 调用app.js里的内容
const app = getApp()
console.log(app);
// 得到name的值weixin
console.log(app.globalData.name)
得到数据如下图
在app.js里this可以拿到app对象,在onLaunch里可以修改name值
onLaunch: function () {
this.globalData.name='微信'
},
二、page页内的onload和data差值表达式
指南 - - - 小程序框架 - - - 注册页面
删除js文件里的所有内容,输入Page点击前面有方块的那个
小程序执行先走onLaunch再走onLoad,app.js文件优先级大于其他js文件
js文件
data: {
name:'zhangsan',
},
wxml文件
{
{name}}
zhangsan会被渲染到页面
在onLoad里使用this.setData
修改data的数据
onLoad: function (options) {
this.setData({
name:'lisi'
})
},
页面中的zhangsan两秒后变为lisi
setTimeout
定时器
onLoad: function (options) {
// 设置两秒钟后再进行修改
// 使用箭头函数,否则会出现指向问题
setTimeout(()=>{
this.setData({
name:'lisi'
})
},2000)
},
三、data中不同数据类型及渲染
指南 - - - 小程序框架 - - - wxml
data: {
name:'张三',
age:18,
bool:true,
number:['一','二','三'],
user:{
name:'李四',
gender:'男',
age:20
},
ls:[{
id:1,title:'one',year:2019},{
id:2,title:'two',year:2020},{
id:3,title:'three',year:2021}]
},
{
{name}} {
{age}} {
{bool}}
<view>{
{number}}</view>
<view>{
{user}}</view>
<view>{
{user.name}}</view>
<view>{
{user.name +'-'+ user.gender +'-'+ user.age}}</view>
1.条件渲染 if
条件写到{
{
这}}里
前面加 ! 取反 - - - eg:{
{!bool}} data里的bool是true,取反后变为false
注意:if elif else 要放在一起,中间不能有其他内容,否则会报错
<view wx:if="{
{number == '一'}}"> 一 </view>
<view wx:elif="{
{number == '一'}}"> 二 </view>
<view wx:else"> 三 </view>
<!-- <view wx:else="{
{number == '一'}}"> 三 </view> -->
最后显示为三,因为number是列表[‘一’,‘二’,‘三’],都错,所以显示else里的值
2.列表渲染 for
<view wx:for="{
{number}}">
{
{item}}
</view>
在wxml里得到了三个包裹着view的文字
wx:for-item 元素
wx:for-index 元素索引
<view wx:for="{
{number}}" wx:for-item='num'>
{
{index+1}} - {
{num}}