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

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.空格，'&nbsp'问题
10.text文本属性
9.rich-text 富文本图片和换行问题
8.对象深拷贝
7.request请求封装
6.修改页面背景色
5.<image>mode属性
4.IOS<video>黑屏问题
3.微信小程序暗黑模式
2.微信小程序escape转码
1.微信小程序生成二维码

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获取手机号

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>
...
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

//数组 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.日期格式化：
<wxs src="../../utils/filter.wxs" module="filter"></wxs>
 <text class="time"> {{filter.format(newsMsg.createAt,'YYYY-MM-DD')}}</text>

利用.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.空格，'&nbsp'问题

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

10.text文本属性

如果属于纯文本，切属于 <textarea>输出的内容，尽量用 <text>组件标签

<text>{{details.intro}}</text>
9.rich-text 富文本图片和换行问题

rich-text

 <rich-text  nodes="{{details.content}}"></rich-text>

图片百分比

//rich-text富文本图片自适应处理
// content 为富文本内容
content.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')

不换行问题/app.wxss

/* 富文本样式，解决富文本不换行问题 */
rich-text {
  word-break: break-all;
  white-space: pre-wrap;
}
8.对象深拷贝
//对象深拷贝
const deepClone = function (obj, newObj) {
  var newObj = newObj || {};
  for (let key in obj) {
    if (typeof obj[key] == 'object') {
      let isArray = Array.isArray(obj[key]); //判断是否数组
      newObj[key] = (isArray == true ? [] : {})
      deepClone(obj[key], newObj[key]);
    } else {
      newObj[key] = obj[key]
    }
  }
  return newObj;
}
module.exports = {
  deepClone
}
7.request请求封装

utils/request.js

const baseURL = '服务器地址';

function request(method, url, data) {
  return new Promise(function (resolve, reject) {
    let header = {
      'content-type': 'application/json',
    };
    wx.request({
      url: baseURL + url,
      method: method,
      data: method === 'POST' ? JSON.stringify(data) : data,
      header: header,
      success(res) {
        //请求成功
        //判断状态码---errCode状态根据后端定义来判断
        if (res.data.code == 200) {
          resolve(res.data);
        } else {
          //其他异常
          reject('运行时错误,请稍后再试');
        }
      },
      fail(err) {
        //请求失败
        reject(err)
      }
    })
  })
}
export default request

api/index.js使用

// 小程序接口
import request from '../utils/request'
const API = {
  getFlightPage: (data) => request('POST', '/flight/page', data),
  // 查询各模块的在线生活服务
  lifeServeList: (moduleId) => request('GET', `/module/life/service/list?module=${moduleId}`),
}
module.exports = {
  API: API
}

app.js入口引入

//引入api接口
const $api = require('./api/index').API
...
App({
$api,
...
})

.wxml

const app = getApp()
...
//接口调用
 app.$api.newsDetails().then(res => {})
6.修改页面背景色

.wxss

page{
background-color:'每个页面都可以自定义背景色'
}
5.<image>mode属性

<image>组件

4.IOS<video>黑屏问题

custom-cache="{{false}}"
一般缓存为一级缓存、二级缓存、和自定义缓存，换而言之custom-cache="{{false}}"就是不使用自定义缓存的意思。为什么用了视频组件会卡loading加载不出来呢，可能是因为微信设置的自定义缓存的位置有容量限制，因此将它关闭了以后会自动使用系统缓存，可能就没有这个问题了。

<video autoplay="true" src="{{url}}" controls custom-cache="{{false}}"></video>
3.微信小程序暗黑模式

暗黑模式详解文章

2.微信小程序escape转码

例如你要传递一个URL链接参数到下一个页面，你可能发现微信会自动给你截取一部分参数，因此可以通过此种方式避免。

//转码
escape()
//解码
unescape()
1.微信小程序生成二维码

weapp-qrcode.js

//引入
const QRCode = require('../../utils/weapp-qrcode.js')

//使用
  new QRCode('myQrcode', {
      text: `xxx链接`,
      width: 200,
      height: 200,
      padding: 12, // 生成二维码四周自动留边宽度，不传入默认为0
      correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度
      callback: (res) => {
        console.log(res.path)
        // 接下来就可以直接调用微信小程序的api
      }
    })

<canvas class="canvas-code"canvas-id="myQrcode" style="background:#fff;width: 200px;height: 200px;"/>

//调用扫一扫获取结果
// 只允许从相机扫码
    wx.scanCode({
      onlyFromCamera: true,
      success(res) {
        wx.navigateTo({
          url: res.result //xxx链接
        })
      }
    })
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,080评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,422评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,630评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,554评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,662评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,856评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,014评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,752评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,212评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,541评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,687评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,347评论 4赞 331
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,973评论 3赞 315
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,777评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,006评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,406评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,576评论 2赞 349

推荐阅读更多精彩内容

  • 微信小程序开发
    优点 无需安装。 随处可见，随处使用。 使用完，无需写在卸载。 小程序的申请地址。 https://mp.weix...
    taijielan阅读 323评论 0赞 0
  • 小程序总结
    走进小程序 微信⼩程序的注册流程去微信公众平台注册⼩程序账号获得appid和appsecret 微信开发者⼯具安装...
    强某某阅读 323评论 0赞 2
  • 如何快速开发个微信小程序
    一 如何创建一个微信小程序 二 如何搭建小程序页面 三 小程序如何获取数据，处理逻辑 四 如何发布小程序应用 无论...
    雷霆嘎巴_阅读 863评论 0赞 1
  • 微信小程序学习笔记
    （一）阮一峰教程之一：初次上手 hello world 示例 app.jsapp.jsonpages/home 子...
    LuckyStar04阅读 368评论 0赞 0
  • 微信小程序学习笔记
    1.学习资料相关 1.文档 名称描述小程序开发指南[https://developers.weixin.qq.co...
    Small_Cake阅读 681评论 0赞 0