微信小程序官方文檔地址
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.<image>mode屬性
4.IOS<video>黑屏問題
3.微信小程序暗黑模式
2.微信小程序escape轉碼
1.微信小程序生成二維碼
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端口時可用的，其它要自行配置
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
如果非本人操作處理掃碼結果，需要對應開啟表權限
25.如何刪除所有記錄
_.neq(0) 不等于0的值
24.云開發發送手機驗證碼
cloudbase.sendSms
微信小程序cloudbase.sendSms中template_id怎么獲取？
你可能會遇到發送成功但是一直收不到驗證碼的問題
- 或者在云開發控制臺，查看
短信監控日志
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
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鏈接
})
}
})
