誰在花里胡哨
誰在花里胡哨

微信小程序(云)开发小笔记

image.png

微信小程序官方文档地址

33.如何批量下载云储存文件
32.联表查询生成消费记录统计，用户数量和消费次数
31.web本地上传文件 cloud.uploadFile
30.查询条件根据时间区间筛选
29.静态网站访问云储存图片路径
28.web端如何实现连接云数据库
27.联表查询 Aggregate().lookup()
26.如何实现扫码处理成功后，实时监听获取结果 .watch()
25.如何删除所有记录
24.云开发发送手机验证码
23.云开发获取当前微信用户绑定的手机号
22.如何实现刷新当前页面
21._.or()查询多个符合条件的数据
20..add()数据时返回值是res
19.moment 格式化时间不匹配
18.onShow(options) 参数拿不到
17.常用云函数指令
16.父子组件通信
15.input修改数组对象的某一个值
14.微信map地图组件闪退问题
13.日期格式化：
12.下拉加载更多：
11.空格，' '问题
10.text文本属性
9.rich-text 富文本图片和换行问题
8.对象深拷贝
7.request请求封装
6.修改页面背景色
5.mode属性
4.IOS

33.如何批量下载云储存文件

参考地址

32.联表查询生成消费记录统计，用户数量和消费次数

联表生成的数据


image.png

想要的数据统计(统计当天总消费次数，和当天访问总人数)


image.png 

const storeId = '0ab5303b62cc290d0e0799a838ca9158'
const createTimeStart = '2022-06-15'
const createTimeEnd = '2022-09-01'
db.collection('deal').aggregate().match({ _storeId: storeId }).sort({ createTime: -1 }).lookup({
  from: 'users',
  localField: '_userId',
  foreignField: '_id',
  as: 'userList',
})
  .replaceRoot({
    newRoot: $.mergeObjects([
      $.arrayElemAt(['$userList', 0]),
      {
        count: '$count',
        createTime: $.dateToString({
          //将日期对象格式化为 年月日
          date: $.dateFromString({
            //将日期字符串转化为日期对象
            dateString: '$createTime'
          }),
          format: '%Y-%m-%d'
        }),
        type: '$type',
        mobile: "$mobile"
      }
    ])
  })
  .match({
    type: _.or([_.eq(2), _.eq(4)]), //筛选只要扣除的类型
    createTime: _.and(_.gte(createTimeStart), _.lte(createTimeEnd)) //查询的时间区间
  })
  .group({
    _id: '$createTime', //根据日期进行分组
    consumeCount: $.sum('$count'),
    userCount: $.addToSet('$mobile'), //向数组中添加值，如果数组中已存在该值
  }).project({
    _id: 0,
    createTime: '$_id',
    consumeCount: 1,
    userCount: $.size('$userCount'),
  })
  .sort({
    createTime: -1
  })
  .end()
31.web本地上传文件 cloud.uploadFile

cloud.uploadFile ，建议配合 Cloud.getTempFileURL 转换为 https://进行访问

image.png

  • 你可能会遇到跨域问题，则需要再腾讯云中配置本地测试的安全域名，一般默认的 localhost:8080端口时可用的，其它要自行配置
    image.png

    image.png

    image.png

    image.png

    image.png

    image.png
30.查询条件根据时间区间筛选

createTimeStart <= createTime <= createTimeEnd
createTimeStart 可以为字符串格式 "2022-08-17 9:50:00"

createTime:_.and(_.get(createTimeStart),_.lte(createTimeEnd))
29.静态网站访问云储存图片路径

小程序端一般上传图片后，会生成一条云路径地址 cloud://xxxxxx,但事实上外部（web）访问这个路径是行不通的。

但是可以通过 Cloud.getTempFileURL 转换为 https://进行访问

28.web端如何实现连接云数据库

参考文章

27.联表查询 Aggregate().lookup()

Aggregate().lookup()
.project()
$.arrayElemAt

//联和 store_users和users，将store_users中的_userId与users中的_id匹配，把匹配符合条件的存放到userInfo数组中
db.collection('store_users').aggregate()
  .lookup({
    from: 'users',
    localField: '_userId',
    foreignField: '_id',
    as: 'userInfo', //聚合匹配出的数组
  }).project({
   // 取匹配数组的第0个对象
    userInfo:$.arrayElemAt(['$userInfo', 0])
  })
  .end()
26.如何实现扫码处理成功后，实时监听获取结果 .watch()

Collection.watch
如果非本人操作处理扫码结果，需要对应开启表权限

image.png

25.如何删除所有记录
_.neq(0) 不等于0的值
image.png
24.云开发发送手机验证码

cloudbase.sendSms
微信小程序cloudbase.sendSms中template_id怎么获取？
你可能会遇到发送成功但是一直收不到验证码的问题

image.png

  • 或者在云开发控制台，查看 短信监控 日志
    image.png
23.云开发获取当前微信用户绑定的手机号

1.用户点击授权按钮获取code
2.接口通过code获取手机号


...
Page({
  getPhoneNumber (e) {
    console.log(e.detail.code)
  }
})

//云函数 config.json 中配置
{
  "permissions": {
    "openapi": [
      "phonenumber.getPhoneNumber"
    ]
  }
}
...
//云函数调用
    const result = await cloud.openapi.phonenumber.getPhoneNumber({
            code: '获取的code'
        });
        return {
            success: true,
            data: result,
            message: '获取成功'
        };

你可能会遇到 获取不到code的问题，建议更新手机微信版本或者开发工具版本。

  • 确认当前基础库版本是否为 2.21.2 及以上。
  • 正常情况下，基础库 2.21.2 对应的是客户端版本号为 8.0.16，如果你的版本低于 8.0.16 并且是通过开发者工具向客户端推送的 2.21.2 基础库，大几率不会返回 code 参数，请手动更新微信版本。
22.如何实现刷新当前页面

网上有很多方法，我这边采用的是 this.onLoad()，不过这种方式需要你重新初始化一遍data里面的数据

  • 简单实现一个倒计时，结束时刷新页面
let timer = null
const time = 120 //有效时间120，超时自动刷新
Page({
  data: {
        validTime: time
    },
  onLoad: function (options) {
      this.validTimeInit()
   },
  onUnload: function () {
        clearInterval(timer)
   },
  validTimeInit() {
        let _this = this
        timer = setInterval(() => {
            let validTime = this.data.validTime
            validTime--
            if (validTime < 0) {
                clearInterval(timer)
                _this.setData({
                    validTime: time
                })
                _this.onLoad()
            } else {
                this.setData({
                    validTime: validTime
                })
            }
        }, 1000);
    }
})
21._.or()查询多个符合条件的数据

云开发查询or的用法
_.eq() 查询筛选条件，表示字段等于某个值

 const stores = data.map(s => { return _.eq(s._storeId) }) || []
const { data: storesInfo } = await db.collection('hyc_stores').where({_id: _.or(stores) }).get()
20..add()数据时返回值是res

.add()
类似.where,.update返回的都是 res.data,而.add返回的是res,且只有添加成功的_id

image.png

19.moment 格式化时间不匹配

不清楚具体原因，但是网上说是 时区问题
加上 .utcOffset(480) 就可以了

 moment().utcOffset(480).format('YYYY-MM-DD HH:mm:ss')
18.onShow(options) 参数拿不到

onShow和onLoad的区别
Page页面级 onShow 没有 options,全局的App里面的 onShow才有，想获取到参数尽量用 onLoad
https://developers.weixin.qq.com/community/develop/doc/0008005f68c300c912070098b56800

17.常用云函数指令

const _ = db.command

  • _.or ：满足其中一个条件即可 跨字段的或操作;
  • 查询更新数组/对象
//数组 arr 第 index 下标对象的 id
 [`arr.${index}.id`]: id
  • 联表查询
16.父子组件通信
  • 使用微信小程序全局变量
    小程序的全局变量存储在文件 app.js 的globalData对象中
// app.js 中定义
App({
    globalData: {
      hasLogin: false,
      openid: null
    },
})
// 其他文件中读取使用
const app = getApp();
console.log(app.globalData.hasLogin)
  • 使用微信小程序的 数据缓存 
 wx.setStorageSync('userInfo', data)

 wx.getStorageSync('userInfo')
  • 使用父子组件间的属性
    父组件传值给子组件，子组件可以在 properties 中接收并使用
    子组件传值给父组件，可以通过方法触发 triggerEvent 
//子组件
 this.triggerEvent('myEvent',传参)
//父组件
<子组件 bind:myEvent="传递方法" />
15.input修改数组对象的某一个值

解决方案

14.微信map地图组件闪退问题

安卓手机在切换tab的时候，频繁切换时，小程序会闪退
解决方案

13.日期格式化：

  {{filter.format(newsMsg.createAt,'YYYY-MM-DD')}}

利用.wxs方法，在页面上引入
utils/filter.wxs

function format(date, fmt) {
  let ret;
    const opt = {
        "Y+": date.getFullYear().toString(),        // 年
        "m+": (date.getMonth() + 1).toString(),     // 月
        "d+": date.getDate().toString(),            // 日
        "H+": date.getHours().toString(),           // 时
        "M+": date.getMinutes().toString(),         // 分
        "S+": date.getSeconds().toString()          // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
    };
    for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
        };
    };
    return fmt;
}

function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}

function getWeek(n) {
  switch (n) {
    case 1:
      return '星期一'
    case 2:
      return '星期二'
    case 3:
      return '星期三'
    case 4:
      return '星期四'
    case 5:
      return '星期五'
    case 6:
      return '星期六'
    case 7:
      return '星期日'
  }
}

module.exports.format = format
12.下拉加载更多：

.json

"enablePullDownRefresh":true,

.wxml

 /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.setData({
      pages: 0,
      list: [],
      'queryModel.current': 1,
      'queryModel.size': 10,
      'queryModel.totalCount': 0
    })
 // 接口加载数据
    this.getNewsPage()
  // 停止加载，下拉返回
    wx.stopPullDownRefresh();
  },
11.空格，' '问题

　复　制　吧　
微信小程序中的多个空格怎么打？ | 微信开放社区

10.text文本属性

如果属于纯文本，切属于