最近一次更新： 2024/08/05，如果实现失败，可能官网文档有更新。

一、数据绑定

绑定显示文字，使用双中括号，比如: <view>{{ text }}</view>

Page({
    data: {
        text: '文字'
    }
})

<view>{{ text }}</view>

绑定dom属性，直接在属性的引号里面加双中括号，比如：<view title="{{ title }}">{{ text }}</view>

Page({
    data: {
        text: '文字',
        title: '提示语',
        src: 'xxx图片地址',
        num: 44,
    }
})

<!-- 绑定属性、样式、文字 -->
<view title="{{ title }}" class="{{ num > 50 ? 'show' : 'hide' }}">{{ text }}</view>

<!-- 绑定图片地址 -->
<image src="src"></image>

二、方法绑定

<view bind:tap="linkToMy" class="tab-btn my">我的</view>

Page({
    linkToMy() {
        wx.navigateTo({
            url: '/pages/my/index'
        })
    }
})

三、判断渲染

判断是否渲染该模块，使用wx:if="{{flag}}"

<view wx:if="flag">flag为true则渲染，否则不展示</view>
<view wx:elif="flag2">如果上述条件不符合，则判断flag2</view>
<view wx:else>上述条件都不满足，则渲染这个</view>

Page({
    data: {
        flag: true
    }
})

四、数据循环遍历

有规律地渲染多条数据，使用wx:for="list"，index默认为下标，item默认为当前项

<view wx:for="list" wx:key="item">{{index}}： {{item}}</viiew>

<!-- 也可以指定参数名，通过wx:for-index 和 wx:for-item -->
<view wx:for="list" wx:for-index="idx" wx:for-item="i" wx:key="i">{{idx}}: {{i}}</view>

Page({
    data: {
        list: ['11', '22', '33']
    }
})

功能实现

登录：（获取微信头像、获取微信昵称）

<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
  <image class="avatar" src="{{avatarUrl}}"></image>
</button> 
<input type="nickname" class="weui-input" placeholder="请输入昵称"/>

const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'

Page({
  data: {
    avatarUrl: defaultAvatarUrl,
  },
  onChooseAvatar(e) {
    const { avatarUrl } = e.detail 
    this.setData({
      avatarUrl,
    })
  }
})

跳转：（微信内部跳转）

跳转到指定页面: wx.navigateTo()，支持不同的动画和页面互相通信，回调

<view bind:tap="linkToMy">我的</view>

Page({
    linkToMy() {
        wx.navigateTo({
            url: '/pages/my/index'
        })
    }
})

跳回: wx.navigateBack()，支持一次跳转多个，回调

<view bind:tap="back">返回</view>

Page({
    back() {
        wx.navigateBack({
            url: '/pages/my/index'
        })
    }
})