微信小程序小结（5） -- 常用语法

标签：维度   cti   变量   视图   参数   navigate   事件处理   lda   实例   

在 pages 字段的第一个页面就是这个小程序的首页(打开小程序看到的第一个页面)。

Page生命周期

setData()

Page({
  data: {
    text: ‘init data‘,
    num: 0,
    array: [{text: ‘init data‘}],
    object: {
      text: ‘init data‘
    }
  },
  changeText: function() {
    // this.data.text = ‘changed data‘  // bad, it can not work
    this.setData({
      text: ‘changed data‘
    })
  },
  changeNum: function() {
    this.data.num = 1
    this.setData({
      num: this.data.num
    })
  },
  changeItemInArray: function() {
    // you can use this way to modify a danamic data path
    this.setData({
      ‘array[0].text‘:‘changed data‘
    })
    //or
    var txt = ‘array[‘ + i + ‘].text‘;
    this.setData({
        [txt]: ‘adoctors‘
    })
    
  },
  changeItemInObject: function(){
    this.setData({
      ‘object.text‘: ‘changed data‘
    });
  },
})

导航

getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

navigateTo, redirectTo 只能打开非 tabBar 页面。

switchTab 只能打开 tabBar 页面。

reLaunch 可以打开任意页面。

页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。

调用页面路由带的参数可以在目标页面的onLoad中获取。

//使用组件，根据场景改变所需类型
<navigator open-type="navigateTo"/>

导航API

OBJECT 参数说明：

wx.reLaunch({
  url: ‘test?id=1‘
})

//获取
onLoad: function(option){
    console.log(option.query)
}
//或  
onLoad: function(options) {
    console.log(options.id);
}

注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。

wx.navigateBack(OBJECT)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈，决定需要返回几层。

该方法只有一个参数

wx.navigateBack({
  delta: 2      //相当于后退两步
})

数据缓存

每个微信小程序都可以有自己的本地缓存，可以通过 wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）可以对本地缓存进行设置、获取和清理。同一个微信用户，同一个小程序 storage 上限为 10MB。localStorage 以用户维度隔离，同一台设备上，A 用户无法读取到 B 用户的数据。

//设置
wx.setStorage({
  key:"key",
  data:"value"
})

try {
    wx.setStorageSync(‘key‘, ‘value‘)
} catch (e) {    
}
//获取
wx.getStorage({
  key: ‘key‘,
  success: function(res) {
      console.log(res.data)
  } 
})

try {
  var value = wx.getStorageSync(‘key‘)
  if (value) {
      // Do something with return value
  }
} catch (e) {
  // Do something when catch error
}

消息提示（弹窗）

wx.showToast({
  title: ‘成功‘,
  icon: ‘success‘,  //success,loading,none
  duration: 2000
})

多种配置，详见：https://developers.weixin.qq.com/miniprogram/dev/api/api-react.html#wxshowtoastobject

设置窗口背景

wx.setBackgroundColor({
    backgroundColor: ‘#ffffff‘, // 窗口的背景色为白色
})

wx.setBackgroundColor({
    backgroundColorTop: ‘#ffffff‘, // 顶部窗口的背景色为白色
    backgroundColorBottom: ‘#ffffff‘, // 底部窗口的背景色为白色
})

也可再配置中设置全局的背景色

app.json
{
  "window":{
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "设置全局的背景色",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}

在此情况下，单独设置某个页面的背景色

demo.wxss
page{background-color:#f5f5f5;} 

获取全局变量

//获取
const app = getApp().globalData;

console.log(app.baseURL) 

//改变
app.unionId = res.data.userInfo.unionId;

按条件渲染及获取附带值（传参）

//切换类名
<view class="tp-option1 {{item.checked == true ? ‘tp-option1-active‘ : ‘‘}}" wx:key="item.itemName" data-index="{{index}}" wx:for="{{itemlist}}">

//获取点击选项附带的属性值
console.log(e.currentTarget.dataset.index)
//获取输入框输入的值
console.log(e.detail.value)

<image src="../../../../img/topic/r0.jpg" class="tp_answer_result" wx:if="{{result==0}}"></image>
<image src="../../../../img/topic/r1.jpg" class="tp_answer_result" wx:else></image>


//若直接传值则带上{{}}
ised="{{false}}"        //若写成ised="false"，则会因为是非空字符串一直为true

微信小程序小结（5） -- 常用语法

标签：维度   cti   变量   视图   参数   navigate   事件处理   lda   实例   

原文地址：https://www.cnblogs.com/adoctors/p/9403741.html