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

最新推荐文章于 2024-01-31 16:59:46 发布

VIP文章夜雨孤独客

最新推荐文章于 2024-01-31 16:59:46 发布

阅读量1.2k

点赞数

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

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

版权

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编码输出二维码，不依赖canvas