小程序用法

wx:if,wx:for的用法：

test.wxml

<!--pages/test/test.wxml-->
<view id="{{id}}">{{message}}</view>

<view wx:if="{{condition}}">我是显示的</view>
<view wx:else>我是不显示的</view>

<view hidden="{{condition}}">我是hidden是是true</view>

<view wx:for="{{arr}}" wx:for-index="index"  wx:for-item="item" wx:key="item.id">
  {{index}}---{{item.id}}---{{item.text}}
</view>

test.js

Page({
  data: {
    message: '我是第一条信息',
    id: 'number',
    condition: true,
    arr: [
      { id: 1, text: 'a' },
      { id: 2, text: 'b' },
      { id: 3, text: 'c' }
      ]
  })

用法类似Vue

效果展示

---

路由跳转并且传递参数

路由跳转到test.wxml，并且传递参数id=1

<!--index.wxml-->
<navigator url="/pages/test/test?id=1">go to test</navigator>

在test.js里面接受，onLoad里面的参数options就是传递过来的参数。

 /* 生命周期函数--监听页面加载*/
  onLoad: function (options) {
    console.log(options)
  }

传参结果

---

改变data里面变量

改变data里面变量需要加上this.setData({})

--------------
Page({
  data: {
      str: '我是一条信息'
  },
  onShow: function () {
    this.setData({str: '我是改变的信息'})
  }
)

效果展示

例子：点击按钮对字符进行倒序

<view>{{str}}</view>
<button bindtap="reverseStr">点我排序</button>
---------------------
Page({
  data: {
      str: '我是一条信息'
  },
  onShow: function () {
    this.setData({str: '我是改变的信息'})
  },
  reverseStr() {
    this.setData({
      str: this.data.str.split('').reverse().join('')
    }) 
  }
)

---

改变data里面的arr和object需要注意的事情

1. 改变data里面的arr

<view wx:for="{{brr}}" wx:for-index="index"  wx:for-item="item" wx:key="item.id">
  {{index}}---{{item}}
</view>
<button bindtap="putItem">我是一个按钮</button>

Page({
  data: {
      obj: {id: 1, text: '信息1'}
  },
  putItem() {
    // 数组的push用不了
    let last = this.data.brr[this.data.brr.length-1] + 1
    let newBrr = [last]
    this.data.brr = this.data.brr.concat(newBrr) //这时data数据已经改变
    //要是想用视图层的数据都改变，就要用this.setData
    this.setData({ brr: this.data.brr})
  }
)

image.png

2. 改变data里面的objec

<view>{{obj.id}}---{{obj.text}}</view>
<button bindtap="changeObjText">我是一个按钮</button>

Page({
  data: {
      obj: {id: 1, text: '信息1'}
  },
  changeObjText() {
    this.setData({"obj.text": "信息2"})
  }
)

image.png

---

增加一个class

<view class="{{color? 'active' : ''}}">我会改变颜色</view>
<button bindtap="changeColor">点击改变颜色</button>

Page({
  data: {
      color: true
  },
  changeColor() {
    this.setData({ color: !this.data.color })
  },
)

image.png