博客
关于我
微信小程序注意点
阅读量:663 次
发布时间:2019-03-15

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

微信小程序开发注意事项

1. 事件绑定

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

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

  • 默认项循环:直接使用 wx:forwx: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. 导航方式

  • 页面跳转
    • tabbaropen-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 定义模板,通过 importinclude 引用。
  • 使用模板时传递数据:

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

你可能感兴趣的文章
Mysql8在Centos上安装后忘记root密码如何重新设置
查看>>
Mysql8在Windows上离线安装时忘记root密码
查看>>
MySQL8找不到my.ini配置文件以及报sql_mode=only_full_group_by解决方案
查看>>
mysql8的安装与卸载
查看>>
MySQL8,体验不一样的安装方式!
查看>>
MySQL: Host '127.0.0.1' is not allowed to connect to this MySQL server
查看>>
Mysql: 对换(替换)两条记录的同一个字段值
查看>>
mysql:Can‘t connect to local MySQL server through socket ‘/var/run/mysqld/mysqld.sock‘解决方法
查看>>
MYSQL:基础——3N范式的表结构设计
查看>>
MYSQL:基础——触发器
查看>>
Mysql:连接报错“closing inbound before receiving peer‘s close_notify”
查看>>
mysqlbinlog报错unknown variable ‘default-character-set=utf8mb4‘
查看>>
mysqldump 参数--lock-tables浅析
查看>>
mysqldump 导出中文乱码
查看>>
mysqldump 导出数据库中每张表的前n条
查看>>
mysqldump: Got error: 1044: Access denied for user ‘xx’@’xx’ to database ‘xx’ when using LOCK TABLES
查看>>
Mysqldump参数大全(参数来源于mysql5.5.19源码)
查看>>
mysqldump备份时忽略某些表
查看>>
mysqldump实现数据备份及灾难恢复
查看>>
mysqldump数据库备份无法进行操作只能查询 --single-transaction
查看>>