微信小程序技巧集锦（云开发,有赞）

夜雨孤独客

已于 2024-05-13 14:10:56 修改

阅读量1.3k

点赞数

分类专栏：微信小程序 javascript 文章标签：微信小程序 javascript

于 2021-12-19 10:28:39 首次发布

本文链接：https://blog.csdn.net/zjhh116/article/details/122021014

版权

本文总结了微信小程序开发中的实用技巧，包括回调函数中的this处理，页面跳转与参数传递，浮动按钮的实现，js的map函数应用，使用weapp-qrcode生成二维码，扫描二维码并监听数据库变化，时间处理，undefined判断，图片预览，以及订阅消息的配置和调用云函数等关键操作。

摘要由CSDN通过智能技术生成

1、回调函数this

const db = wx.cloud.database(); //云数据库开发方便，好处多多
// 满足功能情况下；尽量用const定义；不要用var 和 let；主要是为了机器内存处理
const that = this;
db.collection('user').doc(‘idxx’).get({
     success: function(res) {
       that.setData({ // this 换成 that；否则无效
          booking: res.data,
      })
  }
});

// 也可以用 Promise 风格调用：
db.collection('user').doc(‘idxx’).get().then(res =>{
   this.setData({ // 这里this 可以不用换成that；照样生效
     booking: res.data,
   });
});

2、页面跳转传参

上一个页面：wx.navigateTo({
             url: "/pages/service/step1/index?id=789"
          });
下一个页面：
onLoad(options) {
  console.log(options.id);
}

3、浮动按钮

（这里用了有赞的组件，比较方便而已；rpx是腾讯的页面显示尺寸；据说可以自适应调整不同的荧幕大小）

<!-- 浮动新增按钮 wxml文件中 -->
<view class="icon-btn">
    <van-icon name="add" color="#07c160" size="88rpx" bind:click="showAdd" />
</view>

<!-- wxss文件中 -->
.icon-btn{
  position: fixed; // 是关键
  top: 0rpx;
  z-index: 9;
  right: 300rpx;
}

4、js的map函数语法糖

users: [{id:"1",name:"张小华"},{id:"1",name:"李小明"},{id:"1",name:"黄医生"},{id:"1",name:"在路上"}],
columns: []
//用map函数处理后；columns:的值：['张小华', '李小明', '黄医生', '在路上']
this.data.columns = users.map(v => name);

5、用第三方weapp-qrcode生成二维码

GitHub - Pudon/weapp-qrcode-base64: 微信小程序生成二维码的插件,基于base64编码输出二维码，不依赖canvashttps://github.com/Pudon