废话不多说，直奔主题。感谢TX团队赞助，不然没机会通宵！以下思路，仅供参考。 公告开山 [图片] 改造原有授权逻辑 原来通过getUserProfile接口拿到userinfo数据，仍然不变。仅对返回结果加一次判断； [代码]wx.getUserProfile && wx.getUserProfile({ lang: 'zh_CN', desc: "desc", success: ({ userInfo }) => { if (userInfo?.nickName === '微信用户') { // 跳转至新建的资料修改页面 return } // 同步用户资料信息 api.updateUserinfo(userInfo) }, fail: (error) => { // 跳转至新建的资料修改页面 } }) [代码] 资料修改页面 页面 此处需要注意的是， 头像组件有最低版本兼容要求。而昵称填写则可以忽略版本兼容性。此处不赘述昵称填写 兼容性处理 [代码]data: { supportAvatarInput: compareVersion(version, '2.21.2') >= 0, } [代码] [代码]<!-- 代码有省略，见下 --> <button wx:if="{{supportAvatarInput}}" open-type="chooseAvatar"></button> <button wx:else></button> [代码] 页面美化 由于官方没有直接提供头像选择效果的组件可供直接使用，而是以button的形式。因此需要我们自行处理，不过也很简单position + opacity即可； 先上效果图： [图片] [代码]<view class="__input-wrapper"> <image class="avatar" src="{{avatarUrl}}"></image> <button wx:if="{{supportAvatarInput}}" class="opacity-button" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar"></button> <button wx:else class="opacity-button" catchtap="handleChooseImage"></button> </view> [代码] [代码].__input-wrapper{ position: relative; top: 0; left: 0; } .__input-wrapper .avatar { width: 120rpx; height: 120rpx; border-radius: 50%; } .__input-wrapper .opacity-button{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9; opacity: 0; padding: 0 !important; margin: 0 !important; } [代码] 到此，界面完工。接下来开始处理头像上传问题。 业务逻辑 先来处理头像上传组件本身的事件， 此处有个坑。官方的头像上传不支持裁剪，因此需要用到更新的cropImage这个API。 所以我们先来实现图片裁剪功能， 依然是注意兼容性。因为目前是从2.26.0才开始支持。 [代码] cropAvatar(url){ return new Promise((resolve, reject) => { try { if (wx.cropImage) { wx.cropImage({ src: url, cropScale: "1:1", success({ tempFilePath }) { if (!tempFilePath) return reject(Error('处理失败，未获取到路径')) resolve(tempFilePath) }, fail(error) { reject(Error(error.errmsg || error.errMsg)) } }) return } // 低版本兼容 // 此处可弹窗提醒用户手动裁剪为1：1 if (wx.editImage) return wx.editImage({ src: url, success({ tempFilePath }) { if (!tempFilePath) return reject(Error('处理失败，未获取到路径')) resolve(tempFilePath) }, fail(error) { reject(Error(error.errmsg || error.errMsg)) } }) // 其他情况返回原url resolve(url) } catch (error) { reject(error) } }) } [代码] 考虑到用户上传的图片可能会很大。也可以继续设计一个压缩图片的方法。 此处又是一个坑，官方的compressImage API模拟器上会返回错误的tempFilePath方法（真机目前没有） [代码]compressImage(url){ return new Promise(async (resolve, reject) => { // 指定压缩为480px * 480px const COMPRESS_SIZE = 480 try { const { width, height } = await this.getImageInfo(url) const size = Math.ceil(Math.sqrt(width * height)) if (size <= COMPRESS_SIZE) throw Error(`当前图片尺寸为 ${width} * ${height} (${size}) ， 已符合压缩规则，忽略压缩`) const quality = Math.ceil(COMPRESS_SIZE * 100 / size) if (!wx.compressImage) throw Error("当前基础库版本太低，请升级微信客户端") wx.showLoading({ title: '压缩中', }) wx.compressImage({ src: url, quality: quality, // 以下高版本支持，低版本仍考虑 quality compressedWidth: COMPRESS_SIZE, compressHeight: COMPRESS_SIZE, success({ tempFilePath }) { if (!tempFilePath) return reject(Error('处理失败，未获取到路径')) // 检查后缀是否存在, 应对模拟器返回错误的tempFilePath问题 if (!/^.*\.(.+)$/.test(tempFilePath)) return reject(Error('SDK错误，压缩路径不正确')) resolve(tempFilePath) }, fail(error) { reject(Error(error.errmsg || error.errMsg)) }, complete() { wx.hideLoading({}) } }) } catch (error) { reject(error) } }) } [代码] 到此准备工作已就绪。 新坑来袭 又一个坑， 此处通过头像上传的url并非和之前一样。这次的是个临时链接，不能直接存储至数据库使用。因此需要服务端提供头像上传的接口。前端调用wx.uploadFile API上传。 此处不赘述 处理头像组件的回调 [代码]async onChooseAvatar({ detail }) { let url = detail.avatarUrl // 裁剪 url = await this.cropAvatar(url) // 压缩 try { url = await this.compressImage(url) } catch (error) { console.error('头像压缩失败：', error) } try { // 此处是上传接口调用。 根据自己需要改造即可 const { avatarUrl } = await app.$http.post({ url: '/upload', header: { 'content-type': 'multipart/form-data' }, data: { name: 'picture', filePath: url, }, timeout: 30 * 1000, loading: '上传中' }) this.setData({ avatarUrl: avatarUrl }) app.$Toast("上传成功") } catch (error) { wx.showModal({ content: `${error.message || "上传失败，请稍后再试"}`, showCancel: false }) } } [代码] 别忘了还有个低版本的适配， 这个简单。 不过这个还是有低版本兼容处理 [代码]handleChooseImage() { try { let self = this if (wx.chooseMedia) { return wx.chooseMedia({ count: 1, mediaType: 'image', async success(res) { const tempFilePath = res?.tempFiles[0]?.tempFilePath if (!tempFilePath) return app.$Toast("选取失败，请稍后再试") // 此处复用之前的头像上传回调 await self.onChooseAvatar({ detail: { avatarUrl: tempFilePath } }) }, fail() { app.$Toast("头像修改失败 请稍后再试") } }) } wx.chooseImage({ count: 1, async success(res) { const tempFilePath = res?.tempFilePaths[0] if (!tempFilePath) return app.$Toast("选取失败，请稍后再试") await self.onChooseAvatar({ detail: { avatarUrl: tempFilePath } }) }, fail() { app.$Toast("头像修改失败 请稍后再试") } }) } catch (error) { app.$Toast("当前版本太低，建议您先升级微信客户端") } }, [代码] 总结 希望这是最后一次 低版本兼容性要注意， 狂放的小伙伴可以设置最低版本库，一劳永逸 头像和昵称组件，自带了安全识别功能。因此会比较慢，需要吐槽的是头像图片的鉴黄识别有点拉跨，经常误报。 如果你看到提示”当前头像不可用“之类的提示，不要担心是代码问题 图片裁剪API才出， 所以在此之前官方是没有考虑到的。吐血 官方其他的bug也该修修了，就比如compressImage里模拟器返回的路径 写的仓促，如有不对，请多指正！ 一点小宣传 已经第一时间接入cropImage了，很香。 欢迎体验！！ 附小程序码： [图片] 体验路径 ： 我的 -> 左上角”设置“ -> 个人信息修改 大家还有什么想说的！ 欢迎评论区交流

[图片] 做小程序的时候大家都会需要到搜索的功能，今天就把我这边测试成功的案例给大家。 微信官方文档：获取一个集合的数据如果要获取一个集合的数据，比如获取 todos 集合上的所有记录，可以在集合上调用 [代码]get[代码] 方法获取，但通常不建议这么使用，在小程序中我们需要尽量避免一次性获取过量的数据，只应获取必要的数据。为了防止误操作以及保护小程序体验，小程序端在获取集合数据时服务器一次默认并且最多返回 20 条记录，云函数端这个数字则是 100。开发者可以通过 [代码]limit[代码] 方法指定需要获取的记录数量，但小程序端不能超过 20 条，云函数端不能超过 100 条。话不多说，代码开始： search云函数部分（PS:记得上传云函数） // 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init() const db = cloud.database(); // 云函数入口函数 exports.main = async (event, context) => {   const wxContext = cloud.getWXContext()   let keyWords = event._keyword   try {     //这里的keyWords是前端小程序访问的参数_keyword     return await db.collection('softshow').limit(50).where(         db.command.or([{             //使用正则查询，实现对‘name’字段的搜索的模糊查询             name: db.RegExp({               regexp: keyWords,               options: 'i', //大小写不区分             }),           }           //下面可以增加更多的选项,可以做多字段的选择         ])       ).get()   } catch (e) {     console.log(e)   }   return {     event,   } } search.wxml部分代码 <view class="page-box">     <view class="page-content">         <view class="search-wrap radius-border">             <view class="search-type">                 <icon class="searchcion" size='20' type='search'></icon>             </view>             <input class="search-input" bindinput="bindSearchKey" placeholder="请输入关键字" value="{{searchValue}}" />             <view class="search-button">                 <view class='sousuo' catchtap="see" style="font-size:32rpx">搜索</view>             </view>         </view>     </view> <!-- 搜索列表 -->     <block wx:if='{{obj}}' wx:for='{{obj}}' wx:key=''>         <view class="list-box">             <view class="img-wrap">                 <image class="img-h5" src="{{item.logo}}"></image>             </view>             <view class="info">                 <view class="title">{{item.name}}</view>             </view>         </view>     </block> </view> search.wxss部分代码 .page-content{   padding-top: 15rpx;   margin-bottom: 20px; } .search-wrap{   overflow: hidden;   border-radius: 8rpx;   height: 40px;   display: flex;   align-items: center;   border-radius: 5px;   background-color: #fbfbfb;   font-size: 0;   line-height: 1;   position: relative; } .search-input{   margin: 0 8px;   flex: 1;   height: 100%;   font-size: 16px; } .search-button{   background-color: #00ae65;   width: 70px;   height: 100%;   display: flex;   align-items: center;   justify-content: center;   color: #fff;   border-radius:0 5px 5px 0; } .search-type{   width: 40px;   height: 100%;   display: flex;   align-items: center;   justify-content: center;   color: #333;   font-size: 14px;   position: relative;   background-color: #e4e4e4; } /* 列表样式 */ .list-box{   position: relative;     padding: 12px 16px;     padding-left: 70px;     height: 40px;     background-color: #fff;     margin-bottom: 10px; } .img-wrap{   position: absolute;     left: 16px;     top: 12px;     width: 40px;     height: 40px;     border-radius: 3px;     overflow: hidden;     background-color: #eee; } .img-h5{   position: absolute;     width: 100%;     height: 100%;     background-position: 50%;     background-size: cover;     background-repeat: no-repeat;     background-color: #eee;     border-radius: inherit; } .info{   height: 98%;     flex-direction: column;     justify-content: space-between; } .title{   font-size: 16px;     color: #333;     line-height: 40px;     overflow: hidden;     text-overflow: ellipsis;     white-space: nowrap; } .zaiyao{   font-size: 13px;     color: #999;     display: -webkit-box;     -webkit-box-orient: vertical;     -webkit-line-clamp: 2;     overflow: hidden; } search.js部分代码 // pages/search/search.js var text=''   Page({     /**    * 页面的初始数据    */   data: {     },   see(){       wx.cloud.callFunction({       name: 'search',       data: {        //this.data.searchKey由页面输入框的内容           _keyword: this.data.searchKey,       },       complete: res => {         console.log(res)           let resources = res.result.data           this.setData({             obj: resources           })       },       fail: res => {       },   })   },     bindSearchKey: function(e) {     this.setData({         searchKey: e.detail.value     }) },   /**    * 生命周期函数--监听页面加载    */   onLoad: function (options) {   }, })

笔者刚遇到需要一次性拉取超过100条（云函数里超过1000条）记录的这种需求。 一般情况下，会有下面两种处理方式： 1、先获取总数，再for循环，每次拉取limit条记录；（可结合Promise.all并发） 2、递归拉取，每次拉取limit条记录，直到拉取的记录数量小于limit。 以上两种方式都比较麻烦，于是动了一脑筋，以最简单的方式实现上面的需求。 极简代码如下： db.collection('order').aggregate() .match({ status:'已付费' }) .addFields({ tempTag:1 //增加一个临时标签；也可以不要addFields这个阶段； }) .group({ _id:'$tempTag', orders:$.push('$$ROOT') //一次性拉取超过100条或者1000条记录 }) .end() .then(res=>{ let orders = res.list[0].orders console.log(orders) }) 一个临时标签，搞定。 小心数据量太大搞崩了，崩溃的极限是多少，需要各位自行摸索了。 需要注意的是，如果是云函数里执行以上代码（比如lookup），返回小程序端的数据量不要超过1M。