案例

枚举体

// 下面是枚举体文件 /utils/enums.js 的全部代码
export const ShareType = Object.freeze({
  SYS: '系统默认方式',
  CUSTOMIZE: '自定义分享',
});

// 其他业务 js 中使用
import * as enums from '../../utils/enums.js';
enums.ShareType.CUSTOMIZE;

创建二维码

访客系统的微信小程序页面 visit-last-bill 中引用封装工具 utils/weapp.qrcode.esm 按照下面方法显示二维码

const drawQrcode1 = require('../../utils/weapp.qrcode.esm')

// 获取自适应的宽度，使用 drawQrcode1 创建二维码时使用硬编码的 width,height
// 可能会导致像素少的手机（老款手机）二维码显示不完整，扫描后识别不出
const windowInfo = wx.getWindowInfo()
const adaptiveWidth = 150 * windowInfo.screenWidth / 500

drawQrcode1.drawQrcode({
    width: adaptiveWidth,
    height: adaptiveWidth,
    canvasId: 'myQrcode',
    text: qrCodeScene,
})

用按钮制作头像

<!-- wxml 代码 -->
<view>
  <button class="btn">
    <image class="avatar" src="/assets/floor/1.jpg"/>
  </button>
</view>

<!-- wxss 代码 -->
.btn {
  background-color: transparent;
}
.btn::after {
  border: none;
}
.avatar {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
}

请求签名用到的 CryptoJS

前后端协同制作请求签名功能时需要给小程序安装 crypto-js，在 cmd 中打开项目根目录 D:\source\wechat\wechat-mini-flower 并执行命令 npm install crypto-js 安装 crypto-js，deepseek 中要求的步骤是在此之后执行下面命令

npm install -g @tarojs/cli  # 如果未安装 Taro CLI，请先安装
npm run build:weapp         # 构建小程序

实际操作中 2025年3月16日 成功运行了上面一条命令 npm install -g @tarojs/cli 但是下面的命令 npm run build:weapp 运行失败，没有理会错误，直接进行下一步 小程序开发工具 > 工具 > 构建npm ，结束后引用了 crypto-js 的页面就可以访问了。

渲染列表数据

注意指定属性为 key 时不需要 mustache 语法

fruit: [
    {id: 1001, name: '🍎'},
    {id: 1002, name: '🍌'},
    {id: 1003, name: '🍉'},
]
<view wx:for="{{fruit}}" wx:key="id">{{item.name}}</view>

for 循环渲染列表数据时默认 index 作为数组的下标，默认 item 作为数组的元素，如果要修改默认需要使用 wx:for-item 和 wx:for-index

在渲染列表时可以使用元素 <block /> 作为包裹容器，类似 vue 的 <template> 元素，它仅仅是一个包裹元素不会在页面中做任何渲染，只接受控制属性

条件渲染

条件渲染用来控制页面结构的展示和隐藏，在小程序中实现条件渲染的方式有：

1. 使用 wx:if , wx:elif , wx:else 属性组
2. 使用 hidden 属性

wx:if 和 hidden 的区别：

wx:if 通过新增/移除节点的方式实现显示/隐藏，hidden 是通过 display 样式属性来实现