WeChat Mini Program: Page Layout Summary

1. Basic label (similar to View):

1. <text> text tag:

<text>文本内容</text>

2. <image> image tag:

Property description:

src：图片本地路径或URL
mode：缩放或裁剪模式，值：scaleToFill(拉伸填满)、aspectFit(按长边等比缩放)、aspectFill(按短边等比缩放)、widthFix(按高度等比缩放)、heightFix(按宽度等比缩放)、top(保留顶部    )、bottom(保留底部)、center(保留中间)、left(保留左侧)、right(保留右侧)、topleft(保留左上)、topright、bottomleft、bottomright
webp：支持webp格式
lazy-load:是否懒加载
show-menu-by-longpress：长按弹出分享

(1). Display pictures in .wxml:

<image class="样式" src="http://..." mode="aspectFit" show-menu-by-longpress="true" />

3. <icon> icon label:

Property description:

type：显示哪种图标，值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size：图标宽高值
color：图标颜色

(1). Icons are displayed in .wxml:

<icon type="waiting" size="40" color="#e0e0e0" />

4. <progress> progress bar label:

Property description:

percent：进度值，0-100
show-info：进度条右侧显示xx%，值：true、false
font-size：进度条右侧百分比文字字号
border-radius：进度条两侧圆角大小
stroke-width：进度条高度
color：进度条颜色
backgroundColor：进度条背景色
active：显示从左到右动画(1次)
active-mode：动画，值：backwards(重新)、forwards(继续)
duration：进度增加1%所需毫秒数
bindactiveend：动画完成事件

(1). The progress bar is displayed in .wxml:

<progress percent="10" show-info="true" border-radius="0" font-size="20" stroke-width="30" color="#b9d1a6" backgroundColor="#e0e0e0" active="true" active-mode="forwards" duration="200" />

5. <rich-text> contains html tags (support part):

(1). Define the html tag string in .js:

const htmlStr =
`<div>
  <h1>文本1</h1>
</div>
`
Page({
  data: {
    htmlStr: htmlStr,    //给页面中<rich-text>设值
  },
  ...
})

(2). The .wxml page uses the html tag string:

<rich-text nodes="{
   
   {htmlStr}}" />

2. Container label (similar to ViewGroup):

1. <view> empty container tag (similar to <div>, layout is controlled by style):

(1) Define the style, for example:

.样式名 {
  width: 宽值rpx;
  height: 高值rpx;
  background-color: white;
  ...
}

(2) Use <view>:

<view class="样式名">
  ...子布局
</view>

2. <scroll-view> scrolling label (similar to ScrollView):

illustrate:

scroll-x：true允许横向滚动，需在样式中指定宽度
scroll-y：true允许纵向滚动，需在样式中指定高度
enable-passive：true开启passive特性，优化滚动性能

use:

<scroll-view class="样式名" scroll-y="true" scroll-x="true" enable-passive="true">
  ...子布局
</scroll-view>

3. <swiper>+<swiper-item> realizes the list (similar to ListView):

(1) Initialize data:

Page({
  data: {
    listData: [ ...]  //listData为自定义key名
  },
})

(2) Define list and item styles:

.swiper_class { //列表样式
  width: 宽度px;
  height: 高度px;
  ...
}
.swiper_item_class { //item样式
  width: 宽度px;
  height: 高度px;
  ...
}

(3) <swiper>+<swiper-item> implementation list:

Property description:

vertical：滑动方向是否为纵向，无此字段时不会滚动

example:

<swiper class="swiper_class" vertical="true">
    <swiper-item class="swiper_item_class" wx:for="{
   
   {listData}}" wx:for-item="item">
      ...item布局
    </swiper-item>
</swiper>

4. <root-portal> realizes the dialog box:

Property description:

enable：true从页面中脱离出来

example:

<root-portal enable="true" wx:if="{
   
   { isShow }}">
  ...子布局
</root-portal>

5. <page-container> implements popup window:

Property description:

show：true显示弹窗，false隐藏弹窗
overlay：true显示遮罩层
position：弹出位置，值：top、bottom、right、center
round：true显示圆角

example:

<page-container show="true" overlay="true" position="top" round="true">
  ...子布局
</page-container>

3. Form label:

1. <button> button label:

size：按钮大小，值：mini为小尺寸、default为默认(大)
type：按钮样式，值：default为绿字灰背景(带框时黑字黑框)、primary为白字绿背景(带框时绿字绿框)、warn为红字灰背景(带框时红字红框)
plain：是否带框无背景
disabled：是否禁用按钮(灰色不能点击)
loading：按钮左内是否显示加载中图标
form-type：按钮在表单中类别，值：submit为提交、reset为重置表单

(1). Buttons are displayed in .wxml:

<button size="mini" type="default" plain="true" form-type="submit">按钮</button>

2. <input> input box label:

Property description:

value：输入框的值
type：输入框类型，值：text(标准键盘)、number(数字键盘)、idcard(身份证键盘)、digit(带小数点数字键盘)、safe-password(密码键盘)、nickname(昵称键盘)
password：是否为密码框
placeholder：提示文字
placeholder-class：提示文字样式类
disabled：是否禁用输入
maxlength：最大长度
focus：获得焦点
confirm-type：回车键类型，值：send(发送)、search(搜索)、next(下一个)、go(前往)、done(完成)
confirm-hold：按回车键时是否隐藏键盘
adjust-position：弹出键盘时是否上推界面

(1). The input box is displayed in .wxml:

<input type="text" value="dd" placeholder="提示文字" maxlength="10" focus="true" adjust-position="true"/>

3. <checkbox> checkbox label:

Property description:

value：checkbox标识，选或不选时触发checkbox-group.bindchange中的函数
disabled：是否禁用
checked：是否选中
color：复选框颜色
bindchange：复选框选中事件监听方法，通过e.detail.value获取选中的<checkbox>列表

(1). Checkboxes are displayed in .wxml:

<checkbox-group bindchange="onCheckboxChange">
  <checkbox value="checkbox_1" checked="true"></checkbox>
  <checkbox value="checkbox_2" checked="false"></checkbox>
</checkbox-group>

(2). Listen to the check event in .js:

Page({
  onCheckboxChange(e){ //复选框选中事件监听
    console.log("onCheckboxChange 选择改变 selectList: " + e.detail.value);
  }
})

4. <radio> radio button label:

Property description:

value：radio标识，选或不选时触发radio-group.bindchange中的函数
disabled：是否禁用
checked：是否选中
color：单选框颜色
bindchange：单选框选中事件监听方法，通过e.detail.value获取选中的<radio>

(1). The radio button is displayed in .wxml:

<radio-group bindchange="onRadioChange">
  <radio value="radio_1" checked="true" />
  <radio value="radio_2" checked="false" />
</radio-group>

(2). Listen to the radio event in .js:

Page({
  onRadioChange(e){ //单选框选中事件监听
    console.log("onCheckboxChange 选择改变 selectItem: " + e.detail.value);
  }
})

5. <slider> draggable progress bar label:

Property description:

min：进度最小值，默认0
max：进度最大值，默认100
step：进度步长，值>0且能被(max - min)整除
disabled：是否禁用
value：当前进度值
color：可拖动按钮右侧进度条颜色
activeColor：可拖动按钮左侧进度条颜色
backgroundColor：进度条背景色
block-size：滑块大小值
block-color：滑块颜色
show-value：进度条右侧是否显示进度值
bindchange：进度条监听方法，通过e.detail.value获取进度值

(1). The draggable progress bar is displayed in .wxml:

<slider bindchange="onSliderChange" color="#CC6600" activeColor="#CC66FF" block-size="15" block-color="#7FFF00"/>

(2). Monitor progress bar dragging in .js:

Page({
  onSliderChange(e){ //进度条拖动事件监听
    console.log("onSliderChange 进度条拖动 progress: " + e.detail.value);
  }
})

6. <switch> switch label:

Property description:

checked：是否选中
disabled：是否禁用
type：样式，值：switch(左右开关样式)、checkbox(复选框样式)
color：开关的颜色
bindchange：开关事件监听方法，通过e.detail.value获取开关状态

(1). The switch button is displayed in .wxml:

<switch checked="true" type="switch" bindchange="onSwitchChange" />

(2). Listen to switch events in .js:

Page({
  onSwitchChange(e){ //开关事件监听
    console.log("onSwitchChange 开关事件 isOpen: " + e.detail.value);
  }
})

7. <form> form tag:

Property description:

bindsubmit：提交表单时触发的函数，表单内的<button>标签formType="submit"，取表单各项值：e.detail.value.标签name属性值
bindreset：重置表单时触发的函数，表单内的<button>标签formType="reset"

(1). The form is displayed in .wxml:

<form bindsubmit="onFormSubmit">
  <input name="input_name" type="text" value="" />
  <button size="mini" type="default" plain="true" form-type="reset">重置</button>
  <button size="mini" type="default" plain="true" form-type="submit">提交</button>
</form>

(2).Listen to the form submission event in .js:

Page({
  onFormSubmit(e){ //表单提交事件监听
    console.log("onSwitchChange 表单提交事件 input_name: " + e.detail.value.input_name);
  }
})

4. <canvas> custom drawing label:

Property description:

canvas-id：唯一标识符
type：canvas类型，值：2d、webgl
disable-scroll：当在canvas中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新
bindtouchstart：按下时触发的方法
bindtouchmove：移动时触发的方法
bindtouchend：移动结束时触发的方法
bindtouchcancel：触控被打断时触发的方法
bindlongtap：长按500ms后触发的方法
binderror：发生错误时触发的方法

1. Display custom drawing in .wxml:

<canvas type="2d" id="canvas_id" style="width: 300px; height: 300px;" />

2. Implement drawing logic in .js:

(1) Canvas 2D drawing:

Page({
  onLoad: function (e) {
    const query = wx.createSelectorQuery()
    query.select('#canvas_id_1')
      .fields({
        node: true,
        size: true
      })
      .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
        //0.设置画布宽度+高度
        const dpr = wx.getSystemInfoSync().pixelRatio
        canvas.width = res[0].width * dpr //设置画布宽度
        canvas.height = res[0].height * dpr //设置画布高度
        console.log("dpr : " + dpr)
        ctx.scale(dpr, dpr)
        //1.设置画笔属性
        ctx.strokeStyle = "blue"  //画笔颜色
        ctx.lineWidth = 1         //线粗细度
        //2.绘图
        ctx.rect(0, 0, 20, 20)                    //画矩形，参数分别为左上角x坐标、左上角y坐标、宽、高
        ctx.moveTo(20, 40) //移动画笔坐标位置
        ctx.arc(10, 40, 10, 0, 2 * Math.PI, true) //画圆，参数分别为起始点x坐标、起始点y坐标、半径、开始角度、结束角度
        ctx.moveTo(20, 60) //移动画笔坐标位置
        ctx.arc(10, 60, 10, 0, Math.PI, false)    //画圆环
        ctx.stroke()
        ctx.draw()
      })
  },
  ...
})

(2) Drawing in WebGL mode:

Page({
  onLoad: function () {
    const query = wx.createSelectorQuery()
    query.select('#canvas_id').node().exec((res) => {
      const canvas = res[0].node
      const gl = canvas.getContext('webgl')
      ...  //绘图
    })
  }
})

5. TDesign component environment configuration/introduction/use:

1. Environment configuration:

(1) Initialize (open cmd, cd to the root directory of the applet project), execute the following commands (enter the content in each step prompt or press Enter all the time, and enter yes in the last step):

npm init

(2) Use NPM to install third-party packages (open cmd, cd to the root directory of the applet project):

npm i tdesign-miniprogram -S --production

(3) Open the WeChat developer tools, click the "Tools" menu, and click "Build npm" to build.

(4) Remove "style": "v2" from project/app.json.

2. Use the TDesign component:

Official documentation:

TDesign

(1) Introduce the component, in project/app.json (or in the page.json using this component):

{
  ...,
  "usingComponents": {  //引入TDesign组件
    "t-button": "tdesign-miniprogram/button/button",   //此为按钮组件
    "t-imagen": "tdesign-miniprogram/image/image",     //此为图片显示组件
    ...  //省略更多组件
  }
}

(2). Components used in .wxml (example picture display):

<t-image src="{
   
   {图片地址}}" mode="heightFix" width="20" height="20" />