33.如何批量下载云储存文件
32.联表查询生成消费记录统计，用户数量和消费次数
联表生成的数据
想要的数据统计(统计当天总消费次数，和当天访问总人数)
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://进行访问
- 你可能会遇到跨域问题，则需要再腾讯云中配置本地测试的安全域名，一般默认的
localhost:8080端口时可用的，其它要自行配置
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
如果非本人操作处理扫码结果，需要对应开启表权限
25.如何删除所有记录
_.neq(0) 不等于0的值
24.云开发发送手机验证码
cloudbase.sendSms
微信小程序cloudbase.sendSms中template_id怎么获取？
你可能会遇到发送成功但是一直收不到验证码的问题
- 或者在云开发控制台，查看
短信监控日志
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
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.空格，’ ’问题
👉 复 制 吧 👈
微信小程序中的多个空格怎么打？ | 微信开放社区
10.text文本属性
如果属于纯文本，切属于 <textarea>输出的内容，尽量用 <text>组件标签
<text>{{details.intro}}</text>
9.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属性
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.微信小程序生成二维码
//引入
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链接
})
}
})
