|
|
获得过
0
次赞
回答过的问题获得 0 次赞
分享过的文章/案例获得 0 次赞
评论与回复获得 0 次赞
GitHub账号
星期六 16:57
小程序隐私弹框设置指引基础教程
一、前言 文章这个编辑器真的太恶心了 代码块不仅不能设置缩进还不能使用tab增加缩进只能空格一个一个打 调个字体和代码格式太TM麻烦了 2023.08.22更新： 以下指南中涉及的 getPrivacySetting、onNeedPrivacyAuthorization、requirePrivacyAuthorize 等接口目前可以正常接入调试。调试说明： 在 2023年9月15号之前，在 app.json 中配置 [代码]__usePrivacyCheck__: true[代码] 后，会启用隐私相关功能，如果不配置或者配置为 false 则不会启用。在 2023年9月15号之后，不论 app.json 中是否有配置 [代码]__usePrivacyCheck__[代码]，隐私相关功能都会启用首先了解官方提供demo： demo1: 演示使用 wx.getPrivacySetting 和 <button open-type="agreePrivacyAuthorization"> 在首页处理隐私弹窗逻辑 https://developers.weixin.qq.com/s/gi71sGm67hK0 demo2: 演示使用 wx.onNeedPrivacyAuthorization 和 <button open-type="agreePrivacyAuthorization"> 在多个页面处理隐私弹窗逻辑，同时演示了如何处理多个隐私接口同时调用。 https://developers.weixin.qq.com/s/4X7yyGmQ7EKp demo3: 演示 wx.onNeedPrivacyAuthorization、wx.requirePrivacyAuthorize、<button open-type="agreePrivacyAuthorization"> 和 <input type="nickname"> 组件如何结合使用 https://developers.weixin.qq.com/s/jX7xWGmA7UKa demo4: 演示使用 wx.onNeedPrivacyAuthorization 和 <button open-type="agreePrivacyAuthorization"> 在多个 tabBar 页面处理隐私弹窗逻辑。 https://developers.weixin.qq.com/s/g6BWZGmt7XK9 小程序后台隐私协议添加对应隐私协议（例如：剪贴板、手机号授权等）协议更新后有一定时间的缓存才能测试（大概是在半天之后可以测试）优先处理添加协议 （如果之前小程序已经添加过对应的协议，则需要重新提交审核同步信息才会返回正常用来测试）基础库设置3.23.3及以上 (微信版本：iOS 8.0.36、安卓 8.0.35会携带此基础库版本)app.json文件内这个配置__usePrivacyCheck__属性为true （uniapp开发参考下图） [图片]开发工具清除全部缓存之后重新编译、手机微信下拉删除最近小程序等进行隐私协议同步信息获取测试二、关于小程序隐私保护指引设置的公告为规范开发者的用户个人信息处理行为，保障用户的合法权益，自2023年9月15日起，对于涉及处理用户个人信息的小程序开发者， 微信要求，仅当开发者主动向平台同步用户已阅读并同意了小程序的隐私保护指引等信息处理规则后，方可调用微信提供的隐私接口。 开发者首先需确定小程序是否涉及处理用户个人信息，如涉及，则需配置用户隐私授权弹窗， 且仅有在平台《小程序用户隐私保护指引》中声明了所处理的用户个人信息，才可以调用平台提供的对应接口或组件。 三、设置《小程序用户隐私保护指引》 [图片] [图片] 四、填写《小程序用户隐私保护指引》[图片] 只有在指引中声明所处理的用户个人信息，才可以调用平台提供的对应接口或组件。若未声明，对应接口或组件将无法调用成功。 五、配置用户隐私授权弹窗 (触发方式：隐私API、组件) 1.了解隐私协议所需相关API 01.wx.requirePrivacyAuthorize() 用于模拟隐私接口调用 02.wx.openPrivacyContract() 用于打开下面封装好隐私弹框中的隐私协议 03.wx.onNeedPrivacyAuthorization() 用于监听用户是否吊起相关的隐私协议 04.wx.getPrivacySetting() 用于查询微信侧记录用户隐私协议状态 基本流程为：03 -----> 04 -----> 02 2.封装微信侧用户隐私协议状态 //获取微信侧同步的用户隐私协议开关 function getPrivacySetting(callback){ if(wx.getPrivacySetting){ wx.getPrivacySetting({ success: result => { console.log(result,"同步信息结果") // 返回结果为: result = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' } if (result.needAuthorization) { // 需要弹出隐私协议 console.log("获取微信储存的用户协议同步信息-用户未同意，请弹框处理") callback && callback(result); } else { console.log("获取微信储存的用户协议同步信息-用户已同意，请忽略") fail: () => {}, complete: () => {} 3.封装隐私协议弹框放置全局组件中 全局组件-wxml <van-popup show="{{privacyFlag}}" z-index="{{99999}}" catch:touchstart="" position="center" bind:close="onCloseDoctorInfo" close-on-click-overlay="{{false}}" custom-style="width:80%; border-radius:20rpx;" > <view class="followFrame customStyle"> <view class="followFrame-title">用户隐私保护提示</view> <view class="followFrame-cont"> <view class="followFrame-cont-text big"> 亲爱的用户，感谢您的信任！您使用本小程序提供的产品服务前应当阅读并同意 </view> <view class="followFrame-cont-text links" bindtap="openPrivacyContract"> {{urlTitle}} </view> <view class="followFrame-cont-text">当您点击同意并开始使用产品服务时，即表示你已理解并同息该条款内容，该条款将对您产生法律约束力。如您拒绝，将无法使用本小程序提供的相关产品及服务。 </view> </view> <view class="followFrame-bom"> <view class="followFrame-bom-box flex-row-around-start"> <button id="disagree-btn" bindtap="handleDisagree" class="followFrame-bom-btns flex1">不同意</button> <button id="agree-btn" bindagreeprivacyauthorization="handleAgree" open-type="agreePrivacyAuthorization" class="followFrame-bom-btns active flex1">同意</button> </view> </view> </view> </van-popup> 全局组件-JS JS//引入相关模块 const { getPrivacySetting } = require("../utils/utils") //设置协议回调、关闭回调数组变量 let privacyHandler let privacyResolves = new Set() let closeOtherPagePopUpHooks = new Set() //注册并监听隐私API调用 if (wx.onNeedPrivacyAuthorization) { wx.onNeedPrivacyAuthorization(resolve => { //获取用户微信侧同步结果 getPrivacySetting(result=>{ console.log(result,"同步信息结果") // 返回结果为: result = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' } if (result.needAuthorization) { // 需要弹出隐私协议 if (typeof privacyHandler === 'function') privacyHandler(resolve,result) console.log("获取微信储存的用户协议同步信息-用户未同意，请弹框处理-页面") //处理关闭页面其他弹框 const closeOtherPagePopUp = (closePopUp) => { closeOtherPagePopUpHooks.forEach(hook => { if (closePopUp !== hook) { hook() Component({ options: { styleIsolation: 'shared', multipleSlots: true data: { urlTitle: "", privacyFlag: false, height: 0, lifetimes: { attached: function() { const closePopUp = () => { this.disPopUp() privacyHandler = (resolve,result) => { this.setUrlTitle(result); console.log(result,"999999") privacyResolves.add(resolve) this.popUp() // 额外逻辑：当前页面的隐私弹窗弹起的时候，关掉其他页面的隐私弹窗 closeOtherPagePopUp(closePopUp) closeOtherPagePopUpHooks.add(closePopUp) this.closePopUp = closePopUp detached: function() { closeOtherPagePopUpHooks.delete(this.closePopUp) methods: { //处理隐私弹框内展示的隐私协议标题 setUrlTitle(result){ this.setData({urlTitle:result.privacyContractName}) //用户同意相关协议 handleAgree(e) { this.disPopUp() // 这里演示了同时调用多个wx隐私接口时要如何处理：让隐私弹窗保持单例， 点击一次同意按钮即可让所有pending中的wx隐私接口继续执行 （看page/index/index中的 wx.getClipboardData 和 wx.startCompass） privacyResolves.forEach(resolve => { resolve({ event: 'agree', buttonId: 'agree-btn' privacyResolves.clear() this.triggerEvent('handleAgree', {result:true}); //用户拒绝相关协议 handleDisagree(e) { this.disPopUp() privacyResolves.forEach(resolve => { resolve({ event: 'disagree', privacyResolves.clear() this.triggerEvent('handleAgree', {result:true}); //打开隐私弹框 popUp() { if (this.data.privacyFlag === false) { this.setData({ privacyFlag: true //关闭隐私弹框 disPopUp() { if (this.data.privacyFlag === true) { this.setData({ privacyFlag: false //打开微信提供的小程序侧隐私协议 openPrivacyContract() { wx.openPrivacyContract({ success: res => { console.log('openPrivacyContract success') fail: res => { console.error('openPrivacyContract fail', res) checkPrivacyStatus() { let that = this; getPrivacySetting(result=>{ if (result.needAuthorization) { that.setUrlTitle(result); that.popUp(); } else { console.log("微信侧已记录用户同意"); 父组件监听全局隐私弹框时间回调 父组件-wxml <privacy-popup id="privacyPop" bindhandleAgree="handleAgree"></privacy-popup> 父组件-JS //隐私协议弹框按钮回调 handleAgree(event){ let that = this; console.log(event); let {result} = event.detail; // result 根据用户选择可处理后续相关逻辑 true 用户同意相关隐私 例如：因昵称组件弹出的框 为true之后就可将昵称组件设置为聚焦状态 false 用户拒绝 例如：音视频组件 用户拒绝之后可返回上级页面、继续弹框进行处理等 4.app.json中引入全局组件："privacy-popup": "/components/privacyPopup" 5.全局使用（隐私弹框） 全局隐私弹框相关代码如下： 首页wxml引入组件 <privacy-popup id="privacyPop"></privacy-popup> 首页onReady时触发检测隐私弹框逻辑 that.selectComponent("#privacyPop") && that.selectComponent("#privacyPop").checkPrivacyStatus(); 6.按需使用（隐私弹框）进入单个隐私页面时优先检测（手机号授权API触发隐私弹框） 6-1.1.引入全局组件到手机号授权页面：<privacy-popup id="privacyPop"></privacy-popup> 6-1.2.页面onReady的时候开始检测：that.selectComponent("#privacyPop") && that.selectComponent("#privacyPop").checkPrivacyStatus(); 6-2.1.在用户点击按钮即将吊起隐私弹框时使用如下代码： getPrivacySetting(result=>{ if (result.needAuthorization) { // 需要弹出隐私协议 that.selectComponent("#privacyPop") && that.selectComponent("#privacyPop").setUrlTitle(result); console.log("获取微信储存的用户协议同步信息-用户未同意，请弹框处理") } else { console.log("获取微信储存的用户协议同步信息-用户已同意，请忽略") //走隐私允许之后的逻辑 六、清空历史同步状态 1.微信下拉---最近---最近使用的小程序 2.开发工具---清除模拟器缓存---清除全部数据/授权数据 七、常见错误说明{ "errMsg": "A:fail api scope is not declared in the privacy agreement", "errno": 112 } 使用到了 A 隐私接口，但是开发者未在[mp后台-设置-服务内容声明-用户隐私保护指引]中声明收集 A 接口对应的隐私类型。还有个114的忘记统计是啥原因了（希望官方尽快能把错误码及对应的原因贴出来）
08-29
关于小程序隐私保护指引设置的公告
为规范开发者的用户个人信息处理行为，保障用户的合法权益，自2023年9月15日起，对于涉及处理用户个人信息的小程序开发者，微信要求，仅当开发者主动向平台同步用户已阅读并同意了小程序的隐私保护指引等信息处理规则后，方可调用微信提供的隐私接口。 开发者首先需确定小程序是否涉及处理用户个人信息，如涉及，则需配置用户隐私授权弹窗，且仅有在平台《小程序用户隐私保护指引》中声明了所处理的用户个人信息，才可以调用平台提供的对应接口或组件。（隐私相关接口） 隐私协议设置整体流程参考下方指引： 一、设置《小程序用户隐私保护指引》 开发者需在「小程序管理后台」设置《小程序用户隐私保护指引》 [图片] [图片] 二、填写《小程序用户隐私保护指引》 [图片] 只有在指引中声明所处理的用户个人信息，才可以调用平台提供的对应接口或组件。若未声明，对应接口或组件将无法调用成功。隐私接口与对应的处理的用户个人信息关系可见：小程序用户隐私保护指引内容介绍 三、配置用户隐私授权弹窗 微信提供了wx.onNeedPrivacyAuthorization(function callback) 接口，意为用户触发了一个微信侧未记录过同意的隐私接口调用，开发者可通过响应该事件选择提示用户的时机。此外，微信还提供了 wx.requirePrivacyAuthorize(Object object) 接口，可用于模拟触发 onNeedPrivacyAuthorization 事件。 小程序开发者可自行设计提示方式与触发时机，详细文档可查看隐私协议开发指南。 仅有在指引中声明所处理的用户个人信息，才可以调用平台提供的对应接口或组件。若未声明，对应接口或组件将直接禁用。 [图片] （参考样例） 四、如要进行代码提审，开发者需先自行声明是否有采集用户隐私，如有，则需在提审页面-「用户隐私保护设置」选择“采集用户隐私” [图片]
08-10
小程序与公众号下发统一消息接口调整通知
各位开发者： 下发统一消息 接口曾支持小程序与公众号统一的模板消息下发。由于小程序模板消息能力已于 2020 年 1 月下线（详见 小程序模板消息能力调整通知），当前下发统一消息能力仅限于公众号范畴。为了优化开发体验，避免多个同一功能接口对开发者造成困扰，微信团队将对下发统一消息接口进行如下调整： 自 2023 年 9 月 20 日起（以下简称 “生效期”），下发统一消息接口将被收回。自生效期起，调用下发统一消息接口将会显示 “45109” 错误码，无法下发小程序模板消息与公众号模板消息。如业务需下发公众号模板消息，请使用 公众号模板消息能力 满足能力需求，具体适配操作可参考下方适配指引。 注意点： 1、下发统一消息接口与公众号模板消息接口的差异对比如下： [图片] 2、本次接口回收仅影响使用旧的下发统一消息接口的方式下发模板消息的情况，不代表公众号模板消息能力被收回，使用 公众号模板消息接口 下发公众号模板消息的能力不受影响。例如小程序 A、B 当前正使用不同接口下发公众号模板消息： [图片] 3、小程序订阅消息能力不受本次接口回收的影响。 4、请已使用下发统一消息接口的开发者尽快适配。若 2023 年 9 月上旬仍未适配，官方团队将分阶段通过站内信、微信开发者工具通知等方式同步告知指引修改。 适配指引： [图片] 检查当前调用下发统一消息接口的用户身份信息： 1、若当前下发模板消息的用户身份信息为公众号 openid，按照 公众号模板消息接口文档 适配 2、若当前下发模板消息的用户身份信息为小程序 openid，检查 微信开放平台 是否将小程序与公众号绑定在同一个主体 a) 若小程序与公众号绑定在同一个主体下，按照 公众号模板消息接口文档 适配 b) 若小程序与公众号没有绑定在同一个主体下，先完成绑定工作，再按照 公众号模板消息接口文档 适配 微信团队 2023年8月22日
08-29
小程序用户头像昵称获取规则调整公告
更新时间：2022年11月9日由于 PC/macOS 平台「头像昵称填写能力」存在兼容性问题，对于来自低于2.27.1版本的访问，小程序通过 wx.getUserProfile 接口将正常返回用户头像昵称，插件通过 wx.getUserInfo 接口将正常返回用户头像昵称。 更新时间：2022年9月28日考虑到近期开发者对小程序用户头像昵称获取规则调整的相关反馈，平台将接口回收的截止时间由2022年10月25日延期至2022年11月8日24时。 调整背景在小程序内，开发者可以通过 wx.login 接口直接获取用户的 openId 与 unionId 信息，实现微信身份登录，支持开发者在多个小程序或其它应用间匿名关联同一用户。 同时，为了满足部分小程序业务中需要创建用户的昵称与头像的诉求，平台提供了 wx.getUserProfile 接口，支持在用户授权的前提下，快速使用自己的微信昵称头像。 但实践中发现有部分小程序，在用户刚打开小程序时就要求收集用户的微信昵称头像，或者在支付前等不合理路径上要求授权。如果用户拒绝授权，则无法使用小程序或相关功能。在已经获取用户的 openId 与 unionId 信息情况下，用户的微信昵称与头像并不是用户使用小程序的必要条件。为减少此类不合理的强迫授权情况，作出如下调整。 调整说明自 2022 年 10 月 25 日 24 时后（以下统称 “生效期” ），用户头像昵称获取规则将进行如下调整： 自生效期起，小程序 wx.getUserProfile 接口将被收回：生效期后发布的小程序新版本，通过 wx.getUserProfile 接口获取用户头像将统一返回默认灰色头像，昵称将统一返回 “微信用户”。生效期前发布的小程序版本不受影响，但如果要进行版本更新则需要进行适配。自生效期起，插件通过 wx.getUserInfo 接口获取用户昵称头像将被收回：生效期后发布的插件新版本，通过 wx.getUserInfo 接口获取用户头像将统一返回默认灰色头像，昵称将统一返回 “微信用户”。生效期前发布的插件版本不受影响，但如果要进行版本更新则需要进行适配。通过 wx.login 与 wx.getUserInfo 接口获取 openId、unionId 能力不受影响。「头像昵称填写能力」支持获取用户头像昵称：如业务需获取用户头像昵称，可以使用「头像昵称填写能力」（基础库 2.21.2 版本开始支持，覆盖iOS与安卓微信 8.0.16 以上版本），具体实践可见下方《最佳实践》。小程序 wx.getUserProfile 与插件 wx.getUserInfo 接口兼容基础库 2.27.1 以下版本的头像昵称获取需求：对于来自低版本的基础库与微信客户端的访问，小程序通过 wx.getUserProfile 接口将正常返回用户头像昵称，插件通过 wx.getUserInfo 接口将正常返回用户头像昵称，开发者可继续使用以上能力做向下兼容。对于上述 3，wx.getUserProfile 接口、wx.getUserInfo 接口、头像昵称填写能力的基础库版本支持能力详细对比见下表： [图片] *针对低版本基础库，兼容处理可参考 兼容文档 请已使用 wx.getUserProfile 接口的小程序开发者和已使用 wx.getUserInfo 接口的插件开发者尽快适配。小游戏不受本次调整影响。 最佳实践小程序可在个人中心或设置等页面使用头像昵称填写能力让用户完善个人资料： [图片] 微信团队 2022年5月9日
2022-11-09
新版公众号最快的拿历史文章连接的方法！最快最简单的？
新版公众号，如何在菜单栏设置跳转历史文章的入口 最快最简单的方法： 如果我们打开公众号的文章：https://mp.weixin.qq.com/s/wq2ehF4cCSALa7zrxHV7fg [图片] 在公众号网页后台菜单栏，加历史文章入口，子菜单内容选择“跳转网页”，页面地址为： MjM5MDU0ODIwMA== 换成你的！换在下面连接红色字 https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=xxxxxxxx== “xxxxxxxx”部分的内容，用第二步中网页里复制的14位代码替换，然后保存并发布。 MjM5MDU0ODIwMA== 换成你的！就OK
2022-10-09
地理位置接口新增与相关流程调整
一、地理位置接口新增说明 由于精确地理位置接口只允许部分类目的小程序申请使用，为了满足开发者在更多场景使用地理位置接口，自 2022 年 7 月 14 日起，新增获取模糊地理位置接口（wx.getFuzzyLocation）。同时为保障用户合法权益，该接口调用前需进行准入开通申请，该接口准入规则与 wx.chooseLocation 一致。 wx.getFuzzyLocation 接口说明： 1、该接口返回的是经过模糊处理的经纬度坐标； 2、该接口支持返回 wgs84 或 gcj02 两种类型的坐标； 3、该接口需要用户授权 scope.userFuzzyLocation。 二、app.json 的配置指引 为了开发者能够正常使用获取模糊地理位置等接口，以及后续对于代码提审环节的优化（见「三、地理位置接口使用流程」），自 2022 年 7 月 14 日起，开发者在使用地理位置相关接口时（共计 8 个，见表1），需要提前在 app.json 中进行配置。 1、需配置的接口列表 [图片] 表1 2、配置规则 1）在代码中使用的地理位置相关接口（共计 8 个，见表1），开发者均需要在 app.json 中 requiredPrivateInfos 配置项中声明，代码格式如下： [图片] 2）表1中模糊位置信息（序号1）和精确位置信息（序号2-5）是互斥的，即声明了模糊位置信息就无法声明精确位置信息。若同时声明模糊位置信息和精确位置信息，则在编译代码时出现错误； 3）注意：自 2022 年 7 月 14 日后发布的小程序，如果未在 app.json 中声明表1中的相关接口，则小程序调用这些接口（表1）时会出现错误，在 2022 年 7 月 14 日之前发布的小程序不受影响； 4）对于第三方开发者，需要在上传代码时通过参数在 ext.json 中声明其需调用的地理位置相关接口，配置规则和普通小程序的配置规则相同。 三、地理位置接口使用流程 自 2022 年 7 月 14 日起，开发者如需在最新版本发布后使用地理位置相关接口，除需完成接口权限开通外，还需在 app.json（或ext.json）配置环节，具体如下： 1、接口权限开通 以下 8 个接口需完成准入开通流程：wx.getFuzzylocation、wx.getLocation、wx.onLocationChange、wx.chooseAddress、wx.choosePoi、wx.chooseLocation、wx.startLocationUpdate、wx.startLocationUpdateBackground 1）普通开发者：需要在 “小程序管理后台 -「开发」-「开发管理」-「接口设置」” 中完成权限申请； 2）第三方开发者：可通过 apply_privacy_interface 接口完成权限申请。 2、app.json（或 ext.json）配置 1）普通开发者：需在 app.json 中声明其需调用的地理位置相关接口，具体配置流程见「二、app.json 的配置指引」； 2）第三方开发者：需要在上传代码时通过参数在 ext.json 中声明其需调用的地理位置相关接口（配置方式：可通过 commit 接口配置）。 同时，为了提升开发者体验，平台在代码提审环节会协助开发者对地理位置接口进行检测，如检测出代码中包含未完成准入开通的地理位置接口，平台将再次提醒开发者确认是否需使用相关接口。 1）普通开发者：若无需使用，开发者可在提审时确认不使用该接口，即可正常进行代码提审。小程序审核通过且新版本发布完成后，平台将对小程序确认不使用的接口关闭使用权限； 2）第三方开发者：若无需使用，可在提审时通过参数声明不使用该接口（声明方式：可通过 submit_audit 接口配置），即可正常进行代码提审，审核通过后发布上线，将对其声明不使用的接口关闭使用权限。 以上调整将仅对所有小程序生效。 微信团队 2022年6月1日
2022-07-14
手机号授权，有时需要验证码
正常逻辑，一段时间内未验证的手机号，就需要重新验证。
2020-10-16
小程序链接生成与使用规则调整公告
各位开发者： 为确保小程序链接合理使用，自 2022 年 4 月 11 日起，URL Scheme 和 URL Link （以下统称为 “链接” ）接口能力规则将进行以下调整： 每个 URL Scheme 或 URL Link 有效期最长 30 天，均不再支持永久有效的链接、不再区分短期有效链接与长期有效链接；链接生成后，若在微信外打开，用户可以在浏览器页面点击进入小程序。每个独立的链接被用户访问后，仅此用户可以再次访问并打开对应小程序，其他用户无法再次通过相同链接打开该小程序；单个小程序每天生成链接数（URL Scheme 和 URL Link 总数）上限为 50 万条。 对于上述 1，在开发层面，相应的服务端接口 urlscheme.generate 和 urllink.generate 将进行以下调整： is_expire 值固定为 true，可不再传该值，若传值为 false 也与 true 一样会生成到期失效链接；若 expire_type 传值为 0，需注意 expire_time 传值的时间戳不超过 30 天，即该参数最长传值有效期为 30 天；若 expire_type 传值为 1，需注意 expire_interval 传值范围为 [1, 30]，即该参数最长传值间隔天数为 30。详细对比见下表： [图片] 已使用该后端接口的开发者可以不进行任何修改，不会出现返回异常。若传值超过新规则合法值，或声明使用永久有效的链接，则均会被赋最长有效期值（30天）；需注意以上新规则生效后的有效期和访问规则变化。 在本次规则调整生效前已经生成的链接，也将自动生效以下规则： 如果有效期超过30天或长期会被降级为30天有效，开始时间从调整日期开始计算；在调整生效后，只能被1个用户访问。 当前已使用微信云开发 静态网站H5跳小程序 与 短信跳小程序、微信服务平台短信服务为用户提供链接的功能不受影响，但同样适用以上规则。 微信团队 2022年3月9日 相关QAQ1：每天下发的短信量级超过50万条，不够用怎么办？ A1：可将生成 scheme 的时机改为在用户打开 H5 时再生成： [图片]
2022-03-09
小程序用户信息相关接口调整公告
为进一步规范开发者调用用户信息相关接口或功能，提升用户体验，平台将对部分用户信息相关功能及接口进行调整，具体如下： 访问蓝牙、添加通讯录联系人、添加日历事件需要用户授权小程序处理用户的个人信息，需要获取用户明示同意，平台计划从2022年2月21日24时起对以下接口增加用户授权： 访问蓝牙：调用wx.openBluetoothAdapter、wx.createBLEPeripheralServer，需要授权scope.bluetooth添加通讯录联系人：调用wx.addPhoneContact，需要授权scope.addPhoneContact添加日历事件：调用wx.addPhoneRepeatCalendar、wx.addPhoneCalendar，需要授权scope.addPhoneCalendar开发者可在平台调整前提前增加使用 wx.getSetting 获取用户当前的授权状态的逻辑，若授权状态为false可以调用 wx.openSetting 打开设置界面，引导用户开启授权。 授权功能详细说明可参考：官方文档 <open-data>组件功能调整开发者在未获取用户明示同意的情况下通过 <open-data>组件 在小程序中展示用户个人信息，用户容易误以为自己的个人信息在未授权的情况下，被小程序获取。平台计划从2022年2月21日24时起回收通过<open-data>展示个人信息的能力，若小程序需收集用户昵称头像等信息，可以通过 头像昵称填写功能 功能进行收集。具体回收方式为： 头像展示 灰色头像用户昵称展示“微信用户”用户性别、地区、语言展示为为空（“”）小程序通过<open-data>展示群名称能力保留，平台会针对小程序生命周期内首次调用该组件展示群名称向用户提示：“群名称仅你可见，小程序无法获取。” 获取手机号能力安全升级此前小程序获取用户手机号是通过基础库接口直接获取encryptedData后进行解密。从基础库2.21.2版本起，回调参数中增加code参数，开发者获取code参数后，通过服务端auth.getPhoneNumber接口，使用code换取encryptedData，用于解密手机号。 为不影响开发者现有逻辑，原有基础库接口中的encryptedData参数依旧保留，建议开发者尽快使用新的方式获取用户手机号。 详细功能描述可参考 官方文档 微信团队 2021年12月27日
2021-12-27
自定义菜单设置小程序相关问题
1、自定义菜单怎么设置“跳转小程序”？ 跳转小程序：用户可将已发布且公众号已关联的小程序添加至一级菜单和二级菜单内，用户点击后即可跳转至小程序页面。 [图片] 温馨提示：备用网页是必填项，旧版微信客户端无法支持小程序，用户点击菜单时将会打开备用网页（认证的公众号可设置外链）。 2、设置菜单时提示“小程序未关联,菜单设置无效,请检查”？ 目前平台规定自定义菜单设置跳转的小程序都需要进行关联。设置自定义菜单时，请确认之前菜单设置的小程序是否全部已关联，若菜单内容存在未关联的小程序，则会出现提示“小程序未关联,菜单设置无效,请检查”。 [图片] 小程序关联方法：【小程序】->【小程序管理】->【添加】-【关联小程序】，公众号管理员扫码确认后，请输入小程序AppID，发送邀请后，需小程序管理员微信号确认成功即可绑定。 [图片] 温馨提示： 1）公众号可关联同一主体的10个小程序，不同主体的10个小程序；1个小程序可关联最多500个公众号。 2）公众号关联小程序不要求已发布，但未发布的小程序不可展示在公众号资料页、图文消息、自定义菜单等场景（设置未发布小程序后路径显示空白）。 [图片]
2020-06-05
微信公众平台用户信息相关接口调整公告
微信公众平台为开发者提供了用户授权登录功能及相关接口，以便开发者为用户提供便捷的使用体验。 根据相关法律法规，为进一步规范开发者调用用户信息相关接口或功能，保障用户合法权益，平台将对用户信息相关功能及接口进行调整，具体如下： 一、相关接口调整： 1、小程序与小游戏获取用户信息相关接口：不再返回用户性别及地区信息； 能力参考：小程序用户信息 、小游戏用户信息； 2、 公众号用户信息获取接口：不再返回用户性别及地区信息； 能力参考：公众号用户信息； 3、 Open平台授权接口：包括App授权登录、公众号H5授权登录、网站扫码授权登录，不再返回用户性别及地区信息； 能力参考：移动应用、网站应用、第三方平台； 本次改造调整生效后，所述涉及字段返回值将按如下规则生效： [图片] *注：字段名均保持不变，小程序与小游戏获取用户信息接口“用户性别”字段名为gender；Open 平台授权接口“用户性别”字段名为 sex 二、相关功能调整： 1、 公众号个性化菜单功能：不再提供基于性别/地区设置个性化菜单的能力； 能力参考：个性化菜单接口； 2、公众号后台粉丝列表：粉丝列表等不再展示用户的性别信息； 涉及功能页面：公众平台帐号管理后台-用户管理/留言管理/赞赏/视频弹幕/消息； 3、服务号粉丝列表筛选：不再提供基于地区筛选粉丝的能力； 涉及功能页面：公众平台帐号管理后台-对话能力-客户管理。 平台预计10月20日完成调整，请开发者及时进行调整适配，避免影响相关服务及用户体验。 微信团队 2021年09月26日
2021-09-28
小程序登录、用户信息相关接口调整更新说明
考虑到近期开发者对小程序登录、用户信息相关接口调整的相关反馈，为优化开发者调整接口的体验，《小程序登录、用户信息相关接口调整说明》公告中关于小程序回收 wx.getUserInfo 接口可获取用户授权的个人信息能力的截止时间调整至2021年4月28日24时。 在此期间，未调整的小程序可能会在微信开发者工具收到“平台 getUserInfo 接口能力调整，请尽快适配”提醒，建议开发者尽快适配 wx.getUserInfo 接口回收场景。 后续开发者可以使用 wx.getUserProfile 接口获取用户授权的个人信息。 关于本次调整的Q&A Q：已经在线上运行的小程序是否会受到影响？ A：不会。只有在2021年4月28日24时后，新提交审核发布的小程序调用 wx.getUserInfo 接口才会对齐该新的匿名表现。 Q：此次变更除 wx.getUserInfo 接口回收获取用户授权的个人信息能力还有什么变化？ A：通过 wx.login 接口获取的登录凭证可直接换取 unionid，无需再使用 wx.getUserInfo 接口来兼容获取 unionid。 Q：如何保证不同版本的基础库环境下都能正常获取用户信息？ A：2.10.4 以下基础库不支持使用 wx.getUserProfile 接口 获取用户信息，采用wx.getUserInfo 接口原有获取流程不受影响，兼容方式可参考 getUserProfile 接口文档中的示例代码 进行适配。 Q：PC版本小程序是否支持？ A：PC版本小程序暂未支持，可以直接使用 getUserProfile 接口文档中的示例代码 来判断及适配。 Q：wx.getSetting 接口返回是否有变化？ A：wx.getSetting 接口获取的 scope.userInfo 按照调用 wx.getUserInfo 接口返回，返回匿名数据 scope.userInfo 也为 true。此策略将于2021年4月28日24时后生效。 Q：wx.getUserProfile 接口返回的 iv、encryptedData 不可用？ A：wx.getUserProfile 接口返回的 iv、encryptedData 解密获取不到 unionid，请使用 wx.login 获取 unionid；wx.getUserProfile 接口在基础库2.16.0以下，无法获取 iv 和 encryptedData ，近期会灰度覆盖到 2.10.4。 Q：在适配过程中遇到其他问题？ A：可直接在 微信开放社区 搜索或发帖提问交流。
2021-04-15
云开发短信跳小程序（无代码版）教程
写在前面你可以通过视频演示的方式学习本教程，更加利于学习和理解。 [视频] 一、能力介绍境内非个人主体的认证的小程序，开通静态网站并后，可以免鉴权下发支持跳转到相应小程序的短信。短信中会包含支持在微信内或微信外打开的静态网站链接，用户打开页面后可一键跳转至你的小程序。 这个链接的网页在外部浏览器是通过 URL Scheme 的方式来拉起微信打开主体小程序的。 本教程将介绍如何操作开通CMS内容管理系统进而操作使用短信跳转小程序能力，全程无需写代码。 如果你想要进行自定义开发，可以参照自定义开发教程进行逐步实现。 二、操作步骤1.下载微信开发者工具访问微信公众平台工具下载页，按照自己的系统版本下载安装开发者工具。建议安装【开发版 Nightly Build】版本。 [图片] 2.打开开发者工具并登录安装完开发者工具后，打开工具会弹出二维码登录框。使用你目标小程序具有开发者权限的微信号扫码登录。 点击创建小程序+号，会有自动填写默认名称和目录，你可以直接默认，当然也可以自定义路径和名称；在APPID处填写你目标小程序的appid；后端服务选择【小程序·云开发】 [图片] 设置完毕后，点击新建，等待项目创建完成并全部加载完毕，最终效果如下： [图片] 3.开通云开发并创建环境如果你之前从未使用过云开发，点击左上角工具栏中的【云开发】按钮，会弹出一个窗口，显示如下： [图片] 此时只需要点击开通按钮，并在弹出提示框中同意【服务协议】，即可开通云开发。 注意这里的开通是创建一个新的腾讯云账号，如果你不想有太多的账号，可以选择通过已有的腾讯云账号开通，会绑定你目前的已有腾讯云账号，在统一管理和计费方面更加方便。 开通之后需要创建一个云开发环境，上一步同意之后会自动弹出创建窗口，效果如下： [图片] 这个时候，我们需要选择【按量付费：腾讯云账户扣款】，创建一个按量付费环境。 如果你之前已经使用过云开发了，建议可以创建一个新的环境。每一个微信小程序有两个免费环境，所以可以创建一个新的按量付费环境（有免费额度），或者2个环境转其中一个为按量付费环境（依然有免费额度）。 4.开通内容管理CMS我们创建一个按量计费环境之后，就进入这个环境的控制台了。我们只需要在顶部导航栏中选择【更多-内容管理】，进入内容管理开通页面，效果如下： [图片] 我们点击开通按钮，会弹出一个确认窗口，告诉我们是在环境中部署CMS应用，需要的资源。 [图片] 点击下一步后，会弹出管理员设置框，我们输入管理员的ID和密码即可。 [图片] 确定之后，内容管理就进入部署阶段，大约3分钟左右。完成之后效果如下： [图片] 我们只需要打开访问地址，通过浏览器进入内容管理平台，输入我们设置的密码就可以进入内容管理的主页了 [图片] 我们在上图所示页面，点击【创建新项目】，弹出创建项目信息框，随意输入名称和ID，比如在这里我们输入名称为「短信」，id为「SMS」 创建成功后会在我的项目中有对应名字的项目，如下图所示： [图片] 我们点击项目，进入项目的详情，如下图所示： [图片] 4.创建短信活动项目进入项目详情后，我们发现左侧栏会有【营销工具】，我们点击其中的营销活动 [图片] 在右上角点击【新建】按钮，创建一个新的活动，内容信息如下： 活动名：用来标记描述活动的名称。活动开启：是否开启活动，如果关闭活动，将不能通过页面拉起小程序。活动开闭时间：在开启时间内，才可以正常的拉起小程序。跳转中间页图片：建议海报，用于在跳转页中展示大图，可以不上传，会有默认样式。小程序跳转路径：已发布上线的小程序中页面路径，不填则默认首页。小程序跳转参数：附带路径的传入参数，一般配合小程序代码联动。我们创建一个活动后展示如上图所示 5.创建短信群发任务在左侧栏点击【群发短信】，进入群发短信页面，点击右上角新建群发，进入信息页。 [图片] 我们需要填写以下3个信息： 短信内容：实际发送时目标手机收到的短信内容，短信的前后缀无法自定义。手机号码包：发送的目标手机号，可以填写一个或多个手机号，用回车或者逗号分割。活动：选择刚才我们创建的活动。填写完毕后，我们点击【创建】按钮，系统会自动进行短信发送，此时我们便可以在目标手机号中收到短信了。 [图片] 在群发短信的页面列表中，可以查看短信的发送状态，以及每一个手机的接收情况。 6.测试短信跳转小程序点击短信的链接后，会跳转到浏览器打开链接，展示如下效果（左默认、右海报） [图片] 一般页面会自动拉起微信打开小程序，个别机型或浏览器有拦截会导致打开失败，需要手动点击按钮才可以打开。 7.投放外部平台短信的链接可以复制发布到其他外部平台。 8.查看短信监控图表打开微信开发者工具并登录，进入 云开发控制台 > 运营分析 > 监控图表 > 短信监控，即可查看短信监控曲线图、短信发送记录。 [图片] 总结短信发送能力的体验是每个有免费配额的环境首月100条，如有超过额度的需求可前往开发者工具-云开发控制台-对应按量付费环境-资源包-短信资源包，进行购买。如当前资源包无法满足需求也可通过云开发 工单 提交申请[图片]短信发送时间：8:00 - 22:00短信发送能力支持小程序和小游戏发送国内短信的号码是1069开头，尾数是运营商随机号的号码发送成功代表请求发送短信成功，短信异步下发，实际状态以运营商回执为准。没有发送成功的短信不计费,可用性参阅服务等级协议相同内容短信对同一个手机号，30 秒内发送短信条数不超过1条；对同一个手机号，1自然日内发送短信条数不超过10条CMS配置渠道投放、数据统计可参考官方文档
2021-04-07
云开发·云调用生成小程序码
云开发·云调用生成小程序码 小程序云开发已经支持云调用，开放了很多接口，一直想要的获取小程序码也支持了。这下轻量的小程序也可以有自定义小程序码的功能。 1. 需求 获得一个带参数的小程序码，传播出去以后，用户扫码进入指定页面，根据参数做不同的处理。本文只讲小程序码生成、存储、展示部分。参数处理不多介绍，可以查看 项目代码 了解更多。 2. 开通云开发 新建小程序可以从开发工具的云开发模板初始化项目，根据云开发操作指引新建项目即可。 但是这里有个问题，已发布小程序的页面才能生成小程序码。如果现有的小程序没有开通云开发，需要做以下几步： 开发工具开通云开发，设定云开发的环境； 将原来的代码（除了[代码]project.config.json[代码]以外的所有文件）放到新建的 [代码]miniprogram[代码] 目录； 新增 [代码]cloudfunctions[代码] 目录； [代码]app.json[代码] 新增配置 [代码]"cloud": true[代码]； [代码]project.config.json[代码] 配置 [代码]"miniprogramRoot":"miniprogram/"[代码] 和 [代码]"cloudfunctionRoot":"cloudfunctions/"[代码]； 修改小程序基础库版本，最低要 2.3.0 [代码]"libVersion": "2.3.0"[代码]。 3. 生成小程序码 下面可以开始写代码开发了，开始之前，建议先看完官方教程。特别是开发工具的使用步骤，开发和调试时如果遇到奇怪的问题，可以尝试重启开发工具、重装开发工具，也可以去微信开放社区发帖。(重启和重装都是我在社区中发现的答案，能解决各种不应该存在的问题)。 3.1 准备文件 在 [代码]cloudfunctions[代码]目录右键新建Node.js云函数 [代码]getqr[代码]。 生成小程序码需要单独指定权限。在 [代码]getqr[代码] 目录新建 [代码]config.json[代码] ，里面写以下内容： [代码]{ "permissions": { "openapi": [ "wxacode.getUnlimited" 小程序码的获取方式有三种，这里只用到了接口 getUnlimited，选择这个接口的原因是漂亮的圆形小程序码，数量无限制。具体区别可以去 获取小程序码官方文档查看详情。 正常情况下，这个时候云函数可以部署测试了。如果遇到部署不成功、各种权限问题，可以尝试本地部署上传所有文件、重启试试。 3.2 生成小程序码 生成小程序码的代码如下，可以指定页面和页面参数 [代码]scene[代码]，还有小程序码的尺寸。 注意这里的 [代码]scene[代码] 有限制: 最大32个可见字符； 只支持数字，大小写英文以及部分特殊字符：[代码]!#$&'()*+,/:;=?@-._~[代码]； 注意参数格式：下面实例代码生成小程序码后，扫码获得 [代码]pages/demo/demo?scene=id%3D6[代码] 。 [代码]try { const result = await cloud.openapi.wxacode.getUnlimited({ page: 'pages/demo/demo', scene: 'id=6', width: 240, console.log(result) return result } catch (err) { console.log(err) return err 直接调用，比服务端调用少了 access_token 参数。 3.3 上传到云存储 返回值中的 buffer 就是图片内容，直接上传到云存储： [代码]const uploadResult = await cloud.uploadFile({ cloudPath: 'shareqr/' + qr_name_hash + '.jpg', fileContent: result.buffer, 我在云存储新建了 [代码]shareqr[代码] 目录保存小程序码； 图片名根据参数取md5摘要； [代码]getUnlimited[代码] 返回的图像是 [代码]jpeg[代码] 格式，后缀硬编码写 [代码].jpg[代码]。 3.4 获取图片临时路径 直接上代码 [代码]getURLReault = await cloud.getTempFileURL({ fileList: [uploadResult.fileID] fileObj = getURLReault.fileList[0] return fileObj 3.5 直接从存云存储获取 生成过以后图片已经保存在云存储，用同样的参数第二次调用没必要再生成一次，去掉一次网络请求，可以节省不少时间。 前面说到文件名使用请求参数摘要，知道了目录和文件名，再加上文件bucket前缀就可以拼出来 [代码]fileID[代码]，用[代码]fileID[代码] 可以查询云存储的文件。 比如我刚刚生成的 fileID 是 [代码]cloud://dev-xxxx.8888-dev-xxxx/qr/44ea42f05091c3bec771123e6e8cd4c2.jpg[代码]， 前缀就是 [代码]cloud://dev-xxxx.8888-dev-xxxx/[代码]。再拼上目录、文件名、后缀就是 [代码]fileID[代码]。 注：此处的 [代码]fileID[代码]拼接方法并不是来自官方文档，只是在使用中发现这个前缀不会变。还需要官方解释说明[代码]fileID[代码]规则。 如果会改变，就需要再用云数据库存储[代码]fileID[代码]，更麻烦一些。 3.6 云函数完整代码 [代码]// 云函数入口文件 const cloud = require('wx-server-sdk'); const crypto = require('crypto'); const bucketPrefix = 'cloud://dev-xxxx.8888-idc-4d11a4-1257831628/qr/'; // env: 'dev-xxxx' // 云函数入口函数 exports.main = async (event, context) => { const full_path = event.page + '?' + event.scene; const qr_name_hash = crypto.createHash('md5').update(full_path).digest('hex'); const temp_id = bucketPrefix + qr_name_hash + '.jpg'; // return { // full_path, // qr_name_hash, // temp_id try { // 先尝试获取文件，存在就直接返回临时路径 let getURLReault = await cloud.getTempFileURL({ fileList: [temp_id] // return getURLReault; let fileObj = getURLReault.fileList[0]; if (fileObj.tempFileURL != '') { fileObj.fromCache = true; return fileObj; // 生成小程序码 const wxacodeResult = await cloud.openapi.wxacode.getUnlimited({ scene: event.scene, page: event.page, width: 280 //二维码的宽度，单位 px，最小 280px，最大 1280px // return wxacodeResult; if (wxacodeResult.errCode != 0) { // 生成二维码失败，返回错误信息 return wxacodeResult; // 上传到云存储 const uploadResult = await cloud.uploadFile({ cloudPath: 'qr/' + qr_name_hash + '.jpg', fileContent: wxacodeResult.buffer, // return uploadResult; if (!uploadResult.fileID) { //上传失败，返回错误信息 return uploadResult; // 获取图片临时路径 getURLReault = await cloud.getTempFileURL({ fileList: [uploadResult.fileID] fileObj = getURLReault.fileList[0]; fileObj.fromCache = false; // 上传成功，获取文件临时url，返回临时路径的查询结果 return fileObj; } catch (err) { return err 4. 小程序页面调用 调用页面就比较简单了，在小程序新建一个 [代码]pages/share/share[代码] 在 [代码]onLoad[代码] 函数调用云函数。 [代码]// 使用前记得先初始化云函数，一版放到 app.js onLaunch() 中 // wx.cloud.init({env: 'dev-8888'}) wx.cloud.callFunction({ name: 'getqr', data: { page: 'pages/demo/demo', scene: 'id=6', }).then(res => { console.log(res.result); if (res.result.status == 0) { _this.setData({ qr_url: res.result.tempFileURL }else{ wx.showToast({ icon: 'none', title: '调用失败', }).catch(err => { console.error(err); wx.showToast({ icon: 'none', title: '调用失败', 至此完整的调用过程已经全部完成，详细代码可以到 项目代码 查看。 代码中还对入口页面和share页面的参数做了包装，云函数可以直接使用，小程序可以稍做修改适应自己业务。 小程序云开发已经开放了很多功能，除了这次提到的生成小程序码，云调用还可以发送模板消息。有需要的开发者又一个理由可以快速上线新功能了。 云开发还开放了[代码]HTTP API[代码]，也就是用自己的服务器调用云函数。以前看完云开发介绍文章最大的疑问就是，你说的都很好，可是后台数据怎么管理呢？不能跟自己的服务器结合，只能放一些轻量的小程序。有了 [代码]HTTP API[代码] 以后就可以用自己的服务器做管理后台了。这时候你要问，都用上服务器了，还需要云开发做什么。首先，云开发免费；其次，免费功能已经够强，就差不能做Web管理后台了；最后，获取access_token（小程序及小游戏调用不要求IP地址在白名单内。）
2020-07-10
云开发-如何维护用户表？
需求：维护用户表，用于个人中心、排行、点赞、评论、等功能都需要用到。
实现思路：
通过 login 云函数获取 openid 存放到本地
在授权信息的时候去添加 userInfo
根据 openid 去查询是否已经存储
没有查到就是新用户进行添加并存放 id 到本地
查看后老用户就根据 id 进行更新信息
获取opneid云函数
login：
[代码]/**
* 这个示例将经自动鉴权过的小程序用户 openid 返回给小程序端
* event 参数包含小程序端调用传入的 data
exports.main = (event, context) => {
console.log(event)
console.log(context)
// 可执行其他自定义逻辑
// console.log 的内容可以在云开发云函数调用日志查看
// 获取 WX Context (微信调用上下文)，包括 OPENID、APPID、及 UNIONID（需满足 UNIONID 获取条件）
const wxContext = cloud.getWXContext()
return {
event,
openid: wxContext.OPENID,
appid: wxContext.APPID,
unionid: wxContext.UNIONID,
客户端调用login函数存放opneid到本地
[代码] wx.cloud.callFunction({
name: 'login',
}).then(res => {
wx.setStorageSync('openid', res.result.openid)
授权信息操作
[代码] db.collection('users').where({
_openid: wx.getStorageSync('openid') // 填入当前用户 openid
}).get().then(res => {
if (!res.data.length) {
// 新用户
db.collection('users').add({
data: {
userInfo: e.detail.userInfo
}).then(res => {
wx.setStorageSync('id', res._id)
} else {
// 老用户
db.collection('users').doc(wx.getStorageSync('id')).update({
data: {
userInfo: e.detail.userInfo
}).then(console.log)
用户表可以说是最重要的一张表，在这里主要就是注意一定要去重，所以我们在 add 之前还去查询是否是新用户的判断。当然这个逻辑代码可以写在客户端同样也可以写成云函数。
如有收获，记得点赞、收藏
如有疑问，欢迎进行留言讨论
2020-08-17
云开发短信跳小程序（自定义开发版）教程
写在前面如果你想要自主开发，但没有云开发相关经验，可以采用演示视频来学习本教程： [视频] 一、能力介绍境内非个人主体的认证的小程序，开通静态网站后，可以免鉴权下发支持跳转到相应小程序的短信。短信中会包含支持在微信内或微信外打开的静态网站链接，用户打开页面后可一键跳转至你的小程序。 这个链接的网页在外部浏览器是通过 URL Scheme 的方式来拉起微信打开主体小程序的。 总之，短信跳转能力的实现分为两个步骤，「配置拉起网页」和「发送短信」。本教程将介绍如何执行操作完成短信跳转小程序的能力。 如果你想要无需写代码就能完成短信跳转小程序的能力，可以参照无代码版教程进行逐步实现。 二、操作指引1、网页创建首先我们需要构建一个基础的网页应用，在任何代码编辑器创建一个 html 文件，在教程这里命名为 index.html 在这个 html 文件中输入如下代码，并根据注释提示更换自己的信息： window.onload = function(){ window.web2weapp.init({ appId: 'wx999999', //替换为自己小程序的AppID gh_ID: 'gh_999999',//替换为自己小程序的原始ID env_ID: 'tcb-env',//替换小程序底下云开发环境ID function: { name:'openMini',//提供UrlScheme服务的云函数名称 data:{} //向这个云函数中传入的自定义参数 path: 'pages/index/index.html' //打开小程序时的路径 以上引入的 web2weapp.js 文件是教程封装的有关拉起微信小程序的极简应用，我们直接引用即可轻松使用。 如果你想进一步学习和修改其中的一些WEB展示信息，可以前往 github 获取源码并做修改。 有关于网页拉起小程序的更多信息可以访问官方文档 如果你只想体验短信跳转功能，在执行完上述文件创建操作后，继续以下步骤。 2、创建服务云函数在上面创建网页的过程中，需要填写一个UrlScheme服务云函数。这个云函数主要用来调用微信服务端能力，获取对应的Scheme信息返回给调用前端。 我们在示例中填写的是 openMini 这个命名的云函数。 我们前往微信开发者工具，定位对应的云开发环境，创建一个云函数，名称叫做 openMini 。 在云函数目录中 index.js 文件替换输入以下代码： const cloud = require('wx-server-sdk') cloud.init() exports.main = async (event, context) => { return cloud.openapi.urlscheme.generate({ jumpWxa: { path: '', // 打开小程序时访问路径，为空则会进入主页 query: '',// 可以使用 event 传入的数据制作特定参数，无需求则为空 isExpire: true, //是否到期失效，如果为true需要填写到期时间，默认false expire_time: Math.round(new Date().getTime()/1000) + 3600 //我们设置为当前时间3600秒后，也就是1小时后失效 //无需求可以去掉这两个参数（isExpire，expire_time） 保存代码后，在 index.js 右键，选择增量更新文件即可更新成功。 接下来，我们需要开启云函数的未登录访问权限。进入小程序云开发控制台，转到设置-权限设置，找到下方未登录，选择上几步我们统一操作的那个云开发环境（注意：第一步配置的云开发环境和云函数所在的环境，还有此步操作的环境要一致），勾选打开未登录 [图片] 接下来，前往云函数控制台，点击云函数权限，安全规则最后的修改，在弹出框中按如下配置： [图片] 3、本地测试我们在本地浏览器打开第一步创建的 index.html ；唤出控制台，如果效果如下图则证明成功！ 需要注意，此处本地打开需要时HTTP协议，建议使用live server等扩展打开。不要直接在资源管理器打开到浏览器，会有跨域的问题！ [图片] 4、上传本地创建好的 index.html 至静态网站托管将本地创建好的 index.html 上传至静态网站托管，在这里静态托管需要是小程序本身的云开发环境里的静态托管。 如果你上传至其他静态托管或者是服务器，你仍然可以使用外部浏览器拉起小程序的能力，但会丧失在微信浏览器用开放标签拉起小程序的功能，也不会享受到云开发短信发送跳转链接的能力。 如果你的目标小程序底下有多个云开发环境，则不需要保证云函数和静态托管在一个环境中，无所谓。 比如你有A、B两个环境，A部署了上述的云函数，但是把 index.html 部署到B的环境静态托管中了，这个是没问题的，符合各项能力要求。只需要保证第一步 index.html 网页中的云开发环境配置是云函数所在环境即可。 部署成功后，你便可以访问静态托管的所在地址了，可以通过手机外部浏览器以及微信内部浏览器测试打开小程序的能力了。 5、短信发送云函数的配置在上面创建 openMini 云函数的环境中再来一个云函数，名字叫 sendsms 。 在此云函数 index.js 中配置如下代码： const cloud = require('wx-server-sdk') cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV, exports.main = async (event, context) => { try { const config = { env: event.env, content: event.content ? event.content : '发布了短信跳转小程序的新能力', path: event.path, phoneNumberList: event.number const result = await cloud.openapi.cloudbase.sendSms(config) return result } catch (err) { return err 保存代码后，在 index.js 右键，选择增量更新文件即可更新成功。 6、测试短信发送能力在小程序代码中，在 app.js 初始化云开发后，调用云函数，示例代码如下： App({ onLaunch: function () { wx.cloud.init({ env:"tcb-env", //短信云函数所在环境ID traceUser: true wx.cloud.callFunction({ name:'sendsms', data:{ "env": "tcb-env",//网页上传的静态托管的环境ID "path":"/index.html",//上传的网页相对根目录的地址，如果是根目录则为/index.html "number":[ "+8616599997777" //你要发送短信的目标手机，前面需要添加「+86」 },success(res){ console.log(res) 重新编译运行后，在控制台中看到如下输出，即为测试成功： [图片] 你会在发送的目标手机中收到短信，因为短信中包含「退订回复T」字段，可能会触发手机的自动拦截机制，需要手动在拦截短信中查看。 需要注意：你可以把短信云函数和URLScheme云函数分别放置在不同云开发环境中，但必须保证所放置的云开发环境属于你操作的小程序 另外，出于防止滥用考虑，短信发送的云调用能力需要真实小程序用户访问才可以生效，你不能使用云端测试、云开发JS-SDK以及其他非wx.cloud调用方式（微信侧WEB-SDK除外），会提示如下错误： [图片] 如果你想在其他处使用此能力，可以使用服务端API来做正常HTTP调用，具体访问官方文档 7、查看短信监控图表进入 云开发控制台 > 运营分析 > 监控图表 > 短信监控，即可查看短信监控曲线图、短信发送记录。 [图片] 三、总结短信跳转小程序核心是静态网站中配置的可跳转网页，外部浏览器通过URL Scheme 来实现的，这个方式不适用于微信浏览器，需要使用开放标签才可以URL Scheme的生成是云调用能力，需要是目标小程序的云开发环境的云函数中使用才可以。并且生成的URL Scheme只能是自己小程序的打开链接，不能是任意小程序（和开放标签的任意不一致）短信发送能力的体验是每个有免费配额的环境首月100条，如有超过额度的需求可前往开发者工具-云开发控制台-对应按量付费环境-资源包-短信资源包，进行购买。如当前资源包无法满足需求也可通过云开发 工单 提交申请[图片]短信发送也是云调用能力，需要真实小程序用户调用才可以正常触发，其他方式均报错返回参数错误，出于防止滥用考虑云函数和网页的放置可以不在同一个环境中，只需要保证所属小程序一致即可。（需要保证对应环境ID都能接通）如果你不需要短信能力，可以忽略最后两个步骤CMS配置渠道投放、数据统计可参考官方文档
2021-04-07
视频号关联小商店/小程序
更新：以下内容适用于微信8.0.6版本前的设备，微信8.0.6版本后的设备详见指引 一、视频号关联商店的作用 [图片][图片] 二、关联条件 「小商店」 当前视频号的超级管理员为小商店的超级管理员当前视频号的超级管理员为小商店的成员「小程序」 当前视频号和小程序的主体一致当前视频号和小程序的超级管理员一致视频号的管理员为小程序的推广者（可在mp后台交易组件模块设置）三、如何上架直播 请完成视频号关联小商店/小程序步骤后，前往查看视频号直播关联小商店/小程序指引 四、视频号关联小商店/小程序步骤的详细说明 [图片][图片] 更多资讯，欢迎到【交流专区】微信小商店主页发帖和寻找答案。
2021-06-11
03.getUserInfo和getUserProfile 对比
最近动态 wx.getUserProFile() 在2.16.0成功回调有iv、encryptedData，具体看这里https://developers.weixin.qq.com/community/develop/doc/000c04d0490118d8a6ebf675a56c00 调整背景 很多开发者在打开小程序时就通过组件方式唤起 getUserInfo 弹窗，如果用户点击拒绝，无法使用小程序，这种做法打断了用户正常使用小程序的流程，同时也不利于小程序获取新用户。详情可以点击官方调整链接(https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801) 调整前后API功能的对比[图片] [图片] 能力检测 两个前提条件： 1.开发者工具版本不低于 1.05.21030222.基础库版本不低于 2.10.4[图片] 代码片段: https://developers.weixin.qq.com/s/odMs3wmX7Ko3 测试过程 step1: 在开发工具设置清除全部缓存step2: 点击 getUserInfo 按钮，会弹出用户授权，允许后会得到这些信息，见截图[图片] step3: 在终端输入下面代码，也可以获取上面截图数据（今天还不到截止时间，还能获取完整的用户头像和昵称）wx.getUserInfo({ complete: (res) => { console.log(res) step4: 点击 getUserProfile 按钮，会弹出用户授权，允许后会得到这些信息，见截图（只有用户昵称和头像信息）[图片] step5: 通用在终端输入下面代码，获取不到任何信息，符合`若开发者需要获取用户的个人信息（头像、昵称、性别与地区），可以通过wx.getUserProfile接口进行获取，且开发者每次通过该接口获取用户个人信息均需用户确认`wx.getUserProfile({ complete: (res) => { console.log(res) step6: 可以重复点击 getUserInfo 按钮和 getUserProfile 按钮进行测试。功能对比讲解 1.4月13日前未发布的，wx.getUserInfo 能力 wx.getUserInfo(Object object) 会返回 encryptedData、signature、rawData，通过将返回的数据传递给服务器，服务端能解析出用户的身份标识，即 unionId(unionId 获取机制：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/union-id.html) 【对我们业务来说】 从 wx.getUserInfo 就是要两样东西：unionId和用户信息（头像和昵称）。 但从 2021年2月23日起，可以通过 wx.login 接口获取的登录凭证可直接换取 unionID，可以替代一部分wx.getUserInfo 的功能了。 2.新增 getUserProfile 能力 wx.getUserProfile 能获取到头像和昵称，可以替代 wx.getUserInfo 的另外一部分功能。 3.小结 从这里是不是可以得出，wx.login + wx.getUserProfile 基础可以替代之前的 4月13日前未发布的，wx.getUserInfo 能力。其实不然，如果真是这样的，官方是不是没必要这样搞，咱们接着看。 4.wx.getUserInfo 和 wx.getUserProfile 区别 1.功能上是 wx.getUserInfo 不在返回用户授权的头像昵称，只返回匿名信息，但 wx.getUserProfile 会返回用户授权的头像昵称。2.wx.getUserInfo 授权成功后，当下次调用时，可以直接获取授权成功返回数据，不需要每次都需要用户确认，但 wx.getUserProfile 每次都需要用户确认允许后才能拿到用户信息3.对于业务来说，可以通过 wx.getUserProfile 获取用户信息和昵称后，要存在自己服务器，不能像之前那样每次都通过 wx.getUserInfo 方式获取，否则体验会比较差疑问 1.4月13日后发布的新版本小程序，如果用户未更新到新版本，此时调用 wx.getUserInfo 会不会返回用户授权的头像昵称（如果不确定，业务可能需要兼容处理）2.4月13日后发布的新版本小程序，用户更新到新版本，调用 wx.getUserInfo 返回匿名的头像昵称支持服务器解密吗？ 常见问题汇总 1.wx.canIUse 判断getUserProfile结果是false，可以通过直接判断 wx.getUserProfile 即可，类似问题可以查看官方知识库（https://developers.weixin.qq.com/community/develop/doc/000cac40cf0eb8d3e429647c351c09?_at=1614912876047）
2021-04-02
教你怎么监听小程序的返回键
更新：2020年7月28日08:51:11 基础库2.12.0起，可以调用wx.enableAlertBeforeUnload监听原生右上角返回、物理返回以及wx.navigateBack时弹框提示 AIP详情请看： https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.enableAlertBeforeUnload.html //======================================== 怎么监听小程序的返回键？ 应该有很多人想要监听用户的这个动作吧，但是很遗憾，小程序不会给你这个API的，那是不是就没辙了？ 幸好我们还可以自定义导航栏，这样一来我们就可以监听用户的这一动作了。 什么？这你已经知道啦？ 那好咱们就不说自定义导航栏的返回监听了，说一下物理返回和左滑？右滑？(不管了，反正是滑)返回上一页怎么监听。 监听物理返回 首先说一下这个监听方法的缺点，虽说是监听，但是还是无法真正意义上的监听并拦截来阻止页面跳转，页面还是会返回上一页，而后重新载入刚刚的页面，如果这不是你想要的，那可以不用往下看了 其次说一下用到什么东西: wx.onAppRoute、wx.showModal 最后是一些主要代码: 重写wx.showModal，主要是加个confirmStay参数和使wx.showModal Promise化 [代码]const { showModal } = wx; Object.defineProperty(wx, 'showModal', { configurable: false, // 是否可以配置 enumerable: false, // 是否可迭代 writable: false, // 是否可重写 value(...param) { return new Promise(function (rs, rj) { let { success, fail, complete, confirmStay } = param[0] param[0].success = (res) => { res.navBack = (res.confirm && !confirmStay) || (res.cancel && confirmStay) wx.setStorageSync('showBackModal', !res.navBack) success && success(res) rs(res) param[0].fail = (res) => { fail && fail(res) rj(res) param[0].complete = (res) => { complete && complete(res) (res.confirm || res.cancel) ? rs(res) : rj(res) return showModal.apply(this, param); // 原样移交函数参数和this }.bind(this)) 使用wx.onAppRoute实现返回原来的页面 [代码]wx.onAppRoute(function (res) { var a = getApp(), ps = getCurrentPages(), t = ps[ps.length - 1], b = a && a.globalData && a.globalData.pageBeforeBacks || {}, c = a && a.globalData && a.globalData.lastPage || {} if (res.openType == 'navigateBack') { var showBackModal = wx.getStorageSync('showBackModal') if (c.route && showBackModal && typeof b[c.route] == 'function') { wx.navigateTo({ url: '/' + c.route + '?useCache=1', b[c.route]().then(res => { if (res.navBack){ a.globalData.pageBeforeBacks = {} wx.navigateBack({ delta: 1 }) } else if (res.openType == 'navigateTo' || res.openType == 'redirectTo') { if (!a.hasOwnProperty('globalData')) a.globalData = {} if (!a.globalData.hasOwnProperty('lastPage')) a.globalData.lastPage = {} if (!a.globalData.hasOwnProperty('pageBeforeBacks')) a.globalData.pageBeforeBacks = {} if (ps.length >= 2 && t.onBeforeBack && typeof t.onBeforeBack == 'function') { let { onUnload } = t wx.setStorageSync('showBackModal', !0) t.onUnload = function () { a.globalData.lastPage = { route: t.route, data: t.data onUnload() t.onBeforeBack && typeof t.onBeforeBack == 'function' && (a.globalData.pageBeforeBacks[t.route] = t.onBeforeBack) 改造Page [代码]const myPage = Page Page = function(e){ let { onLoad, onShow, onUnload } = e e.onLoad = (() => { return function (res) { this.app = getApp() this.app.globalData = this.app.globalData || {} let reinit = () => { if (this.app.globalData.lastPage && this.app.globalData.lastPage.route == this.route) { this.app.globalData.lastPage.data && this.setData(this.app.globalData.lastPage.data) Object.assign(this, this.app.globalData.lastPage.syncProps || {}) this.useCache = res.useCache res.useCache ? reinit() : (onLoad && onLoad.call(this, res)) e.onShow = (() => { return function (res) { !this.useCache && onShow && onShow.call(this, res) e.onUnload = (() => { return function (res) { this.app.globalData = Object.assign(this.app.globalData || {}, { lastPage: this onUnload && onUnload.call(this, res) return myPage.call(this, e) 在需要监听的页面加个onBeforeBack方法，方法返回Promise化的wx.showModal [代码]onBeforeBack: function () { return wx.showModal({ title: '提示', content: '信息尚未保存，确定要返回吗？', confirmStay: !1 //结合content意思，点击确定按钮，是否留在原来页面，confirmStay默认false 运行测试，Oj8K 是不是很简单，马上去试试水吧，效果图就不放了，静态图也看不出效果，动态图懒得弄，想看效果的自己运行代码片段吧 https://developers.weixin.qq.com/s/hc2tyrmw79hg
2020-07-28
微信小程序UI组件库合集
UI组件库合集，大家有遇到好的组件库，欢迎留言评论然后加入到文档里。 第一款： 官方WeUI组件库，地址 https://developers.weixin.qq.com/miniprogram/dev/extended/weui/ 预览码： [图片] 第二款： ColorUI：地址 https://github.com/weilanwl/ColorUI 预览码： [图片] 第三款： vantUI（又名：ZanUI）：地址 https://youzan.github.io/vant-weapp/#/intro 预览码： [图片] 第四款： MinUI： 地址 https://meili.github.io/min/docs/minui/index.html 预览码： [图片] 第五款： iview-weapp：地址 https://weapp.iviewui.com/docs/guide/start 预览码： [图片] 第六款： WXRUI：暂无地址 预览码： [图片] 第七款： WuxUI：地址https://www.wuxui.com/#/introduce 预览码： [图片] 第八款： WussUI：地址 https://phonycode.github.io/wuss-weapp/quickstart.html 预览码： [图片] 第九款： TouchUI：地址 https://github.com/uileader/touchwx 预览码: [图片] 第十款： Hello UniApp： 地址 https://m3w.cn/uniapp 预览码： [图片] 第十一款： TaroUI：地址 https://taro-ui.jd.com/#/docs/introduction 预览码： [图片] 第十二款： Thor UI： 地址 https://thorui.cn/doc/ 预览码： [图片] 第十三款： GUI：https://github.com/Gensp/GUI 预览码： [图片] 第十四款： QyUI：暂无地址 预览码： [图片] 第十五款： WxaUI：暂无地址 预览码： [图片] 第十六款： kaiUI： github地址 https://github.com/Chaunjie/kai-ui 组件库文档：https://chaunjie.github.io/kui/dist/#/start 预览码： [图片] 第十七款： YsUI：暂无地址 预览码： [图片] 第十八款： BeeUI：git地址 http://ued.local.17173.com/gitlab/wxc/beeui.git 预览码： [图片] 第十九款： AntUI： 暂无地址 预览码： [图片] 第二十款： BleuUI：暂无地址 预览码： [图片] 第二十一款： uniydUI：暂无地址 预览码： [图片] 第二十二款： RovingUI：暂无地址 预览码： [图片] 第二十三款： DojayUI：暂无地址 预览码： [图片] 第二十四款： SkyUI：暂无地址 预览码： [图片] 第二十五款： YuUI：暂无地址 预览码： [图片] 第二十六款： wePyUI：暂无地址 预览码： [图片] 第二十七款： WXDUI：暂无地址 预览码： [图片] 第二十八款： XviewUI：暂无地址 预览码： [图片] 第二十九款： MinaUI：暂无地址 预览码： [图片] 第三十款： InyUI：暂无地址 预览码： [图片] 第三十一款： easyUI：地址 https://github.com/qq865738120/easyUI 预览码: [图片] 第三十二款 Kbone-UI： 地址 https://wechat-miniprogram.github.io/kboneui/ui/#/ 暂无预览码 第三十三款 VtuUi： 地址 https://github.com/jisida/VtuWeapp 预览码： [图片] 第三十四款 Lin-UI 地址：http://doc.mini.talelin.com/ 预览码： [图片] 第三十五款 GraceUI 地址： http://grace.hcoder.net/ 这个是收费的哦～ 预览码： [图片] 第三十六款 anna-remax-ui npm：https://www.npmjs.com/package/anna-remax-ui/v/1.0.12 anna-remax-ui 地址： https://annasearl.github.io/anna-remax-ui/components/general/button 预览码 [图片] 第三十七款 Olympus UI 地址：暂无 网易严选出品。 预览码 [图片] 第三十八款 AiYunXiaoUI 地址暂无 预览码 [图片] 第三十九款 visionUI npm：https://www.npmjs.com/package/vision-ui 预览码： [图片] 第四十款 AnimaUI(灵动UI) 地址：https://github.com/AnimaUI/wechat-miniprogram 预览码： [图片] 第四十一款 uView 地址：http://uviewui.com/components/quickstart.html 预览码： [图片] 第四十二款 firstUI 地址：https://www.firstui.cn/ 预览码： [图片]
01-10
未完成微信认证的组织类型小程序怎么注销？
目前小程序组织类型的帐号仅支持有对公账户的注销，用户需要继续完成认证后操作注销。 更多小程序注销相关内容（包含个人类型、组织类型、政府无对公账户类型）可参考：https://kf.qq.com/faq/181226yieaEv181226r6nuMr.html
2019-10-25
小程序登录、用户信息相关接口调整说明
公告更新时间：2021年04月15日考虑到近期开发者对小程序登录、用户信息相关接口调整的相关反馈，为优化开发者调整接口的体验，回收wx.getUserInfo接口可获取用户授权的个人信息能力的截止时间由2021年4月13日调整至2021年4月28日24时。为优化用户的使用体验，平台将进行以下调整： 2021年2月23日起，若小程序已在微信开放平台进行绑定，则通过wx.login接口获取的登录凭证可直接换取unionID2021年4月28日24时后发布的小程序新版本，无法通过wx.getUserInfo与<button open-type="getUserInfo"/>获取用户个人信息（头像、昵称、性别与地区），将直接获取匿名数据（包括userInfo与encryptedData中的用户个人信息），获取加密后的openID与unionID数据的能力不做调整。此前发布的小程序版本不受影响，但如果要进行版本更新则需要进行适配。新增getUserProfile接口（基础库2.10.4版本开始支持），可获取用户头像、昵称、性别及地区信息，开发者每次通过该接口获取用户个人信息均需用户确认。具体接口文档：《getUserProfile接口文档》由于getUserProfile接口从2.10.4版本基础库开始支持（覆盖微信7.0.9以上版本），考虑到开发者在低版本中有获取用户头像昵称的诉求，对于未支持getUserProfile的情况下，开发者可继续使用getUserInfo能力。开发者可参考getUserProfile接口文档中的示例代码进行适配。请使用了wx.getUserInfo接口或<button open-type="getUserInfo"/>的开发者尽快适配。开发者工具1.05.2103022版本开始支持getUserProfile接口调试，开发者可下载该版本进行改造。 小游戏不受本次调整影响。 一、调整背景很多开发者在打开小程序时就通过组件方式唤起getUserInfo弹窗，如果用户点击拒绝，无法使用小程序，这种做法打断了用户正常使用小程序的流程，同时也不利于小程序获取新用户。 二、调整说明通过wx.login接口获取的登录凭证可直接换取unionID 若小程序已在微信开放平台进行绑定，原wx.login接口获取的登录凭证若需换取unionID需满足以下条件： 如果开发者帐号下存在同主体的公众号，并且该用户已经关注了该公众号如果开发者帐号下存在同主体的公众号或移动应用，并且该用户已经授权登录过该公众号或移动应用2月23日后，开发者调用wx.login获取的登录凭证可以直接换取unionID，无需满足以上条件。 回收wx.getUserInfo接口可获取用户个人信息能力 4月28日24时后发布的新版本小程序，开发者调用wx.getUserInfo或<button open-type="getUserInfo"/>将不再弹出弹窗，直接返回匿名的用户个人信息，获取加密后的openID、unionID数据的能力不做调整。 具体变化如下表： [图片] 即wx.getUserInfo接口的返回参数不变，但开发者获取的userInfo为匿名信息。 [图片] 此外，针对scope.userInfo将做如下调整： 若开发者调用wx.authorize接口请求scope.userInfo授权，用户侧不会触发授权弹框，直接返回授权成功若开发者调用wx.getSetting接口请求用户的授权状态，会直接读取到scope.userInfo为true新增getUserProfile接口 若开发者需要获取用户的个人信息（头像、昵称、性别与地区），可以通过wx.getUserProfile接口进行获取，该接口从基础库2.10.4版本开始支持，该接口只返回用户个人信息，不包含用户身份标识符。该接口中desc属性（声明获取用户个人信息后的用途）后续会展示在弹窗中，请开发者谨慎填写。开发者每次通过该接口获取用户个人信息均需用户确认，请开发者妥善保管用户快速填写的头像昵称，避免重复弹窗。 插件用户信息功能页 插件申请获取用户头像昵称与用户身份标识符仍保留功能页的形式，不作调整。用户在用户信息功能页中授权之后，插件就可以直接调用 wx.login 和 wx.getUserInfo 。 三、最佳实践调整后，开发者如需获取用户身份标识符只需要调用wx.login接口即可。 开发者若需要在界面中展示用户的头像昵称信息，可以通过<open-data>组件进行渲染，该组件无需用户确认，可以在界面中直接展示。 在部分场景（如社交类小程序）中，开发者需要在获取用户的头像昵称信息，可调用wx.getUserProfile接口，开发者每次通过该接口均需用户确认，请开发者妥善处理调用接口的时机，避免过度弹出弹窗骚扰用户。 微信团队 2021年4月15日
2021-04-15
为什么公众号没有留言功能？
根据相关法律法规要求，我们暂时调整了留言开通规则。之前已开通留言功能的帐号可以继续使用，未开通留言功能的帐号暂不支持开通。请您了解，感谢您的支持。 温馨提示：在已开通留言功能的前提下，群发后若想要开启留言，在公众号左侧点击【功能】->【留言管理】，选择对应的文章在右侧“打开/关闭”留言。若是没有“留言管理”则是不满足开通条件哦，请了解。 [图片]
2020-09-01
天天爆单、月入千万，2021小程序10大突破口你知道几个？
回顾 2020，微信小程序除了日活 4 亿外，全年 GMV 同比增长还超过了 100%，更有意思的是：商家自营 GMV 同比提升达到了恐怖的 255%。 这个已经上线 3 年的产品，依旧具有极大的增长潜力和市场空间。 今天，我们特意盘了盘有赞去年打通、上线的 10 个微信小程序关键功能。 温故知新，不断反思尝试，才能打破僵局。也许，这当中就藏着你 2021 年新的突破口！ 内容概览： 小程序可生成链接：流量或将翻倍 智能商品悬浮窗：2 个月 5 千万 GMV 智能进店有礼：笔单价提升 11% 智能多人拼团：成团率提高 20% 小程序直播：业绩、拉新的双向优势 一键分享朋友圈：引流转化更直接 附近的小程序：隐藏的外来流量 店铺装修：打造品牌调性 微信物流助手：强大伙伴为你分忧 试用小程序：0 费用、快转正 小程序可生成链接，流量或将翻倍众所周知，过去小程序的流量虽然庞大，但仍受到微信生态和仅支持二维码分享等条件的限制。 小程序支持生成链接后，这一局面被彻底颠覆。从网页、短信、社交 App……凡是你能想到一切分享方式，几乎都能得到实现。 有人预测，2021 年小程序的流量或将因此再翻一倍。 更关键的是，二维码的打开步骤是「识别+打开」两步，而链接只有一步，触达新流量后的打开率也会大大提升。 [图片]这么好的机会摆在面前，你难道想错过吗？ 使用路径：有赞店铺后台-应用-配套工具-链接生成工具（小程序）。 智能商品悬浮窗，2 个月 5 千万 GMV大批流量涌入小程序后，光停留在逛店、浏览可不够，还得考虑更重要的转化、成交。除了耗时耗力的营销玩法外，就没有轻松一点的法子吗？ 于是，智能商品悬浮窗应运而生。 由 AI 智能算法自动挑选出精选好货、人气爆品等最吸引人的内容，通过「用户浏览足迹」、「热门商品排行榜」、「为你推荐」等形式在首页、详情页等浏览量最集中的核心链路进行展示。 据统计，这一功能在短短 2 个月内，就创造了 5000 万的 GMV [图片] 所以说，明明智能推荐场景简单、高效，何必白白放过流量，把客户让给别人呢？ 使用路径：应用中心-个性化推荐-智能商品悬浮窗。 智能进店有礼，笔单价提升 11%为了让新客多次复购，很多商家都爱发优惠券。可是，统一、粗放地发券，既耗费成本，也不能差异化地刺激下单，业绩提升还不明显。 而有了智能进店有礼后，状况就不同了： 可以借助 AI 智能算法，识别客户画像；根据画像，判断出客户历史浏览数据、购买偏好、消费水平等；再结合店铺行业、经营业绩等，定向给不同客户发放不同折扣的优惠券；运营设置好后，折扣会自动上下浮动。[图片] 这么一来，商家便可以省下不少成本：适当减少给部分折扣敏感度低的客户过多的优惠，且仍然能促使其成交。 另外，在客单价的提升也相当明显，比例可以达到 11%。 使用路径：有赞后台-应用-客群维护-进店有礼（原发券宝）。 智能多人拼团，成团率提高 20%在私域社交场景里，团购是非常给力的裂变手段。 可如果完全依靠运营经验、感觉来设置，往往花了大把的钱，拉来的可能都是只想着抢特价的低质量新客。 这时候，就该多用用新上线的智能多人拼团：会根据老客画像、店铺行业与经营状况，为商家提供拼团活动的建议值。 [图片] 据统计，商家采用智能拼团后，平均成团率足足提高了 20%。 以前要花半小时甚至几小时来思考的拼团方案，现在 1 分钟甚至几分钟就能全搞定，还不用起来。 使用路径：有赞后台-应用-多人拼团（系统会自动为你推荐最佳设置）。 小程序直播，业绩、拉新的双向优势说到去年最火的带货模式，绝对非直播莫属。如今疫情反复，线下客源又面临了大幅减少的困境，直播再一次成为焦点。 那么，对于想构建私域流量来说，趁机把老客聚拢到小程序里来，就有了一定规模的初期粉丝，观看量和业绩就有了保证，还有利于持续触达、刺激复购和拉新裂变。 [图片] 特别是在直播间推出爆款单品、引来大批订单时，小程序商城的访问量、加购量都能翻倍式上涨。 更重要的是，用小程序观看直播，不用单独下 App，转发分享更容易带来新粉丝。 使用路径：有赞后台-店铺-微信小程序-小程序直播。 一键分享朋友圈，引流转化更直接既然要做拉新、做直播，就一定不能放过朋友圈这个特大的流量圈子。 之前，把小程序分享到朋友圈的步骤相当麻烦。现在，已经支持一键转发： 点击程序码右上角的「…」按钮；直接分享到朋友圈。[图片] 这一优化最大的好处是： 过去忠诚低一般的老客可能因操作麻烦而不愿转发，现在能把这一大批人都争取过来；让他们养成习惯后，你就等于拥有了一支免费的推广团队。 使用路径：有赞后台-店铺-小程序店铺（小程序升级到最新版即可）。 附近的小程序，隐藏的外来流量在小程序的商家群体中，线下门店占了相当大的比重。想要比同行更快一步、脱颖而出，那就要用好微信内的每一个流量入口，像「附近的小程序」就是非常好的曝光渠道。 商家只要有意识地去推广这个「隐藏」入口，涌入的新流量也会相当可观： 线上：在朋友圈、社群分享小程序时，不定期介绍此功能，通过转发、裂变，完成对陌生消费者的习惯教育和培养。线下：在门店周边摆放易拉宝、投广告等形式，让初次不想到店的新客、或周边的意向客群在线上浏览、下单。[图片]多一个这样的低成本流量渠道，就多省下一笔推广费用。只要试一试，你就知道它管不管用了。 使用路径：有赞店铺后台-店铺-微信-微信小程序-附近小程序。 店铺装修，打造品牌调性品牌调性，是与老客产生深度情感链接的一大关键，而店铺装修就是其中必不可少的一环。 小程序的店铺装修新功能上线后，更特色的导航，更快捷的跳转……都能给客户带来不一样的舒适体验。 [图片] 除了这些，还支持在转发海报、微信小程序时，可以分享大图，方便商家添加更多个性化内容。 [图片]只要品牌够有调性，吸引来的新客就够精准，还怕业绩不上涨？ 使用路径：有赞后台-店铺管理-全店装修/微页面。 微信物流助手，强大伙伴为你分忧一家店铺能否让老客持续复购，不单单靠业绩说话，售后同样重要。 小程序接入免费微信物流助手后，商家们便能任意选择最快捷的渠道。用最低的成本，发最快的货！ 目前已支持顺丰速运、圆通速递、中通快递、申通快递、韵达快递等众多物流公司。 [图片] 使用路径：有赞后台-应用-配套工具-微信物流助手。 试用小程序：0 费用，快转正讲到这里，可能有些想入局的新商家还会犹豫。 问题在于，微信小程序的势头虽然猛，但也有几个难点： 自己开发难，流程长，还得花不少钱；运营缺经验，老客没使用习惯，担心效果不佳。现在，这些问题一招就能解决：试用一遍就行了。 最近，有赞打通了试用小程序功能：1 分钟内就能快速得到一个体验小程序，时间长达 14 天，试用过程中还可随时转正。 另外，借助有赞完成试用、转正流程，还能免去认证服务费。 开通路径：有赞后台-店铺-小程序店铺-微信。 我们的小建议其实，开通小程序的理由千千万，绝不止这 10 条。 像在微信公开课上还提到的一个点：不断拓宽小程序场景，为小程序生态持续注入活水，大方向是视频号、直播与小程序的互通，形成交易转化闭环。 要知道，视频号的日活也已经达到 3.5 亿，直播的热度更是一直未退，这当中的可能性太多太多了。 但要获得这一切的前提，还是抢先一步、行动起来。成功，永远是留给行动者的！ 感兴趣的商家，可点击 → 免费试用有赞店铺~
2021-02-26
实战丨Halo-轻松部署属于自己的博客系统
Halo 是一款现代化的个人独立博客系统，给习惯写博客的同学多一个选择。
云托管（Tencent CloudBase Run）是 云开发（Tencent CloudBase，TCB）提供的新一代云原生应用引擎（App Engine 2.0），支持托管任意容器化应用。
使用云托管部署博客系统
开通 CloudBase 云开发环境
包年包月环境无法开通云托管。
来源为“微信小程序”的环境暂不支持开通云托管。
第 1 步：开通
登录 云开发 CloudBase 控制台，选择一个环境，进入云托管管理页面，单击「立即开通」。
第 2 步：配置云托管
云托管当前仅开放上海地域，更多地域将陆续开放。
云托管网络
网络设置包括 私有网络 VPC 和 子网。以环境为维度，云托管中创建的所有服务，都将部署在这同一个 VPC 之中，且成功开通云托管后不支持更换网络设置。
网络设置分为如下两种模式：
系统默认配置
云托管将为您自动新建一个 VPC 和子网，并将其绑定您当前的云开发环境。
后续您在当前环境下的云托管中创建的所有服务，都将被部署到这个 VPC 和子网中。
此过程无需您手动进行任何设置。后续您可以在 私有网络控制台 中查看并管理这个由云托管自动创建的 VPC 及子网，也可以将更多云资源（例如云服务器，云数据库等）部署在这个 VPC 之内，以便这些云资源进行互动。
自定义配置
如果您之前已经创建过私有网络 VPC 和子网，并在其中已经部署有其他云资源（例如云服务器、云数据库等），且需要您的云托管应用与这些已存在的云资源进行互动，则您可以选择「自定义配置」，然后选择具体的 VPC 和子网。
VPC 只能选择一个，子网支持选择多个。
单击「提交」，状态变为开通中，请等待数秒。
开通成功后，您将自动跳转到云托管的服务列表页面。
至此您已经成功开通后云托管服务，您可以单击「新建服务」开始部署我们的管理系统。
单击「新建服务」，填写服务名称、备注信息（选填）后，单击「提交」
封装halo博客系统压缩包
1、下载拉取halo博客系统
halo博客系统：https://github.com/halo-dev/halo
根据情况修改mysql 和 redis等配置
2、本地打包jar
使用intellij idea 、eclipse 等工具打包工程。
若依属于多模块的项目,java的话，直接用生成的jar包 来做dockerfile吧。编译走本地，这样会方便点。PS：因为Java需要很多依赖，很多开发者习惯拉取到本地之类的。
3、编写dockerfile文件
[代码]# Use java 8
FROM java:8
ADD target/*.jar /app.jar
# 暴露端口
EXPOSE 80
ENTRYPOINT ["java","-jar","/app.jar"]
4、文件夹或zip文件结构
单击「新建版本」，上传封装的文件夹或zip压缩包
等待部署完成后，单击上方「服务配置」，单击「路径」，修改为[代码]/[代码]
返回至版本列表，单击「访问服务」，即可跳转至若依管理系统
[图片][图片][图片][图片]
以上便是使用云托管快速部署halo博客系统的方法，整个部署过程简单快捷，快来一起试一试吧！
云开发（Tencent CloudBase，TCB）是腾讯云提供的云原生一体化开发环境和工具平台，为开发者提供高可用、自动弹性扩缩的后端云服务，包含计算、存储、托管等serverless化能力，可用于云端一体化开发多种端应用（小程序，公众号，Web 应用，Flutter 客户端等），帮助开发者统一构建和管理后端服务和云资源，避免了应用开发过程中繁琐的服务器搭建及运维，开发者可以专注于业务逻辑的实现，开发门槛更低，效率更高。
开通云开发：https://console.cloud.tencent.com/tcb?tdl_anchor=techsite
产品文档：https://cloud.tencent.com/product/tcb?from=12763
技术文档：https://cloudbase.net?from=10004
技术交流加Q群：601134960
最新资讯关注微信公众号【腾讯云云开发】
2021-02-03
服务号订阅通知灰度测试
服务号模板消息能力的设计初衷，旨在帮助开发者实现及时通知，但存在一些问题，如： 1. 部分开发者在用户无预期的情况下，发送与用户无关的信息，对用户造成了骚扰。 2. 模板消息是用户触发后的通知消息，不支持营销类消息，不能满足部分业务需求。 为提升微信用户体验，我们开始灰度测试服务号订阅通知功能。 能力说明 开发者可在服务号图文消息、网页等场景设置订阅功能，用户自主订阅后，开发者可按需求下发一条对应的订阅通知。 [图片] 用户可在图文订阅通知 [图片] 用户可在网页订阅通知 灰度测试计划 服务号订阅通知功能即日上线，已认证的境内主体服务号可前往 MP 后台开通使用，详见说明。 1. 服务号订阅通知灰度测试期自2021年1月27日0:00至4月30日24:00，期间服务号模板消息可正常使用；灰度测试期结束后服务号订阅通知的策略将另行公布，届时以官方信息为准； 2. 开发者使用订阅通知功能时，需遵循运营规范，不可用奖励或其它形式强制用户订阅，不可下发与用户预期不符或违反国家法律法规的内容。具体可参考文档：《微信公众平台运营规范》 微信团队 2021年1月27日
2021-01-29
小程序端视频剪辑的春天来了？
前言-吐槽篇 在这个短视频遍地的时代，小程序端视频剪辑功能似乎一直是缺失状态，前段时间发布了一个视频编辑器的接口，试了下感觉也很鸡肋。也有在社区看到前辈们试水小程序音视频合成初探，研究了一番，其中涉及到几个重要的api：1-视频解码器，将视频解码，获得帧数据绘制到canvas上；2-音视频合成器，负责向原视频中添加音频；3-画面录制器，最后通过画面录制器导出成视频。这里必须要吐槽下小程序的文档，简约派代表，能省略的绝不多写一句，翻一下上述api文档便可石锤，几乎全靠猜，这么复杂的接口也不提供个demo。曾尝试按照上述思路做一些复杂的视频剪辑功能，比如图片视频合成一个，单单解决音频错位的问题就搞得头秃，可以说是步履维艰…… 最近发现小程序发布了一款视频剪辑插件 - 微剪，看了下官方提供的Demo还挺有趣的，相比于上述API功能更完善，感觉小程序一直在探索新姿势，真香啊。 小程序：是的，我啥都能做[手动狗头] 本文前半部分旨在结合上述插件，输出一个简单的视频剪辑小程序，感兴趣（不想动手只想白嫖）的同学也可以直接在小程序中搜索「微剪插件演示」，感受一下插件的功能；后半部分着重介绍下插件的一些核心思想和高级用法。 微剪以插件的形式提供给开发者，不能单独使用，所以我们必须要先有个小程序主体（不会吧阿sir，这都想白嫖我？如何注册小程序请自行百度好伐）。插件的接入流程也比较简单，官方文档 写的比较清楚，这里就不啰嗦了。目前好像处于公测阶段，可以免费申请使用。 上述准备工作做完后，我们就可以在代码中使用微剪插件了，插件暴露了两个组件clip和export，clip是入口组件，export为出口组件，其间的流程完全被插件接管，开发者无需关心也无法干涉（有点霸道总裁的味道了啊），通过一系列简单的配置后就可以看到插件的全貌了。【2020/09/23日 删除】 【2020/09/23日 新增】最新版插件提供两种开发模式，暂称为自动模式（仅通过少许配置即可）和手动模式（利用插件暴露的组件自定义开发，1.3.0版本新增）。先介绍第一种方式，按照下述步骤走一遍，应该就能看到插件的全貌了，问题不大。 step1：app.json 引入插件配置 参考这里：小程序插件配置 [代码]{ "plugins": { "myPlugin": { // 自定义插件名，后面会用到 "version": "1.3.0", // 最新版本号即可 "provider": "wx76f1d77827f78beb" // 插件ID，固定值 step2：页面中添加插件 新建一个页面，在页面的json文件中引入插件暴露的clip组件 [代码]{ "usingComponents": { "my-clip": "plugin://myPlugin/clip" my-clip: 自定义组件名字，在wxml中使用； myPlugin: 引入插件的时候，在app.json中声明的插件名； clip: 固定值，官方暴露的组件名称。 wxml文件： [代码]<view> <my-clip settings="{{settings}}"></my-clip> </view> js文件： [代码]Page({ data: { settings: { common: { videoMaxDuration: 30, // 小程序限制最多拍摄30秒 chooseMaxDuration: 1000, // 选择视频的默认时长限制 clipMaxDuration: 60, // 裁切时长的默认限制 settings有众多配置项，具体可参考官方文档；不设置也可以，插件提供了一套默认的配置项。 PS：这里得吐槽下插件的主题机制，感觉很繁琐。跟平时写vue组件等通过样式覆盖的方案不同，而是通过一系列配置项进行配置，这也意味着只能修改配置项涉及的UI，其他的一律无法修改。这里有个疑问，为什么不采用外部样式类的方案呢？感觉更灵活啊。 到这里，应该就可以在手机上看到插件的全貌了，截取了几张图如下： step3：导出视频 点击上图的「下一步」按钮，就可以导出视频到相册中了。插件本身也支持自定义导出，下面简单介绍下用法： step3-1：新增导出页 创建一个自定义的导出页，在导出页中引入插件提供的导出组件即可。 json文件： [代码]{ "usingComponents": { "my-export": "plugin://myPlugin/export" wxml文件： [代码]<view> <view>自定义导出界面部分</view> <my-export bindexportsuccess="handleExportSuccess"> <button>自定义导出按钮</button> </my-export> </view> 然后在js文件中处理导出成功回调即可，导出组件提供了一系列属性，包括水印，导出进度等，具体导出数据结构及属性，可参考官方文档。 step3-2：配置导出页路径 新增上述导出页后，还需要通知插件导出页路径。还记得上文提到的 my-clip 组件中的settings属性吗，此为插件的配置项入口，在里面配置下即可。 [代码] data: { settings: { common: { videoMaxDuration: 30, // 小程序限制最多拍摄30秒 chooseMaxDuration: 1000, // 选择视频的默认时长限制 clipMaxDuration: 60, // 裁切时长的默认限制 exportPagePath: '/pages/export/export' // 自定义导出页面地址 事已至此，通过开发工具的预览功能便可以在手机中看到自定义的导出页了。 【2020/09/23日 新增】 高级模式（1.3.0版本新增） 还记得上文提到的简单（自动）模式，我们只用到了插件暴露的两个组件，clip和export，难道插件只暴露了两个组件吗？就这？就这？？？ 插件从1.3.0版本开始，开放了更多的组件出来，也提供了一种称为【高级接入】的方式，接下来让我们一探究竟： 高级模式需要先了解插件的数据机制，即下文提到的Track驱动模式，在此基础上可以结合插件暴露的组件进行自定义创作。 标准的数据驱动模式 高级模式，即文章开头提到的手动模式，遵循一套标准的Track数据结构，此处引用官方文档的一张图和介绍 什么是Track？ track顾名思义为轨道，播放器支持多种轨道，如：媒体（视频 或者 图片）， 音乐， 特效， 滤镜， 文字 等。 每一种类型的轨道对应不同类型的track，可以简单的理解track就是轨道。 什么是Clip？ clip是轨道中的素材片段。举个例子： 你需要编辑三段视频，那么你需要将三个视频片段加入媒体轨道中，那么这里的每个视频片段就对应不同的clip，每个clip的属性会不相同，如： 视频时长，开始结束时间等。 上述官方定义看得有点懵？大白话简单理解，画面播放的时候，我们在某一时刻可以看到（听到）很多元素，比如原始画面的一帧，特效的一部分（几个小心心），滤镜，文字以及音乐等，Track就是这些元素的数据载体，不同的元素由不同类型的Track管理，所以Track是个数组。 随着时间轴的推移，我们又可以看到不同的视频、图片、特效切换效果等等，比如由图片A切换到图片B，再切换到C、由特效A切换到特效B等，这个时候就涉及到clip的概念，clip可以简单理解为上述Track的一个属性，里面存放着原始素材的信息（基本信息，展示时长等），比如上述🌰，负责媒体的Track的clips就得包含图片A、图片B以及图片C的信息，负责特效的Track的clips就得包含特效A和特效B的信息。 官方提供了详细的Track以及Clip的数据接口定义，具体请参考官方文档 数据结构文档 部分，这里只做核心思想解释。 积木已有，创作在你 最新版本（1.3.0）暴露的几个核心组件： wj-player：插件的核心播放器组件，对应的上述简单模式截图里的播放视频的容器； wj-camera：相机组件，可以拍摄视频，也可以从相册选择视频、图片，截图里的图片、视频就是从这来的； wj-clipper：裁切器组件，上述截图中可以看到视频一帧一帧画面的那部分，就是用这个组件实现的。 上述组件即插件实现的核心部分，还有个文字组件（wj-textEditor、向视频中添加文字）和导出组件（wj-export、与自动模式的导出组件基本相同）使用比较简单，每个组件都有各自的属性和方法，具体请参考高级组件API文档。结合标准的Track数据驱动，理论上可以搭配出与插件功能完全一致的视频剪辑体验，当然如果自动模式可以满足业务需求，那白嫖它，做条闲鱼不好吗？如果业务需求需要个性化，可以考虑使用上述手动模式，自力更生，丰衣足食。 光说不练假把式 下面通过一个简单的 相册集小demo 演示一下上述组件的用法，可以下载小程序片段到本地运行（注：由于插件的使用需要先申请资格，所以请填写一个有使用权限的小程序AppID）。主要使用了三个组件，wj-camera（收集素材）、wj-player（展示素材和特效）、wj-export（导出视频），通过camera页面从相册选择图片，然后搭配插件内置的一些特效输出到player页面中预览效果，最后通过export页面导出。 核心代码如下： camera 页面 camera.wxml [代码]<!--pages/camera/camare.wxml--> <wj-camera bindmediachanged="onMediaChanged" > <view class="preview-button" catchtap="onClickDefaultBtn"> <navigator data-source="jump" url="../player/player?type=default" hover-class="none"> <text>随机特效</text> </navigator> </view> <view class="preview-button" style="right:230rpx;width:240rpx" catchtap="onClickPointBtn"> <navigator data-source="jump" url="../player/player?type=wyyl" hover-class="none"> <text>卡点视频(6图)</text> </navigator> </view> </wj-camera> camera.js [代码]// pages/camera/camare.js Page({ data:{ _media:[] onMediaChanged(e){ this.data._media = e.detail.track onClickDefaultBtn(){ global.testMedia = JSON.parse(JSON.stringify(this.data._media)) // 【万有引力】卡点设置 onClickPointBtn(){ let durationList = [2.6, 2.6, 2.6, 2.8, 2.8, 2.6], startAt = 0 let copyMedia = JSON.parse(JSON.stringify(this.data._media)) copyMedia.clips.forEach((item,index) => { // 更新卡点视频图片播放时长 let duration = durationList[index] item.section.end = duration item.section.duration = duration item.startAt = startAt startAt += duration copyMedia.duration = startAt global.testMedia = copyMedia player 页面 player.wxml [代码]// pages/player/player.js Page({ data: { styleConfig: { height: 1000, width: 750 }, type: 'default' onLoad: function (option) { this.setData({ type: option.type // 生命周期函数--监听页面初次渲染完成 onReady: function () { this.bindPlayer() // 绑定player bindPlayer() { this.player = this.selectComponent("#player"); // 设置player组件的数据 async onPlayerReady() { let tracks = [] if (this.data.type === 'default') { tracks = this.getDefaultTrack() } else { tracks = this.getWYYLTrack() this.player.updateData(tracks) // 更新player的数据 global.testExportTracks = tracks // 存储导出页数据 // 随机特效 getDefaultTrack() { let startAt = -3, { TRACK_TYPES, CLIP_TYPES, Clip, ClipSection, Track } = global['wj-types'] let mediaTrack = global.testMedia // 获取camera组件输出的media轨道 let effectTrack = new Track({ // 新建一个effect轨道 type: TRACK_TYPES.EFFECT, clips: [] let effectList = this.player.getEffects(); // 获取player内置的特效 let randomEffects = new Array(mediaTrack.clips.length).fill(null).map((item, index) => { startAt += 3 return new Clip({ id: `effect-${index}`, type: CLIP_TYPES.EFFECT, key: this._getRandomEffect(effectList).key, section: new ClipSection({ start: 0, end: 3 startAt: startAt effectTrack.clips = randomEffects // 更新effect轨道的clips数据 return [mediaTrack, effectTrack] // 【万有引力】卡点特效 getWYYLTrack() { let { TRACK_TYPES, CLIP_TYPES, Clip, ClipSection, Track } = global['wj-types'] let mediaTrack = global.testMedia // 获取camera组件输出的media轨道 let effectTrack = new Track({ // 新建一个effect轨道 type: TRACK_TYPES.EFFECT, clips: [] // 定制卡点特效 let effectList = [ { key: 'Swing', duration: 2.6, startAt: 0 }, { key: 'SoulOut', duration: 0.6, startAt: 2.6 }, { key: 'Shining', duration: 2, startAt: 3.2 }, { key: 'SoulOut', duration: 0.6, startAt: 5.2 }, { key: 'Blink', duration: 2, startAt: 5.8 }, { key: 'SoulOut', duration: 0.6, startAt: 7.8 }, { key: 'LightCircle', duration: 2.2, startAt: 8.4 }, { key: 'SoulOut', duration: 0.6, startAt: 10.6 }, { key: 'FlowingLight', duration: 2.2, startAt: 11.2 }, { key: 'SoulOut', duration: 0.6, startAt: 13.4 }, { key: 'Heart', duration: 2, startAt: 14 }, let randomEffects = new Array(mediaTrack.clips.length * 2 - 1).fill(null).map((item, index) => { return new Clip({ id: `effect-${index}`, type: CLIP_TYPES.EFFECT, key: effectList[index].key, section: new ClipSection({ start: 0, end: effectList[index].duration startAt: effectList[index].startAt effectTrack.clips = randomEffects // 更新effect轨道的clips数据 let musicTrack = new Track({ // 新建一个music轨道 type: TRACK_TYPES.MUSIC, clips: [] let bgMusic = new Clip({ id: 'music', type: CLIP_TYPES.MUSIC, info: { tempFilePath: "https://imgcache.qq.com/operation/dianshi/other/wanyouyinli.c7f973d906d9b8a3e7db90a90a7874d01454614b.mp3", section: new ClipSection({ start: 0, end: 1000 startAt: 0 musicTrack.clips = [bgMusic] return [mediaTrack, effectTrack, musicTrack] // 跳转至导出页 goExport() { wx.navigateTo({ url: '../export2/export' // 获取随机特效 _getRandomEffect(effectList = []) { let index = Math.floor(Math.random() * effectList.length) return effectList[index] export 页面 export.wxml [代码]<wj-export tracks="{{exportTracks}}" bindexportsuccess="onExportSuccess" bindready="onExportReady"> <button>导出视频</button> </wj-export> export.js [代码]// pages/export2/export.js Page({ data: { exportTracks: [] // 设置导出数据 onExportReady() { this.setData({ exportTracks: global.testExportTracks // 导出成功回调 onExportSuccess(e){ let res = e.detail; wx.saveVideoToPhotosAlbum({ filePath: res.tempFilePath, success: res => { wx.showToast({ title: "已保存至相册" camera和export页面比较简单，这里就不啰嗦了。主要说下player页面的实现思路，player的Track数据暂时只涉及到了三种：media类型、effect类型以及music类型（卡点模式用），其他的暂未使用。 随机模式：针对每张图随机获得一个特效key（wj-player组件内置了一些特效，直接使用即可），然后设置其时长与media类型的clip时长一致即可（默认是3s）。 卡点模式：根据音乐节奏调整了下每张照片的展示时长。 这样一个简单的照片集应用就做出来啦，so easy，妈妈再也不用担心我的发际线了。 卡点模式最终的成果物 点此预览 PS：使用过程中发现 wj-player 组件和 wj-export 组件无法在同一个页面中使用，不知道是不是我的姿势不对，有待后续验证；还有就是素材切换的时候没有转场动画，显得有些僵硬；另外看了下，特效倒是挺多的，但是没办法一键输出卡点视频，缺少一些常见的视频模板，自己做卡点视频特别费劲，要微调好久…… 自动挡虽然好开，但是真正的赛车手都用手动挡[手动狗头结束] 作为小程序端的一款视频剪辑工具，麻雀虽小五脏俱全，基础的功能是齐全的。个人使用下来整体体验还不错，接入也比较简单，官方配套文档也很完善，也期待官方后续可以提供更丰富的功能、组件。 最后，对视频剪辑小程序感兴趣的同学不防申请插件尝试一下，在官方基础api让人如此头秃的情况下，使用插件或许是个不错的选择。
2020-09-28
如何实现快速生成朋友圈海报分享图
由于我们无法将小程序直接分享到朋友圈，但分享到朋友圈的需求又很多，业界目前的做法是利用小程序的 Canvas 功能生成一张带有小程序码的图片，然后引导用户下载图片到本地后再分享到朋友圈。相信大家在绘制分享图中应该踩到 Canvas 的各种（坑）彩dan了吧～ 这里首先推荐一个开源的组件：painter（通过该组件目前我们已经成功在支付宝小程序上也应用上了分享图功能） 咱们不多说，直接上手就是干。 首先我们新增一个自定义组件，在该组件的json中引入painter [代码]{ "component": true, "usingComponents": { "painter": "/painter/painter" 然后组件的WXML (代码片段在最后) [代码]// 将该组件定位在屏幕之外，用户查看不到。 <painter style="position: absolute; top: -9999rpx;" palette="{{imgDraw}}" bind:imgOK="onImgOK" /> 重点来了 JS (代码片段在最后) [代码]Component({ properties: { // 是否开始绘图 isCanDraw: { type: Boolean, value: false, observer(newVal) { newVal && this.handleStartDrawImg() // 用户头像昵称信息 userInfo: { type: Object, value: { avatarUrl: '', nickName: '' data: { imgDraw: {}, // 绘制图片的大对象 sharePath: '' // 生成的分享图 methods: { handleStartDrawImg() { wx.showLoading({ title: '生成中' this.setData({ imgDraw: { width: '750rpx', height: '1334rpx', background: 'https://qiniu-image.qtshe.com/20190506share-bg.png', views: [ type: 'image', url: 'https://qiniu-image.qtshe.com/1560248372315_467.jpg', css: { top: '32rpx', left: '30rpx', right: '32rpx', width: '688rpx', height: '420rpx', borderRadius: '16rpx' type: 'image', url: this.data.userInfo.avatarUrl || 'https://qiniu-image.qtshe.com/default-avatar20170707.png', css: { top: '404rpx', left: '328rpx', width: '96rpx', height: '96rpx', borderWidth: '6rpx', borderColor: '#FFF', borderRadius: '96rpx' type: 'text', text: this.data.userInfo.nickName || '青团子', css: { top: '532rpx', fontSize: '28rpx', left: '375rpx', align: 'center', color: '#3c3c3c' type: 'text', text: `邀请您参与助力活动`, css: { top: '576rpx', left: '375rpx', align: 'center', fontSize: '28rpx', color: '#3c3c3c' type: 'text', text: `宇宙最萌蓝牙耳机测评员`, css: { top: '644rpx', left: '375rpx', maxLines: 1, align: 'center', fontWeight: 'bold', fontSize: '44rpx', color: '#3c3c3c' type: 'image', url: 'https://qiniu-image.qtshe.com/20190605index.jpg', css: { top: '834rpx', left: '470rpx', width: '200rpx', height: '200rpx' onImgErr(e) { wx.hideLoading() wx.showToast({ title: '生成分享图失败，请刷新页面重试' //通知外部绘制完成，重置isCanDraw为false this.triggerEvent('initData') onImgOK(e) { wx.hideLoading() // 展示分享图 wx.showShareImageMenu({ path: e.detail.path, fail: err => { console.log(err) //通知外部绘制完成，重置isCanDraw为false this.triggerEvent('initData') 那么我们该如何引用呢？ 首先json里引用我们封装好的组件share-box [代码]{ "usingComponents": { "share-box": "/components/shareBox/index" 以下示例为获取用户头像昵称后再生成图。 [代码]<button class="intro" bindtap="getUserInfo">点我生成分享图</button> <share-box isCanDraw="{{isCanDraw}}" userInfo="{{userInfo}}" bind:initData="handleClose" /> 调用的地方： [代码]const app = getApp() Page({ data: { isCanDraw: false // 组件内部关掉或者绘制完成需重置状态 handleClose() { this.setData({ isCanDraw: !this.data.isCanDraw getUserInfo(e) { wx.getUserProfile({ desc: "获取您的头像昵称信息", success: res => { const { userInfo = {} } = res this.setData({ userInfo, isCanDraw: true // 开始绘制海报图 fail: err => { console.log(err) 最后绘制分享图的自定义组件就完成啦~效果图如下： tips： 文字居中实现可以看下代码片段 文字换行实现（maxLines）只需要设置宽度，maxLines如果设置为1，那么超出一行将会展示为省略号 代码片段：https://developers.weixin.qq.com/s/J38pKsmK7Qw5 附上painter可视化编辑代码工具：点我直达，因为涉及网络图片，代码片段设置不了downloadFile合法域名，建议真机开启调试模式，开发者工具 详情里开启不校验合法域名进行代码片段的运行查看。 最后看下面大家评论问的较多的问题：downLoadFile合法域名在小程序后台 开发>开发设置里配置，域名为你图片的域名前缀 比如我文章里的图https://qiniu-image.qtshe.com/20190605index.jpg。配置域名时填写https://qiniu-image.qtshe.com即可。如果你图片cdn地址为https://aaa.com/xxx.png, 那你就配置https://aaa.com即可。
2022-01-20
Painter 一款轻量级的小程序海报生成组件
生成海报相信大家有的人都做过，但是canvas绘图的坑太多。大家可以试试这个组件。然后附上楼下大哥做的可视化拖拽生成painter代码的工具：链接地址https://developers.weixin.qq.com/community/develop/article/doc/000e222d9bcc305c5739c718d56813
2019-09-27
聊一聊小程序开发中的单位如何布局使用？
小程序支持的单位？ 可以说小程序就是在微信体系网页的另一种表现方式。网页中的单位小程序基本都支持。但实际开发中，我常用到的是以下几种 ↓ rpx做为小程序自家系统里的单位，特性是可以根据屏幕宽度进行自适应。rpx官方介绍 比如我写一个2:1比例的全屏轮播图，可以这样写： [代码]swiper { width:750rpx; height:375rpx; 1rpx = 0.5px = 1物理像素。网页开发中，默认字体一般设置为14px，在小程序中我们就可以设置小程序的默认字体大小为28rpx。 在小程序开发中 rpx基本就代替了px，但在一些特殊的场合，px的表现要比rpx好。 兼容ipad时，由于ipad可以横屏和竖屏，并且屏幕宽度可以达到2K以上，如果你的小程序要考虑到兼容ipad，那么还是多考虑使用px吧。 覆盖微信原生组件样式。em？？？？可以覆盖微信原生样式？？？ 是的，只有小程序老玩家才知道的秘密！小程序原生样式是可以覆盖美化的，以 <switch> 组件为例：switch代码片段 导入代码片段到开发者工具中，并切换设备模式预览可以发现rpx表现不佳。使用px反而更好。 em与rem em与rem在H5的网页开发上可以大放异彩，但小程序中因为有rpx的存在，em与rem使用的就少了。基本只有在一些对字体宽度有特效的情况下才会使用。比如首行缩进。 vw、vh和百分比 vw：视窗宽度，1vw等于视窗宽度的1%。 vh：视窗高度，1vh等于视窗高度的1%。 %：父级容器的宽度百分百。 calc() 的使用 前面讲了单位，那么我们现在来聊聊怎么使用这些单位了。小程序是网页的一种，支持css，也支持calc()。 这里吃下书： calc() 函数用于动态计算长度值。 [代码] ● 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； ● 任何长度值都可以使用calc()函数进行计算； ● calc()函数支持 "+", "-", "*", "/" 运算； ● calc()函数使用标准的数学运算优先级规则； 使用场景示例 垂直导航页，常用于外卖订餐或者商城的二级分类页。 上半部分是定死高度375rpx的轮播图区域，下半部分是可以随设备高度变化的可滚动的区域。容器高度可以这样写： [代码]{ height:calc(100vh - 375rpx) 夜深了，晚安，不定期更新小程序使用技巧。新人写文章，大佬多指点！
2019-02-26
垃圾分类小程序拍照识别代码解析
我在前几天写过 开源的智能垃圾分类小程序代码详解 https://developers.weixin.qq.com/community/develop/article/doc/00004c9ef3c3d8329e7adde8156013 我本来计划在这个文章具体分析代码，但是发现截图多了之后，一篇文章打开太慢了，索性，按照知识点来分析吧 今天分享拍照识别这个地方的逻辑 [图片] 1 [图片] 2 [图片] 3 [图片] 4 首先该识别接口调用的×度的服务， 第一步：进拍照页面后，调用接口获取×度的access_token, [图片] 5 [图片] 第二步、拍照，将拍照图片转成base64，调用识别接口 [图片] 12 [图片] 3 第三步：渲染识别后的物品名称 [图片] 4 附：获取access_token用到了两个云函数 云函数一：getBaiduAccessToken 主要用于生产access_token [图片] 5 云函数二：getBaiduToken 主要用于判断access_token是否有效，如果过了有效期要重新请求获取，也就是调用云函数一getBaiduAccessToken [图片] 6 7 8
2020-06-12
开源的智能垃圾分类小程序代码详解
如果没有记错，我应该在社区陆陆续续发布了3个版本的开源垃圾分类小程序 其中一个是基于php的自建服务器版本，另外两个是基于云开发的垃圾分类小程序版本，按照云开发版本顺序， 今天开源第三个基于云开发的垃圾分类小程序，暂且命名为垃圾分类小程序v3，目前功能完善，实现了以下三个核心功能 1、拍照识别 2、垃圾分类查询 3、垃圾分类测评 截图如下所示 1 [图片] 2 [图片] 3 [图片] 4 [图片] 5 [图片] 6 这份代码，我陆陆续续跟大家一起读读吧 第一个模块识别位于pages/ai/index.wxml文件里面 [图片] 7 点击自动识别调用下面的事件 [图片] 8 下面的意思是先判断是否授权拍照，如果没有授权那么调用授权拍照接口，之后跳转到新页面进行拍照 [图片] 9 到拍照模块 [图片] 点击拍照按钮，调用逻辑为takePhoto [图片] 9 这块代码的逻辑是：拍照，将拍照的临时图片转成base64，然后调用了百度ai接口进行识别 [图片] [图片] 9 扫码体验 [图片] 9 9
2020-06-12
小程序AR识别，三行代码实现Camera数据毫秒级转base64图片
关键词：小程序AR 图片 base64 相机 Camera onCameraFrame Canvas ArrayBuffer Uint8Array Uint8ClampedArray upng-js 核心步骤： 1 相机原始图像数据frame.data，即ArrayBuffer数组，转成Uint8Array数组 2 Uint8Array数组转成Uint8ClampedArray数组 3 wx.canvasPutImageData(Uint8ClampedArray) 详细流程如下： 最近因为项目需求，需要上传base64去做AR识别功能，和大家一起分享讨论下具体的实现方式。 首先说下实现原理，通过Camera的onCameraFrame获取实时帧数据，将实时帧数据添加到Canvas上，然后将Canvas保存为临时图片，再将临时图片转换为base64。 贴上核心实现代码： wxml： js： var nCounter = 0; openCamera: function (res) { var that = this var camera_ctx = wx.createCameraContext() listener = camera_ctx.onCameraFrame((frame) => { // nCounter等于30 是因为一开始相机会有一个对焦的过程，如果一开始获取数据，就是模糊的图片 if (nCounter == 30) { console.log(frame.data instanceof ArrayBuffer, frame.width, frame.height) var data = new Uint8Array(frame.data); var clamped = new Uint8ClampedArray(data); // 实时帧数据添加到Canvas上 wx.canvasPutImageData({ canvasId: 'myCanvas', x: 0, y: 0, width: frame.width, height: frame.height, data: clamped, success(res) { // 转换临时文件 wx.canvasToTempFilePath({ x: 0, y: 0, width: frame.width, height: frame.height, canvasId: 'myCanvas', fileType: 'jpg', destWidth: frame.width, destHeight: frame.height, // 精度修改 quality: 0.8, success(res) { // 临时文件转base64 wx.getFileSystemManager().readFile({ filePath: res.tempFilePath, //选择图片返回的相对路径 encoding: 'base64', //编码格式 success: res => { // 保存base64 that.data.mybase64 = res.data; fail(res) { console.log(res); }, that) nCounter++ // console.log(nCounter); if (nCounter >= 100) { nCounter = 0 listener.start() 目前网上有两种转换方式并对比下： 1：upng-js等第三方转码js库，将相机流转换成base64，一般需要1-2s左右 [图片] 2.使用canvas将相机流转变base64，都是使用js或者小程序官方的api进行转换，一般转换时间在1秒以下： [图片] 重点说明下： 如何使用wx.canvasPutImageData()将相机流添加canvas，我们查看该官方api，添加的data类型为：Uint8ClampedArray [图片] 而我们通过onCameraFrame获取的data类型为：ArrayBuffer [图片] 所有两者类型不一致，就需要转换，将ArrayBuffer=>Uint8Array=>Uint8ClampedArray var data = new Uint8Array(frame.data); var clamped = new Uint8ClampedArray(data); 成功的把onCameraFrame获取实时帧数据转换并canvasPutImageData在canvas上，并通过canvasToTempFilePath获取临时文件，如何获取临时文件getFileSystemManager转换为base64，传入云端进行AR识别，就大功告成！ 技术分享来自于：北京晞翼科技有限公司 技术作者：le3d618、xiaoz0816 微信商务联系：le3d618
2020-04-30
【转】微信小程序中实现瀑布流布局和无限加载
瀑布流布局是一种比较流行的页面布局方式，最典型的就是Pinterest.com，每个卡片的高度不都一样，形成一种参差不齐的美感。 在HTML5中，我们可以找到很多基于jQuery之类实现的瀑布流布局插件，轻松做出这样的布局形式。在微信小程序中，我们也可以做出这样的效果，不过由于小程序框架的一些特性，在实现思路上还是有一些差别的。 今天我们就来看一下如何在小程序中去实现这种瀑布流布局： [图片] 小程序瀑布流布局 我们要实现的是一个固定2列的布局，然后将图片数据动态加载进这两列中（而加载进来的图片，会根据图片实际的尺寸，来决定到底是放在左列还是右列中）。 [代码]/* 单个图片容器的样式 */.img_item { width: 48%; margin: 1%; display: inline-block; vertical-align: top; }[代码]我们知道，在HTML中，我们要动态加载图片的话，通常会使用new Image()创建一个图片对象，然后通过它来动态加载一个url指向的图片，并获取图片的实际尺寸等信息。而在小程序框架中，并没有提供相应的JS对象来处理图片加载。其实我们可以借助wxml中的[图片]组件来完成这样的功能，虽然有点绕，但还是能满足我们的功能要求的。 [代码]<view style=""> <image wx:for="{{images}}" wx:key="id" id="{{item.id}}" src="{{item.pic}}" bindload="onImageLoad">image>view>[代码]我们可以在Page中通过数据绑定，来传递要加载的图片信息到wxml中，让[图片]组件去加载图片资源，然后当图片加载完成的时候，通过bindload指定的事件处理函数来做进一步处理。 我们来看一下Page文件中定义的onImageLoad函数。在其中，我们可以从传入的事件对象e上，获取到[图片]组件的丰富信息，包括通过它加载进来的图片的实际大小。然后我们将图片按照页面上实际需要显示的尺寸，计算出同比例缩放后的尺寸。接着，我们可以根据左右两列目前累积的内容高度，来决定把当前加载进来的图片放到哪一边。 [代码]let col1H = 0;let col2H = 0; Page({ data: { scrollH: 0, imgWidth: 0, loadingCount: 0, images: [], col1: [], col2: [] onLoad: function () { wx.getSystemInfo({ success: (res) => { let ww = res.windowWidth; let wh = res.windowHeight; let imgWidth = ww * 0.48; let scrollH = wh; this.setData({ scrollH: scrollH, imgWidth: imgWidth }); //加载首组图片 this.loadImages(); onImageLoad: function (e) { let imageId = e.currentTarget.id; let oImgW = e.detail.width; //图片原始宽度 let oImgH = e.detail.height; //图片原始高度 let imgWidth = this.data.imgWidth; //图片设置的宽度 let scale = imgWidth / oImgW; //比例计算 let imgHeight = oImgH * scale; //自适应高度 let images = this.data.images; let imageObj = null; for (let i = 0; i < images.length; i++) { let img = images[i]; if (img.id === imageId) { imageObj = img; break; imageObj.height = imgHeight; let loadingCount = this.data.loadingCount - 1; let col1 = this.data.col1; let col2 = this.data.col2; //判断当前图片添加到左列还是右列 if (col1H <= col2H) { col1H += imgHeight; col1.push(imageObj); } else { col2H += imgHeight; col2.push(imageObj); } let data = { loadingCount: loadingCount, col1: col1, col2: col2 }; //当前这组图片已加载完毕，则清空图片临时加载区域的内容 if (!loadingCount) { data.images = []; } this.setData(data); loadImages: function () { let images = [ { pic: "../../images/1.png", height: 0 }, { pic: "../../images/2.png", height: 0 }, { pic: "../../images/3.png", height: 0 }, { pic: "../../images/4.png", height: 0 }, { pic: "../../images/5.png", height: 0 }, { pic: "../../images/6.png", height: 0 }, { pic: "../../images/7.png", height: 0 }, { pic: "../../images/8.png", height: 0 }, { pic: "../../images/9.png", height: 0 }, { pic: "../../images/10.png", height: 0 }, { pic: "../../images/11.png", height: 0 }, { pic: "../../images/12.png", height: 0 }, { pic: "../../images/13.png", height: 0 }, { pic: "../../images/14.png", height: 0 } ]; let baseId = "img-" + (+new Date()); for (let i = 0; i < images.length; i++) { images[i].id = baseId + "-" + i; } this.setData({ loadingCount: images.length, images: images })[代码]这里是显示在两列图片的wxml代码，我们可以看到在scroll-view>组件上，我们通过使用bindscrolltolower设置了事件监听函数，当滚动到底部的时候，会触发loadImages去再加载下一组的图片数据，这样就形成了无限的加载：/scroll-view> [代码]<scroll-view scroll-y="true" style="height:{{scrollH}}px" bindscrolltolower="loadImages"> <view style="width:100%"> <view class="img_item"> <view wx:for="{{col1}}" wx:key="id"> <image src="{{item.pic}}" style="width:100%;height:{{item.height}}px">image> <view class="img_item"> <view wx:for="{{col2}}" wx:key="id"> <image src="{{item.pic}}" style="width:100%;height:{{item.height}}px">image> view>scroll-view>[代码]好了，挺简单的一个例子，如果你有更好的方法，不吝分享一下哦。 完整代码可以在我的Github下载：https://github.com/zarknight/wx-falls-layout 原作者：一斤代码（简书作者） 原文链接：http://www.jianshu.com/p/260f2623562d
2016-11-29
云开发-云函数实现联表查询和分页
相关api 官方参考文档 [代码]Aggregate.lookup Aggregate.limit Aggregate.skip Aggregate.count 基于 [代码]aggregate[代码] 操作集合 使用 [代码]count[代码] 获取总数量和页数 使用 [代码]limit[代码] 限制一次返回的数量 使用 [代码]skip[代码] 实现发送下一页的数据 使用 [代码]lookup[代码] 实现联表 假设 [代码]orders[代码] 集合有以下数据 [代码][ {"_id":4,"book":"novel 1","price":30,"quantity":2}, {"_id":5,"book":"science 1","price":20,"quantity":1}, {"_id":6} 假设 [代码]books[代码] 集合有以下数据 [代码][ {"_id":"book1","author":"author 1","category":"novel","stock":10,"time":1564456048486,"title":"novel 1"}, {"_id":"book3","author":"author 3","category":"science","stock":30,"title":"science 1"}, {"_id":"book4","author":"author 3","category":"science","stock":40,"title":"science 2"}, {"_id":"book2","author":"author 2","category":"novel","stock":20,"title":"novel 2"}, {"_id":"book5","author":"author 4","category":"science","stock":50,"title":null}, {"_id":"book6","author":"author 5","category":"novel","stock":"60"} 实现 [代码]orders[代码] 和 [代码]books[代码] 联表查询和分页的关键代码 [代码]const pageSize = 10 // 每页数据量，可以作为云函数的入参传入 const currPage = 1 // 查询的当前页数，可以作为云函数的入参传入 const db = cloud.database() const $ = db.command.aggregate // 定义联表实例 const aggregateInstance = db.collection('orders').aggregate() .lookup({ from: 'books', localField: 'book', foreignField: 'title', as: 'bookList', const { totalCount } = await aggregateInstance.count('totalCount').end() // 计算总页数 const totalPage = totalCount === 0 ? 0 : totalCount <= pageSize ? 1 : parseInt(totalCount / pageSize) + 1 // 分页查询数据 const data = await aggregateInstance.replaceRoot({ newRoot: $.mergeObjects([ $.arrayElemAt(['$bookList', 0]), '$$ROOT' ]) .project({ bookList: 0 .limit(pageSize) .skip(currPage * pageSize) .end() return {currPage, pageSize, totalPage, totalCount, data} 预期输出结果 [代码]{ currPage: 1, pageSize: 10, totalPage: 1, totalCount: 3, data: [ "_id": 4, "title": "novel 1", "author": "author 1", "category": "novel", "stock": 10, "book": "novel 1", "price": 30, "quantity": 2 "_id": 5, "category": "science", "title": "science 1", "author": "author 3", "stock": 30, "book": "science 1", "price": 20, "quantity": 1 "_id": 6, "category": "science", "author": "author 4", "stock": 50, "title": null 如有错误，欢迎拍砖 (▽)
2020-03-25
手把手教你开通小程序流量主
流量主这个概念在小程序出来之前的公众号时代已经推出，主要是给一部分有流量的用户提供广告展示机会，用来换取一定利益 前几天我刚注册了一个小程序，一顿操作猛如虎，今天终于开通了，每一次开通流量主的感觉真的无比美好，是不是以后我就可以趟着数钱钱了，所谓趟赚了 今天具体实操下 [图片] 占位 [图片] 占位 [图片] 占位 扫码可以绑定，方便既是查收日常流量主收益 [图片] 占位 [图片] https://ad.weixin.qq.com/guide/1189 开通流量主后，小程序开发者要对应在自己的小程序添加广告位，才会有广告收益，这里跟公众号不一样，公众号是开通流量主后，自动在底部或者文章内部展示广告位。 看看日常的一些收益吧 [图片] 占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位占位v 开通流量主之后如何添加广告位 [图片] 占位 [图片] 占位 https://ad.weixin.qq.com/guide/1195 [图片] 占位 [图片] 占位 [图片] 占位 点击立即创建 [图片] 占位 点击新建广告 [图片] 占位 选择创建视频广告 [图片] [图片] 占位 [图片] 占位 复制代码，我们就可以把广告位插入到具体要展示的小程序广告位置
2020-03-24
公众号关联小程序绑定流程
1、登录公众号-小程序-管理小程序-添加 2、管理员扫码确认 3、输入需要绑定的小程序appID，查找小程序并发送绑定邀请 4、小程序管理员接收邀请 5、绑定完成 关联小程序后系统将自动向公众号粉丝推送关联成功消息，点击消息即可跳转至小程序。 [图片]
2019-12-26
如何解除小程序关联公众号？
绑定公众账号可修改、解除关联操作如下： 第一步：管理员扫码确认登录 [图片] 第二步：选择对应的小程序解除关联 [图片] 第三步：管理员手机确认解除关联 [图片]
2020-03-18
小程序关联公众号策略调整
各位开发者，大家好。 目前，小程序需要与公众号关联，才可被使用在公众号自定义菜单、模板消息、客服消息等场景中。而公众号关联小程序时，需要小程序管理员确认，该环节增加了开发者之间的沟通成本。 为了降低公众号与小程序间的合作门槛，我们将调整小程序关联公众号策略如下： 公众号关联小程序将无需小程序管理员确认。 取消“小程序最多关联500个公众号”的限制。 若希望小程序在被关联时保留管理员确认环节，可前往“小程序管理后台-设置-基本设置-关联公众号设置”修改设置项。 公众号文章中可直接使用小程序素材，无需关联小程序。 开发者可在“小程序管理后台-设置-关联设置”中管理已关联的公众号。 微信团队 2019.04.04
2019-04-08
目前在医疗服务类目中，哪些具体类目可以支持长期订阅消息？
目前长期性订阅消息仅向政务民生、医疗、交通、金融、教育等线下公共服务开放，后期将逐步支持到其他线下公共服务业务，可参考：https://developers.weixin.qq.com/community/develop/doc/00008a8a7d8310b6bf4975b635a401?blockType=1
2019-12-02
微信支付实名信息小程序授权接口能力【监管原因，暂停开放】
备注说明：接口因为监管原因，2019年11月10日起停止开放。 一、能力背景 互联网+国家战略发布以来，各行业紧锣密鼓推进改革。其中，众多政府民生服务，例如社保查询、公积金查询提取、医疗机构挂号、公用事业缴费等均需要用户提供实名信息。此外，手机卡实名办理、火车客运实名购票、酒店实名入住等行业实名制都在推行。 基于此，为了让用户有更好的体验，让各行业的互联网+服务更顺畅，基于微信支付实名用户基础，提供微信支付实名支付账户信息授权接口。即经过用户的授权，小程序的服务提供者可以获得用户在微信支付认证的姓名以及身份证信息。 二、接入必读 getRealnameAuthInfo 经过用户授权，可获得用户在微信支付认证的姓名以及身份证信息（非身份证的其他证件信息暂不提供授权） 验证方式： 因为需要用户主动触发才能发起获取实名信息接口，所以该功能不由 API 来调用，需用 <button> 组件的点击来触发。且需要用户输入微信支付密码验证后，方可算授权。 兼容的微信版本： iOS6.5.22及Android6.5.22 及以上版本 调用必备条件： （1）小程序appid获得内测邀请后提交资质经平台审核通过； （2）小程序开通了微信支付账号； （3）向微信支付工作人员申请证书 开放范围： 现为内测邀请阶段，白名单开通。务必需按下述内容，及第三节指引，申请开通权限后再按照接口文档开发，否则无效。 开放说明： 针对小程序的业务方，小程序的主体以及类目，需要在限定的类目范围内。开展的业务也需要是国家相关法规、政策规定的需要“实名办理”的相关业务。 现阶段微信支付实名信息授权接口能力开通的主体类目限定包含： 政务：政府机构或事业单位 医疗：公立医疗机构 教育：公立教育机构 轨道交通：铁路官方，地铁官方 三、接口申请 满足第二节中描述的开放类目的小程序，可申请微信支付实名授权接口。请按照如下描述，进行接口申请。 必须完成以下两步的描述才算申请成功： 第一步. 邮件申请，开通小程序后台接口能力入口： 申请邮件请发送至腾讯工作邮箱wx_city@tencent.com。腾讯工作人员会邮件回复资料是否准确无误，并说明是否已开通小程序后台入口。 可通过通过以下路径查看是否已开通入口：通过mp.weixin.qq.com登录小程序，在设置->接口设置中，查看是否有“实名授权”的能力卡片。 邮件申请入口的资料内容如下： 微信支付实名信息授权接口内测申请表 第二步. 线上入口申请权限： 接收到已开通线上入口的邮件回复后。可登录小程序后台，（登录mp.weixin.qq.com的小程序账号，在设置-接口能力中）完成接口权限的申请。 包括：使用类目的配置、填写相关的申请信息等。然后等待线上审核通过。 完成以上两步工作，且线上审核通过后，即可按照后续的接口文档进行开发调用。 备注：此接口一直处于内测邀请阶段。但由于近期申请流程和方式，需要根据合规监管及用户敏感隐私信息加强审核的要求，进行修改调整。因此申请流程修改调整期间，此接口暂不接受新的小程序申请；已经在使用此接口的小程序，暂不受影响。（建议正在使用的小程序，限于自身业务使用，并加强用户隐私信息保护）; 正在申请中的小程序，近期请留意wx_city@tencent.com官方邮件的回复，以进一步增加说明材料。 四、接口文档 4.1使用方法及参数 使用方法为： 需要将 <button> 组件 open-type 的值设置为 getRealnameAuthInfo，当用户点击并同意之后，可以通过 bindgetRealnameAuthInfo事件回调获取到微信服务器返回的auth_token，再用auth_token调用API来获取用户加密过后的实名信息 <button open-type=“getRealnameAuthInfo” bindgetRealnameAuthInfo=“authinfo” category-id="{{[99, 904]}}">实名授权</button> 调用参数为： 错误码说明： errCode:40003 errMsg:category id not exist 错误说明：添加的类目ID有误（需检查类目ID是否准确。仅需使用一级和二级类目ID即可） 4.2获取小程序类目 本节主要描述如何获取授权小程序账号的可选类目。 （1）请求方式: get（请使用https协议） https://api.weixin.qq.com/wxa/get_category?access_token=TOKEN （2）参数说明 access_token （3）返回说明（正常时返回的json示例）： “errcode”:0, “errmsg”: “ok”, “category_list” : [ “first_class”:“工具”, “second_class”:“备忘录”， “first_id”:1, “second_id”:2, “first_class”:“教育”, “second_class”:“学历教育”, “third_class”:“高等” “first_id”:3, “second_id”:4, “third_id”:5, （4）返回参数说明： 参数 说明 category_list 可填选的类目列表 first_class 一级类目名称 second_class 二级类目名称 third_class 三级类目名称 first_id 一级类目的ID编号 second_id 二级类目的ID编号 third_id 三级类目的ID编号 （5）错误码说明： 返回码 说明 -1 系统繁忙 4.3获取实名信息 根据小程序返回的auth_token获取用户加密过后的实名消息 通过https POST请求，数据为json格式 请求url https://api.weixin.qq.com/cgi-bin/wxopen/getrealnameinfo?access_token={access_token} access_token说明 详见公众号开发文档， api使用的appid必须和小程序的appid保持一致 #!/bin/bash TOKEN=‘xxxxxxxxxxxx’ URL=‘https://api.weixin.qq.com/cgi-bin/wxopen/getrealnameinfo’ JSON=’{ “auth_token”: “xxx”, “mch_id”: “xxx”, “cert_serialno”: “xxx”, “timestamp”: 1234444, “sign”: “xxx” }’ curl “${URL}?access_token=${TOKEN}” -d ${JSON} 返回码说明： 4.4数据加密文档说明 由于实名信息属于敏感数据，不能以明文数据传输，所以开发者需要用私钥对请求进行签名(sha256后base64编码). 微信支付会对用户的姓名和身份证信息用开发者的公钥加密 ,开发者可以使用私钥解密出明文. 加密的padding算法为RSA_PKCS1_PADDING 商户号、证书序列号和私钥文件的获取详见第五部分微信支付证书指引 cert_serialno={cert_serialno}×tamp={timestamp} #!/bin/bash cert_serialno='1234567890’ timestamp=[代码]date +%s[代码] private_key_file=“1900006511_rsa_private_key.pem” ori_content="cert_serialno=${cert_serialno}×tamp=${timestamp}" echo $ori_content sign=[代码]echo -n $ori_content | openssl dgst -sha256 -binary -sign $private_key_file | base64 -w 0[代码] echo “sign: $sign” #!/bin/sh encryted_real_name="BtqSM3KOyt+mDhJhyLCS9vsEoo3gTBupZHwS3i8daCyrUGxlEv+k7cE6U+9eiTo2DPNMouZnPSqv5vRERvwvm//JwkKdrV/xvSB4Ak7mJB+/t4Y4lV6gfeyggzN4xtdWoJfkgm0wa4V7oZGrpnexdwYuwyJYTMoz+87qJRwUfWAgF7U7trJ+b5DvCk9Y6KwT0N4j6PtDAk23k0zg06rTANzU3Mq1IWF7LVBcvSvR9nkNAPzcv06LQ70kxqQqVj5z+H+ERuILwBjuIQozCh6pO37Q3slz8UNnl7r48vw7uZe6be1fSDyf0hYE43n2DMpljnATQOMeJxp7nBrsvwDdPQ==" private_key_file=“1900006511_rsa_private_key.pem” echo -n $encryted_real_name | base64 -d | openssl rsautl -decrypt -ssl -inkey $private_key_file | iconv -f gbk -t utf-8 4.5微信支付商户申请指引 敏感数据需要使用权威CA颁发的API证书来加密。 如果已经获取到了权威CA颁发的API证书，可直接使用。 未获取到的话， 可按下面的方法操作： 证书申请或升级: 登录商户平台申请或者升级到权威CA颁发的证书。 查看证书序列号: 登录微信支付商户平台：pay.weixin.qq.com，进入【账户中心】->【账户设置】->【API安全】，点击“查看证书”文字按钮。 点击查看证书，即可看到证书序列号。 五、案例展示 案例：粤省事小程序，实名信息登录。 粤省事小程序是广东省政务一站式服务小程序，为了给用户便捷的体验，使用了微信支付实名授权功能。一方面校验使用者的身份，一方面便捷的获取用户信息，以便为用户提供个性化的政务服务。 具体实现的效果截图如下：
2022-11-22
城市服务实名信息校验接口说明【监管原因，暂停开放】
备注说明：接口因为监管原因，2021年11月10日起停止开放。 一、接口说明 城市服务实名校验接口（以下称“本接口”），主要实现的功能是，在用户同意情况下，通过微信城市服务去校验用户（或业务方）输入的实名信息，是否正确且与用户在“开通微信支付”时，预留的实名信息一致。也即，校验输入的信息，是否正确且与微信支付绑卡用户的实名信息一致。 二、使用注意事项（接入必读） 1、本接口暂只支持校验基于大陆身份证 “姓名与身份证开通微信支付”的用户实名信息； 2、由于信息较为敏感，使用此接口校验用户（或业务方）输入的实名信息时，需要在页面前端征得用户的同意。因此调用此接口后，会跳转至微信官方的“用户同意”界面。用户点击同意按钮后方可继续后续调用。 3、请根据开放范围、场景所需及信息校验必要性申请本接口，并请谨慎使用。若后期使用过程中，用户举报较多或被发现在不合理使用，微信有权永久回收该小程序的该接口的权限。 三、接口开放范围及申请方式 3.1、接口开放范围 1、本接口目前为内测邀请开放阶段，免费开放给非个人开发者，且完成了微信认证的小程序（不包含境外主体）。 2、接口的开放的场景及必要性，参考国家法规、政策规定的需要“实名办理”的相关业务。具体的开放主体类目范围如下： 政务（政府和事业单位）公立医疗（含公立医疗机构的互联网医院）公立教育机构交通行业的官方企业或单位（含：航空公司、机场、客运、交通市民卡、铁路、公交、地铁、轮渡）基础运营商合规的保险公司官方快递与邮政（实名校验场景需要与支付相关联）水、电、燃、暖等官方生活缴费机构；如你的小程序主体类目所属范围、支付业务场景等，与上述相符，则可以按照对应方式申请。 3.2、申请方式 请发送邮件至官方邮箱，说明所需的场景及校验必要性，申请开通小程序的该接口的权限。官方邮箱地址：wx_city@tencent.com。邮件内容请参照下述列表： 邮件主题：申请开通“城市服务实名信息校验”接口权限+地区+单位名称 邮件内容： 1、小程序appid或原始id 2、小程序名称 3、小程序使用该接口的场景及必要性描述。 4、其他备注说明（如紧急程度、腾讯公司的对接人等） 申请资料： 1、接口申请表 2、与申请商户名称（商户号主体）完全一致的 信息系统安全等级保护三级证书（简称等保三级证书） 或者 ISO27001证的扫描件 3、签署【数据安全评估应答及承诺文件】，落款应答及承诺人为商户号主体，并盖章 4、签署【合作协议】 附：申请资料中（2）（3）（4）涉及资质，申请主体均需由商户号主体提供、签署；（3）（4），审批时请先提供填写完整的Word文档，待审批完成后再返回盖章。 附件1、微信支付实名校验接口申请表 附件2、数据安全评估应答及承诺文件 附件3、合作协议 邮件申请后，针对符合开放范围及场景必要性的小程序，会提供后续流程指引，因此申请后请留意邮件回复情况。 注意：请根据开放范围、场景所需及信息校验必要性申请本接口，并请谨慎使用。若后期使用过程中，用户举报较多或被发现在不合理使用，微信有权永久回收该小程序的该接口的权限。 四、接口文档 具体的接口文档详情，请点击此处查看详细的接口文档，并参照开发。 备注：如在使用中遇到问题，可通过官方邮箱留言，或社区留言，或评论留言方式反馈。本指引内容不定期更新，敬请留意。
06-05
小程序录音（getRecorderManager）和播放录音(createInnerAudioContext)的踩坑记录
第一个坑 记录日期： 2019-10-16手机型号： 小米 mix2微信版本： 7.0.7 问题描述 使用默认的format，即aac格式，在真机上返回的音频格式为m4a 代码 const recorderManager = wx.getRecorderManager(); recorderManager.start()； recorderManager.onStop(res => { console.log(res); 解决方案 后台支持m4a格式 使用 format: ‘mp3’ 第二个坑 《不能播放》 （通过 wx.downloadFile 解决） 记录日期： 2019-10-16手机型号： 小米 mix2微信版本： 7.0.7 问题描述 安卓手机 通过录音api生成的音频文件，上传至自己后台后，再使用createInnerAudioContext api播放时，报错 format error 代码 cosnt innerAudioContext = wx.createInnerAudioContext(); innerAudioContext.src = recordAudioSrc; innerAudioContext.play(); innerAudioContext.onError(err => { console.log('播放错误... ', res); 解决方案 由后台返回文件流而不是文件访问地址安卓使用 wx.downloadFile 将文件下载至本地后播放，ios使用 innerAudio 的api播放，请参考代码片段 https://developers.weixin.qq.com/s/ncTJjPmn7qig
2020-07-14
做微信支付开发需要准备什么？
最近对接了两个微信支付的需求，每次跟对方解释需要哪些信息也很烦躁，在这里整理下 我相信很多做开发多年的同学都未必能登录微信支付商户后台看看到底长啥样 在正式开发之前要准备三个信息 1、商户号--账户中心--商户信息 2、证书文件--账户中心--API安全 3、API密钥--账户中心-API安全 今天下午重新开通了一个商户号，趁这个机会，截图展示给大家。 [图片] [图片] [图片] [图片] [图片] [图片] [图片] 微信支付微信支付微信支付微信支付微信支付微信支付微信支付微信支付微信支付微信支付微信支付微信支付微信支付微信支付 备注 1、在这里特别注意的是，由于证书文件不是手工下载的，而是在操作过程中引导下载到本地的，所以特别注意在操作的时候，证书文件的下载目录
2020-03-26
获取用户信息
背景 我们发现大部分小程序都会使用 [代码]wx.getUserInfo[代码] 接口，来获取用户信息。原本设计这个接口时，我们希望开发者在真正需要用户信息的情况下才去调取这个接口，但很多开发者会直接调用这个接口，导致用户在使用小程序的时候产生困扰，归结起来有几点： 开发者在小程序首页直接调用 [代码]wx.getUserInfo[代码] 进行授权，弹框获取用户信息，会使得一部分用户点击“拒绝”按钮。 在开发者没有处理用户拒绝弹框的情况下，用户必须授权头像昵称等信息才能继续使用小程序，会导致某些用户放弃使用该小程序。 用户没有很好的方式重新授权，尽管我们增加了[代码]设置[代码]页面，可以让用户选择重新授权，但很多用户并不知道可以这么操作。 此外，我们发现开发者默认将 [代码]wx.login[代码] 和 [代码]wx.getUserInfo[代码] 绑定使用，这个是由于我们一开始的设计缺陷和实例代码导致的（[代码]wx.getUserInfo[代码] 必须通过 [代码]wx.login[代码] 在后台生成 [代码]session_key[代码]后才能调用）。同时，我们收到开发者的反馈，希望用户进入小程序首页便能获取到用户的 [代码]unionId[代码]，以便识别到用户是否以前关注了同主体公众号或使用过同主体的App 。 为了解决以上问题，针对获取用户信息我们更新了三个能力： 1.使用组件来获取用户信息 2.若用户满足一定条件，则可以用[代码]wx.login[代码] 获取到的[代码]code[代码]直接换到[代码]unionId[代码] 3.[代码]wx.getUserInfo[代码] 不需要依赖 [代码]wx.login[代码] 就能调用得到数据 获取用户信息组件介绍 [代码][代码]组件变化： [代码]open-type [代码]属性增加 [代码]getUserInfo[代码] ：用户点击时候会触发 [代码]bindgetuserinfo[代码] 事件。 新增事件 [代码]bindgetuserinfo[代码] ：当 [代码]open-type[代码]为 [代码]getUserInfo[代码] 时，用户点击会触发。可以从事件返回参数的 [代码]detail[代码] 字段中获取到和 [代码]wx.getUserInfo[代码] 返回参数相同的数据。 示例： [代码]<button open-type="getUserInfo" bindgetuserinfo="userInfoHandler"> Click me button>[代码]和 [代码]wx.getUserInfo[代码] 不同之处在于： 1.API [代码]wx.getUserInfo[代码] 只会弹一次框，用户拒绝授权之后，再次调用将不会弹框； 2.组件 [代码][代码][代码][代码]由于是用户主动触发，不受弹框次数限制，只要用户没有授权，都会再次弹框。 通过获取用户信息的组件，就可以解决用户再次授权的问题。 直接获取unionId开发者申请 [代码]userinfo[代码] 授权主要为了获取 [代码]unionid[代码]，我们鼓励开发者在不骚扰用户的情况下合理获得[代码]unionid[代码]，而仅在必要时才向用户弹窗申请使用昵称头像。为此，凡使用“获取用户信息组件”获取用户昵称头像的小程序，在满足以下全部条件时，将可以静默获得[代码]unionid[代码]： 1.在微信开放平台下存在同主体的App、公众号、小程序。 2.用户关注了某个相同主体公众号，或曾经在某个相同主体App、公众号上进行过微信登录授权。 这样可让其他同主体的App、公众号、小程序的开发者快速获得已有用户的数据。 不依赖登录的用户信息获取某些工具类的轻量小程序不需要登录行为，但是也想获取用户信息，那么就可以在 [代码]wx.getUserInfo[代码] 的时候加一个参数[代码]withCredentials: false[代码] 直接获取到用户信息，可以少一次网络请求。 这样可以在不给用户弹窗授权的情况下直接展示用户的信息。 最佳实践 1.调用 [代码]wx.login[代码] 获取 [代码]code[代码]，然后从微信后端换取到 [代码]session_key[代码]，用于解密 [代码]getUserInfo[代码]返回的敏感数据。 2.使用 [代码]wx.getSetting[代码] 获取用户的授权情况 1) 如果用户已经授权，直接调用 API [代码]wx.getUserInfo[代码] 获取用户最新的信息； 2) 用户未授权，在界面中显示一个按钮提示用户登入，当用户点击并授权后就获取到用户的最新信息。 3.获取到用户数据后可以进行展示或者发送给自己的后端。 One More Thing 除了获取用户方案介绍之外，再聊一聊很多初次接触微信小程序的开发者所不容易理解的一些概念： 1.关于OpenId和UnionId [代码]OpenId[代码] 是一个用户对于一个小程序／公众号的标识，开发者可以通过这个标识识别出用户。 [代码]UnionId[代码] 是一个用户对于同主体微信小程序／公众号／APP的标识，开发者需要在微信开放平台下绑定相同账号的主体。开发者可通过[代码]UnionId[代码]，实现多个小程序、公众号、甚至APP 之间的数据互通了。 同一个用户的这两个 ID 对于同一个小程序来说是永久不变的，就算用户删了小程序，下次用户进入小程序，开发者依旧可以通过后台的记录标识出来。 2.关于 getUserInfo 和 login 很多开发者会把 [代码]login[代码] 和 [代码]getUserInfo[代码] 捆绑调用当成登录使用，其实 [代码]login[代码] 已经可以完成登录，[代码]getUserInfo[代码] 只是获取额外的用户信息。 在 [代码]login[代码] 获取到 [代码]code[代码] 后，会发送到开发者后端，开发者后端通过接口去微信后端换取到 [代码]openid[代码] 和[代码]sessionKey[代码]（现在会将[代码]unionid[代码] 也一并返回）后，把自定义登录态 [代码]3rd_session[代码]返回给前端，就已经完成登录行为了。而 [代码]login[代码] 行为是静默，不必授权的，用户不会察觉。 [代码]getUserInfo[代码] 只是为了提供更优质的服务而存在，比如展示头像昵称，判断性别，开发者可通过 [代码]unionId[代码] 和其他公众号上已有的用户画像结合来提供历史数据。因此开发者不必在用户刚刚进入小程序的时候就强制要求授权。 可以在官方的文档中看到 [代码]login[代码] 的最佳实践： [图片] Q & A Q1: 为什么 login 的时候不直接返回 openid，而是要用这么复杂的方式来经过后台好几层处理之后才能拿到？ A: 为了防止坏人在网络链路上做手脚，所以小程序端请求开发者服务器的的请求都需要二次验证才是可信的。因为我们采取了小程序端只给 [代码]code[代码] ，由服务器端拿着 [代码]code[代码] 和 [代码]AppSecrect[代码] 去微信服务器请求的方式，才会给到开发者对应的[代码]openId[代码] 和用于加解密的[代码]session_key。[代码] Q2: 既然用户的[代码]openId[代码] 是永远不变的，那么开发者可以使用[代码]openId[代码] 作为用户的登录态么？ A: 不行，这是非常危险的行为。因为 [代码]openId[代码] 是不变的，如果有坏人拿着别人的 [代码]openId[代码] 来进行请求，那么就会出现冒充的情况。所以我们建议开发者可以自己在后台生成一个拥有有效期的 [代码]第三方session[代码] 来做登录态，用户每隔一段时间都需要进行更新以保障数据的安全性。 Q3: 是不是用户每次打开小程序都需要重新[代码]login[代码]？ A: 不必，可以将登录态存入[代码]storage[代码]中，用户再次登录就可以拿[代码]storage[代码] 里的登录态做正常的业务请求，只有当登录态过期了之后才需要重新[代码]login[代码] 。这样子做一则可以减少用户等待时间，二则可以减少网络带宽。 目前微信的[代码]session_key[代码] 有效期是三天，所以建议开发者设置的登录态有效期要小于这个值。
2018-09-25
【组件库】编写一套小程序商城UI组件库
小程序商城UI组件库 wx-mall-components 最近很久没有更新文章了，在开源一个商城UI组件库，将日常商城用到的一些组件整合打包整理出来，并且支持一键更换组件皮肤等商城常用的功能，供大家使用，组件库还在完善当中，后续会陆陆续续加上各种商城用到的酷炫功能，希望大家可以来一起维护。 https://github.com/csonchen/wx-mall-components pug # 编写静态模板 stylus # 编写样式 gulp # 文件编译，复制操作等 [代码]# 安装&开发阶段 npm install (cnpm install) npm run start # 小程序调试阶段 打开“小程序开发者工具”，选择“导入项目”，选中 dist 目录 目前根据实际情况拆成四大组件版块，分别如下: [代码] wx-mall-components 微信小程序商城组件库 ./dist # 编译后的小程序文件目录存放路径 ./src ├── app.js ├── app.json ├── app.styl ├── components # 组件存放路径 │ ├── card-swiper │ │ ├── card-swiper.js │ │ ├── card-swiper.json │ │ ├── card-swiper.pug │ │ └── card-swiper.styl │ ├── date-picker │ ├── dropdown-select │ ├── form-input │ ├── search │ └── toast ├── images ├── node_modules ├── package.json ├── pages # 页面存放路径 │ ├── cardSwiperPage │ │ ├── cardSwiperPage.js │ │ ├── cardSwiperPage.json │ │ ├── cardSwiperPage.pug │ │ ├── cardSwiperPage.styl │ │ └── doc.js # 组件说明文档 │ ├── datePickerPage │ ├── dropdownSelectPage │ ├── index │ ├── inputPage │ ├── richTextPage │ ├── searchPage │ └── toastPage ├── sitemap.json ├── styles # 公用样式 │ ├── define.styl # 定义变量 │ ├── flex.styl # flex布局 │ ├── framework.styl # 框架定义 │ ├── normal.styl # 字体，边距等 │ └── plugin.styl # 三角形，下三角等插件定义 └── templates # 公用模板文件 └── pageHead.pug
2020-07-06
小程序图片懒加载终极方案
效果图 既然来了，把妹子都给你。 [图片] 定义懒加载，前端人都知道的一种性能优化方式，简单的来说，只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。 实现原理监听页面的[代码]scroll[代码]事件,判读元素距离页面的[代码]top[代码]值是否是小于等于页面的可视高度 判断逻辑代码如下 [代码]element.getBoundingClientRect().top <= document.documentElement.clientHeight ? 显示 : 默认[代码] 我们知道小程序页面的脚本逻辑是在JsCore中运行，JsCore是一个没有窗口对象的环境，所以不能在脚本中使用window，也无法在脚本中操作组件。 所以关于图片懒加载就需要在数据上面做文章了。 页面页面上面只需要根据数据的某一个字段来判断是否显示图片就可以了，字段为Boolean类型，当为false的时候显示默认图片就行了。 代码大概长成这样 <view wx:for="{{list}}" class='item item-{{index}}' wx:key="{{index}}"> <image class="{{item.show ? 'active': ''}}" src="{{item.show ? item.src : item.def}}"></image> </view> 布局跟简单，[代码]view[代码]组件里面有个图片，并循环[代码]list[代码]，有多少就展示多少 [代码]image[代码]组件的[代码]src[代码]字段通过每一项的[代码]show[代码]来进行绑定，[代码]active[代码]是加了个透明的过渡 样式 image{ transition: all .3s ease; opacity: 0; .active{ opacity: 1; 逻辑 本位主要讲解懒加载，所以把数据写死在页面上了 数据结构如下： [图片] 我们使用两种方式来实现懒加载，准备好没有，一起来快乐的撸码吧。 WXML节点信息 小程序支持调用createSelectQuery创建一个[代码]SelectorQuery[代码]实例，并使用[代码]select[代码]方法来选择节点，并通过[代码]boundingClientRect[代码]来获取节点信息。 wx.createSelectorQuery().select('.item').boundingClientRect((ret)=>{ console.log(ret) }).exec() 显示结果如下 [图片] 悄悄告诉你，小程序里面有个[代码]onPageScroll[代码]函数，是用来监听页面的滚动的。 还有个[代码]getSystemInfo[代码]函数，可以获取获取系统信息，里面包含屏幕的高度。 接下来，思路就透彻了吧。还是上面的逻辑， 扒拉扒拉直接写代码就行了,这里只写下主要的逻辑，完整代码请戳文末github showImg(){ let group = this.data.group let height = this.data.height // 页面的可视高度 wx.createSelectorQuery().selectAll('.item').boundingClientRect((ret) => { ret.forEach((item, index) => { if (item.top <= height) { 判断是否在显示范围内 group[index].show = true // 根据下标改变状态 this.setData({ group }).exec() onPageScroll(){ // 滚动事件 this.showImg() 至此，我们完成了一个小程序版的图片懒加载，只是思维转变了下，其实并没有改变实现方式。我们来学些新的东西吧。 节点布局相交状态 节点相交状态是啥？它是一个新的API，叫做[代码]IntersectionObserver[代码], 本文只讲解简单的使用，了解更多请猛戳没错，就是点我 小程序里面给它的定义是节点布局交叉状态API可用于监听两个或多个组件节点在布局位置上的相交状态。这一组API常常可以用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。 里面设计的概念主要有五个，分别为 参照节点：以某参照节点的布局区域作为参照区域，参照节点可以有多个，多个话参照区域取它们的布局区域的交集目标节点：监听的目标，只能是一个节点相交区域：目标节点与参照节点的相交区域相交比例：目标节点与参照节点的相交比例阈值：可以有多个，默认为[0], 可以理解为交叉比例，例如[0.2, 0.5]关于它的API有五个，依次如下 1、[代码]createIntersectionObserver([this], [options])[代码]，见名知意,创建一个IntersectionObserver实例 2、[代码]intersectionObserver.relativeTo(selector, [margins])[代码], 指定节点作为参照区域，margins参数可以放大缩小参照区域，可以包含top、left、bottom、right四项 3、[代码]intersectionObserver.relativeToViewport([margin])[代码]，指定页面显示区域为参照区域 4、[代码]intersectionObserver.observer(targetSelector, callback)[代码]，参数为指定监听的节点和一个回调函数，目标元素的相交状态发生变化时就会触发此函数，callback函数包含一个result，下面再讲 5、[代码]intersectionObserver.disconnect()[代码] 停止监听，回调函数不会再触发 然后说下callback函数中的result，它包含的字段为 [图片] 我们主要使用[代码]intersectionRatio[代码]进行判断，当它大于0时说明是相交的也就是可见的。 先来波测试题，请说出下面的函数做了什么，并且log函数会执行几次 1、 wx.createIntersectionObserver().relativeToViewport().observer('.box', (result) => { console.log('监听box组件触发的函数') wx.createIntersectionObserver().relativeTo('.box').observer('.item', (result) => { console.log('监听item组件触发的函数') wx.createIntersectionObserver().relativeToViewport().observer('.box', (result) => { if(result.intersectionRatio > 0){ console.log('.box组件是可见的') duang，揭晓答案。 第一个以当前页面的视窗监听了[代码].box[代码]组件，log会触发两次，一次是进入页面一次是离开页面 第二个以[代码].box[代码]节点的布局区域监听了[代码].item[代码]组件，log会触发两次，一次是进入页面一次是离开页面 第三个以当前页面的视窗监听了[代码].box[代码]组件，log只会在节点可见的时候触发 好了，题也做了，API你也掌握了，相信你已经可以使用[代码]IntersectionObserver[代码]来实现图片懒加载了吧，主要逻辑如下 let group = this.data.group // 获取图片数组数据 for (let i in this.data.group){ wx.createIntersectionObserver().relativeToViewport().observe('.item-'+ i, (ret) => { if (ret.intersectionRatio > 0){ group[i].show = true this.setData({ group 最后 至此，我们使用两种方式实现了小程序版本的图片懒加载，可以发现，使用[代码]IntersectionObserver[代码]来实现不要太酸爽
2020-05-12
如何实现一个带图标的actionSheet效果
刚才有童鞋询问如何给actionSheet前加图标，然鹅官方没提供该效果，那么我们自己做一个定制化的actionSheet吧。 还是那句话，有需求，咱们有空就去实现下，也算是能锻炼自己的动手能力，提升点知识面。。 先看看实现后的效果图： 首先自定义actionSheet组件。 简单的页面布局。 [代码]<view class="qts-as-mask qts-class-mask {{ visible ? 'qts-as-mask-show' : '' }}" bindtap="handleClickMask" catchtouchmove="preventTouchmove" ></view> <view class="qts-class qts-as {{ visible ? 'qts-as-show' : '' }}" catchtouchmove="preventTouchmove"> <view class="qts-as-header qts-class-header"> <slot name="header"></slot> </view> <view class="qts-as-actions"> <view class="qts-as-action-item" wx:for="{{actions}}" wx:key="name"> <button hover-class="none" bindtap="handleClickItem" data-index="{{index}}" open-type="{{item.openType}}" class="qts-as-btn-qts ptp_exposure" > <image wx:if="{{item.icon}}" src="{{item.icon}}" class="qts-btn-image" /> <view class="qts-as-btn-text">{{item.name}}</view> </button> </view> </view> <view class="qts-as-cancel" wx:if="{{showCancel}}"> <button hover-class="none" class="qts-as-cancel-btn" bindtap="handleClickCancel">取消</button> </view> </view> js处理： 定制了三种功能： 是否需要隐藏取消按钮 是否需要点击蒙层关闭actionSheet 内容外部组件可配置 [代码]Component({ externalClasses: ['qts-class', 'qts-class-mask', 'qts-class-header'], options: { multipleSlots: true properties: { showCancel: { type: Boolean, value: true visible: { type: Boolean, value: false actions: { type: Array, value: [] maskClosable: { type: Boolean, value: true methods: { handleClickMask() { if (!this.data.maskClosable) return; this.handleClickCancel(); preventTouchmove() {}, handleClickItem(e) { const dataset = e.currentTarget.dataset || '' this.triggerEvent('click', dataset) this.triggerEvent('cancel'); handleClickCancel() { this.triggerEvent('cancel'); 应用的页面引用该组件： [代码]<view class="container" bindtap="handleClick">点我弹出actionSheet</view> visible 弹窗显隐藏 show-cancel 是否显示取消按钮 bind:cancel 取消按钮点击回调 bind:click 单个item点击回调 mask-closable 点击蒙层是否关闭弹窗 <action-sheet visible="{{visible}}" actions="{{actions}}" show-cancel bind:cancel="handleClick" bind:click="handleClickItem" mask-closable="{{true}}" /> [代码]const app = getApp() Page({ data: { //可配置items选项，支持传入button的openType属性 actions: [{ name: '生成图片', icon: 'https://qiniu-image.qtshe.com/201809104.png' name: '转发给好友或群聊天', icon: 'https://qiniu-image.qtshe.com/201809105.png', openType: 'share' visible: false //弹窗显隐藏 handleClick() { this.setData({ visible: !this.data.visible //单个item点击 //actionsheet内的点击方法 handleClickItem({detail}) { if (detail.index === 0) { console.log(111) //第一个选项被点击 以上就是一个自定义actionSheet的实现方式以及引用方式。。 老规矩，附上代码片段。 https://developers.weixin.qq.com/s/Bhc0Sjmw7AgW
2020-05-26
WeUI官方组件库：助力小程序高效设计与开发
提起 WeUI，相信大家都不陌生，WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。 不过，对于 WeUI 样式库，开发者就有疑问了。 [图片] [图片] 我们来看看 WeUI 组件库到底有什么可用的 UI 组件呢？WeUI 样式库有的各个元素，WeUI 组件库是基于 WeUI 样式库做了组件化处理，开发者可以便捷的使用，无需考虑组件层面的逻辑问题。 [图片] 有了心动的组件之后，大家肯定想知道 WeUI 组件库是怎么使用的。 [图片] 要使用 WeUI，首先要把 WeUI 引入我们的小程序项目，引入 WeUI 的方式有以下两种，使用其中一种即可～ 方法一：通过 useExtendedLib 扩展库 的方式引入，这种方式引入的组件将不会计入代码包大小。（推荐👍） 方法二：可以通过 npm方式下载构建，npm 包名为 weui-miniprogram。 与方法一不同，npm 引入的方式需要多操作一步，在 app.wxss 中引用 weui.wxss。 // app.wxss @import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss'; [图片] 引入之后，我们就要开始来使用了，WeUI 组件库是基于小程序自定义组件构建的，所以使用是以自定义组件的形式来使用。 下面通过几个例子来感受下 WeUI 组件库的使用。 由于是自定义组件的形式，所以使用组件都需要在页面配置中引入，像这样： // page.json "usingComponents": { "mp-half-screen-dialog": "weui-miniprogram/half-screen-dialog/half-screen-dialog", "mp-searchbar": "weui-miniprogram/searchbar/searchbar" 引入组件之后，就可以直接在 wxml 中使用了，当然，为了让开发者接入更加简便，我们也加入了做了一些常见的实用性功能。 半屏弹窗 小程序提供了 wx.showModal、wx.showToast 供开发者进行页面交互，在开发过程中，可能需要自定义按钮相关的内容，所以 WeUI 提供了半屏弹窗让开发者可以有更多的自定义空间。 我们来看下代码，使用很简单，直接使用 mp-half-screen-dialog，配置相关属性即可。 // page.wxml <mp-half-screen-dialog bindbuttontap="buttontap" show="{{show}}" mask-closable="{{false}}" title="测试标题B" sub-title="测试标题B的副标题" desc="辅助描述内容，可根据实际需要安排" tips="辅助提示内容，可根据实际需要安排" buttons="{{buttons}}"> </mp-half-screen-dialog> // page.js data配置 buttons: [ type: 'default', className: '', text: '辅助操作', value: 0 type: 'primary', className: '', text: '主操作', value: 1 来看下半屏弹窗的效果～ u1s1，这交互体验真的爱了😍 [图片] Form 表单校验 Form 表单这里，除了基础的的功能之外，WeUI 组件库还提供了表单校验的能力，通过 rules 规则的配置（支持长度、手机号码、电子邮件、url 链接地址等），轻松解决表单校验问题。 [图片] 左滑删除 相比 Web 端，手机端的操作按钮更多的是通过⬅️左滑等来实现，考虑到左滑删除的普遍性，WeUI 组件库也是支持的。 在 mp-slideview 组件中设置 buttons属性即可。 [图片] 搜索组件 同样是基本功能的搜索，WeUI 组件库也封装了搜索组件，开发者只需配置搜索结果即可拥有搜索功能～ [图片] 除了这些组件之外，WeUI 组件库还提供了很多实用的组件，包括基础的 icon、loading，表单的 uploader、cell 等等。 [图片] 伴随客户端、小程序对 DarkMode 的支持，WeUI 组件库也同步适配 DarkMode 的模式，让 WeUI 组件库的使用同学可以快速适配 DarkMode。 在根结点（或组件的外层结点）增加属性 data-weui-theme="dark" ，即可把 WeUI 组件切换到 DarkMode 的表现，如： <view data-weui-theme="dark"> </view> [图片] 最后，如果想体验 WeUI 组件库的效果，欢迎点击下方小程序示例体验👏及接入使用，使用过程中如有建议或者疑问，欢迎到微信开放社区与我们交流。 [图片]
2020-05-21
小程序在web-view中跳转小程序，提示“当前小程序无法打开***小程序”
每个小程序可跳转的其他小程序数量限制为不超过10个，在web-view中打开的小程序也包含在这个限制中。 从 基础库2.4.0 版本以及指定日期（参考公告）开始，开发者提交新版小程序代码时，如使用了跳转其他小程序功能，则需要在代码配置中声明将要跳转的小程序名单，限定不超过 10 个，否则将无法通过审核。该名单可在发布新版时更新，不支持动态修改。配置方法详见 小程序全局配置。
2019-11-11
小程序跳转数量限制总结
总结一下小程序的跳转能力和数量限制
2020-06-24
H5如何跳转微信小程序？
之前遇到一个需求，就是要从H5跳转到小程序里，但是微信之前一直没有提供接口做跳转，我们只能做降级方案，在要跳转小程序的地方做了一个弹窗，弹窗里面放小程序码，引导用户长按识别小程序码，然后跳转到小程序内，整个流程非常之长，转化率可想而知也是很低的。 今天刚好看到有人技术群里面问了这个问题，于是我就去看了下微信的文档，发现微信偷偷的更新的这个接口，可以让微信浏览器下的H5跳转到小程序内。 相关文档在这边： https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html 用的是JS-SDK的接口，需要使用到js-sdk-1.6.0的版本才有支持，https://res.wx.qq.com/open/js/jweixin-1.6.0.js wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印 appId: '', // 必填，公众号的唯一标识 timestamp: , // 必填，生成签名的时间戳 nonceStr: '', // 必填，生成签名的随机串 signature: '',// 必填，签名 jsApiList: [], // 必填，需要使用的JS接口列表 openTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app'] 在wx.config下面多了一项openTagList，开放标签列表，目前支持配置wx-open-launch-weapp，wx-open-launch-app wx-open-launch-weapp 指H5跳转小程序 wx-open-launch-app 指H5跳转app 我们主要介绍的是wx-open-launch-weapp H5跳转小程序 先上才艺： [图片][图片][图片] html代码如下： var btn = document.getElementById('launch-btn'); btn.addEventListener('launch', function (e) { console.log('success'); btn.addEventListener('error', function (e) { console.log('fail', e.detail); username为小程序的原始id，path对应的是小程序的链接地址。之前有写过微信H5的应该会知道怎么把这段代码嵌入到之前的代码里面。 目前此功能仅开放给已认证的服务号，网页的域名要在服务号的“JS接口安全域名”下。 亲测<wx-open-launch-weapp>可以跳转到任意合法合规的小程序，是任意的小程序都能跳转！！！！这个接口真开放（不怕人干坏事？） PS： 有个坑，官方文件说的path是/a/b/c?d=1&e=2#fg，类似的这样的链接格式，但是我自己亲测如果直接使用/a/b/c?d=1&e=2#fg这样格式的链接会报页面不存在，然后我想到了小程序那边复制链接的时候会在链接后面加上.html，于是挖槽的事情发生了，把path链接格式换成/a/b/c.html?d=1&e=2#fg这样就能正常访问，不知道是微信故意这样设计的还是bug，有待考证。 然后这个接口真的可以干好多坏事，希望大家能用正确的价值观来正确使用此接口。 微信开放标签有最低的微信版本要求，以及最低的系统版本要求。 如果开发过程中出现以下情况的，要确认一下，微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上。 [图片]
2020-07-09
绑定在一个开发者帐号下，同个用户获取到的unionID不一样
只要绑在一个开发者帐号下，即使主体不一样，也允许获取到统一的unionID。绑定同一个微信开放平台帐号下，同一个用户的unionID如果不同的，原因只能是开发者搞混openid。openid要对应所属的AppID，才会相同。 举个例子： 1. 小程序AppID：wxc104eb635b8cxxxx ——帐号A， 公众号AppID：wx311a2a9a8e1dxxxx ——帐号B， 2.核实帐号A和帐号B 绑定同一个微信开放平台帐号是：xxxxxx@sina.com ，所以用一个用户的unionID相同， 3.而开发者所反馈的出现unionID不同，原因是：所提供的openid不属于帐号A，也不属于帐号B，而是属于帐号C或帐号D，而帐号C或帐号D并没有绑定在同一个微信开放平台帐号下，所以unionID不同
2019-09-16
(4)获取用户信息
背景 我们发现大部分小程序都会使用 [代码]wx.getUserInfo[代码] 接口，来获取用户信息。原本设计这个接口时，我们希望开发者在真正需要用户信息的情况下才去调取这个接口，但很多开发者会直接调用这个接口，导致用户在使用小程序的时候产生困扰，归结起来有几点： 开发者在小程序首页直接调用 [代码]wx.getUserInfo[代码] 进行授权，弹框获取用户信息，会使得一部分用户点击“拒绝”按钮。 在开发者没有处理用户拒绝弹框的情况下，用户必须授权头像昵称等信息才能继续使用小程序，会导致某些用户放弃使用该小程序。 用户没有很好的方式重新授权，尽管我们增加了[代码]设置[代码]页面，可以让用户选择重新授权，但很多用户并不知道可以这么操作。 此外，我们发现开发者默认将 [代码]wx.login[代码] 和 [代码]wx.getUserInfo[代码] 绑定使用，这个是由于我们一开始的设计缺陷和实例代码导致的（[代码]wx.getUserInfo[代码] 必须通过 [代码]wx.login[代码] 在后台生成 [代码]session_key[代码]后才能调用）。同时，我们收到开发者的反馈，希望用户进入小程序首页便能获取到用户的 [代码]unionId[代码]，以便识别到用户是否以前关注了同主体公众号或使用过同主体的App 。 为了解决以上问题，针对获取用户信息我们更新了三个能力： 1.使用组件来获取用户信息 2.若用户满足一定条件，则可以用[代码]wx.login[代码] 获取到的[代码]code[代码]直接换到[代码]unionId[代码] 3.[代码]wx.getUserInfo[代码] 不需要依赖 [代码]wx.login[代码] 就能调用得到数据 获取用户信息组件介绍 [代码][代码] 组件变化： [代码]open-type [代码]属性增加 [代码]getUserInfo[代码] ：用户点击时候会触发 [代码]bindgetuserinfo[代码] 事件。 新增事件 [代码]bindgetuserinfo[代码] ：当 [代码]open-type[代码]为 [代码]getUserInfo[代码] 时，用户点击会触发。可以从事件返回参数的 [代码]detail[代码] 字段中获取到和 [代码]wx.getUserInfo[代码] 返回参数相同的数据。 示例： [代码]<button open-type="getUserInfo" bindgetuserinfo="userInfoHandler"> Click me button>[代码]和 [代码]wx.getUserInfo[代码] 不同之处在于： 1.API [代码]wx.getUserInfo[代码] 只会弹一次框，用户拒绝授权之后，再次调用将不会弹框； 2.组件 [代码][代码][代码][代码] 由于是用户主动触发，不受弹框次数限制，只要用户没有授权，都会再次弹框。 通过获取用户信息的组件，就可以解决用户再次授权的问题。 直接获取unionId开发者申请 [代码]userinfo[代码] 授权主要为了获取 [代码]unionid[代码]，我们鼓励开发者在不骚扰用户的情况下合理获得[代码]unionid[代码]，而仅在必要时才向用户弹窗申请使用昵称头像。为此，凡使用“获取用户信息组件”获取用户昵称头像的小程序，在满足以下全部条件时，将可以静默获得 [代码]unionid[代码]： 1.在微信开放平台下存在同主体的App、公众号、小程序。 2.用户关注了某个相同主体公众号，或曾经在某个相同主体App、公众号上进行过微信登录授权。 这样可让其他同主体的App、公众号、小程序的开发者快速获得已有用户的数据。 不依赖登录的用户信息获取某些工具类的轻量小程序不需要登录行为，但是也想获取用户信息，那么就可以在 [代码]wx.getUserInfo[代码] 的时候加一个参数 [代码]withCredentials: false[代码] 直接获取到用户信息，可以少一次网络请求。 这样可以在不给用户弹窗授权的情况下直接展示用户的信息。 最佳实践 1.调用 [代码]wx.login[代码] 获取 [代码]code[代码]，然后从微信后端换取到 [代码]session_key[代码]，用于解密 [代码]getUserInfo[代码]返回的敏感数据。 2.使用 [代码]wx.getSetting[代码] 获取用户的授权情况 1) 如果用户已经授权，直接调用 API [代码]wx.getUserInfo[代码] 获取用户最新的信息； 2) 用户未授权，在界面中显示一个按钮提示用户登入，当用户点击并授权后就获取到用户的最新信息。 3.获取到用户数据后可以进行展示或者发送给自己的后端。 One More Thing 除了获取用户方案介绍之外，再聊一聊很多初次接触微信小程序的开发者所不容易理解的一些概念： 1.关于OpenId和UnionId [代码]OpenId[代码] 是一个用户对于一个小程序／公众号的标识，开发者可以通过这个标识识别出用户。 [代码]UnionId[代码] 是一个用户对于同主体微信小程序／公众号／APP的标识，开发者需要在微信开放平台下绑定相同账号的主体。开发者可通过[代码]UnionId[代码]，实现多个小程序、公众号、甚至APP 之间的数据互通了。 同一个用户的这两个 ID 对于同一个小程序来说是永久不变的，就算用户删了小程序，下次用户进入小程序，开发者依旧可以通过后台的记录标识出来。 2.关于 getUserInfo 和 login 很多开发者会把 [代码]login[代码] 和 [代码]getUserInfo[代码] 捆绑调用当成登录使用，其实 [代码]login[代码] 已经可以完成登录，[代码]getUserInfo[代码] 只是获取额外的用户信息。 在 [代码]login[代码] 获取到 [代码]code[代码] 后，会发送到开发者后端，开发者后端通过接口去微信后端换取到 [代码]openid[代码] 和[代码]sessionKey[代码]（现在会将 [代码]unionid[代码] 也一并返回）后，把自定义登录态 [代码]3rd_session[代码]返回给前端，就已经完成登录行为了。而 [代码]login[代码] 行为是静默，不必授权的，用户不会察觉。 [代码]getUserInfo[代码] 只是为了提供更优质的服务而存在，比如展示头像昵称，判断性别，开发者可通过 [代码]unionId[代码] 和其他公众号上已有的用户画像结合来提供历史数据。因此开发者不必在用户刚刚进入小程序的时候就强制要求授权。 可以在官方的文档中看到 [代码]login[代码] 的最佳实践： [图片] Q & A Q1: 为什么 login 的时候不直接返回 openid，而是要用这么复杂的方式来经过后台好几层处理之后才能拿到？ A: 为了防止坏人在网络链路上做手脚，所以小程序端请求开发者服务器的的请求都需要二次验证才是可信的。因为我们采取了小程序端只给 [代码]code[代码] ，由服务器端拿着 [代码]code[代码] 和 [代码]AppSecrect[代码] 去微信服务器请求的方式，才会给到开发者对应的[代码]openId[代码] 和用于加解密的 [代码]session_key。[代码] Q2: 既然用户的[代码]openId[代码] 是永远不变的，那么开发者可以使用[代码]openId[代码] 作为用户的登录态么？ A: 不行，这是非常危险的行为。因为 [代码]openId[代码] 是不变的，如果有坏人拿着别人的 [代码]openId[代码] 来进行请求，那么就会出现冒充的情况。所以我们建议开发者可以自己在后台生成一个拥有有效期的 [代码]第三方session[代码] 来做登录态，用户每隔一段时间都需要进行更新以保障数据的安全性。 Q3: 是不是用户每次打开小程序都需要重新[代码]login[代码]？ A: 不必，可以将登录态存入[代码]storage[代码]中，用户再次登录就可以拿[代码]storage[代码] 里的登录态做正常的业务请求，只有当登录态过期了之后才需要重新[代码]login[代码] 。这样子做一则可以减少用户等待时间，二则可以减少网络带宽。 目前微信的[代码]session_key[代码] 有效期是三天，所以建议开发者设置的登录态有效期要小于这个值。
2018-08-17
小程序生成海报：通过 json 配置方式轻松制作一张海报图
由于我们无法将小程序直接分享到朋友圈，但分享到朋友圈的需求又很多，业界目前的做法是利用小程序的 Canvas 功能生成一张带有二维码的图片，然后引导用户下载图片到本地后再分享到朋友圈。而小程序 Canvas 功能是很难用的，往往为了绘制一张简单图片，就得写上一堆 boilerplate code ，而且一不小心还会踩到 Canvas 的各种彩蛋（坑）。我想此时你的心情肯定是这样的。
想到小程序中有如此大量的生成图片需求，而 Canvas 生成方法又是如此难用和坑爹。那我们就想到可不可以做一款可以很方便生成图片，并且还能屏蔽掉直接使用 Canvas 的一些坑的库呢？所以我们发起了 “画家计划— 通过 json 数据形式，来进行动态渲染并绘制出图片”。 Painter 库的整体架构如下：
首先，我们定义了一套绘图 JSON 规范，开发者可以根据需求构建生成图片的 Palette（调色板），然后在程序运行过程中把调色板传入给 Painter（画家）。Painter 会调用 Pen（画笔），根据 Palette 内容绘制出对应的图片后返回。
那可不可以开发一款生成海报的插件库呢?
首先，只需要提供一份简单的参数配置文件即可
解决掉小程序Canvas遇到的一些大大小小的坑
有严苛的测试环节，解决各种环境和各种机型遇到的问题，并提供稳定的线上版本
长期维护，并有专人更新迭代更新颖的功能
###隆重介绍
Painter 的优势
功能全，支持文本、图片、矩形、qrcode 类型的 view 绘制
布局全，支持多种布局方式，如 align（对齐方式）、rotate（旋转）
支持渐变色，阴影，配置简单，容易上手，兼容性好
支持圆角，其中图片，矩形，和整个画布支持 borderRadius 来设置圆角
杠杠的性能优化，我们对网络素材图片加载实现了一套 LRU 存储机制，不用重复下载素材图片。
杠杠的容错，因为某些特殊情况会导致 Canvas 绘图不完整。我们对此加入了对结果图片进行检测机制，如果绘图出错会进行重绘。
How To Use
[代码]git clone https://github.com/Kujiale-Mobile/Painter.git
代码下载后，用小程序 IDE 打开后即可使用。
注：请选择小程序项目，非小游戏，例子中无 appid，所以无法在手机上运行，如果需要真机调试，请在打开例子时，填上自己的小程序 id
具体详细使用教程 GitHub 地址https://github.com/Kujiale-Mobile/Painter
由于编写配置再加上调试还是有些麻烦,故制作一款可视化编辑工具,直接拖动编辑元素即可生成海报
可视化编辑拖拽直接生成painter代码
工具体验地址https://lingxiaoyi.github.io/painter-custom-poster/
工具使用文档https://juejin.im/post/5d8b20ba51882509615bca09
2019-10-14
小程序订阅消息申请长期模板？请官方回复下。已申请半月了
【小程序appid】：wx7852630df179d2e8 【小程序主体】：宿迁市商务局 【申请模板类目】：政务民生 > 商务 【申请模板名称】：问卷调查通知 【使用场景】：该小程序针对填报信息的企业用户，推送政府让企业填写的问卷调查通知 【模板字段】：问卷调查名称、问卷调查时间 【消息示例】 材料补充通知 问卷调查名称：关于企业人员学历范围调查 问卷调查时间:2020-07-16至2020-08-16
2020-08-03
极简代码之云开发的触底无限加载
[代码]const db = wx.cloud.database()
const _ = db.command
const col = "test"
const sql = {
_id: _.neq(1)
} //获取所有记录
Page({
data: {
isEndOfList: false,
list: [],
limit: 20 //每次拉取数量
onLoad: function(options) {
this.getData()
getData: function() {
db.collection(col)
.where(sql)
.skip(this.data.list.length)
.limit(this.data.limit)
.get()
.then(res => {
this.setData({
list: [...this.data.list, ...res.data], //合并数据
isEndOfList: res.data.length < this.data.limit ? true : false //判断是否结束
onReachBottom: function() {
this.data.isEndOfList || this.getData()
[代码]<view style="height:100px" wx:for='{{list}}' wx:key='none'>{{index}}</view>
<view style="padding:15px;text-align:center;color:grey" wx:if='{{list.length>limit}}'>
<view wx:if='{{(!isEndOfList)}}'>正在加载数据...</view>
<view wx:else>----END----</view>
</view>
2020-06-16
熟练使用微信开发工具的代码块功能提升编码效率，降低误码率
1. 写在前面 自从上次介绍了宇宙第一强集成IDE的微信开发者工具安装插件等隐藏功能后，很多开发者社区哥们老铁感兴趣，一些哥们还私我问我是否支持代码块功能。答案是：支持！而且很完美的支持（此处必须有感恩，感恩微信团队每天的辛苦开发，作为同开发过小编辑器的人知道其中的苦与乐，同时呼吁各位猿少些喷喷喷的负能量，多些宣传和赞美的正能量！）。代码块是小编非常非常常用的一个功能，基本从04年开始建站和开发过程用过的所有IDE中都必备的功能。熟练使用微信开发工具的代码块功能提升编码效率，降低高频代码段的误写率。 2. 什么是代码块 可能有些刚接触开发的哥们不了解什么是「代码块」，这里我仅仅说说我个人对「代码块」功能的理解：代码块，英文名字：Code snippets,代码块的作用就是把比较长的一段代码在编码时只需要输入简写后的几个字母，比如把高频的代码console.log();简写成「clg」，再比如把小程序的页面.js里面的onLoad(),onShow等常用代码简写成「page_init」几个字母，最早提出这个概念和想法的人我也不知道是谁，总之得感谢他。如果说现在很多的编程语言有「语法糖」的说法，那么我个人觉得「代码块」可以称为「代码糖/编码糖」！熟练使用编码糖一定能让你尝到编码中的甜味。他的优点非常明显：极速，0误差输入高频代码段。个人觉得无论你现在处在编码的哪个级别都应该熟练使用Code snippets来提升工作效率。 3. 如何使用 3.1 打开开发者工具的编辑器扩展目录 3.2 创建相关文件夹 返回上一级目录到User目下（里面有Workspaces文件夹），创建/进入snippets，此目录mac下完整路径应为："~/Library/Application Support/微信开发者工具/【当前开发者工具特征码】/Default/Editor/User/snippets" 3.3 新建/编辑代码块json文件（如上图） 格式如上面，1，2，3是我比较常用的代码糖，生效后输入图1里面的clg回车就是console.log()(可以用这个来检测你代码糖功能是否生效);并且光标自动定位到()里，如下图： [图片][图片] 3.4 附带自用all.code-snippets 下面附上我常用的粗陋的代码糖块文件all.code-snippets（可以直接复制使用，你可以自行自己添加删除。里面有自己写的java框架常用的代码块,php常用和html常用以及nginx比较常用的，个人习惯不一样建议全部干掉重来，只需按里面的格式来写就可以了，格式如下： "getpost": { "prefix": "getpost", "body": "TtMap postUrl = Tools.getUrlParam();\r\nTtMap post = Tools.getpostmap(request, true);// 过滤参数，过滤mysql的注入，url参数注入\r\n" "tcf": { "prefix": "tcf", "body": "try{\r\n}catch(Exception e){\r\n\tTools.logError(e.getMessage());\r\n}finally{\r\n\t$0.closeConn();\r\n}", "777": { "prefix": "777", "body": "Runtime.getRuntime().exec(\"chmod 777 -R \" + strFileFullPath);" "go-1": { "prefix": "go-1", "body": "javascript:history.go(-1);" "dbctrl": { "prefix": "!dbctrl", "body": "DbCtrl dbCtrl = new DbCtrl(\"$0\");\r\ntry{\r\n\tTtList list = dbCtrl.lists(\"\", \"\");\r\n\tTtMap info = dbCtrl.info($2);\r\n}catch(Exception e){\r\n\tTools.logError(e.getMessage());\r\n\tif (Config.DEBUGMODE) {\r\n\t\te.printStackTrace();\r\n\t}\r\n}finally{\r\n\tdbCtrl.closeConn();\r\n}", "description": "TT-DbCtrl" "dbtools": { "prefix": "dbtools", "body": "DbTools dbTools = new DbTools();\r\ntry{\r\n\tTtList list = dbTools.reclist(\"$0\");\r\n\tTtMap info = dbTools.recinfo(\"$2\");\r\n}catch(Exception e){\r\n\tTools.logError(e.getMessage());\r\n}finally{\r\n\tdbTools.closeConn();\r\n}" "!recinfo": { "prefix": "rrecinfo", "body": "Tools.recinfo(\"$0\")", "description": "TT-DbTools-recinfo" "!reclist": { "prefix": "rreclist", "body": "Tools.reclist(\"$0\")", "description": "TT-DbTools-reclist" "ss": { "prefix": "ss", "body": "String[] sS = new String[]{}; ", "description": "new String[]" "mss": { "prefix": "mss", "body": "TtMap info = new HashMap<>();", "description": "new Map<String,String>" "lss": { "prefix": "lss", "body": "TtList lmss = new ArrayList<>();", "description": "new TtList " "<%": { "prefix": "!s", "body": "<%\r\n\t$0\r\n%>", "description": "TT-JSP<%自动完成" "<%=": { "prefix": "!ss", "body": "<%=$0%>", "description": "TT-JSP<%=自动完成" "jsp_include": { "prefix": "!sss", "body": "<jsp:include page=\"<%=$0%>\">\r\n\t<jsp:param name=\"$3\" value=\"$2\"/>\r\n</jsp:include>" "jsp_include2": { "prefix": "<jsp", "body": "<jsp:include page=\"<%=$0%>\">\r\n\t<jsp:param name=\"$3\" value=\"$2\"/>\r\n</jsp:include>" "!jsp_requery": { "prefix": "!req", "body": "request.getParameter(\"$0\")", "!jsp_requery_getAttribute": { "prefix": "!req2", "body": "request.getAttribute(\"$0\")", "!": { "prefix": "!ssss", "body": "<%@page import=\"com.tt.tool\"%>\r\n<%@ page contentType=\"text/html;charset=UTF-8\" language=\"java\"%>\r\n<%@ taglib prefix=\"c\" uri=\"http://java.sun.com/jsp/jstl/core\"%>\r\n<%@ taglib prefix=\"fmt\" uri=\"http://java.sun.com/jsp/jstl/fmt\"%>\r\n<%@ taglib uri=\"http://java.sun.com/jsp/jstl/functions\" prefix=\"fn\"%>\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\r\n <title>$0</title>\r\n</head>\r\n<body>\r\n\t$2\r\n</body>\r\n</html>", "description": "jsp-header" "div": { "prefix": "<div", "body": "<div id=\"$0\" name=\"$0\">\r\n\t\r\n</div>", "p": { "prefix": "<p", "body": "<p id=\"\" name=\"\"></p>", "a": { "prefix": "<a", "body": "<a href=\"$0\" id=\"\" name=\"\">$2</a>", "head": { "prefix": "<head", "body": "<head>\r\n\t$0\r\n</head>", "img": { "prefix": "<img", "body": "<img id=\"\" name=\"\" src=\"$0\">" "ul": { "prefix": "<ul", "body": "<ul id=\"\" name=\"\">\r\n\t\r\n</ul>" "li": { "prefix": "<li", "body": "<li id=\"\" name=\"\">\r\n\t\r\n</li>" "select": { "prefix": "<select", "body": "<select id=\"\" name=\"\">\r\n\t\r\n</select>" "option": { "prefix": "<option>", "body": "<option value=\"\">$0</option>" "input": { "prefix": "<input", "body": "<input type=\"$0\" id=\"$2\" name=\"$2\" value=\"$3\">" "form": { "prefix": "<form", "body": "<form id=\"info_form\" action=\"$${posturl}\" class=\"form-horizontal\" method=\"post\" enctype=\"multipart/form-data\">\r\n\t$2\r\n</form>" "!i": { "prefix": "!i", "body": "<%@ page contentType=\"text/html;charset=UTF-8\" language=\"java\"%>\r\n<%@ page import=\"com.tt.tool.Tools\" %>\r\n<%@ page import=\"com.tt.data.TtMap\" %>\r\n<%@ page import=\"com.tt.data.TtList\" %>\r\n<%@ page import=\"com.tt.tool.JspTools\" %>\r\n<%@ page import=\"java.util.*\" %>\r\n<%@ taglib prefix=\"c\" uri=\"http://java.sun.com/jsp/jstl/core\"%>\r\n<%@ taglib prefix=\"fmt\" uri=\"http://java.sun.com/jsp/jstl/fmt\"%>\r\n<%@ taglib uri=\"http://java.sun.com/jsp/jstl/functions\" prefix=\"fn\"%>\r\n<%@ taglib prefix=\"Tools\" uri=\"/tld/manager\" %>\r\n", "loginfo": { "prefix": "loginfo", "body": "Tools.logInfo($0)", "description": "loginfo" "logerror": { "prefix": "logerror", "body": "Tools.logError($0)", "description": "loginfo" //javascript "!go-1": { "prefix": "!go-1", "body": "javascript:history.go(-1);", "!tag": { "prefix": "!tag", "body": "<%@ taglib prefix=\"c\" uri=\"http://java.sun.com/jsp/jstl/core\"%>\r\n<%@ taglib prefix=\"fmt\" uri=\"http://java.sun.com/jsp/jstl/fmt\"%>\r\n<%@ taglib uri=\"http://java.sun.com/jsp/jstl/functions\" prefix=\"fn\"%>\r\n<%@ taglib prefix=\"Tools\" uri=\"/tld/manager\" %>", "$$": { "prefix": "$$", "body": "$(function(){$0\r\n});", "description": "TT-jquery自动运行" "$(": { "prefix": "$f", "body": [ "$(function(){", "});" "description": "TT-jquery自动运行" "timer": { "prefix": "timer", "body": "inv = setInterval(\"$0showtimes();\",1000);", "description": "TT-JS每隔几秒自动运行", "!posturl": { "prefix": "!posturl", "body": "<%=Tools.urlKill(\"id$0\")%>", "!ifdebug": { "prefix": "ifd", "body": [ "if (Config.DEBUGMODE) {", "\te.printStackTrace();", "reload":{ "prefix": "reload", "body": "location.reload(true);" //PHP "<?php": { "prefix": "php", "body": "<?php $0 ?>", "description": "Global-PHP插入标签" "nav":{ "prefix": "nav", "body": "<navigator url=\"car_yy/car_yy_ppuser/car_yy_ppuser\">", "description": "老子的微信小程序的跳转", "bind":{ "prefix": "bind", "body": "bindtap=\"$1\"", "description": "老子的bindtap" "wx_ra":{ "prefix": "wepy_ra", "body":"let result = await util.wxRequest(httpSet);", "description": "微信小程序阻塞等待请求" "wx_r":{ "prefix": "wepy_r", "body":["util.wxRequest(httpSet).then(function(result){\r\n\tif(result.result==\"success\"){$1\r\n\t}\r\n});"], "description": "微信小程序阻塞等待请求" "httpset":{ "prefix": "wepy_hs", "body": "let params= {};\r\nlet httpSet={\r\n\turl:'$1',\r\n\tparams:params,\r\n\tmethod:'GET',\r\n\tisShowLoading: false,\r\n}", "description": "httpSet" "wepy_global":{ "prefix": "wepy_global", "body": "wepy.$$instance.globalData.$1", "wepy_castfail":{ "prefix": "wepy_castfail", "body": "this.$$broadcast('alertHeaderWarning', '$1');" "wepy_castOK":{ "prefix": "wepy_castok", "body": "this.$$broadcast('alertHeader', '$1');" "wepy_castfail_height":{ "prefix": "wepy_castfailh", "body": "this.$$broadcast('alertHeaderWarningHeight', '$1',60);" "wepy_castOK_height":{ "prefix": "wepy_castokh", "body": "this.$$broadcast('alertHeaderHeight', '$1',60);" "clg": { "prefix": "clg", "body": "console.log($0);" "wepy_tt":{ "prefix": "wepy_tt", "body": "let that = this;" "wepy_currtarget":{ "prefix": "wepy_currt", "body": " e.currentTarget.dataset.$1", "wepy_gourl":{ "prefix":"wepy_gourl", "body":"@tap=\"goUrl\" data-url=\"$1\" data-memberflag=\"$2\"", "wepy_goback":{ "prefix": "wepy_goback", "body":"wepy.navigateBack();" "wepy_urlencode":{ "prefix": "wepy_urlencode", "body": "encodeURIComponent($1);" "wepy_urldecode":{ "prefix": "wepy_urldecode", "body": "decodeURIComponent($1);" "wepy_noimg":{ "prefix": "wepy_noimg", "body": "/images/imgload.png", "wepy_errmsg":{ "prefix": "wepy_errmsg", "body": "(result && result.errorMsg) ? result.errorMsg :\"删除失败！\"", "wepy_sets":{ "prefix": "wepy_sets", "body": "wepy.setStorageSync($1,$2);" "wepy_gets":{ "prefix": "wepy_gets", "body": "wepy.getStorageSync($1);" 4. 相关链接 持续更新：收藏整理官方隐藏的小程序功能/参数/方法/API 动手打造更强更好用的微信开发者工具-编辑器扩展篇 点击wxml里面的绑定事件/变量名/样式名直接跳转到对应文件代码 小程序编码时变量名中文转英文变量名工具，各种驼峰取名 微信开发者工具编辑器支持「书签」功能，快速跳转到指定文件指定行和列 愉快的编写和调试Java：体验新版开发者工具的编辑器扩展功能 5. 其他未公布的隐藏功能 当你觉得有用的时候，就点赞和收藏或者分享，觉得没用的话就投诉，不管点赞还是投诉后的码农写代码永无BUG ，CP设计的产品人见人爱，BOSS每年收入翻番！ ↓↓↓↓↓↓__________________________________________________________________________投诉的话点…↓↓↓
2020-05-17
【开箱即用】分享几个好看的波浪动画css效果！
以下代码不一定都是本人原创，很多都是借鉴参考的（模仿是第一生产力嘛），有些已忘记出处了。以下分享给大家，供学习参考！欢迎收藏补充，说不定哪天你就用上了！
一、第一种效果
[代码]//index.wxml
<view class="zr">
<view class='user_box'>
<view class='userInfo'>
<open-data type="userAvatarUrl"></open-data>
</view>
<view class='userInfo_name'>
<open-data type="userNickName"></open-data> , 欢迎您
</view>
</view>
<view class="water">
<view class="water-c">
<view class="water-1"> </view>
<view class="water-2"> </view>
</view>
</view>
</view>
//index.wxss
.zr {
color: white;
background: #4cb4e7; /*#0396FF*/
width: 100%;
height: 100px;
position: relative;
.water {
position: absolute;
left: 0;
bottom: -10px;
height: 30px;
width: 100%;
z-index: 1;
.water-c {
position: relative;
.water-1 {
background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjYwMHB4IiBoZWlnaHQ9IjYwcHgiIHZpZXdCb3g9IjAgMCA2MDAgNjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzLjQgKDE1NTc1KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT53YXRlci0xPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IuaIkSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+CiAgICAgICAgPGcgaWQ9Ii0iIHNrZXRjaDp0eXBlPSJNU0FydGJvYXJkR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMjEuMDAwMDAwLCAtMTMzLjAwMDAwMCkiIGZpbGwtb3BhY2l0eT0iMC4zIiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgPGcgaWQ9IndhdGVyLTEiIHNrZXRjaDp0eXBlPSJNU0xheWVyR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyMS4wMDAwMDAsIDEzMy4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDcuNjk4NTczOTUgTDQuNjcwNzE5NjJlLTE1LDYwIEw2MDAsNjAgTDYwMCw3LjM1MjMwNDYxIEM2MDAsNy4zNTIzMDQ2MSA0MzIuNzIxMDUyLDI0LjEwNjUxMzggMjkwLjQ4NDA0LDcuMzU2NzQxODcgQzE0OC4yNDcwMjcsLTkuMzkzMDMwMDggMCw3LjY5ODU3Mzk1IDAsNy42OTg1NzM5NSBaIiBpZD0iUGF0aC0xIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==") repeat-x;
background-size: 600px;
-webkit-animation: wave-animation-1 3.5s infinite linear;
animation: wave-animation-1 3.5s infinite linear;
.water-2 {
top: 5px;
background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjYwMHB4IiBoZWlnaHQ9IjYwcHgiIHZpZXdCb3g9IjAgMCA2MDAgNjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzLjQgKDE1NTc1KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT53YXRlci0yPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IuaIkSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+CiAgICAgICAgPGcgaWQ9Ii0iIHNrZXRjaDp0eXBlPSJNU0FydGJvYXJkR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMjEuMDAwMDAwLCAtMjQ2LjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8ZyBpZD0id2F0ZXItMiIgc2tldGNoOnR5cGU9Ik1TTGF5ZXJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTIxLjAwMDAwMCwgMjQ2LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTAsNy42OTg1NzM5NSBMNC42NzA3MTk2MmUtMTUsNjAgTDYwMCw2MCBMNjAwLDcuMzUyMzA0NjEgQzYwMCw3LjM1MjMwNDYxIDQzMi43MjEwNTIsMjQuMTA2NTEzOCAyOTAuNDg0MDQsNy4zNTY3NDE4NyBDMTQ4LjI0NzAyNywtOS4zOTMwMzAwOCAwLDcuNjk4NTczOTUgMCw3LjY5ODU3Mzk1IFoiIGlkPSJQYXRoLTIiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMwMC4wMDAwMDAsIDMwLjAwMDAwMCkgc2NhbGUoLTEsIDEpIHRyYW5zbGF0ZSgtMzAwLjAwMDAwMCwgLTMwLjAwMDAwMCkgIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==") repeat-x;
background-size: 600px;
-webkit-animation: wave-animation-2 6s infinite linear;
animation: wave-animation-2 6s infinite linear;
.water-1, .water-2 {
position: absolute;
width: 100%;
height: 60px;
.back-white {
background: #fff;
@keyframes wave-animation-1 {
background-position: 0 top;
100% {
background-position: 600px top;
@keyframes wave-animation-2 {
background-position: 0 top;
100% {
background-position: 600px top;
.user_box {
display: flex;
z-index: 10000 !important;
opacity: 0; /* 透明度*/
animation: love 1.5s ease-in-out;
animation-fill-mode: forwards;
.userInfo_name {
flex: 1;
vertical-align: middle;
width: 100%;
margin-left: 5%;
margin-top: 5%;
font-size: 42rpx;
.userInfo {
flex: 1;
width: 100%;
border-radius: 50%;
overflow: hidden;
max-height: 50px;
max-width: 50px;
margin-left: 5%;
margin-top: 5%;
border: 2px solid #fff;
二、第二种效果
[代码]//index.wxml
<view class="waveWrapper waveAnimation">
<view class="waveWrapperInner bgTop">
<view class="wave waveTop" style="background-image: url('https://s2.ax1x.com/2019/09/26/um8g7n.png')"></view>
</view>
<view class="waveWrapperInner bgMiddle">
<view class="wave waveMiddle" style="background-image: url('https://s2.ax1x.com/2019/09/26/umGZ38.png')"></view>
</view>
<view class="waveWrapperInner bgBottom">
<view class="wave waveBottom" style="background-image: url('https://s2.ax1x.com/2019/09/26/umGuuQ.png')"></view>
</view>
</view>
//index.wxss
.waveWrapper {
overflow: hidden;
position: absolute;
left: 0;
right: 0;
height: 300px;
top: 0;
margin: auto;
.waveWrapperInner {
position: absolute;
width: 100%;
overflow: hidden;
height: 100%;
bottom: -1px;
background-image: linear-gradient(to top, #86377b 20%, #27273c 80%);
.bgTop {
z-index: 15;
opacity: 0.5;
.bgMiddle {
z-index: 10;
opacity: 0.75;
.bgBottom {
z-index: 5;
.wave {
position: absolute;
left: 0;
width: 500%;
height: 100%;
background-repeat: repeat no-repeat;
background-position: 0 bottom;
transform-origin: center bottom;
.waveTop {
background-size: 50% 100px;
.waveAnimation .waveTop {
animation: move-wave 3s;
-webkit-animation: move-wave 3s;
-webkit-animation-delay: 1s;
animation-delay: 1s;
.waveMiddle {
background-size: 50% 120px;
.waveAnimation .waveMiddle {
animation: move_wave 10s linear infinite;
.waveBottom {
background-size: 50% 100px;
.waveAnimation .waveBottom {
animation: move_wave 15s linear infinite;
@keyframes move_wave {
transform: translateX(0) translateZ(0) scaleY(1)
50% {
transform: translateX(-25%) translateZ(0) scaleY(0.55)
100% {
transform: translateX(-50%) translateZ(0) scaleY(1)
三、第三种效果
[代码]//index.wxml
<view class="container">
<image class="title" src="https://ftp.bmp.ovh/imgs/2019/09/74bada9c4143786a.png"></image>
<view class="content">
<view class="hd" style="transform:rotateZ({{angle}}deg);">
<image class="logo" src="https://ftp.bmp.ovh/imgs/2019/09/d31b8fcf19ee48dc.png"></image>
<image class="wave" src="wave.png" mode="aspectFill"></image>
<image class="wave wave-bg" src="wave.png" mode="aspectFill"></image>
</view>
<view class="bd" style="height: 100rpx;">
</view>
</view>
</view>
//index.wxss
image{
max-width:none;
.container {
background: #7acfa6;
align-items: stretch;
padding: 0;
height: 100%;
overflow: hidden;
.content{
flex: 1;
display: flex;
position: relative;
z-index: 10;
flex-direction: column;
align-items: stretch;
justify-content: center;
width: 100%;
height: 100%;
padding-bottom: 450rpx;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(244,244,244,0)), color-stop(0.1, #f4f4f4), to(#f4f4f4));
opacity: 0;
transform: translate3d(0,100%,0);
animation: rise 3s cubic-bezier(0.19, 1, 0.22, 1) .25s forwards;
@keyframes rise{
0% {opacity: 0;transform: translate3d(0,100%,0);}
50% {opacity: 1;}
100% {opacity: 1;transform: translate3d(0,450rpx,0);}
.title{
position: absolute;
top: 30rpx;
left: 50%;
width: 600rpx;
height: 200rpx;
margin-left: -300rpx;
opacity: 0;
animation: show 2.5s cubic-bezier(0.19, 1, 0.22, 1) .5s forwards;
@keyframes show{
0% {opacity: 0;}
100% {opacity: .95;}
.hd {
position: absolute;
top: 0;
left: 50%;
width: 1000rpx;
margin-left: -500rpx;
height: 200rpx;
transition: all .35s ease;
.logo {
position: absolute;
z-index: 2;
left: 50%;
bottom: 200rpx;
width: 160rpx;
height: 160rpx;
margin-left: -80rpx;
border-radius: 160rpx;
animation: sway 10s ease-in-out infinite;
opacity: .95;
@keyframes sway{
0% {transform: translate3d(0,20rpx,0) rotate(-15deg); }
17% {transform: translate3d(0,0rpx,0) rotate(25deg); }
34% {transform: translate3d(0,-20rpx,0) rotate(-20deg); }
50% {transform: translate3d(0,-10rpx,0) rotate(15deg); }
67% {transform: translate3d(0,10rpx,0) rotate(-25deg); }
84% {transform: translate3d(0,15rpx,0) rotate(15deg); }
100% {transform: translate3d(0,20rpx,0) rotate(-15deg); }
.wave {
position: absolute;
z-index: 3;
right: 0;
bottom: 0;
opacity: 0.725;
height: 260rpx;
width: 2250rpx;
animation: wave 10s linear infinite;
.wave-bg {
z-index: 1;
animation: wave-bg 10.25s linear infinite;
@keyframes wave{
from {transform: translate3d(125rpx,0,0);}
to {transform: translate3d(1125rpx,0,0);}
@keyframes wave-bg{
from {transform: translate3d(375rpx,0,0);}
to {transform: translate3d(1375rpx,0,0);}
.bd {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
align-items: stretch;
animation: bd-rise 2s cubic-bezier(0.23,1,0.32,1) .75s forwards;
opacity: 0;
@keyframes bd-rise{
from {opacity: 0; transform: translate3d(0,60rpx,0); }
to {opacity: 1; transform: translate3d(0,0,0); }
wave.png（可下载到本地）
在这个基础上，再加上js的代码，即可实现根据手机倾向，水波晃动的效果
wx.onAccelerometerChange(function callback)
监听加速度数据事件。
[代码]//index.js
Page({
onReady: function () {
var _this = this;
wx.onAccelerometerChange(function (res) {
var angle = -(res.x * 30).toFixed(1);
if (angle > 14) { angle = 14; }
else if (angle < -14) { angle = -14; }
if (_this.data.angle !== angle) {
_this.setData({
angle: angle
四、第四种效果
[代码]//index.wxml
<view class='page__bd'>
<view class="bg-img padding-tb-xl" style="background-image:url('http://wx4.sinaimg.cn/mw690/006UdlVNgy1g2v2t1ih8jj31hc0p0qej.jpg');background-size:cover;">
<view class="cu-bar">
<view class="content text-bold text-white">
</view>
</view>
</view>
<view class="shadow-blur">
<image src="https://raw.githubusercontent.com/weilanwl/ColorUI/master/demo/images/wave.gif" mode="scaleToFill" class="gif-black response" style="height:100rpx;margin-top:-100rpx;"></image>
</view>
</view>
//index.wxss
@import "colorui.wxss";
.gif-black {
display: block;
border: none;
mix-blend-mode: screen;
本效果需要引入ColorUI组件库
2019-09-26
微信小程序用户授权弹窗，获取用户信息。用户拒绝授权时，引导用户去重新授权
我们在开发小程序时，如果想获取用户信息，就需要获取用的授权，如果用户误点了拒绝授权，我们怎么样去正确的引导用户重新授权呢。今天就来给大家讲讲如果正确的引导用户授权。
老规矩，先看效果图
从上图可以看出，我们在用户点击拒绝授权时，我们会弹出一个提示框，提示用户去设置页重新授权，当用户去授权页重新授权以后，我们再回到首页，点击获取用户信息时，就可以成功的获取到用户信息了。
如下图蓝色框里，就是我们成功的获取的用户信息。
一，我们获取用户信息的时候需要用户授权
我们点击获取用户信息时，通常会弹出如下提示框，如果用户点击了取消，就再也没有办法通过点击授权按钮获取用户信息了。
所以接下来我们要做的就是在用户拒绝了授权时，引导用户去设置页重新授权。
把获取用户授权的代码先贴给大家
[代码]<button open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 授权获取头像昵称 </button>
二，检测用户是否授权
我们在用户点击了上面定义的button按钮后，做权限检测。代码如下。
[代码] getUserInfo: function(e) {
let that = this;
// console.log(e)
// 获取用户信息
wx.getSetting({
success(res) {
// console.log("res", res)
if (res.authSetting['scope.userInfo']) {
console.log("已授权=====")
// 已经授权，可以直接调用 getUserInfo 获取头像昵称
wx.getUserInfo({
success(res) {
console.log("获取用户信息成功", res)
that.setData({
name: res.userInfo.nickName
fail(res) {
console.log("获取用户信息失败", res)
} else {
console.log("未授权=====")
that.showSettingToast("请授权")
给大家简单解析下。
wx.getSetting ：用来获取用户授权列表
if (res.authSetting[‘scope.userInfo’]) 代码用户授权成功，如果用户没有授权，就代表授权失败。
在授权失败时，我们调用that.showSettingToast()方法
三，showSettingToast方法如下
[代码] // 打开权限设置页提示框
showSettingToast: function(e) {
wx.showModal({
title: '提示！',
confirmText: '去设置',
showCancel: false,
content: e,
success: function(res) {
if (res.confirm) {
wx.navigateTo({
url: '../setting/setting',
这方法做的就是引导用户去设置页。
四，我们的设置页
我们的设置页其实很简单，只有上图这么一段代码。
五，去系统设置页。
我们上面第四步的button按钮，点击以后，就会去系统设置页。
可以看到系统设置页，有一个开关，当用户点击开关时，就可以重新授权啦。
重新授权成功以后，我们回到首页，就可以成功的获取到用户信息了。
到这里我们就成功的实现了引导用户授权的功能了。
把index.wxml和index.js代码贴出来给大家
index.wxml
[代码]<!--index.wxml-->
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 授权获取头像昵称 </button>
<text>{{name}}</text>
index.js
[代码]//index.js
Page({
getUserInfo: function(e) {
let that = this;
// console.log(e)
// 获取用户信息
wx.getSetting({
success(res) {
// console.log("res", res)
if (res.authSetting['scope.userInfo']) {
console.log("已授权=====")
// 已经授权，可以直接调用 getUserInfo 获取头像昵称
wx.getUserInfo({
success(res) {
console.log("获取用户信息成功", res)
that.setData({
name: res.userInfo.nickName
fail(res) {
console.log("获取用户信息失败", res)
} else {
console.log("未授权=====")
that.showSettingToast("请授权")
// 打开权限设置页提示框
showSettingToast: function(e) {
wx.showModal({
title: '提示！',
confirmText: '去设置',
showCancel: false,
content: e,
success: function(res) {
if (res.confirm) {
wx.navigateTo({
url: '../setting/setting',
有任何关于编程的问题都可以留言或者私信我，我看到后会及时解答
编程小石头，码农一枚，非著名全栈开发人员。分享自己的一些经验，学习心得，希望后来人少走弯路，少填坑。
有任何关于小程序的问题可以加我微信：2501902696（备注小程序）
视频讲解：
https://edu.csdn.net/course/detail/9531
2019-07-26
如何实现一个自定义数据版省市区二级、三级联动
社区可能有其他的方案了，但是再分享下吧，给有需要的童鞋。 额，这个视频转GIF因为社区上传不了大图，所以剪了一部分，具体的效果还是直接工具打开代码片段预览吧～ 第一步：你的页面JSON引入该组件： [代码]{ "usingComponents": { "city-picker": "/components/cityPicker/index" 第二步：你的页面WXML引入该组件 [代码]<city-picker visible="{{visible}}" column="2" bind:close="handleClick" bind:confirm="handleConfirm" /> 第三步：你的页面JS调用 [代码]// 显示/隐藏picker选择器 handleClick() { this.setData( visible: !this.data.visible // 用户选择城市后 点击确定的返回值 handleConfirm(e) { const { detail: { provinceName = '', provinceId = '', cityName, cityId='', areaName = '', areaId = '' } = {} } = e this.setData({ cityId, cityName, areaId, areaName, provinceId, provinceName 至于怎么获取你想默认城市的下标，可以滑动操作下选中省市区后，点击确定后查看appData里的regionValue的值。 以上就是一个自定义数据版本的省市区二级、三级联动啦，老规矩，结尾放代码片段。 https://developers.weixin.qq.com/s/F9k9cTmT7LAz
2022-07-20
小程序webview组件，小程序和webview交互，小程序内联h5页面，小程序webview内网页实现微信支付
小程序支持webview以后，我们开发的好多h5页面，就可以直接在小程序里使用了，比如我们开发的微信商城，文章详情页，商品详情页，就可以开发一套，多处使用了。我们今天来讲一讲。在小程序的webview里实现微信支付功能。因为微信不允许在小程序的webview里直接调起微信支付。所以我们这节课就要涉及到小程序和webview的交互了。
老规矩先看效果。
因为这里涉及的东西比较多，录gif太多，没法上传，我就录制了一段视频出来。
https://v.qq.com/x/page/t0913iprnay.html
先说下实现原理吧，实现原理就是我们在webview的h5页面里实现下单功能，然后点击支付按钮，我们点击支付按钮的时候会跳转到小程序页面，把订单号，订单总金额，传递到小程序里，然后小程序里使用订单号和订单金额去调起微信支付，实现付款，付款成功或者失败时都会有回调。我们再把对应的回调传递给webview，刷新webview里的订单和支付状态。
一，定义webview显示h5页面
关于webview的使用，我就不做讲解了，官方文档里写的很清楚，用起来也很简单。https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
webview很简单，就是用一个webview组件，显示我们的网页。
二，定义h5页面
我这里启动一个本地服务器，用来展示一个简单的h5页面。
上图是我在浏览器里显示的效果。
接下来我们在小程序的webview里显示这个页面，也很简单，只需要把我们的src定义为我们的本地网页链接就可以了。
这里有一点需要注意
因为我们是本地链接，我们需要到开发者工具里把这一项给勾选。
三，来看下h5页面代码
[代码]<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>小程序内嵌webview</title>
<style>
.btn {
font-size: 70px;
color: red;
</style>
</head>
<h1>我是webview里的h5页面</h1>
<a id="desc" class="btn" onclick="jumpPay()">点击支付</a>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script>
console.log(location.href);
let payOk = getQueryVariable("payOk");
console.log("payOk", payOk)
if(payOk){//支付成功
document.getElementById('desc').innerText="支持成功"
document.getElementById('desc').style.color="green"
}else{
document.getElementById('desc').innerText="点击支付"
//获取url里携带的参数
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
return (false);
function jumpPay() {
let orderId = Date.now();//这里用当前时间戳做订单号（后面使用你自己真实的订单号）
let money = 1;//订单总金额（单位分）
let payData = {orderId: orderId, money: money};
let payDataStr = JSON.stringify(payData);//因为要吧参数传递给小程序，所以这里需要转为字符串
const url = `../wePay/wePay?payDataStr=${payDataStr}`;
wx.miniProgram.navigateTo({
url: url
// console.log("点击了去支付", url)
console.log("点击了去支付")
</script>
</body>
</html>
h5代码这里不做具体讲解，只简单说下。我们就是在点击支付按钮时，用当前时间戳做为订单号（因为订单号要保证唯一），然后传一个订单金额（单位分），这里节约起见，就传1分钱吧，花的是自己的钱，心疼。。。。
关键点说一下
1， 必须引入jweixin，才可以实现h5跳转小程序。
<script type=“text/javascript” src=“https://res.wx.qq.com/open/js/jweixin-1.3.2.js”></script>
2，跳转到小程序页面的方法
[代码]const url = `../wePay/wePay?payDataStr=${payDataStr}`;
wx.miniProgram.navigateTo({
url: url
这里要和你小程序的页面保持一致。payDataStr是我们携带的参数
四，小程序支付页
来看下我们的小程序支付页
小程序支付页功能很简单，就是来接收我们h5传过订单号和订单金额。然后去调起微信支付，实现支付。支付成功和支付失败都有对应的回调。
支付我们这里实用的小程序云开发来实现的支付，核心代码只有10行。由于支付不是本节的重点，所以这里不做具体讲解。感兴趣的同学可以去看我写的文章和我录的视频
小程序支付文章：https://www.jianshu.com/p/2b391df055a9
小程序支付视频：https://edu.csdn.net/course/play/25701/310742
下面把小程序接收参数和支付的完整代码贴出来给大家
[代码]Page({
//h5传过来的参数
onLoad: function(options) {
console.log("webview传过来的参数", options)
//字符串转对象
let payData = JSON.parse(options.payDataStr)
console.log("orderId", payData.orderId)
let that = this;
wx.cloud.callFunction({
name: "pay",
data: {
orderId: payData.orderId,
money: payData.money
success(res) {
console.log("获取成功", res)
that.goPay(res.result);
fail(err) {
console.log("获取失败", err)
//微信支付
goPay(payData) {
wx.requestPayment({
timeStamp: payData.timeStamp,
nonceStr: payData.nonceStr,
package: payData.package,
signType: 'MD5',
paySign: payData.paySign,
success(res) {
console.log("支付成功", res)
//你可以在这里支付成功以后，再跳会webview页，并把支付成功状态传回去
wx.navigateTo({
url: '../webview/webview?payOk=true',
fail(res) {
console.log("支付失败", res)
代码里注释很清楚，这里有一点，就是我们支付成功后，需要告诉h5我们支付成功了，通知h5去刷新订单或者支付状态。
到这里我们就完整的实现了小程序webview展示h5页面，并且做到了h5和小程序的交互，实现了小程序webview的支付功能。
是不是很简单呢。
1，关注“编程小石头”公号，回复“webview”即可获取源码
2，也可以到我github下载源码
https://github.com/qiushi123/xiaochengxu_demos
2019-08-15
[填坑手册]小程序web-view组件实战与踩坑
首先，根据官网文档可以知道 只有非个人 的小程序才可以使用web-view组件，如果你的个人开发者，可以跳过这篇文章。
一、使用web-view以及它的好处
1、己方账号（第三方）与小程序openId/UnionId的关联绑定，实现免登陆
比如你是某门户网站S，你要识别自己小程序上的用户与网站用户的关系，你可以通过三种方法绑定关系，公众号，小程序源生，小程序web-view内嵌跳转三种方法
2、内嵌H5的富文本，减少重复开发
比如你是门户网站，社区，以往有大量的新闻和帖子，里面带了各种css样式的富文本，小程序源生是无法直接读取的，需要大量转化，这时候直接内嵌这些H5新闻，大大降低开发成本
3、热更新，减少发布审核
某些需要经常更新的内容、公告、活动页，内嵌H5可以减少频繁提交小程序审核
二、小程序功能赋权
为H5提供各种小程序才有的功能，比如录音，扫一扫等。
多场景判断，建议使用官方API： wx.miniProgram.getEnv
H5唤醒一些小程序API有一定的延时，0.3~1秒
请调用小程序专用的JSSDK，同一个jssdk，但是webview的功能收到限制，和之前微信打开H5有所不同
小程序自动获取加载H5的title
H5中iframe的url必须也是业务域名
web-view一定是撑满全屏的，自定义顶部菜单，悬浮的都没用
三、小程序和H5之前的互相通讯
1、 从小程序 ==>> h5
小程序控制H5，可以直接用src路径传参的形式，比如
[代码]<!-- 小程序端 HTML -->
<web-view src="//URL?a=param1&b=param2"></web-view>
避免在链接中带有中文字符，在 iOS 中会有打开白屏的问题，建议加一下 encodeURIComponent。
2、 从 H5 ==>> 小程序
这里我们知道bindmessage是小程序用来监听H5的推送的内容，但是这里不大不小的坑！就是它的三个出发场景：
小程序后退：使用接口名 wx.miniProgram.navigateTo，wx.miniProgram.navigateBack，wx.miniProgram.switchTab 等切换小程序页面/场景的API时候都会出发
分享：这个就是当你点分享小程序的时候，会接受到H5之前发送的postMessage
组件销毁，web-view组件销毁，类似 wx.miniProgram.redirectTo 都会触发。
[代码]<!-- 小程序端 HTML -->
<web-view bindmessage="handleGetMessage" src="{{openUrl}}"></web-view>
[代码]// 小程序端 JS -->
Page({
* 页面的初始数据
data: {
openUrl: "",
* 获取请求数据
handleGetMessage: function (e) {
console.log(e.detail.data);
[代码]<!-- h5端 HTML和JS -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script>
wx.miniProgram.postMessage({
data: {
link: "//test.com",
title: "一起学习，一起进步"
//wx.miniProgram.redirectTo({
// url:"/pages/inner/index?source=123"
wx.miniProgram.navigateBack({delta: 1})
</script>
那些H5控制小程序的跳转路径必须是“/”开头，如 “/pages/xxx/xxx”，且路径必须在app.json里有，地址错误的话，有时不报错。
postMessage的json必须是data开始，不然接收不到数据。
四、bindmessage接收到消息有3个重要特性(重点)
接收可以是H5之前几分钟前发送postMessage，不一定是即刻发出的。
之前发出的 postMessage的DATA信息会累加，当触发bindmessage接收的时候是一个数组。
当bindmessage 再次 接收到数据，之前发送的数据不会被清空，将累加一起返回，获取时要判断好数组的角标
五、Tips
1、在IDE工具中如何调试H5
可以在 web-view 组件上通过右键 - 调试，打开 web-view 组件的调试。
2、内嵌H5缓存问题
web-view加载的H5具有很重的缓存，如果需要调试，可以通过在url后面加时间戳的方式解决。
3、小程序关闭，H5背景音乐仍然在播放问题
小程序已经关闭，但是H5自带的背景音乐仍然在手机后台播放的问题。这里可以利用一个属性：
visibilitychange：页面可见性状态
简单的说，浏览器标签页被隐藏或显示的时候会触发visibilitychange事件。
[代码]var statusBeforeHide = true; //初始化页面的状态
var music = document.getElementById("xxx");
// 更改音乐播放状态
function setChangeMusic() {
if (document[hiddenProperty]) {
// 页面隐藏
if (statusBeforeHide) {
music.pause(); // 暂停
} else {
// 页面显示
if (statusBeforeHide) {
music.play() //如果statusBeforeHide是true, 继续播放
let hiddenProperty = ('hidden' in document) ? 'hidden'
: ('webkitHidden' in document) ? 'webkitHidden'
: ('mozHidden' in document) ? 'mozHidden' : null;
if (hiddenProperty) {
let visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
let onVisibilityChange = () => {
//console.log('visibilityChange');
setChangeMusic();
document.addEventListener(visibilityChangeEvent, onVisibilityChange);
} else {
console.log("不支持这个api");
总结，web-view还是非常实用的组件，且用且珍惜~
往期回顾：
小程序自定义头部导航栏“完美”解决方案
小程序Canvas生成海报（一）
小程序新版订阅消息+云开发实战与跳坑
2021-09-13
html-canvas 生成小程序分享图
基于 HTML 和 CSS 实现 Canvas 绘图。
代码片段：https://developers.weixin.qq.com/s/9zFHKdmh7De2
构建虚拟DOM 树，依据 CSS 规范计算样式，使用 CSS 盒模型对 DOM 进行布局，计算出所有元素的位置。最后将 DOM 树通过 Canvas Api 进行绘制。
小程序开发工具内运行 demo
[代码]git clone https://github.com/alexayan/html-canvas.git
npm i
npm run watch
已支持的 CSS 属性
margin，margin-left，margin-top，margin-right，margin-bottom，padding，padding-left，padding-top，padding-right，padding-bottom，width，height，border，border-left，border-top，border-right，border-bottom，border-width，border-style，border-color，border-left-style，border-left-color，border-left-width，border-top-style，border-top-color，border-top-width，border-right-style，border-right-color，border-right-width，border-bottom-style，border-bottom-color，border-bottom-width，color，display，background-color，border-radius，border-top-left-radius，border-top-right-radius，border-bottom-left-radius，border-bottom-right-radius，box-sizing，font，font-style，font-variant，font-weight，font-stretch，font-size，line-height，font-family，text-align，position，overflow，overflow-x，overflow-y，top，left，right，bottom，z-index
canvas-draw.html
2020-01-08
手把手教你避开组件cover-view的那些坑
案例背景： 最近在开发城市地铁图项目，具体功能有规划路线、定位最近地铁站、以及显示整个城市的地铁网状图等功能。根据需求，在实现的时候在地铁线路图上需要添加定位按钮及线路弹框来展示位置信息以及地铁站详情信息。 遇到的问题： 在地铁图调研初期，原计划实现渲染方案是采用svg来绘制，但是调研后发现小程序原生API不支持svg。同时，我们在开源中找到一个svg的框架库来实现绘制，但是开发初期发现遇到很多无法实现的需求和性能问题。在对开源库的代码跟踪后，发现绘制方案也是canvas的方式，于是我们决定使用原生canvas的方案来支持地铁图。但是呢，又遇到一些问题，那么我们来看看几个具体的点： 1) view在canvas上无法正常显示。 在canvas上使用view来添加图片和弹框时，发现图片以及弹框在canvas的下面，不能正常显示图片。 查看文档发现canvas、map、video等原生组件使用的是native实现的，默认显示在小程序的最上层，所以就把view换成cover-view或者cover-image。 使用view效果： [代码]<!-- 线路 -->[代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]"sublines sublines-icon"[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]image[代码] [代码]class[代码][代码]=[代码][代码]'sublinesIcon'[代码] [代码]src[代码][代码]=[代码][代码]"/static/img/ic_sublines.png"[代码][代码] [代码][代码]bindtap[代码][代码]=[代码][代码]'clickSublines'[代码] [代码]wx-if[代码][代码]=[代码][代码]"{{lineIconShow}}"[代码][代码]></[代码][代码]image[代码][代码]> [代码][代码]</[代码][代码]view[代码][代码]>[代码] [图片] 替换成cover-view效果： [代码]<!-- 线路 -->[代码][代码]<[代码][代码]cover-view[代码] [代码]class[代码][代码]=[代码][代码]"sublines sublines-icon"[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]cover-image[代码] [代码]class[代码][代码]=[代码][代码]'sublinesIcon'[代码] [代码]src[代码][代码]=[代码][代码]"/static/img/ic_sublines.png"[代码][代码] [代码][代码]bindtap[代码][代码]=[代码][代码]'clickSublines'[代码] [代码]wx-if[代码][代码]=[代码][代码]"{{lineIconShow}}"[代码][代码]></[代码][代码]cover-image[代码][代码]> [代码][代码]</[代码][代码]cover-view[代码][代码]>[代码] [图片] 但是使用cover-view又遇到了层级和样式的问题。 2）canvas上使用cover-image添加图片，图片设置position：absolute；页面上的图片显示在canvas画线的下方，导致定位按钮不能正常使用。后来把position该换成fixed解决来层级的问题。效果如下所示： [代码].locationIcon {[代码][代码] [代码][代码]width: 3rem;[代码][代码] [代码][代码]height: 3rem;[代码][代码] [代码][代码]position: fixed;[代码][代码] [代码][代码]bottom: 3rem;[代码][代码] [代码][代码]left: 0.7rem;[代码][代码]}[代码][图片] 3）在页面上实现一个弹框时，根据UI图需要实现一个底边线和底边小三角形。通过border给块级元素设置底边线或者css实现三角箭头，单边border设置无效。最终采用了height为1px的cover-view或者图片来代替。 设置单边border效果： [代码]<!-- 起终点设置弹框 -->[代码][代码] [代码][代码]<[代码][代码]cover-view[代码] [代码]class[代码][代码]=[代码][代码]"sdMark"[代码] [代码]style[代码][代码]=[代码][代码]'top:{{tapClient.y}}px;left:{{tapClient.x}}px;'[代码] [代码]wx-if[代码][代码]=[代码][代码]"{{sdMarkShow}}"[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]cover-view[代码] [代码]class[代码][代码]=[代码][代码]'sdMarkContent'[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]cover-view[代码] [代码]class[代码][代码]=[代码][代码]'sdMarkItem'[代码] [代码]bindtap[代码][代码]=[代码][代码]'clickStart'[代码][代码]>设为起点</[代码][代码]cover-view[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]cover-view[代码] [代码]class[代码][代码]=[代码][代码]'sdMarkItem'[代码] [代码]bindtap[代码][代码]=[代码][代码]'clickEnd'[代码][代码]>设为终点</[代码][代码]cover-view[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]cover-view[代码] [代码]class[代码][代码]=[代码][代码]'sdMarkItem'[代码] [代码]bindtap[代码][代码]=[代码][代码]'clickStationDetail'[代码][代码]>站点详情</[代码][代码]cover-view[代码][代码]>[代码][代码] [代码][代码]</[代码][代码]cover-view[代码][代码]>[代码][代码] [代码][代码]</[代码][代码]cover-view[代码][代码]>[代码] [图片] 修改后的代码： [代码]<!-- 起终点设置弹框 -->[代码][代码] [代码][代码]<[代码][代码]cover-view[代码] [代码]class[代码][代码]=[代码][代码]"sdMark"[代码] [代码]style[代码][代码]=[代码][代码]'top:{{tapClient.y}}px;left:{{tapClient.x}}px;'[代码] [代码]wx-if[代码][代码]=[代码][代码]"{{sdMarkShow}}"[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]cover-view[代码] [代码]class[代码][代码]=[代码][代码]'sdMarkContent'[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]cover-view[代码] [代码]class[代码][代码]=[代码][代码]'sdMarkItem'[代码] [代码]bindtap[代码][代码]=[代码][代码]'clickStart'[代码][代码]>设为起点</[代码][代码]cover-view[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]cover-view[代码] [代码]class[代码][代码]=[代码][代码]'line'[代码][代码]></[代码][代码]cover-view[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]cover-view[代码] [代码]class[代码][代码]=[代码][代码]'sdMarkItem'[代码] [代码]bindtap[代码][代码]=[代码][代码]'clickEnd'[代码][代码]>设为终点</[代码][代码]cover-view[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]cover-view[代码] [代码]class[代码][代码]=[代码][代码]'line'[代码][代码]></[代码][代码]cover-view[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]cover-view[代码] [代码]class[代码][代码]=[代码][代码]'sdMarkItem'[代码] [代码]bindtap[代码][代码]=[代码][代码]'clickStationDetail'[代码][代码]>站点详情</[代码][代码]cover-view[代码][代码]>[代码][代码] [代码][代码]</[代码][代码]cover-view[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]cover-view[代码] [代码]class[代码][代码]=[代码][代码]"icon"[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]cover-image[代码] [代码]class[代码][代码]=[代码][代码]'icArrow'[代码] [代码]src[代码][代码]=[代码][代码]'/static/img/ic_arrow.png'[代码][代码]></[代码][代码]cover-image[代码][代码]>[代码][代码] [代码][代码]</[代码][代码]cover-view[代码][代码]>[代码][代码] [代码][代码]</[代码][代码]cover-view[代码][代码]>[代码] 最终的效果： [图片] 踩坑总结：canvas层级较高，使用cover-view或者cover-image在canvas做操作。单边border相关的操作使用图片或者块级元素来代替。 查看相关API文档： cover-view相关文档：https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html 欢迎体验和吐槽："腾讯位置服务-地铁图"插件：https://developers.weixin.qq.com/community/servicemarket/sq_ocVuQ4joORnwn_bzpxTd8Mq8wZ3g/service/detail/0008cc3058c5c8042dc89d7db54415
2019-07-17
xquery, 小程序开发工具包
xquery基于原生小程序，是一套类似于jquery的小程序开发工具库，方便引用且无破坏小程序原生模式。 支持组件元素选取 方便的结构嵌套 弱模板化，方便维护 事件方法重新封装，支持query传递参数 支持钩子方法 支持LRU缓存 支持MARKDOWN富文本 支持HTML富文本 无侵入的Pager 使用Pager方法替换小程序Page，其他用法一致。无侵入性语法 [代码]const Pager = require('components/aotoo/core/index') Pager({ data: { itemElement: {...} onReady(){ ... } 完整的目录结构 类似于在web开发中可以使用[代码]getElementsById[代码]抓取html dom元素对象，下列针对item组件对象实现 wxml模板 [代码]<ui-item item="{{itemElement}}" /> [代码]const Pager = require('components/aotoo/core/index') Pager({ data: { itemElement: { $$id: 'item-id', title: '这是一个item组件' onReady(){ let $item = this.getElementsById('item-id') $item.addClass('active') onReay类似于web中的body.onLoad，所有dom元素都已经准备妥当，使用[代码]getElementsById[代码]去抓取实例 query传递参数更贴近web前端开发（事件封装是基于Pager及xquery定义的组件才有效，不会影响原生开发） wxml模板 [代码]<ui-item item="{{itemElement}}" /> [代码]Pager({ data: { itemElement: { title: '按钮', tap: 'onTap?username=张三' // 允许query参数 // tap => bind:tap的别名 // aim => catch:tap的别名 // longpress => bind:longpress的别名 // longtap => bind:longtap的别名 // touchstart => bind:touchstart 别名 // touchmove => bind:touchmove的别名 // touchend => bind:touchend的别名 // touchcancel => bind:touchcancel的别名 // catchlongpress => catch:longpress的别名 // ...其他catch方法以此类推 onTap(e, param, inst){ // e => 原生event事件对象 // param => {username: '张三'} // inst => <ui-item />组件实例对象，支持update, addClass, removeClass等方法 inst.update({ title: param.username+'的按钮' }, function(){ let $data = inst.getData() console.log($data.title) // 张三的按钮 数据缓存及数据过期 [代码]const Pager = require('components/aotoo/core/index') const lib = Pager.lib const dataEntity = lib.hooks('DATA-ENTITY', true) // true表示缓存数据到storage onReay(){ // 将用户信息缓存一天 dataEntity.setItem('names', {name: '', sex: ''}, 24*60*60*1000) setTimeout(()=>{ let namesData = dataEntity.getItem('names') console.log(namesData) // {name: '', sex: ''} },3000) LRU缓存设置 小程序本地缓存10M，内存128M，因此数据缓存到本地受到很多限制，比如图片，需要使用LRU缓存机制来对图片/文件进行管理 [代码]const Pager = require('components/aotoo/core/index') const lib = Pager.lib const imgEntity = lib.hooks('IMG-ENTITY', { localstorage: true, // 开启本地缓存 expire: 24 * 60 * 60 * 1000, // 过期时间为1天，所有缓存的数据 max: 50 // 最大缓存数为50条，即当前hooks实例只会存储最常用的50条数据 onReay(){ // 将用户信息缓存一天 // img-src => 图片的具体地址或者一个唯一地址 // 挂载一个方法，当该钩子存储数据时 imgEntity.setItem('image-src', {img: 'cloude://....'}) saveImgToLocal('cloude://...') setTimeout(()=>{ let imgsData = imgEntity.getItem('image-src') console.log(imgsData) // {img} || undefined if (!imgsData) { imgEntity.setItem('image-src', {img: 'cloude://....'}) saveImgToLocal('cloude://...') },3000) markdown支持 有两种方式支持markdown文本 嵌入方式比较简单，下面示例markdown文本以嵌入方式实现 [代码]const Pager = require('components/aotoo/core/index') Pager({ data: { itemElement: { "@md": ` ## 马克党标题 基于xquery的基类开发的组件可以直接内嵌使用马克党文档 onReady(){ ... } html支持 前端从后端拿去富文本数据，直接转化成小程序模板结构输出，下面示例html文本以嵌入方式实现 [代码]const Pager = require('components/aotoo/core/index') Pager({ data: { itemElement: { "@html": ` <div class="container"> <img src="http://..." /> <span>...</span> <section> </section> onReady(){ ... } github地址：https://github.com/webkixi/aotoo-xquery 小程序demo演示，下列小程序基于xquery的个人开发，公司的就不放了 xquery 嘟嘟倒计时
2019-12-19
小程序跨页面通信解决方案
在小程序开发过程中，难免会遇到一种情况，当A页面需要用户设置数据 点击进入B页面，在B页面设置成功后返回并将设置的值传递给A页面。但是wx.navigateBack()并不支持返回传参。这种情况下就可以使用onfire.js，onfire.js 是一个很简单的事件分发的 Javascript 库（仅仅 0.9kb），简洁实用。
onfire.js下载地址
https://www.bootcdn.cn/onfire.js/
https://gitee.com/mirrors/onfire-js
将onfire.js下载下来并放置在开发项目某个目录下，例如根目录lib文件夹内。
在使用页面对应的js文件中引入该文件。
代码如下：
[代码]<!--index.wxml-->
<view class="order">
<view class="order-alert">设置您的联系方式</view>
<view class="order-mobile" bindtap="setMobile">
<view class="order-mobile__caption">联系方式</view>
<view class="order-mobile__content">
<text class="valign-mid">
<text>{{ mobile }}</text>
</text>
<text class="iconfont order-mobile__content__more"></text>
</view>
</view>
</view>
[代码]//index.js
const onfire = require('../../lib/onfire.js')
Page({
data: {
mobile: ''
onLoad: function () {
// 绑定事件，当名为EventPhoneChange的事件发生的时
onfire.on('EventPhoneChange', e => {
this.setData({
mobile: e
// 设置手机号
setMobile: function () {
wx.navigateTo({
url: '../phone/phone?mobile=' + this.data.mobile,
onUnload: function () {
// 取消事件绑定
onfire.un("EventPhoneChange");
[代码]<!--phone.wxml-->
<view class="phone">
<input class="phone-input" placeholder="手机号码" bindinput="bindinput" value="{{mobile}}"></input>
<button class="phone-setting" bindtap="tapSetting">设置</button>
</view>
[代码]// phone.js
const onfire = require('../../lib/onfire.js')
Page({
data: {
mobile: ''
onLoad: function (e) {
this.setData({
mobile: e.mobile
tapSetting: function () {
let mobile = this.data.mobile;
if (!mobile) {
wx.showToast({
title: '请填写手机号！',
icon: 'none',
duration: 2000,
return;
// 触发名为EventPhoneChange的事件，并且携带变量mobile值。
onfire.fire('EventPhoneChange', mobile)
wx.navigateBack()
bindinput: function (e) {
this.setData({
mobile: e.detail.value.trim()
其效果图如下：
相关API
关于onfire.js的API
1.on(event_name, callback) 绑定事件，参数为event_name和callback， 当有名字为event_name的事件发生的时候，callback方法将会被执行。这个方法会返回一个eventObj，这个可以用于使用un(eventObj)方法来取消事件绑定。
2.one(event_name, callback) 绑定（订阅）事件，参数为 event_name with callback. 当被触发一次之后失效。只能被触发一次，一次之后自动失效。
3.fire(event_name, data) 触发名字为event_name的事件，并且赋予变量data为callback方法的输入值。
4.un(eventObj / eventName / function)取消事件绑定。可以仅仅取消绑定一个事件回调方法，也可以直接取消全部的事件；
5.clear() 清空所有事件。
个人对于onfire.js的理解就是一个全局通知，从B页面发出一个通知带上Key和Value，在其他某一个页面监听这个Key值来获取传出来的Value。
其他解决方案
该方案来自摩拜单车小程序
https://juejin.im/post/5da80767f265da5b5f7584dc
2019-12-20
小程序内用户帐号登录规范调整和优化建议
为更好地保护用户隐私信息，优化用户体验，平台将会对小程序内的帐号登录功能进行规范。本公告所称“帐号登录功能”是指开发者在小程序内提供帐号登录功能，包括但不限于进行的手机号登录，getuserinfo形式登录、邮箱登录等形式。具体规范要求如下： 1．服务范围开放的小程序 对于用户注册流程是对外开放、无需验证特定范围用户，且注册后即可提供线上服务的小程序，不得在用户清楚知悉、了解小程序的功能之前，要求用户进行帐号登录。 包括但不限于打开小程序后立即跳转提示登录或打开小程序后立即强制弹窗要求登录，都属于违反上述要求的情况； 以下反面示例，在用户打开小程序后立刻弹出授权登录页； [图片] 建议修改为如下正面示例形式：在体验小程序功能后，用户主动点击登录按钮后触发登录流程，且为用户提供暂不登录选项。 [图片] 2．服务范围特定的小程序 对于客观上服务范围特定、未完全开放用户注册，需通过更多方式完成身份验证后才能提供服务的小程序，可以直接引导用户进行帐号登录。例如为学校系统、员工系统、社保卡信息系统等提供服务的小程序； 下图案例为正面示例：校友管理系统，符合规范要求。 [图片] 3．仅提供注册功能小程序 对于线上仅提供注册功能，其他服务均需以其他方式提供的小程序，可在说明要求使用帐号登录功能的原因后，引导用户进行帐号注册或帐号登录。如ETC注册申请、信用卡申请； 如下反面示例，用户在进入时未获取任何信息，首页直接强制弹框要求登录注册ETC，这是不符合规范的。 [图片] 建议修改为如下正面示例所示形式：允许在首页说明注册功能后，提供登录或注册按钮供用户主动选择点击登录。 [图片] 4．提供可取消或拒绝登录选项 任何小程序调用帐号登录功能，应当为用户清晰提供可取消或拒绝的选项按钮，不得以任何方式强制用户进行帐号登录。 如下图所示反面示例，到需要登录环节直接跳转登录页面，用户只能选择点击登录或退出小程序，这不符合登录规范要求。 [图片] 建议修改为下图正面示例形式，在需帐号登录的环节，为用户主动点击登录，并提供可取消按钮，不强制登录。 [图片] 针对以上登录规范要求，平台希望开发者们能相应地调整小程序的帐号登录功能。如未满足登录规范要求，从2019年9月1日开始，平台将会在后续的代码审核环节进行规则提示和修改要求反馈。
2019-07-20
创建客服失败问题，要么65401，要么就65406，我都懵了？
有谁遇到过相同的问题没有，麻烦帮忙解决下 问题场景如下： 第一步：先走https://api.weixin.qq.com/customservice/kfaccount/add接口创建客服 第二步：走https://api.weixin.qq.com/customservice/kfaccount/inviteworker接口邀请用户绑定微信账号 直接走https://api.weixin.qq.com/customservice/kfaccount/inviteworker接口直接创建客服且绑定微信账号 （此种情况用户收不到推送直接绑定成功可用） 我先走两种情况都成功过，有时候要第一种情况才能成功添加客服，需要发送推送到微信账户上手动确认绑定。有时候必须走第二种场景才能成功，走 第一种场景到话会提示65406说客服已存在 请问导致这种情况到愿意是什么，有没有人能够帮忙解答一下，谢谢
2020-04-24
小程序多端框架全面测评
最近前端届多端框架频出，相信很多有代码多端运行需求的开发者都会产生一些疑惑：这些框架都有什么优缺点？到底应该用哪个？ 作为 Taro 开发团队一员，笔者想在本文尽量站在一个客观公正的角度去评价各个框架的选型和优劣。但宥于利益相关，本文的观点很可能是带有偏向性的，大家可以带着批判的眼光去看待，权当抛砖引玉。 那么，当我们在讨论多端框架时，我们在谈论什么： 笔者以为，现在流行的多端框架可以大致分为三类： 1. 全包型 这类框架最大的特点就是从底层的渲染引擎、布局引擎，到中层的 DSL，再到上层的框架全部由自己开发，代表框架是 Qt 和 Flutter。这类框架优点非常明显：性能（的上限）高；各平台渲染结果一致。缺点也非常明显：需要完全重新学习 DSL（QML/Dart），以及难以适配中国特色的端：小程序。 这类框架是最原始也是最纯正的的多端开发框架，由于底层到上层每个环节都掌握在自己手里，也能最大可能地去保证开发和跨端体验一致。但它们的框架研发成本巨大，渲染引擎、布局引擎、DSL、上层框架每个部分都需要大量人力开发维护。 2. Web 技术型 这类框架把 Web 技术（JavaScript，CSS）带到移动开发中，自研布局引擎处理 CSS，使用 JavaScript 写业务逻辑，使用流行的前端框架作为 DSL，各端分别使用各自的原生组件渲染。代表框架是 React Native 和 Weex，这样做的优点有： 复用前端生态 易于学习上手，不管前端后端移动端，多多少少都会一点 JS、CSS 交互复杂时难以写出高性能的代码，这类框架的设计就必然导致 [代码]JS[代码] 和 [代码]Native[代码] 之间需要通信，类似于手势操作这样频繁地触发通信就很可能使得 UI 无法在 16ms 内及时绘制。React Native 有一些声明式的组件可以避免这个问题，但声明式的写法很难满足复杂交互的需求。 由于没有渲染引擎，使用各端的原生组件渲染，相同代码渲染的一致性没有第一种高。 3. JavaScript 编译型 这类框架就是我们这篇文章的主角们：[代码]Taro[代码]、[代码]WePY[代码] 、[代码]uni-app[代码] 、 [代码]mpvue[代码] 、 [代码]chameleon[代码]，它们的原理也都大同小异：先以 JavaScript 作为基础选定一个 DSL 框架，以这个 DSL 框架为标准在各端分别编译为不同的代码，各端分别有一个运行时框架或兼容组件库保证代码正确运行。 这类框架最大优点和创造的最大原因就是小程序，因为第一第二种框架其实除了可以跨系统平台之外，也都能编译运行在浏览器中。(Qt 有 Qt for WebAssembly, Flutter 有 Hummingbird，React Native 有 [代码]react-native-web[代码], Weex 原生支持) 另外一个优点是在移动端一般会编译到 React Native/Weex，所以它们也都拥有 Web 技术型框架的优点。这看起来很美好，但实际上 React Native/Weex 的缺点编译型框架也无法避免。除此之外，编译型框架的抽象也不是免费的：当 bug 出现时，问题的根源可能出在运行时、编译时、组件库以及三者依赖的库等等各个方面。在 Taro 开源的过程中，我们就遇到过 Babel 的 bug，React Native 的 bug，JavaScript 引擎的 bug，当然也少不了 Taro 本身的 bug。相信其它原理相同的框架也无法避免这一问题。 但这并不意味着这类为了小程序而设计的多端框架就都不堪大用。首先现在各巨头超级 App 的小程序百花齐放，框架会为了抹平小程序做了许多工作，这些工作在大部分情况下是不需要开发者关心的。其次是许多业务类型并不需要复杂的逻辑和交互，没那么容易触发到框架底层依赖的 bug。 那么当你的业务适合选择编译型框架时，在笔者看来首先要考虑的就是选择 DSL 的起点。因为有多端需求业务通常都希望能快速开发，一个能够快速适应团队开发节奏的 DSL 就至关重要。不管是 React 还是 Vue（或者类 Vue）都有它们的优缺点，大家可以根据团队技术栈和偏好自行选择。 如果不管什么 DSL 都能接受，那就可以进入下一个环节： 以下内容均以各框架现在（2019 年 3 月 11日）已发布稳定版为标准进行讨论。 就开发工具而言 [代码]uni-app[代码] 应该是一骑绝尘，它的文档内容最为翔实丰富，还自带了 IDE 图形化开发工具，鼠标点点点就能编译测试发布。 其它的框架都是使用 CLI 命令行工具，但值得注意的是 [代码]chameleon[代码] 有独立的语法检查工具，[代码]Taro[代码] 则单独写了 ESLint 规则和规则集。 在语法支持方面，[代码]mpvue[代码]、[代码]uni-app[代码]、[代码]Taro[代码] 、[代码]WePY[代码] 均支持 TypeScript，四者也都能通过 [代码]typing[代码] 实现编辑器自动补全。除了 API 补全之外，得益于 TypeScript 对于 JSX 的良好支持，Taro 也能对组件进行自动补全。 CSS 方面，所有框架均支持 [代码]SASS[代码]、[代码]LESS[代码]、[代码]Stylus[代码]，Taro 则多一个 [代码]CSS Modules[代码] 的支持。 所以这一轮比拼的结果应该是： [代码]uni-app[代码] > [代码]Taro[代码] > [代码]chameleon[代码] > [代码]WePY[代码]、[代码]mpvue[代码] 多端支持度 只从支持端的数量来看，[代码]Taro[代码] 和 [代码]uni-app[代码] 以六端略微领先（移动端、H5、微信小程序、百度小程序、支付宝小程序、头条小程序），[代码]chameleon[代码] 少了头条小程序紧随其后。 但值得一提的是 [代码]chameleon[代码] 有一套自研多态协议，编写多端代码的体验会好许多，可以说是一个能戳到多端开发痛点的功能。[代码]uni-app[代码] 则有一套独立的条件编译语法，这套语法能同时作用于 [代码]js[代码]、样式和模板文件。[代码]Taro[代码] 可以在业务逻辑中根据环境变量使用条件编译，也可以直接使用条件编译文件（类似 React Native 的方式）。 在移动端方面，[代码]uni-app[代码] 基于 [代码]weex[代码] 定制了一套 [代码]nvue[代码] 方案 弥补 [代码]weex[代码] API 的不足；[代码]Taro[代码] 则是暂时基于 [代码]expo[代码] 达到同样的效果；[代码]chameleon[代码] 在移动端则有一套 SDK 配合多端协议与原生语言通信。 H5 方面，[代码]chameleon[代码] 同样是由多态协议实现支持，[代码]uni-app[代码] 和 [代码]Taro[代码] 则是都在 H5 实现了一套兼容的组件库和 API。 [代码]mpvue[代码] 和 [代码]WePY[代码] 都提供了转换各端小程序的功能，但都没有 h5 和移动端的支持。 所以最后一轮对比的结果是： [代码]chameleon[代码] > [代码]Taro[代码]、[代码]uni-app[代码] > [代码]mpvue[代码]、[代码]WePY[代码] 组件库/工具库/demo 作为开源时间最长的框架，[代码]WePY[代码] 不管从 Demo，组件库数量 ，工具库来看都占有一定优势。 [代码]uni-app[代码] 则有自己的插件市场和 UI 库，如果算上收费的框架和插件比起 [代码]WePy[代码] 也是完全不遑多让的。 [代码]Taro[代码] 也有官方维护的跨端 UI 库 [代码]taro-ui[代码] ，另外在状态管理工具上也有非常丰富的选择（Redux、MobX、dva），但 demo 的数量不如前两个。但 [代码]Taro[代码] 有一个转换微信小程序代码为 Taro 代码的工具，可以弥补这一问题。 而 [代码]mpvue[代码] 没有官方维护的 UI 库，[代码]chameleon[代码] 第三方的 demo 和工具库也还基本没有。 所以这轮的排序是： [代码]WePY[代码] > [代码]uni-app[代码] 、[代码]taro[代码] > [代码]mpvue[代码] > [代码]chameleon[代码] 接入成本有两个方面： 第一是框架接入原有微信小程序生态。由于目前微信小程序已呈一家独大之势，开源的组件和库（例如 [代码]wxparse[代码]、[代码]echart[代码]、[代码]zan-ui[代码] 等）多是基于原生微信小程序框架语法写成的。目前看来 [代码]uni-app[代码] 、[代码]Taro[代码]、[代码]mpvue[代码] 均有文档或 demo 在框架中直接使用原生小程序组件/库，[代码]WePY[代码] 由于运行机制的问题，很多情况需要小改一下目标库的源码，[代码]chameleon[代码] 则是提供了一个按步骤大改目标库源码的迁移方式。 第二是原有微信小程序项目部分接入框架重构。在这个方面 Taro 在京东购物小程序上进行了大胆的实践，具体可以查看文章《Taro 在京东购物小程序上的实践》。其它框架则没有提到相关内容。 而对于两种接入方式 Taro 都提供了 [代码]taro convert[代码] 功能，既可以将原有微信小程序项目转换为 Taro 多端代码，也可以将微信小程序生态的组件转换为 Taro 组件。 所以这轮的排序是： [代码]Taro[代码] > [代码]mpvue[代码] 、 [代码]uni-app[代码] > [代码]WePY[代码] > [代码]chameleon[代码] 从 GitHub 的 star 来看，[代码]mpvue[代码] 、[代码]Taro[代码]、[代码]WePY[代码] 的差距非常小。从 NPM 和 CNPM 的 CLI 工具下载量来看，是 Taro（3k/week）> mpvue (2k/w) > WePY (1k/w)。但发布时间也刚好反过来。笔者估计三家的流行程度和案例都差不太多。 [代码]uni-app[代码] 则号称有上万案例，但不像其它框架一样有一些大厂应用案例。另外从开发者的数量来看也是 [代码]uni-app[代码] 领先，它拥有 20+ 个 QQ 交流群（最大人数 2000）。 所以从流行程度来看应该是： [代码]uni-app[代码] > [代码]Taro[代码]、[代码]WePY[代码]、[代码]mpvue[代码] > [代码]chameleon[代码] 一个开源作品能走多远是由框架维护团队和第三方开发者共同决定的。虽然开源建设不能具体地量化，但依然是衡量一个框架/库生命力的非常重要的标准。 从第三方贡献者数量来看，[代码]Taro[代码] 在这一方面领先，并且 [代码]Taro[代码] 的一些核心包/功能（MobX、CSS Modules、alias）也是由第三方开发者贡献的。除此之外，腾讯开源的 [代码]omi[代码] 框架小程序部分也是基于 Taro 完成的。 [代码]WePY[代码] 在腾讯开源计划的加持下在这一方面也有不错的表现；[代码]mpvue[代码] 由于停滞开发了很久就比较落后了；可能是产品策略的原因，[代码]uni-app[代码] 在开源建设上并不热心，甚至有些部分代码都没有开源；[代码]chameleon[代码] 刚刚开源不久，但它的代码和测试用例都非常规范，以后或许会有不错的表现。 那么这一轮的对比结果是： [代码]Taro[代码] > [代码]WePY[代码] > [代码]mpvue[代码] > [代码]chameleon[代码] > [代码]uni-app[代码] 最后补一个总的生态对比图表： 从各框架已经公布的规划来看： [代码]WePY[代码] 已经发布了 [代码]v2.0.alpha[代码] 版本，虽然没有公开的文档可以查阅到 [代码]2.0[代码] 版本有什么新功能/特性，但据其作者介绍，[代码]WePY 2.0[代码] 会放大招，是一个「对得起开发者」的版本。笔者也非常期待 2.0 正式发布后 [代码]WePY[代码] 的表现。 [代码]mpvue[代码] 已经发布了 [代码]2.0[代码] 的版本，主要是更新了其它端小程序的支持。但从代码提交， issue 的回复/解决率来看，[代码]mpvue[代码] 要想在未来有作为首先要打消社区对于 [代码]mpvue[代码] 不管不顾不更新的质疑。 [代码]uni-app[代码] 已经在生态上建设得很好了，应该会在此基础之上继续稳步发展。如果 [代码]uni-app[代码] 能加强开源开放，再加强与大厂的合作，相信未来还能更上一层楼。 [代码]chameleon[代码] 的规划比较宏大，虽然是最后发的框架，但已经在规划或正在实现的功能有： 快应用和端拓展协议 通用组件库和垂直类组件库 面向研发的图形化开发工具 面向非研发的图形化页面搭建工具 如果 [代码]chameleon[代码] 把这些功能都做出来的话，再继续完善生态，争取更多第三方开发者，那么在未来 [代码]chameleon[代码] 将大有可为。 [代码]Taro[代码] 的未来也一样值得憧憬。Taro 即将要发布的 [代码]1.3[代码] 版本就会支持以下功能： 快应用支持 Taro Doctor，自动化检查项目配置和代码合法性 更多的 JSX 语法支持，1.3 之后限制生产力的语法只有 [代码]只能用 map 创造循环组件[代码] 一条 H5 打包体积大幅精简 同时 [代码]Taro[代码] 也正在对移动端进行大规模重构；开发图形化开发工具；开发组件/物料平台以及图形化页面搭建工具。 那说了那么多，到底用哪个呢？ 如果不介意尝鲜和学习 DSL 的话，完全可以尝试 [代码]WePY[代码] 2.0 和 [代码]chameleon[代码] ，一个是酝酿了很久的 2.0 全新升级，一个有专门针对多端开发的多态协议。 [代码]uni-app[代码] 和 [代码]Taro[代码] 相比起来就更像是「水桶型」框架，从工具、UI 库，开发体验、多端支持等各方面来看都没有明显的短板。而 [代码]mpvue[代码] 由于开发一度停滞，现在看来各个方面都不如在小程序端基于它的 [代码]uni-app[代码] 。 当然，Talk is cheap。如果对这个话题有更多兴趣的同学可以去 GitHub 另行研究，有空看代码，没空看提交： chameleon: https://github.com/didi/chameleon mpvue: https://github.com/Meituan-Dianping/mpvue Taro: https://github.com/NervJS/taro uni-app: https://github.com/dcloudio/uni-app WePY: https://github.com/Tencent/wepy (按字母顺序排序)
2019-03-19
答题小程序搭建系列一
答题小程序搭建系列一 答题小程序 2020-10-12 新增对主观题的支持，具体包括以下几种类型 [代码] "单选"=>"01", "多选"=>"02", "判断"=>"03", "填空"=>"04", "简答"=>"05", "论述"=>"06", "名词解释"=>"07"
2020-10-12
kbone，十分钟让 Vue 项目同时支持小程序
什么是kbone 微信小程序开发过程中，许多开发者会遇到 小程序 与 Web 端一起的需求，由于 小程序 与 Web 端的运行环境不同，开发者往往需要维护两套类似的代码，这对开发者来说比较耗费力气，并且会出现不同步的情况。 为了解决上述问题，微信小程序推出了同构解决方案 [代码]kbone[代码] 来解决此问题。 那么，[代码]kbone[代码] 要怎么使用呢？这里我们将通过一个 [代码]todo[代码] 的例子来跟大家讲解。 首先，我们来看下一个基本的 kbone 项目的目录结构（这里的 [代码]todo[代码] 是基于 [代码]Vue[代码] 的示例，[代码]kbone[代码] 也有 [代码]React[代码]，[代码]Preact[代码]，[代码]Omi[代码] 等版本，详情可移步 kbone github）。 因为 kbone 是为了解决 小程序 与 Web 端的问题，所以每个目录下的配置都会有两份（小程序 与 Web 端各一份） 不管是 小程序 端还是 Web 端，都需要入口文件。在 [代码]src/index[代码] 目录下，[代码]main.js[代码] 为 Web 端用主入口，[代码]main.mp.js[代码] 则为 小程序 端用主入口。 当然，Web 端会比 小程序 多一个入口页面，即 [代码]index.html[代码]（位于根目录下）。 下面两段代码分别是 小程序端 入口与 Web 端入口的代码，可以看到 小程序端的入口代码封装在 [代码]createApp[代码] 函数里面（这里固定即可），内部会比 Web 端多一个创建 [代码]app[代码] 节点的操作，其他的基本就是一致的。 [代码]// 小程序端入口 import Vue from 'vue' import todo from './todo.vue' export default function createApp() { // 创建app节点用于绑定 const container = document.createElement('div') container.id = 'app' document.body.appendChild(container) return new Vue({ el: '#app', render: h => h(todo) [代码]// web端入口 import Vue from 'vue' import todo from './todo.vue' new Vue({ el: '#app', render: h => h(todo) todo.vue 在上面的入口图可以看到，源码目录中，除了入口文件分开之前，页面文件就是共用的了，这里直接使用 Vue 的写法即可，不用做特殊的适应。 写完代码之后，我们要怎么跑项目呢？这时，配置就派上用场啦。 Web 端配置为正常的 Vue 配置，小程序端配置与 Web 端配置的唯一不同就是需要引入 [代码]mp-webpack-plugin[代码] 插件来将 Vue 组件转化为小程序代码。 接着，我们需要构建代码，让代码可以运行到各自的运行环境中去。构建完成后，生产代码会位于 dist 目录中。 [代码]// 构建 web 端代码 // 目标代码在 dist/web npm run build // 构建小程序端代码 // 目标代码在 dist/mp npm run mp 小程序端 的构建会比 Web 端的构建多一个步骤，就是 npm 构建。 进入 [代码]dist/mp[代码] 目录，执行 [代码]npm install[代码] 安装依赖，用开发者工具将 [代码]dist/mp[代码] 目录作为小程序项目导入之后，点击工具栏下的 [代码]构建 npm[代码]，即可预览效果。 最后，我们来看一下 todo 的效果。kbone 初体验，done~ todo 代码可到 kbone/demo13 自提。 如果你想了解更多 kbone 相关的使用及详情，可移步 kbone github。 如有疑问，可到 Kbone小主页 发帖沟通。
2020-04-22
「笔记」订阅消息-订阅次数维护
距离1月10日模板消息下架只有2天了，在社区里经常能看到有帖子在问关于怎么记录订阅次数的问题，这里在这里介绍一下自己用的简单方案，仅供参考。
上面这个图大家应该都比较熟悉了，很多人总是误以为勾选“总是保持以上选择，不再询问”，就可以无限发送订阅消息，这个是错误的想法，勾选和不勾选唯一的区别就是每次触发订阅的时候会不会弹授权窗口而已。
订阅消息不能通过bindsubmit的方式触发，必须通过bindtap的方式触发。
触发订阅窗口后，不管用户点击了允许还是取消，都会进入订阅消息的success回调中，所以通过这个来判断用户是否订阅是错误的。
订阅次数的维护
先看下官方的文档：
那么我们该如何使用呢？
我们通过 wx.requestSubscribeMessage 接口发送的时候是知道需要让用户订阅哪几个模板的，就是 tmplIds 这个参数填的数组。那么根据官方文档的回调内容，我们就可以直接在success内去获取对应的key所返回的状态。把获取到的状态分别存入自己的数据库里。发送的时候去数据库里查询需要发送的模板并且状态为accept的去发送，如果发送成功则删除一条记录（因为没有过期一说，所以随便删除哪一条记录都不影响）。
查询模板订阅状态
需要基础库大等于2.10.0才支持。
wx.getSetting({
withSubscriptions: true,
success (res) {
console.log(res)
如果用户选择了不再接收消息会清空之前的订阅次数，但是这个不会主动告诉开发者，所以发送订阅消息失败后，需要根据返回内容自行清空记录，重新计算。
「笔记」订阅消息-订阅次数维护（2020年3月更新改动）
「笔记」订阅消息体验踩坑
2020-03-06
「笔记」订阅消息体验踩坑
10月12日夜晚社区发了公告小程序模板消息能力调整通知，正式发布了 一次性订阅消息 这一能力，所以第一时间进行了体验。
本文主要是补充一下官方未提供的使用方法，和使用中与模板消息用法的不同。
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/subscribe-message.html
[代码]wx.requestSubscribeMessage({
tmplIds: ["模板id1","模板id2"],
success: function (res) {
fail(err) {
console.error(err);
如果不勾选红色方框内的内容，用户每次触发订阅消息功能都会弹出授权窗口，如果用户勾选了则不会出现弹窗。
目前开发者工具（v1.02.191012）不支持调试，只能通过真机调试。
微信不会为开发者保存订阅次数，需要自己在后台记录用户触发的次数。
超过次数调用接口下发订阅消息会返回失败。
发送模板格式和原来的模板消息格式不一致，特别是data内的内容，订阅消息的字段key是和数据类型有关，value的参数需要严格按照设置的类型提交，具体使用参考后台的模板详情。
模板消息的格式：
[代码]"data": {
"keyword1": {
"value": "内容",
"color": "#000"
"keyword2": {
"value": "内容",
"color": "#000"
订阅消息的格式：
[代码]"data": {
"thing1": {
"value": "内容"
"number2": {
"value": 20
订阅消息申请模板的时候，需要选择所属类目，而且只能是自己小程序相关类目，模板消息是不需要选择对应类目的。
如果删除小程序类目，则会把订阅消息模板一起删除，需谨慎操作。
长期订阅消息只针对特定行业开放，所以普通开发者并无法使用。
暂时就先总结这些，有其它坑再补充。
2019-10-13
如何实现圣诞节星星飘落效果
圣诞节快到啦～🎄🎄🎄🎄咱们也试着做做小程序版本的星星✨飘落效果吧～ 先来个效果图： 484听起来很叼，看起来也就那样。 来咱们上手开始撸 页面内容wxml，先简单切个图吧。 [代码]<view class="container"> <image src="https://qiniu-image.qtshe.com/merry_001.jpg" mode="widthFix"/> <image src="https://qiniu-image.qtshe.com/merry_02.jpg" alt="" mode="widthFix"/> <image src="https://qiniu-image.qtshe.com/merry_03.jpg" alt="" mode="widthFix"/> <image src="https://qiniu-image.qtshe.com/merry_04.jpg" alt="" mode="widthFix"/> <image src="https://qiniu-image.qtshe.com/merry_05.jpg" alt="" mode="widthFix"/> <image src="https://qiniu-image.qtshe.com/merry_06.jpg" alt="" mode="widthFix"/> <image src="https://qiniu-image.qtshe.com/merry_07.jpg" alt="" mode="widthFix"/> </view> <canvas canvas-id="myCanvas" /> 页面样式wxss，因为切片用的不太熟练，图片之间有个2rpx的空隙。 [代码].container { height: 100%; box-sizing: border-box; min-height: 100vh; image { width: 100%; display: block; margin-top: -2rpx; //不会切图造的孽 canvas { width: 100%; min-height:100vh; position: fixed; top: 0; z-index: 888; 重点JS： [代码]//获取应用实例 const app = getApp() // 存储所有的星星 const stars = [] // 下落的加速度 const G = 0.01 const stime = 60 // 速度上限，避免速度过快 const SPEED_LIMIT_X = 1 const SPEED_LIMIT_Y = 1 const W = wx.getSystemInfoSync().windowWidth const H = wx.getSystemInfoSync().windowHeight var starImage = '' //星星素材 wx.getImageInfo({ src: 'https://qiniu-image.qtshe.com/WechatIMG470.png', success: (res)=> { starImage = res.path Page({ onLoad() { this.setAudioPlay() onShow() { this.createStar() createStar() { let starCount = 350 //星星总的数量 let starNum = 0 //当前生成星星数 let deltaTime = 0 let ctx = wx.createCanvasContext('myCanvas') let requestAnimationFrame = (() => { return (callback) => { setTimeout(callback, 1000 / stime) starLoop() function starLoop() { requestAnimationFrame(starLoop) ctx.clearRect(0, 0, W, H) deltaTime = 20 //每次增加的星星数量 starNum += deltaTime if (starNum > starCount) { stars.push( new Star(Math.random() * W, 0, Math.random() * 5 + 5) starNum %= starCount stars.map((s, i) => { //重复绘制 s.update() s.draw() if (s.y >= H) { //大于屏幕高度的就从数组里去掉 stars.splice(i, 1) ctx.draw() function Star(x, y, radius) { this.x = x this.y = y this.sx = 0 this.sy = 0 this.deg = 0 this.radius = radius this.ax = Math.random() < 0.5 ? 0.005 : -0.005 Star.prototype.update = function() { const deltaDeg = Math.random() * 0.6 + 0.2 this.sx += this.ax if (this.sx >= SPEED_LIMIT_X || this.sx <= -SPEED_LIMIT_X) { this.ax *= -1 if (this.sy < SPEED_LIMIT_Y) { this.sy += G this.deg += deltaDeg this.x += this.sx this.y += this.sy Star.prototype.draw = function() { const radius = this.radius ctx.save() ctx.translate(this.x, this.y) ctx.rotate(this.deg * Math.PI / 180) ctx.drawImage(starImage, -radius, -radius * 1.8, radius * 2, radius * 2) ctx.restore() setAudioPlay() { let adctx = wx.createInnerAudioContext() adctx.autoplay = true adctx.loop = true adctx.src = 'https://dn-qtshe.qbox.me/Jingle%20Bells.mp3' adctx.onPlay(() => { console.log('开始播放') adctx.play() 以上只是简单实现了一个星星飘落的效果，预览的时候需要开启不校验合法域名哦～ 目前还有更优的h5版本，使用Three.js实现的，在小程序内使用Three.js对于我来说有点打脑壳，先把效果分享出来吧。 h5版本，手机看效果最佳