• wxml 文件
• wxs 文件
• js 文件

wxml 文件

<!-- 列表渲染 -->
<block wx:for="{{ items }}" wx:for-item="item" wx:key="index">
  <view>{{ index }}:{{ item.name }}</view>
</block>

<!-- 条件渲染 -->
<view wx:if="{{ condition === 1 }}">A</view>
<view wx:elif="{{ condition === 2 }}">B</view>
<view wx:else>C</view>

<!-- 事件 -->
<view bindtap="clickMe">click</view>

<!-- 模板 -->
<template name="tempItem">
  <view>{{ name }}</view>
</template>

<template is="tempItem" data="{{ ...item }}"></template>

<!-- 引用 import -->
<!-- a.wxml 内容
<template name="a">Hello</template> -->
<import src="a.wxml"></import>

<!-- 引用 include -->
<!-- a.wxml 内容
<view>Hello</view> -->
<include src="a.wxml" />
<template is="a"></template>

<!-- 路由 -->
<navigator open-type="navigateTo" />
<!-- 等价于wx.navigateTo -->
<navigator open-type="redirectTo" />
<!-- 等价于wx.redirectTo -->
<navigator open-type="navigateBack" />
<!-- 等价于wx.navigateBack，即返回按钮 -->
<navigator open-type="switchTab" />
<!-- 等价于wx.switchTab，即tab按钮 -->
<navigator open-type="reLaunch" />
<!-- 等价于wx.reLaunch -->

wxs 文件

<!-- m1.wxs 内容
module.exports={msg:'hello'} -->
<wxs module="m1">module.exports = { msg: 'hello!' }</wxs>

<!-- m2.wxs 内容
module.exports=require('m1.wxs') -->
<wxs src="m2.wxs" module="m2"></wxs>
<view>{{ m1.msg }} {{ m2.msg }}</view>

js 文件

Page({
    data: {
        items: [{ name: '商品A' }, { name: '商品B' }] // 列表渲染
        condition: Math.floor(Math.random() * 3 + 1) // 条件渲染
        item: { name: '测试姓名' } // 模板
    },
    clickMe (e) { console.log(e); } // 事件
})