微信小程序-2

微信开发文档 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}}