本文共 2029 字，大约阅读时间需要 6 分钟。

微信小程序开发注意事项

1. 事件绑定

• 不使用双花括号 {{}} 绑定事件，而是直接使用 bind:事件名="处理函数" 或用 v-bind 简写形式。
• 示例：<button bind:tap="showInfo">显示/隐藏用户信息</button>

2. 列表循环与嵌套循环问题

• 默认项循环：直接使用 wx:for 及 wx:key。

       
          {
        
   {item}}
       

• 自定义循环名称：使用 wx:for-item。

       
          {
        
   {goodslist.name}}
       

• 嵌套循环：适用于多级数据绑定。

         
        
             {
         
   {goodslist.name}}  
          
        
             {
         
   {goodslist.name}}——{
         
   {category.price}}  
        
       

3. 数据绑定

• 模型绑定：在输入框中使用 model 属性。

       
          {
        
   {content}}
       

• 事件绑定：通过 bind:input 处理更新。

4. 场景值

• 设置场景值用于在小程序启动或切换前台时执行逻辑，常用于扫码、优惠券等场景。

  App({  onShow: (options) => {    console.log("app_options", options);  }});

5. 富文本

• 使用 rich-text 标签显示 HTML 内容。

• 注意：不推荐使用 nodes 作为字符串，建议避免性能问题。

6. 请求封装

• 创建统一的请求封装函数，支持多种 HTTP 方法。

  const request = {  get(url, data = {}, options = {}) {    return new Promise((resolve, reject) => {      wx.request({        url: `${baseUrl}/api/${url}`,        data,        options,        success(res) {          resolve(res.data);        },        fail(err) {          reject(err);        }      });    });  },  // 其他 HTTP 方法或示例};

7. 导航方式

• 页面跳转：
  • tabbar：open-type="switchTab"
  • 普通页面：open-type="navigateTo", redirectTo, reLaunch
• 示例：

8. 自定义组件

• 组件由 wxml, wxss, json, js 文件组成，需在 json 中声明组件属性。
• 示例组件注册：

  Component({  properties: {},  behaviors: [],  data: {},  methods: {}});

• 使用示例：

9. 地图

• 使用 map 标签，支持多种参数设置。

• 绑定控制事件：

  bindcontroltap="controltap"

10. 摄像头

• 使用 camera 标签，支持参数设置和事件绑定。

• 组合使用按钮和预览：

  拍照
       

11. 模块化开发

• WXS 模块化：将代码抽离为独立文件，便于维护和复用。

  function hello(name) {  var msg = "hello " + name;  console.log(msg);  return msg;}module.exports.hello = hello;

• JavaScript 模块化：

  module.exports = {  hello(name) {    console.log(`Hello ${name}!`);  },  showUser(id) {    console.log(`用户id：${id}`);  }};

12. WXS 模块化

• WXS 是一种轻量级脚本语言，能直接在 wxml 中使用。

  function hello(name) {  var msg = "hello " + name;  return msg;}module.exports.hello = hello;

13. 模板引擎

• 使用 template 定义模板，通过 import 和 include 引用。

• 使用模板时传递数据：

转载地址：http://ziomz.baihongyu.com/