Programa WeChat Mini: resumen de diseño de página

1. Etiqueta básica (similar a Vista):

1. Etiqueta de texto <texto>:

<text>文本内容</text>

2. Etiqueta de imagen <imagen>:

Descripción de propiedad:

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) Mostrar imágenes en .wxml:

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

3. Etiqueta del icono <icono>:

Descripción de propiedad:

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

(1) Los iconos se muestran en .wxml:

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

4. <progreso> etiqueta de la barra de progreso:

Descripción de propiedad:

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) La barra de progreso se muestra en .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> contiene etiquetas html (parte de soporte):

(1) Defina la cadena de etiquetas html en .js:

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

(2) La página .wxml usa la cadena de etiquetas html:

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

2. Etiqueta del contenedor (similar a ViewGroup):

1. Etiqueta de contenedor vacío <view> (similar a <div>, el estilo controla el diseño):

(1) Defina el estilo, por ejemplo:

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

(2) Usar <vista>:

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

2. Etiqueta de desplazamiento <scroll-view> (similar a ScrollView):

ilustrar:

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

usar:

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

3. <swiper>+<swiper-item> realiza la lista (similar a ListView):

(1) Inicializar datos:

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

(2) Definir estilos de lista y elementos:

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

(3) Lista de implementación <swiper>+<swiper-item>:

Descripción de propiedad:

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

ejemplo:

<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> realiza el cuadro de diálogo:

Descripción de propiedad:

enable：true从页面中脱离出来

ejemplo:

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

5. <page-container> implementa una ventana emergente:

Descripción de propiedad:

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

ejemplo:

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

3. Etiqueta del formulario:

1. Etiqueta del botón <botón>:

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

(1) Los botones se muestran en .wxml:

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

2. Etiqueta del cuadro de entrada <entrada>:

Descripción de propiedad:

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) El cuadro de entrada se muestra en .wxml:

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

3. <casilla de verificación> etiqueta de casilla de verificación:

Descripción de propiedad:

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

(1) Las casillas de verificación se muestran en .wxml:

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

(2) Escuche el evento de verificación en .js:

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

4. Etiqueta del botón de radio <radio>:

Descripción de propiedad:

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

(1) El botón de radio se muestra en .wxml:

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

(2) Escuche el evento de radio en .js:

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

5. Etiqueta de la barra de progreso que se puede arrastrar <control deslizante>:

Descripción de propiedad:

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

(1) La barra de progreso arrastrable se muestra en .wxml:

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

(2) Supervise la barra de progreso arrastrando en .js:

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

6. <interruptor> etiqueta del interruptor:

Descripción de propiedad:

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

(1) El botón de cambio se muestra en .wxml:

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

(2) Escuche los eventos de cambio en .js:

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

7. Etiqueta de formulario <formulario>:

Descripción de propiedad:

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

(1) El formulario se muestra en .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). Escuche el evento de envío de formulario en .js:

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

4. <lienzo> etiqueta de dibujo personalizado:

Descripción de propiedad:

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

1. Muestre el dibujo personalizado en .wxml:

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

2. Implemente la lógica de dibujo en .js:

(1) Dibujo 2D de lienzo:

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) Dibujo en modo WebGL:

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. Configuración/introducción/uso del entorno de componentes de TDesign:

1. Configuración del entorno:

(1) Inicialice (abra cmd, cd en el directorio raíz del proyecto del applet), ejecute los siguientes comandos (ingrese el contenido en cada indicador de paso o presione Enter todo el tiempo, e ingrese sí en el último paso):

npm init

(2) Use NPM para instalar paquetes de terceros (abra cmd, cd en el directorio raíz del proyecto del applet):

npm i tdesign-miniprogram -S --production

(3) Abra las herramientas de desarrollo de WeChat, haga clic en el menú "Herramientas" y haga clic en "Crear npm" para construir.

(4) Eliminar "estilo": "v2" de proyecto/app.json.

2. Utilice el componente TDesign:

Documentación oficial:

diseño

(1) Introduzca el componente, en project/app.json (o en el page.json usando este componente):

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

(2) Componentes utilizados en .wxml (muestra de imagen de ejemplo):

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