- 小程序已完成备案,注销时会不会对主体下其他小程序有影响?
小程序已完成备案,注销时会不会对主体下其他小程序有影响?
2023-09-20 - vue中使用wx-open-launch-weapp开放标签按钮不显示问题
先说明下本人不是专业做前端的,出于项目原因来研究一下微信公众号跳转小程序的功能,其中许多的代码运行流程原理及代码解析过程我并不了解,好在经过两天的尝试终于可以跳转了。在此总结一下几个需要注意的事项。 因为我们项目是已经上线的项目,所以微信公号的认证和js域名绑定都是好的,前期的环境准备我并没有操心。 最开始我是照着微信的开发文档搞的,代码都写完了,丢到正式环境真机测试,按钮没有显示。网上查了很多信息都说是微信签名握手那块有问题,查阅了很多资料,看了很多的帖子大家说的都差不多,最后还是在微信的官方文档上找到了按钮不显示的答案。 微信官方开放标签使用文档地址 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html。下面总结下使用步骤及注意事项。 一、环境准备 1、微信版本手机版本要求(这个估计大家都满足)。 1)微信版本要求为:7.0.12及以上。 2)系统版本要求为:iOS 10.3及以上、Android 5.0及以上。 2、微信公众号绑定域名并在界面中引入微信的jssdk(注意jssdk要用1.6.0版本的)。 1)微信开放标签使用步骤与微信JS-SDK类似,也需要引入JS文件等步骤。如果是公众号身份的网页,需要绑定安全域名,如果是使用小程序云开发静态网站托管的小程序 网页,则不需绑定安全域名即可直接使用(这个地方因为我用的是公司已经上线的公众号所以安全域名都是配置好的,没有配置的可以在微信后台->公众号设置->功能设置)。 [图片] 2)在需要调用JS接口的页面引入如下JS文件:http://res.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)。(这里因为也是公司上线的项目,都是脚手架引用好的,我只是升级了一下js的版本,再次提醒版本要是1.6.0的,这里如果说是自己来试水来测试这个功能的话注意一下用的jssdk的版本就好) [图片] 3、可以使用标签使用对象 1)已认证的服务号,服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。 2)已认证的非个人主体的小程序,使用小程序云开发的静态网站托管绑定的域名下的网页,可以使用此标签跳转任意合法合规的小程序。 经过上面的检查如果条件都符合说明基本的开发环境和条件已经具备了,就可以开始试水开发了。 二、开发。 1)通过config接口注入权限验证配置并申请所需开放标签(这里具体代码运行流程的我就不知道了反正这一步是必须要成功的才行,相信做前端的程序猿们应该很清楚了,记住一定要成功!不然按钮肯定没有)。这个地方还有人说appid必须是小程序的,我感觉有点误导了,这个地方你在哪个地方跳就是哪个的,和你要跳到的小程序并没有太大关系。比如你在公众号跳小程序,那这个地方就是公众号的appid wxSdk.config({ debug: false, // 这个设置成true签名成功会返回弹出config ok的框框,建议测试的时候还是把这个打开,确保这一步是成功的。 appId: "", // 必填,公众号的唯一标识后台配置的 timestamp: "", // 必填,生成签名的时间戳后台配置的 nonceStr: "", // 必填,生成签名的随机串后台配置的 signature: "",// 必填,签名后台配置的 jsApiList: ['updateTimelineShareData'],// 必填,需要使用的JS接口列表,这个地方必须至少写一个,即使你一个都不想用 openTagList:['wx-open-launch-weapp']// 可选,需要使用的开放标签列表 }); 2)上面的config权限验证成功,标签也开放了就可以开始使用开放标签了(这个地方就照着微信官网的文档写就行,这里介绍几种写法)。 1)使用的前端框架和template标签不冲突的(username是小程序原始的id,gh开头的,path是小程序的页面路径,其他东西可以不动)。 <wx-open-launch-weapp id="launch-btn" :username="gh_xxxxx" :path="pages/index.html" @launch="handleLaunchFn" @error="handleErrorFn" > <template> <style>.btn { display: flex;align-items: center;width: 100px;height: 100px }</style> <button class="btn">跳转小程序</button> </template> </wx-open-launch-weapp> 2)使用的前端框架和template标签冲突的,例如VUE框架(就是把标签换一种写法,避免冲突)。 <wx-open-launch-weapp id="launch-btn" :username="gh_xxxxx" :path="pages/index.html" @launch="handleLaunchFn" @error="handleErrorFn" > <script type="text/wxtag-template"> <style>.btn { display: flex;align-items: center;width: 100px;height: 100px }</style> <button class="btn">跳转小程序</button> </script> </wx-open-launch-weapp> 3)不管冲突不冲突都能用的(就是动态的生成标签内容,下面的例子是在vue中用v-html实现的,也可以用docment对象来动态的生成节点在加到页面)。 <template> <div v-html="html"></div> </template> <script> export default { data () { return { html:'<wx-open-launch-weapp id="launch-btn" username="gh_xxxx" path="/pages/index.html" @launch="handleLaunchFn" @error="handleErrorFn"><template><style>.btn { display: flex;align-items: center; }</style><button class="btn">跳转小程序</button></template></wx-open-launch-weapp>' } }, created() { }, mounted() { }, methods: { handleLaunchFn (e) { console.log(e) }, handleErrorFn(e){ console.log('fail', e.detail); }, } } </script> 4)对于有CSP要求的页面,需要添加白名单[代码]frame-src https://*.qq.com webcompt:[代码],才能在页面中正常使用开放标签(这点重中之中,因为我看了两天的帖子都没人提到这个点,虽然到现在我也不清楚什么是有CSP要求的界面,我不显示按钮的原因也是因为这个)。 单页面的项目就在index.html中的head标签下面添加。 [图片] <meta http-equiv="Content-Security-Policy" content="script-src * 'self' 'unsafe-inline' 'unsafe-eval' https://img.yzcdn.cn https://ssl.google-analytics.com https://assets.zendesk.com https://connect.facebook.net;default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src * data: content:; connect-src *; font-src * data: content:;frame-src https://*.qq.com webcompt:;"> 上面四个步骤完成基本上就算开发完成了可以测试了。 三、测试(测试一定要真机测试就是要在手机上测试,其他测试环境目前都不会有按钮显示不管环境正不正确,代码正不正确)。 测试没啥说的祝大家好运吧! 四、总结 微信官方文档上面给的说明其实比较详细了,该提的点也都提了,希望各位开发者认真看下文档,检查自己的环境是否具备,代码写的是否正确。下面从环境和开发方面总结几个重要的点。 环境: 1)微信和手机系统的版本。 2)使用的jssdk必须是1.6.0的。 3)微信的服务号公众号必须是已经认证的服务号、且绑定了JS接口安全域名。 开发: 1)通过config接口注入权限验证配置并申请所需开放标签,这步骤必须成功。 2)避免template冲突。 3)对于有CSP要求的页面,需要添加白名单[代码]frame-src https://*.qq.com webcompt:[代码] 4)测试必须真机测试。
2021-03-29 - 房地产小程序有即时聊天功能类目如何选择
房地产小程序 里面有 房产经纪人 和 客户 之间沟通用的聊天功能 - 想问应该选择什么类目?
2019-07-18 - 小程序用户信息相关接口调整公告
为进一步规范开发者调用用户信息相关接口或功能,提升用户体验,平台将对部分用户信息相关功能及接口进行调整,具体如下: 访问蓝牙、添加通讯录联系人、添加日历事件需要用户授权小程序处理用户的个人信息,需要获取用户明示同意,平台计划从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日
2023-09-26 - 小程序app.onLaunch与page.onLoad异步问题的最佳实践
场景: 在小程序中大家应该都有这样的场景,在onLaunch里用wx.login静默登录拿到code,再用code去发送请求获取token、用户信息等,整个过程都是异步的,然后我们在业务页面里onLoad去用的时候异步请求还没回来,导致没拿到想要的数据,以往要么监听是否拿到,要么自己封装一套回调,总之都挺麻烦,每个页面都要写一堆无关当前页面的逻辑。 直接上终极解决方案,公司内部已接入两年很稳定: 1.可完美解决异步问题 2.不污染原生生命周期,与onLoad等钩子共存 3.使用方便 4.可灵活定制异步钩子 5.采用监听模式实现,接入无需修改以前相关逻辑 6.支持各种小程序和vue架构 。。。 //为了简洁明了的展示使用场景,以下有部分是伪代码,请勿直接粘贴使用,具体使用代码看Github文档 //app.js //globalData提出来声明 let globalData = { // 是否已拿到token token: '', // 用户信息 userInfo: { userId: '', head: '' } } //注册自定义钩子 import CustomHook from 'spa-custom-hooks'; CustomHook.install({ 'Login':{ name:'Login', watchKey: 'token', onUpdate(token){ //有token则触发此钩子 return !!token; } }, 'User':{ name:'User', watchKey: 'userInfo', onUpdate(user){ //获取到userinfo里的userId则触发此钩子 return !!user.userId; } } }, globalData) // 正常走初始化逻辑 App({ globalData, onLaunch() { //发起异步登录拿token login((token)=>{ this.globalData.token = token //使用token拿用户信息 getUser((user)=>{ this.globalData.user = user }) }) } }) //关键点来了 //Page.js,业务页面使用 Page({ onLoadLogin() { //拿到token啦,可以使用token发起请求了 const token = getApp().globalData.token }, onLoadUser() { //拿到用户信息啦 const userInfo = getApp().globalData.userInfo }, onReadyUser() { //页面初次渲染完毕 && 拿到用户信息,可以把头像渲染在canvas上面啦 const userInfo = getApp().globalData.userInfo // 获取canvas上下文 const ctx = getCanvasContext2d() ctx.drawImage(userInfo.head,0,0,100,100) }, onShowUser() { //页面每次显示 && 拿到用户信息,我要在页面每次显示的时候根据userInfo走不同的逻辑 const userInfo = getApp().globalData.userInfo switch(userInfo.sex){ case 0: // 走女生逻辑 break case 1: // 走男生逻辑 break } } }) 具体文档和Demo见↓ Github:https://github.com/1977474741/spa-custom-hooks 祝大家用的愉快,记得star哦
2023-04-23 - 请问微信开发者工具怎么调出华为mate30的尺寸来进行机型调试,自定义的宽高和DPR不知道怎么填写?
[图片]
2020-03-06 - 微信小程序头像昵称实战篇
2022-08-25 api文档地址: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html 目前的api变更后,得到的地址为 临时地址, 这个是文档没有说明的, 最佳实践,是需要把得到的地址上传到自己的服务器,然后用服务器返回的地址作为 真实头像的永久地址. 核心点说明: //获取到api返回的新地址路径 onChooseAvatar(e) { this.avatarUrl = e.detail.avatarUrl console.log('e.detail', e.detail) // this.updateUserInfo(); this.uploadFile(); }, /* 上传 头像 转 话格式*/ uploadFile(){ uni.uploadFile({ url: config.webUrl + '/upload/uploadImages',//后台接口 filePath: this.avatarUrl,// 上传图片 url name:'image', // formData: this.formData, header: { 'content-type': 'multipart/form-data', 'token': uni.getStorageSync('token') }, // header 值 success: res => { let obj = JSON.parse(res.data) console.log('obj', obj) if (obj.code == 1) { let imgUrl = obj.data.full_path; this.userImg = imgUrl; this.updateUserInfo(); } else { uni.showToast({ icon: 'none', title: '图片太大,请重新选择!' }); } }, fail: e => { this.$toast('上传失败') } }); }, 这里需要注意, wx.uploadFile 返回的是字符串类型,需要前端自己处理一下数据结构: [图片] 完整代码如下: import config from "@/common/config.js"; import {debounce} from '@/utils/debounce.js' export default { data() { return { defaultAvatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0', avatarUrl: '', nick_name: '', userImg: '', } }, onLoad() { let userInfo = uni.getStorageSync('userInfo') || {}; let { nick_name,img_url } = {...userInfo}; this.userImg = img_url; this.nick_name = nick_name; }, methods: { onChooseAvatar(e) { this.avatarUrl = e.detail.avatarUrl console.log('e.detail', e.detail) // this.updateUserInfo(); this.uploadFile(); }, inputWord: debounce(function(e){ this.nick_name = e.detail.value console.log('this.nick_name.length',this.nick_name.length) let str = this.nick_name.trim(); if(str.length==0){ this.$toast('请输入合法的昵称') return } if((/[^/a-zA-Z0-9\u4E00-\u9FA5]/g).test(str)){ this.$toast('请输入中英文和数字') return } this.updateUserInfo() }, 1500), /* 上传 头像 转 话格式*/ uploadFile(){ uni.uploadFile({ url: config.webUrl + '/upload/uploadImages',//后台接口 filePath: this.avatarUrl,// 上传图片 url name:'image', // formData: this.formData, header: { 'content-type': 'multipart/form-data', 'token': uni.getStorageSync('token') }, // header 值 success: res => { let obj = JSON.parse(res.data) console.log('obj', obj) if (obj.code == 1) { let imgUrl = obj.data.full_path; this.userImg = imgUrl; this.updateUserInfo(); } else { uni.showToast({ icon: 'none', title: '图片太大,请重新选择!' }); } }, fail: e => { this.$toast('上传失败') } }); }, updateUserInfo(){ let self = this; uni.showLoading({}); let params = { img_url: this.userImg, nick_name: this.nick_name.trim(), } self.$http.post('updateUserInfo', params).then(res => { uni.hideLoading() if (res.data.code == 1) { self.$toast('修改成功!') }else { self.$toast(res.data.msg) } }) }, } } 请一键三连,争取升个级,谢谢各位道友! 补充一下,如果api不生效注意切换一下版本库: 我本地用的2.26.1 [图片] 实际效果图: [图片] [图片]
2022-11-24 - 没有人脸核身资质的小程序 A,能否跳转到另一个有资质的小程序 B 进行人脸核身然后返回结果?
前提: 小程序 A 没有资质,小程序 B 能够开通人脸核身。两个小程序都是自己开发,所以数据可以互通。 期望效果: A 不要因为人脸识别功能被卡审核。 方案: B 开通人脸核身,A 跳转到 B 进行人脸核身,B 保存人脸核身结果到数据库,A 通过数据库来确认用户已经通过了人脸核身。 请问有人研究过这种方案吗?这种方案可行不?
2022-06-22 - 微信云开发计费调整公告
各位微信云开发用户: 感谢大家一直以来对微信云开发的支持。由于云计算成本整体上升,为了继续为各位用户提供稳定可靠的服务,微信云开发将于 2022 年 08 月 18 日,对计费方式进行如下变更,部分指标价格将有所上浮。 新计费模式下,新用户免费使用 1 个月后,统一使用 “基础套餐+按量付费” 模式:购买带有一定配额的基础套餐后,超出套餐配额部分再按照实际使用量付费。 基础套餐 [图片] *新用户首月免费配额:与基础套餐一致,可满足大部分情况下的开发体验需求 *5 折折扣有效期至少延续至 2022 年底,后续折扣如有变化将另行通知 按量付费 [图片] 【指标说明】 1、调用次数:合并原多项指标统一计价,具体为 “云存储上传操作”、“云存储下载操作”;“数据库读操作”、“数据库写操作” 及新增指标 “云函数调用操作”; 2、容量:合并原多项指标统一计价,具体为 “存储空间" 及 "数据库容量"; 3、云函数日志服务:本次新增计费指标,建议通过优化日志存储策略降低该指标费用。 新用户手动触发确认开始使用后,将拥有 1 个月免费权益,体验期间的环境配额与基础套餐相同,可选择是否进行超额按量付费。 现有用户可以在「微信开发者工具-云开发控制台」或「微信云服务助手小程序」查询过往用量情况后,使用 价格计算器 预估新价格。 在计费方式升级生效之日(2022.08.08)起,对现有用户均提供至少 1 个月的操作缓冲期,期间会推送提醒及提供切换入口,用户可自由选择是否切换新的计费方式,超时未切换的云开发环境将会停服释放。缓冲期内切换成功的用户将会获得额外代金券。 对于当前月调用次数 >100 万次的帐号,本次调整将不直接生效,后续将由专业架构师联系或独立推送指引切换到合适配额的企业旗舰版本。 自本公告发布之日起,对于原已购预付费套餐、资源包的用户,仍然可正常使用原已购资源,直至原约定套餐到期或用完。现有旧预付费套餐不再支持续费超过一个月,现有旧资源包不再支持新购。 微信云开发将继续为各位用户提供简单易用安全的专业 Serverless 开发服务,感谢大家的支持。 Q&A 1、此次调整,意味着我的费用会增加吗? 是的,由于云计算整体成本的持续上升,为了能够长期给各位开发者提供低门槛的开发服务,我们对于部分计费指标进行了价格调整,在调整后大部分的开发者费用会一定程度的上浮。 2、我如何预估调整之后的费用是多少呢? 新计费生效后,在缓冲期内,开发者可查看新指标下的用量情况,或者根据过往用量,使用 价格计算器 估算调整之后的费用。 我们根据测算,为大部分开发者提供基础套餐配额以满足线上服务,如你的实际用量没有超过基础配额,也没有使用扩展功能,那么每月消费即为 19.9 元。 3、我需要在哪里操作切换新计费呢? [图片] 微信云服务助手小程序码 在计费方式升级生效之日(2022.08.08)起,开发者可前往「微信开发者工具-云开发控制台」或「微信云服务助手小程序」进行操作切换。按照过往的计费信息下发惯例,我们通过「微信公众平台公众号」向管理员推送计费变更信息与切换入口。 4、现在的环境是否可以继续使用呢? 新计费生效后,已购买的预付费套餐可正常使用至原到期时间,已购买资源包的按量付费环境可正常使用至原资源包到期时间,均不会存在直接失效或自动退费的情况。在切换到新计费方案后,原有环境即可持续正常使用。 5、如果超时切换会有什么影响呢? 若原环境到期且超出切换缓冲时间,则该环境将进入停服释放流程,数据不可找回,请开发者及时操作。 6、以上新计费方案生效后,我有多长时间可以决定是否继续使用云开发呢? 对于当前月调用次数 <100 万次的帐号,从公告发布日至新方案生效后的一个月,期间可进行是否继续使用的决策;计费方式升级生效之日(2022.08.08)起,我们也会通过上述 Q&A 3 说明的方式中提供切换入口与下发消息,此时你仍然有至少 1 个月的缓冲期做出决定。对于当前月调用次数 >100 万次的帐号,将有专业架构师联系指引切换到合适配额的企业旗舰版本,期间产生的消耗仍然按旧方案计费。我们会为大额消耗用户提供适当优惠,同时对于不希望继续使用云开发的此类帐号提供不低于 3 个月的缓冲时间。如有其他问题,可前往「微信开发者工具-云开发控制台-帮助-工单」主动联系我们。 7、我自行测算预估后觉得新方案有点贵,有什么好建议吗? 本次调整,价格上涨指标为 “调用次数”、“容量”和“CDN 流量”,建议相应进行技术优化,减少不必要的多次调用或存储内容,可有效控制费用;此外新增计费指标为日志服务,可在「微信开发者工具-云开发控制台-云函数-日志」中查看日志使用情况,并优化日志使用逻辑,避免上报大量冗余的日志信息导致不必要的费用支出。 若评估后认为新的费用方案已不适用于你的业务,可在上述充足的缓冲期内自行选择迁移业务至更合适的服务。 微信云开发团队 2022年7月4日
2022-08-08 - 腾讯AI团队人脸核身服务怼微信小程序团队,要进入一个死循环,无解?!
说一下我的问题: 我们是一家科技公司,需要开发一款酒店管理软件,要用到小程序,同时用到人脸核身真人认证,结果向腾讯云AI平台申请小程序开发接口审核不通过。 原因是我们不是旅游酒店业,不具有《酒店特殊行业许可证》,因此不能提供接入服务。 同时列出了一些行业才可以用,比如保险、学校(还得是公立的)、医疗机构等等。 得,我要说的是,上述限制死的行业,是不是 第三方给他们提供人脸核身服务都不行,都需要逼着他们自己成立技术研发团队来做开发吗? 另外,感觉腾讯云AI团队和小程序团队不和!!! 另外,感觉腾讯云AI团队和小程序团队不和!!! 另外,感觉腾讯云AI团队和小程序团队不和!!! 因为腾讯云AI团队建议我们用H5来做,避开小程序!避开小程序!避开小程序! 请小程序团队给一个合理的解释。 我的建议: 凡是给这些行业提供技术服务支持的技术研发,使用小程序做人脸识别的,都应该可以审核通过,而不是一棒子打死! 扣几个大帽子吧: 这事情,腾讯AI团队回答的很官话! 官本位非常严重! 这是逼着要启用阿里的人脸识别实人认证方案!
2019-08-16 - 小程序A有人脸核身资质,小程序B没有,那么小程序B可以跳转到小程序A进行人脸认证吗?
两个不同的主体的小程序,小程序A有人脸核身资质,小程序B没有,那么小程序B可以跳转到小程序A进行人脸核身认证吗? ps:两个小程序属于不同的主体
2021-08-20 - 小程序用户头像昵称获取规则调整公告
更新时间: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日
2023-09-26 - 社区每周 | 云托管上线新能力、用户头像昵称获取规则调整、微信网页授权能力调整(5.02-5.06)
各位微信开发者: 以下是微信云托管新能力及实践分享介绍、小程序用户头像昵称获取规则调整、微信网页授权能力调整及上周我们在社区收到的问题反馈的处理进度,希望与大家一同打造更好的小程序生态! 资源复用支持消息推送和微信支付、服务 SSR 支持公众号授权登录 在资源复用场景下,微信云托管支持被关联账号配置 消息推送,实现无需加解密和签名,即可接收微信消息推送;同时支持被关联账号配置 微信支付,高效、安全接入微信支付能力。同时服务 SSR 支持 WebSDK 公众号授权登录,无需单独配置转发规则,快速实现登录,详情请查看 接口文档。 同时微信云托管上线 如何提升云托管项目构建效率 场景指南和 云托管消息推送配置使用 直播课程,便于开发者快速掌握微信云托管,高效应用云托管知识。 更多云托管相关内容,请点击查看 微信云托管功能周报。 小程序用户头像昵称获取规则调整公告 为减少不合理的强迫授权用户头像昵称的情况,微信团队对接口进行调整。自 2022 年 10 月 25 日 24 时后,小程序 wx.getUserProfile 接口将被收回,插件通过 wx.getUserInfo 接口获取用户昵称头像将被收回,支持 头像昵称填写能力 获取用户头像昵称。详情点击查看原公告《小程序用户头像昵称获取规则调整公告》 微信网页授权能力调整公告 为进一步规范能力使用,保障用户合法权益,平台将对 微信网页授权能力 进行调整。当开发者在网页中在不规范使用发起 snsapi_userinfo 网页授权时,微信将默认打开网页快照页模式进行基础浏览。能力调整将于 2022 年 7 月 12 日 24 时生效。详情点击查看原公告《微信网页授权能力调整公告》 上周问题反馈和处理进度(5.02-5.06) 已修复的问题iOS 端 navigateToMiniProgram 无法二次唤起的问题 查看详情 iOS 15.4系统 video live-pusher 同时存在 video 播视频没有声音的问题 查看详情 修复中的问题 使用 RecorderManager 出现小程序视频、录音、直播互相冲突的问题 查看详情 苹果手机调用 wx.chooseMedia 拍照后,底部露出拍摄按钮的问题 查看详情 StorageAPI 基础库缓存值后,工具手动修改 bug 的问题 查看详情 微信团队 2022.5.12
2022-05-14 - 小程序类目简介
为了能让C端用户更快速直接了解小程序的功能及内容,以及基于部分行业的法律法规、平台管理的需要,小程序提供的服务需要与小程序所选的类目一致。 一、类目的选择 (1)类目根据主体的不同,开放范围分为个人、组织、境外。 (2)基于法律法规、平台管理的需要,部分类目需要提交相关的资质并经过审核后,才能申请成功。无资质要求的类目选择后即刻生效。 (3)建议开发者根据小程序自身服务内容对照类目适用范围申请相应的类目,以避免后期提交代码审核/小程序上架后出现类目不符等问题被驳回或按违规处理。 (4)小程序类目对应资质、部分示例模板等内容详情可参考:点击查看。 二、小程序类目配置指引 (1)初始化类目配置介绍: 登录【微信公众平台】 ->【点击立即注册】 ->【选择账号类型:小程序进入注册详情页】 ->【填写账号信息,点击注册】 ->【点击登录邮箱,进行账号激活】 ->【激活后进行用户信息登记】 ->【小程序发布流程】 ->【小程序类目,点击去补充,添加类目】 ->【提交】 [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] (2)小程序类目后台配置介绍: 登录【微信公众平台】 ->【小程序发布流程】 ->【小程序类目,点击查看详情】 ->【选择添加服务类目并上传类目资质】 ->【提交】 [图片] [图片] [图片] 三、提前准备小程序类目资质 小程序不同类目对应的资质不同,建议开发者可根据微信开放的“小程序开放的服务类目”表查看对应资质,并提前做好申请相关资质准备,且资质需在有效期内,避免提交类目审核时因资质不符或过期等情况被驳回。 四、类目审核常见问题 1.一个小程序可选 5个 服务类目,且一个月有 5次 修改类目机会; 2.为满足部分开发者业务拓展的诉求,小程序类目已达5个且满足一定条件的账号可以申请【更多类目】。 更多类目申请条件(同时满足): (1)小程序的5个类目中至少有1个资质类目。类目资质可见开放的服务类目表; (2)小程序近7天每天访问人数100人及以上; (3)小程序近3个月无违规行为; (4)本月仍有添加服务类目的次数。 申请方法:登录【微信公众平台小程序】 ->【小程序发布流程】 ->【小程序类目,点击查看详情】 ->【申请更多类目】 ->【提交】 [图片] 3.类目审核时长:一般情况为1 - 7天,如出现审核量大、内容复杂等特殊情况可能延长;如有紧急申请需求,且有加急额度情况下,在选择需提交资质的类目时,可同时勾选【审核加急】按钮,详情参考:【小程序类目审核加急通道开放】 4.部分常见驳回原因: 情况1: 提交资质主体与小程序注册主体不一致 案例:小程序(主体为123)申请【医疗服务-其他私立医疗机构】类目,提交资质主体为345,即为主体不一致 建议:以有资质的主体申请小程序 或 用小程序主体申请相关资质 情况2:提交资质已过期 案例:小程序申请【医疗服务-其他私立医疗机构】类目,提交《医疗执业许可证》,许可有效期为2016.09.12,即为过期 建议:提交许可资质在有效期内且有效期大于3个月及以上 情况3:提交资质模糊 案例:小程序申请【社交-社区/论坛】类目,提交的《非经营性互联网信息服务备案核准》资质模糊,审核无法辨别 建议:请确保提交资质清晰,可供审核辨别 情况4:提交虚假资质 案例:小程序(主体为123)申请【社交-社区/论坛】类目,提交主体一致的《非经营性互联网信息服务备案核准》资质,审核人员经可信渠道核实其资质主体为456,将判断小程序提交虚假资质 建议:以有资质的主体申请小程序 或 用小程序主体申请相关资质 温馨提醒: 审核中如发现小程序提交虚假资质,平台将视违规情节采取限制、甚至停止提供相关功能服务等措施,如涉及违法行为,可能追究其民事、刑事等相关法律责任,请各位开发者勿在“危险”的边缘试探哦~
09-09 - 你的小程序类目选正确了吗?
微信小程序的开发者们在发布小程序之前,需要给每个小程序设置好对应类目等信息,然后才能进行代码提审。 小程序的类目等基本信息是用户对一个小程序的初步认知,平台希望这些信息能够给予用户准确预期每个小程序的功能和内容。以及基于部分行业的法律法规要求,小程序提供的服务需要与小程序所选的类目一致。 后续如果小程序存在类目不符问题可能会在代码审核或已发布运营时,收到平台的审核通知或建议修改通知。因此小编整理了以下常见类目的建议及案例: 商家自营业务类 案例1:该小程序在线售卖进口零食饼干辣条等加工预包装食品,或鲜切水果生食产品需提供《食品经营许可证》资质文件,并重新提交审核补充商家自营-食品类目。 [图片] 案例2:该小程序涉及在线售卖图书报刊/音像/影视/游戏/动漫等书籍。零售类需提供县(区)级出版行政主观部门合法的《出版物经营许可证》资质文件;批发类需提供省级出版行政主管部门合法的《出版物经营许可证》资质文件,并重新提交审核补充商家自营-图书报刊/音像/影视/游戏/动漫类目。 [图片] 外卖&电商&点餐等平台型业务类 案例1:该小程序涉及为餐饮门店提供入驻渠道,提供外卖的平台型服务。需提供《增值电信业务经营许可证》资质文件,并重新提交审核补充餐饮-外卖平台类目。 [图片] 案例2:该小程序涉及为企业或个人提供网上交易的平台或涉及实物众筹。需提供《增值电信业务经营许可证》资质文件,并重新提交审核补充电商平台类目。 [图片] 案例3:该小程序涉及在线实物众筹,需提供《增值电信业务经营许可证》资质文件,并重新提交审核补充电商平台类目。 [图片] 案例4:该小程序涉及为餐饮门店提供线上点餐的平台型服务。需提供《增值电信业务经营许可证》资质文件,并重新提交审核补充餐饮-点餐平台类目。 [图片] 时政信息类 小程序内容涉及国家政治生活相关事实的文章/图片/视频/音频报道,主要表现为政党、社会集团、社会势力在处理国家生活和国际关系方面的方针、政策和活动,包括有关政治、经济、历史、军事、外交等社会公共事务的报道、评论。需补充时政信息-时政信息类目。 所需资质:新闻服务商:《互联网新闻信息服务许可证》;政府或监管机构:《非经营性互联网信息服务备案核准》(截图)和《组织机构代码证》 案例1:小程序中涉及现任及前任国家领导人相关的信息内容,需补充时政信息类目。[图片] 案例2:小程序中涉及发布当前港澳台、新疆西藏局势相关内容,包括但不限于视频、报道、评价、观点等形式,需补充时政信息类目。 [图片] 案例3:小程序中涉及解读国家外交部门或公职人员以国家层面发表的言论,需补充时政信息类目。 [图片] 案例4:小程序中涉及当前港澳台领导人、领导候选人与大陆相关时政言论,包括但不限于视频、报道、评价、观点等形式,需补充时政信息类目。 [图片] 案例5:小程序中涉及发布揭秘官方军事活动、军事改革、军队制度改革相关内容(除官方宣布外),需补充时政信息类目。 [图片] 案例6:小程序中涉及发布对反动组织、分裂邪教组织及相关人物进行报道、回顾的相关内容,需补充时政信息类目。 [图片] 在小程序首次提交代码审核时,审核人员会根据小程序初步提交的内容给出类目审核建议,开发者们可以根据建议重新提交审核。同时在小程序运营过程中,随着小程序内容或功能不断丰富,也请开发者及时提交对应类目资质。 目前全部已开放类目及对应资质要求可参考:https://developers.weixin.qq.com/miniprogram/product/material.html。 平台首次发现违规内容后将进行警告通知,警告到期后未整改将会进行相关能力封禁直至下架违规小程序。同时大家在使用小程序的过程中,如发现缺乏类目资质的小程序,欢迎通过手机端小程序的投诉渠道进行反馈和举报。
2020-03-18 - 微信人脸核身接口能力
一、能力背景 近年来,国家在医疗挂号、APP注册、快递收寄、客运、运营商等多领域规定,需要用户实名才可办理业务,预计后续也会有越来越多的此类法规。因此,微信参照公安部“互联网+”可信身份认证服务平台标准,依托腾讯公司及微信的生物识别技术,建立微信“实名实人信息校验能力” ,即通过人脸识别+权威源比对,校验用户实名信息和本人操作(简称微信人脸核身)。 目前接口限定主体及行业类目开放公测,提供给资质符合要求的业务方,在合适的业务场景内使用。目前仅支持持二代身份证的大陆居民。 由于人脸核身功能涉及到用户的敏感、隐私信息,因此调用此接口的小程序,需要满足一定的条件。即:小程序的主体以及类目,需要在限定的类目范围内,且与小程序的业务场景一致。开展的业务也需要是国家相关法规、政策规定的需要“实名办理”的相关业务(其他未在范围内的业务,则暂不支持)。 以下为接口接入及开发的详细内容。如开发中遇到任何疑问,可以点击此处通过社区反馈,将有工作人员跟进回复。 文档第四部分【再次获取核验结果api】,有助于提高业务方安全性,请务必接入! 现阶段微信人脸核验能力,针对小程序,开放的主体类目范围包含: 小程序一级类目 小程序二级类目 小程序三级类目 使用人脸核验接口所需资质 物流服务 收件/派件 / 《快递业务经营许可证》 物流服务 货物运输 / 《道路运输经营许可证》(经营范围需含网络货运) 教育 学历教育(学校) / (2选1):1、公立学校:由教育行政部门出具的审批设立证明 或 《事业单位法人证书》;2、私立学校:《民办学校办学许可证》与《民办非企业单位登记证书》 医疗 公立医疗机构 / 《医疗机构执业许可证》与《事业单位法人证书》 医疗 互联网医院 / 仅支持公立医疗机构互联网医院(2选1):1、卫生健康部门的《设置医疗机构批准书》;2、 《医疗机构执业许可证》(范围均需含“互联网诊疗”或名称含“互联网医院”等相关内容 医疗服务 三级私立医疗机构 / 仅支持三级以上私立医疗机构,提供《医疗机构执业许可证》、《营业执照》及《医院等级证书》 政务民生 所有二级类目 / 仅支持政府/事业单位,提供《组织机构代码证》或《统一社会信用代码证》。 金融业 银行 / (2选1):1、《金融许可证》; 2、《金融机构许可证》。 金融业 信托 / (2选1):1、《金融许可证》; 2、《金融机构许可证》。 金融业 公募基金 / (4选1):1、《经营证券期货业务许可证》且业务范围必须包含“基金”;2、《基金托管业务许可证》; 3、《基金销售业务资格证书》;4、《基金管理资格证书》。 金融业 证券/期货 / 《经营证券期货业务许可证》 金融业 保险 / (8选1):1、《保险公司法人许可证》;2、《经营保险业务许可证》;3、《保险营销服务许可证》;4、《保险中介许可证》;5、《经营保险经纪业务许可证》;6、《经营保险公估业务许可证》或《经营保险公估业务备案》;7、《经营保险资产管理业务许可证》 ;8、《保险兼业代理业务许可证》。 金融业 消费金融 / 银监会核准开业的审批文件与《金融许可证》与《营业执照》 金融业 汽车金融/金融租赁 / 仅支持汽车金融/金融租赁主体,同时提供:1、《营业执照》(公司名称包含“汽车金融” /“金融租赁”;营业范围包含“汽车金融”/“金融租赁”业务);2、《金融许可证》或银保监会及其派出机构颁发的开业核准批复文件。 交通服务 网约车 快车/专车/其他网约车 (自营性网约车)提供《网络预约出租汽车经营许可证》。(网约车平台)提供与网约车公司的合作协议以及合作网约车公司的《网络预约出租汽车经营许可证》。 交通服务 航空 / (航司)提供《公共航空运输企业经营许可证》。(机场)提供《民用机场使用许可证》或《运输机场使用许可证》。 交通服务 公交/地铁 / 提供公交/地铁/交通卡公司《营业执照》 交通服务 水运 / (船企)提供《水路运输许可证》。(港口)提供《港口经营许可证》 交通服务 骑车 / 仅支持共享单车,提供共享单车公司《营业执照》 交通服务 火车/高铁/动车 / 仅支持铁路局/公司官方,提供铁路局/公司《营业执照》 交通服务 长途汽车 / (2选1):1、《道路运输经营许可证》(经营范围需含客运);2、官方指定联网售票平台(授权或协议或公开可查询文件)。 交通服务 租车 / 运营公司提供《备案证明》与对应公司《营业执照》,且营业执照中包含汽车租赁业务 交通服务 高速服务 / 仅支持ETC发行业务,(2选1):1、事业单位主体,需提供《事业单位法人证书》;2、官方指定的发行单位(一发单位),需提供“官方授权或协议,或公开可查询的文件”; 生活服务 生活缴费 / (供电类)提供《电力业务许可证》与《营业执照》,且《营业执照》且经营范围含供电。(燃气类)提供《燃气经营许可证》与《营业执照》,且《营业执照》且经营范围含供气。(供水类)提供《卫生许可证》与《营业执照》。(供热类)提供《供热经营许可证》与《营业执照》,且《营业执照》且经营范围含供热。 IT科技 基础电信运营商 / (2选1):1、基础电信运营商:提供《基础电信业务经营许可证》;2、运营商分/子公司:提供营业执照(含相关业务范围)。 IT科技 转售移动通信 / 仅支持虚拟运营商,提供《增值电信业务许可证》(业务种类需含通过转售方式提供移动通信业务) 旅游服务 住宿服务 / 仅支持酒店,提供《酒店业特种行业经营许可证》 商业服务 公证 / 仅支持公证处,提供《公证处执业许可证》或《事业单位法人证书》 社交 直播 / (2选1):1、《信息网络传播视听节目许可证》;2、《网络文化经营许可证》(经营范围含网络表演)。 如对以上类目或资质有疑问,可点击参考小程序“非个人主体开放的服务类目”,详细了解小程序开放的服务类目及对应资质。 二、准备接入 (请在小程序发布后,再提交人脸核身接口申请) 满足第一节中描述的类目和主体的小程序,可申请微信人脸核验接口。目前微信人脸核身接口已改为线上自助申请方式,需按照如下图例指引,进行接口申请: 第一步:请通过mp.weixin.qq.com登录小程序账号在后台“功能-人脸核身”的路径,点击开通按钮—— [图片] 第二步:仔细查阅《人脸识别身份信息验证服务条款》后,点击“同意并下一步”—— [图片] 第三步:请正确填写服务信息,并上传该小程序类目下所要求的资质—— [图片] 第四步:请按照业务实际需求填写使用人脸接口的场景和用途—— [图片] 第五步:请完善测试信息和联系人—— [图片] 第六步:提交后请耐心等待1-3个工作日的审核期,审核结果将以站内信通知—— 如申请期间遇到问题,可联系腾讯工作邮箱 wx_city@tencent.com,将会有相关工作人员进一步指引。 三、接口文档: (一)接口描述 名称: wx.startFacialRecognitionVerify(OBJECT) 功能:请求进行基于生物识别的人脸核身 验证方式:在线验证 兼容版本: 一闪:android 微信7.0.22以上版本, iOS 微信7.0.18以上版本 建议在微信官网升级至最新版本 (二)参数说明 1、OBJECT参数说明: 参数 类型 必填 说明 name String 是 姓名 idCardNumber String 是 身份证号码 success Function 否 调用成功回调 fail Function 否 调用失败回调 complete Function 是 调用完成回调(成功或失败都会回调) 2、CALLBACK返回参数 参数 类型 说明 errMsg String 错误信息 errCode Number 错误码 verifyResult String 本次认证结果凭据,第三方可以选择根据这个凭据获取相关信息 注 1:传递用户姓名和身份证有两种方式 业务方没有用户实名信息,用户需要在前端填写身份证和姓名,那么前端直接通过jsapi 调用传递 name 和 idCardNumber。 业务方已经有用户实名信息,后台通过微信提供的 api(详情见文档后面“上传姓名身份证后台 api”)上传用户身份证姓名和身份证,api 返回 user_id_key 作为凭证传给前端,前端再调用 jsapi,用户姓名、身份证信息不需要经过前端,参数只需要传递 userIdKey。Tips:使用该功能需要小程序基础库版本号>=1.9.3。 3、回调结果说明 回调结果请参考以下释义: [图片] [图片] [图片] 4、示例代码 [图片] [图片] (三)上传用户姓名身份证的后台api 1、API说明 1.1说明 业务方上传用户姓名和身份证,获取用户凭证,把凭证给到前端通过 jsapi 调用。 Tips :使用该功能需要小程序基础库版本号>=1.9.3。 1.2请求URL https://api.weixin.qq.com/cityservice/face/identify/getuseridkey?access_token={ac cess_token} 1.3请求方式 POST 2、请求数据格式 [代码]Json { "name" : “张三”, "id_card_number" : "452122xxxxxxx43215" } [代码] 请求示例 [代码]#!/bin/bash TOKEN='xxxxxxxxxxxx' URL='https://api.weixin.qq.com/cityservice/face/identify/getuseridkey' JSON='{ "name": "张三", "id_card_number": "452344xxxxxxxxxxxxx234"}' curl "${URL}?access_token=${TOKEN}" -d "${JSON}" [代码] 参数说明 json 字段 中文显示 是否必传 name 姓名 是 id_card_number 身份证号码 是 out_seq_no 业务方唯一流水号 否 3、返回数据 参数 类 型 说明 errcode int 错误码 errmsg string 错误信息 user_id_key string 用于后台交互表示用户姓名、身份证的凭证 expires_in uint32 user_id_key 有效期,过期需重新获取 [代码]{ "errcode" : 0, "errmsg" : "ok", "user_id_key" : "id_key_xxxx", "expires_in": 3600 } [代码] 4、后台消息推送 如果业务方传入out_seq_no,核身完成后会通过消息推送回调给业务方的服务器,如果回调业务方失败,会在5s尽力推送,超过5s不再推送。 参数说明 参数 类 型 说明 ToUserName string 小程序原始ID FromUserName string 事件消息openid CreateTime uint32 消息推送时间 MsgType string 消息类型 Event string 事件类型 openid string 核身用户的openid out_seq_no string 业务方唯一流水号 verify_result string 核身返回的加密key(凭据) 返回示例 [代码]{ "ToUserName": "gh_81fxxxxxxxx", "FromUserName": "oRRn15NUibBxxxxxxxxx", "CreateTime": 1703657835, "MsgType": "event", "Event": "face_identify", "openid": "oRRn15NUibBxxxxxxxxx", "out_seq_no": "test1234", "verify_result": "XXIzTtMqCxwOaawoE91-VNGAC3v1j9MP-5fZJxv0fYT4aGezzvYlUb-n6RWQa7XeJpQo0teKj8mGE4ZcRe1JI3GqzADBYORBu613rKjKAFfEXTXw_bu1bs7MnmPOpguS" } [代码] 四、再次获取核验结果api 此接口是前端完成人脸核身后,基于前端返回的凭据,通过后台api再次进行核验结果和身份信息的校验,有助于提高安全性,请务必接入! 前端获取结果不可信,存在被篡改的风险,为了保障请求结果安全性,请务必对identify_ret、id_card_number_md5、name_utf8_md5字段进行校验! (一)API说明 1、说明 人脸核身之后,开发者可以根据jsapi返回的verify_result向后台拉取当次认证的结果信息。 2、请求URL https://api.weixin.qq.com/cityservice/face/identify/getinfo?access_token={access_token} 3、请求方式 POST 4、请求格式 json (二)请求数据说明 1、请求 参数 类型 是否必填 描述 verify_result String 是 jsapi返回的加密key(凭据) 2、数据返回 HTTP 头如下 Date: Mon, 06 Feb 2017 08:12:58 GMT Content-Type: application/json; encoding=utf-8 Content-Length: 85 Connection: close json示例 [代码]{ "errcode" : 0, [代码] [代码]"errmsg" : "ok", "identify_ret" : 0, "identify_time" : 1486350357 "validate_data": "8593" [代码] [图片] (三)返回参数说明 1、返回参数 注:errcode和identify_ret同时为0,代表本次认证成功。 参数 类型 描述 errcode int 错误码, 0表示本次api调用成功 errmsg string 本次api调用的错误信息 identify_ret int 人脸核身最终认证结果 identify_time uint32 认证时间 validate_data string 用户读的数字(如是读数字) openid string 用户openid user_id_key string 用于后台交互表示用户姓名、身份证的凭证 finish_time uint32 认证结束时间 id_card_number_md5 string 身份证号的md5(最后一位X为大写) name_utf8_md5 string 姓名MD5 2、错误码对应信息 errcode 备注 84001 非法identity_id 84002 用户信息过期 84003 用户信息不存在 五、小程序辅助接口:检查设备是否支持人脸检测 1、接口名称 接 口 :wx.checkIsSupportFacialRecognition(OBJECT) 功能:检查设备是否支持人脸检测 2、接口说明和使用 小程序调用该接口,可以检测当前手机设备是否具备支持人脸检测的能力,可与以上接口分开使用,为了用户体验,建议调用后对手机设备不支持的用户做对应功能处理。 3、接口说明和使用 01 OBJECT 参数说明: 参数 类型 是否必填 描述 success Function 否 调用成功回调 fail Function 否 调用失败回调 complete Function 是 调用完成回调(成功或失败都会回调) checkAliveType Number 否 人脸核验的交互方式,默认读数字(见表 2) 表 2:checkAliveType 的值和对应的解释: 参数 解释 2 先检查是否可以屏幕闪烁,不可以则自动为读数字 02 CALLBACK 返回参数 参数 类型 说明 errMsg Boolean 错误信息 errCode Number 错误码 03 回调结果说明 回调类型 ErrCode 说明 sucess 0 支持人脸采集 fail 10001 不支持人脸采集:设备没有前置摄像头 fail 10002 不支持人脸采集:没有下载到必要模型 fail 10003 不支持人脸采集:后台控制不支持 回调结果说明仅对Android生效,iOS不返回errcode。 04 示例代码 [图片] 六、安全性说明 为保障业务可用性以及安全性,请详细研读微信人脸核身接口相关基础说明及安全说明文档:https://docs.qq.com/doc/DTFB0YWFIdGV6amly 备注:如开发中遇到任何疑问,可以点击此处通过社区反馈,将有工作人员跟进回复。 七、案例展示及补充说明 安徽医科大学第二附属医院,微信人脸核验登录: 安徽医科大学第二附属医院,是三级甲等综合医院。其小程序为用户提供挂号、门诊费用、住院费用、检查报告、体检等医疗服务,同时也提供停车、餐饮等便民服务,是医疗小程序中完整的案例。 小程序使用了微信人脸核验能力作为登录的核验。满足医院管理要求,也满足国家对于实名就医的管理规则。 案例实现的截图效果如下: [图片] [图片] 针对近期少数小程序方面反馈的两类问题,也在本课程进行补充说明。 1、本接口的开放范围,即:可支持的主体类目,是否可以扩大? 说明:基于本接口整体使用范围的评估、相关法规的参考、监管策略的理解执行等,暂时未立刻进行扩大开放范围的工作。 但我们会持续基于不同行业的法规、政策及监管要求等,逐一进行研究考量,以便确认如何扩大开放范围。 2、小程序如果涉及用户本人的生物特征采集,(如本人人脸照片、人脸视频),或涉及采集用户本人生物特征信息并开展人脸核验功能,则存在被驳回的情况? 说明:近两年“人脸识别”技术在社会上掀起了热潮。人脸识别虽然作为摆脱“中间媒介”或“承载载体”的一种直接技术手段,解决了部分政务、交通、医疗、零售等证明“操作者是本人”的问题,但也因此,引入了新的更大的安全风险。 一是,虚假安全风险。 身份认证领域的安全三因素包括“我知道什么”、“我拥有什么”、“我的特征是什么”,通用的安全做法,是要双因素认证(2FA),人脸识别技术如仅凭“我的特征是什么”这一个因素,则容易被攻破或利用。表象给用户以安全的感觉,但实际并不能达到安全效果。 二是,信息泄漏的风险。 越来越多的组织或个人,在并非必需用户敏感信息、生物特征的情况下,采集并存储此类信息。在信息加密、传输、存储过程中,容易暴漏更多的网络节点,使得此类信息有更大的风险被网络黑客拦截、窃听、窃取,或直接被脱库。 三是,消除风险的难度大。 以往基于“中间媒介”或“承载载体”的方式,如出现丢失、被冒用、恶意盗用等风险,可以通过挂失、更换、使用新载体或新媒介等方式,快速排除一定的风险。C端主动,B端主动,都能解决一部分问题。但人脸识别做为更直接的方式,一旦出现冒用、盗用,受害者将面临更大的财产及人生安全风险,且C端用户更多时候无法主动消除风险。 基于以上问题风险,加之国家出台《网络安全法》、《用户隐私保护条例》等法律法规标准,网信办、公安部、工信部及市场监管总局等四部委发起的app获取隐私整治,结合平台安全、用户敏感隐私信息保护要求及监管,针对部分暂无相关法规或要求,需要采集或生物认证方式进行身份核验的,或以“追热点”或“尝鲜”为目的,采集用户生物特征或进行身份核验的,进行严格审核,必要时不予以支持。
11-18 - wx.getMenuButtonBoundingClientRect()方法在苹果手机上的问题?
wx.getMenuButtonBoundingClientRect()方法在苹果手机上重新进入小程序后获取信息所有值都为0
2022-01-12 - wx.getMenuButtonBoundingClientRect() 返回值为0
调用`wx.getMenuButtonBoundingClientRect` 在用户第一次使用小程序的情况下,返回的所有值均为0,新用户第一次使用小程序的时候就会发现页面整体错乱,然后放弃使用,第二次我开调试的时候就正常了,因此很难找到截图,这里在开发者工具模拟实验的时候发现
2020-09-10 - 小程序海报生成工具,可视化编辑直接生成代码使用,你的海报你自己做主
开门见山 工具地址 点我直达>>painter-custom-poster 由于挂载在github page上,打开速度会慢一些,请耐心等待或自行解决git网速问题 背景 在做小程序时候,我们经常会有一个需求,需要将小程序分享到朋友圈,但是朋友圈是不允许直接分享小程序,那我们还有其他的办法解决吗?答案肯定是有的,即 canvas 生成个性化海报分享图片到朋友圈 分析 小程序中有大量的生成图片需求,但是使用过 canvas 的人,都会发现一些难以预料的问题>>有关小程序的坑 直接在 canvas 上绘制图形,对于普通开发者来说代码会特别凌乱并且难以维护,经常会花费很久的时间去优化代码 不同的环境渲染问题,例如在开发者工具看起来好好的,一到 Android 真机,就出现图片不显示,位置不对应等等问题 解决 那可不可以开发一款生成海报的插件库呢? 首先,只需要提供一份简单的参数配置文件即可 解决掉小程序Canvas遇到的一些大大小小的坑 有严苛的测试环节,解决各种环境和各种机型遇到的问题,并提供稳定的线上版本 长期维护,并有专人更新迭代更新颖的功能 以上的要求当然是可以的,曾经的我也想尝试开发一款出来,但是后来尝试了几款现成的工具之后就放弃了,毕竟轮子这个东西,是需要不断维护更新的,另外已经有这么多优秀现成的插件了,我为何还要费力去写呢,贡献代码岂不更美哉,以下是我收集的几款 小程序生成图片库,轻松通过 json 方式绘制一张可以发到朋友圈的图片>>Painter 小程序组件-小程序海报组件>>wxa-plugin-canvas 微信小程序:一个 json 帮你完成分享朋友圈图片>>mp_canvas_drawer 我想干什么 唠了这么多,好像提供给大家插件就没我什么事情了…想走是不可能的 为了能够制作出更酷炫的海报,我思考了许久 虽然有了插件后,只需要提供配置代码就能够制作出一款海报来,但是我发现还是有些许问题 制作海报效率还是不够高,微调一个元素的大小和位置,就需要不断的修改保存代码,等待片刻,查看效果,真的烦 一个小小的位置调整可能就需要来回调整无数次,这种最简单的机械化劳动,这辈子是不可能的 拿着完美的稿子,递给设计师看,这个位置不对,这个线太粗,这个颜色太重…你信不信我打死你 对于一些精美复杂的海报,实现起来真的不太现实 那我需要怎么做呢,请点击这个链接体验>>painter-custom-poster 点击左侧例子展示中的任意一个例子,然后导入代码就能看到效果图,这下你应该能猜到了我的想法了 如何实现 刚开始我想用简单的html和css加拖动功能实现,通过简单尝试之后就放弃了,因为这个功能真的太复杂了,简单的工具肯定是不行的 中间这个计划停滞了很长时间,一度已经放弃 直到发现了这个库fabric.js,真的太太优秀了,赞美之词无以言表,唯一的缺点就是中文教程太少,必须生啃英文加谷歌翻译 fabric介绍,你可以很容易地创建任何一个简单的形状,复杂的形状,图像;将它们添加到画布中,并以任何你想要的方式进行修改:位置、尺寸、角度、颜色、笔画、不透明度等 How To Use 目前工具一共分成4部分 例子展示 用来将一些用户设计的精美海报显示出来,通过点击对应的例子并将代码导入画布中 画布区 显示真实的海报效果,画布里添加的元素,都可以直接用鼠标进行拖动,旋转,缩放操作 操作区 第一排四个按钮 复制代码 将画布的展示效果转化成小程序海报插件库所需要的json配置代码,目前我使用的是Painter库,默认会转化成这个插件的配置代码,将代码直接复制到card.js即可 查看代码 这个功能用不用无所谓,可以直观的看到生成的代码 导出json 将画布转化成fabric所需要的json代码,方便将自己设计的海报代码保存下来 导入json 将第3步导出的json代码导入,会在画布上显示已设计的海报样式 第二排五个按钮 画布 画布的属性参数 详解见下方 文字 添加文字的属性参数 详解见下方 矩形 添加矩形的属性参数 详解见下方 图片 添加图片的属性参数 详解见下方 二维码 添加二维码的属性参数 详解见下方 第三排 各种元素的详细设置参数 激活区 激活对象是指鼠标点击画布上的元素,该对象会被蓝色的边框覆盖,此时该对象被激活,可以执行拖动 旋转 缩放等操作 激活区只有对象被激活才会出来,用来设置激活对象的各种配置参数,修改value值后,实时更新当前激活对象的对应状态,点击其他区域,此模块将隐藏 快捷键 ‘←’ 左移一像素 ‘→’ 右移一像素 ‘↑’ 上移一像素 ‘↓’ 下移一像素 ‘ctrl + z’ 撤销 ‘ctrl + y’ 恢复 ‘delete’ 删除 ‘[’ 提高元素的层级 ‘]’ 降低元素的层级 布局属性 通用布局属性 属性 说明 默认 rotate 旋转,按照顺时针旋转的度数 0 width、height view 的宽度和高度 top、left 如 css 中为 absolute 布局时的作用 0 background 背景颜色 rgba(0,0,0,0) borderRadius 边框圆角 0 borderWidth 边框宽 0 borderColor 边框颜色 #000000 shadow 阴影 ‘’ shadow 可以同时修饰 image、rect、text 等 。在修饰 text 时则相当于 text-shadow;修饰 image 和 rect 时相当于 box-shadow 使用方法: [代码]shadow: 'h-shadow v-shadow blur color'; h-shadow: 必需。水平阴影的位置。允许负值。 v-shadow: 必需。垂直阴影的位置。允许负值。 blur: 必需。模糊的距离。 color: 必需。阴影的颜色。 举例: shadow:10 10 5 #888888 [代码] 渐变色支持 你可以在画布的 background 属性中使用以下方式实现 css 3 的渐变色,其中 radial-gradient 渐变的圆心为 中点,半径为最长边,目前不支持自己设置。 [代码]linear-gradient(-135deg, blue 0%, rgba(18, 52, 86, 1) 20%, #987 80%) radial-gradient(rgba(0, 0, 0, 0) 5%, #0ff 15%, #f0f 60%) [代码] !!!注意:颜色后面的百分比一定得写。 画布属性 属性 说明 默认 times 控制生成插件代码的宽度大小,比如画布宽100,times为2,生成的值为200 1 文字属性 属性名称 说明 默认值 text 字体内容 别跟我谈感情,谈感情伤钱 maxLines 最大行数 不限,根据 width 来 lineHeight 行高(上下两行文字baseline的距离) 1.3 fontSize 字体大小 30 color 字体颜色 #000000 fontWeight 字体粗细。仅支持 normal, bold normal textDecoration 文本修饰,支持none underline、 overline、 linethrough none textStyle fill: 填充样式,stroke:镂空样式 fill fontFamily 字体 sans-serif textAlign 文字的对齐方式,分为 left, center, right left 备注: fontFamily,工具中的第一个例子支持文字字体,但是导入小程序为什么看不到呢,小程序官网加载网络字体方法>> 加载字体教程>> 文字高度 是maxLines lineHeight2个字段一起计算出来的 图片属性 属性 说明 默认 url 图片路径 mode 图片裁剪、缩放的模式 aspectFill mode参数详解 scaleToFill 缩放图片到固定的宽高 aspectFill 图片裁剪显示对应的宽高 auto 自动填充 宽度全显示 高度自适应居中显示 Tips(一定要看哦~) 本工具不考虑兼容性,如发现不兼容请使用google浏览器 painter现在只支持这几种图形,所以暂不支持圆,线等 如果编辑过程,一个元素被挡住了,无法操作,请选择对象并通过[ ]快捷键提高降低元素的层级 文字暂不支持直接缩放操作,因为文字大小和元素高度不容易计算,可以通过修改激活栏目maxLines lineHeight fontSize值来动态改变元素 如发现导出的代码一个元素被另一个元素挡住了,请手动调整元素的位置,json数组中元素越往后层级显示就越高,由于painter没有提供层级参数,所以目前只能这样做 本工具导出代码全是以px为单位,为什么不支持rpx, 因为painter在rpx单位下,阴影和边框宽会出现大小计算问题,由于原例子没有提供px生成图片方案,可以下载我这里修改过的demo>>Painter即可解决 文本宽度随着字数不同而动态变化,想在文本后面加个图标根据文本区域长度布局, 请参考Painter文档这块教程直接修改源码 由于本工具开发有些许难度,如出现bug,建议或者使用上的问题,请提issue,源码地址>>painter-custom-poster 海报贡献 如果你设计的海报很好看,并且愿意开源贡献,可以贡献你的海报代码和缩略图,例子代码文件在example中,按顺序排列,例如现在库里例子是example2.js,那你添加example3.js和example3.jpg图片,事例可以参考一下文件夹中源码,然后在index.js中导出一下 导出代码 代码不要格式化,会报错,请原模原样复制到json字段里 生成缩略图 刚开始我想在此工具中直接生成图片,但是由于浏览器图片跨域问题导致报错失败 所以请去小程序中生成保存图片,图片质量设置0.2,并去tinypng压缩一下图片 找到painter.js,替换下边这个方法,可以生成0.2质量的图片,代码如下 [代码] saveImgToLocal() { const that = this; setTimeout(() => { wx.canvasToTempFilePath( { canvasId: 'k-canvas', fileType: 'jpg', quality: 0.2, success: function(res) { that.getImageInfo(res.tempFilePath); }, fail: function(error) { console.error(`canvasToTempFilePath failed, ${JSON.stringify(error)}`); that.triggerEvent('imgErr', { error: error }); } }, this ); }, 300); } [代码] TODO 颜色值选择支持调色板工具 文字padding支持 缩放位置弹跳问题优化 假如需求大的话,支持其他几款插件库代码的生成 ~ 创作不易,如果对你有帮助,请给个星星 star✨✨ 谢谢 ~
2019-09-27 - [填坑手册]小程序Canvas生成海报(一)--完整流程
[图片] 海报生成示例 最近智酷君在做[小程序]canvas生成海报的项目中遇到一些棘手的问题,在网上查阅了各种资料,也踩扁了各种坑,智酷君希望把这些“填坑”经验整理一下分享出来,避免后来的兄弟重复“掉坑”。 [图片] 原型图 这是一个大致的原型图,下面来看下如何制作这个海报,以及整体的思路。 [图片] 海报生成流程 [代码片段]Canvas生成海报实战demo demo的微信路径:https://developers.weixin.qq.com/s/Q74OU3m57c9x demo的ID:Q74OU3m57c9x 如果你装了IDE工具,可以直接访问上面的demo路径 通过代码片段将demo的ID输入进去也可添加: [图片] [图片] 下面分享下主要的代码内容和“填坑现场”: 一、添加字体 https://developers.weixin.qq.com/miniprogram/dev/api/canvas/font.html [代码]canvasContext.font = value //示例 ctx.font = `normal bold 20px sans-serif`//设置字体大小,默认10 ctx.setTextAlign('left'); ctx.setTextBaseline("top"); ctx.fillText("《智酷方程式》专注研究和分享前端技术", 50, 15, 250)//绘制文本 [代码] 符合 CSS font 语法的 DOMString 字符串,至少需要提供字体大小和字体族名。默认值为 10px sans-serif 文字过长在canvas下换行问题处理(最多两行,超过“…”代替) [代码]ctx.setTextAlign('left'); ctx.setFillStyle('#000');//文字颜色:默认黑色 ctx.font = `normal bold 18px sans-serif`//设置字体大小,默认10 let canvasTitleArray = canvasTitle.split(""); let firstTitle = ""; //第一行字 let secondTitle = ""; //第二行字 for (let i = 0; i < canvasTitleArray.length; i++) { let element = canvasTitleArray[i]; let firstWidth = ctx.measureText(firstTitle).width; //console.log(ctx.measureText(firstTitle).width); if (firstWidth > 260) { let secondWidth = ctx.measureText(secondTitle).width; //第二行字数超过,变为... if (secondWidth > 260) { secondTitle += "..."; break; } else { secondTitle += element; } } else { firstTitle += element; } } //第一行文字 ctx.fillText(firstTitle, 20, 278, 280)//绘制文本 //第二行问题 if (secondTitle) { ctx.fillText(secondTitle, 20, 300, 280)//绘制文本 } [代码] 通过 ctx.measureText 这个方法可以判断文字的宽度,然后进行切割。 (一行字允许宽度为280时,判断需要写小点,比如260) 二、获取临时地址并设置图片 [代码]let mainImg = "https://demo.com/url.jpg"; wx.getImageInfo({ src: mainImg,//服务器返回的图片地址 success: function (res) { //处理图片纵横比例过大或者过小的问题!!! let h = res.height; let w = res.width; let setHeight = 280, //默认源图截取的区域 setWidth = 220; //默认源图截取的区域 if (w / h > 1.5) { setHeight = h; setWidth = parseInt(280 / 220 * h); } else if (w / h < 1) { setWidth = w; setHeight = parseInt(220 / 280 * w); } else { setHeight = h; setWidth = w; }; console.log(setWidth, setHeight) ctx.drawImage(res.path, 0, 0, setWidth, setHeight, 20, 50, 280, 220); ctx.draw(true); }, fail: function (res) { //失败回调 } }); [代码] 在开发过程中如果封面图无法按照约定的比例(280x220)给到: 那么我们就需要处理默认封面图过大或者过小的问题,大致思路是:代码中通过比较纵横比(280/220=1.27)正比例放大或者缩小原图,然后从左上切割,竟可能保证过高的图是宽度100%,过宽的图是高度100%。 在canvas中draw图片,必须是一个(相对)本地路径,我们可以通过将图片保存在本地后生成的临时路径。 微信官方提供两个API: wx.downloadFile(OBJECT)和wx.getImageInfo(OBJECT)。都需先配置download域名才能生效。 三、裁切“圆形”头像画图 [代码]ctx.save(); //保存画图板 ctx.beginPath()//开始创建一个路径 ctx.arc(35, 25, 15, 0, 2 * Math.PI, false)//画一个圆形裁剪区域 ctx.clip()//裁剪 ctx.closePath(); ctx.drawImage(headImageLocal, 20, 10, 30, 30); ctx.draw(true); ctx.restore()//恢复之前保存的绘图上下文 [代码] 使用图形上下文的不带参数的clip()方法来实现Canvas的图像裁剪功能。该方法使用路径来对Canvas话不设置一个裁剪区域。因此,必须先创建好路径。创建完整后,调用clip()方法来设置裁剪区域。 需要注意的是裁剪是对画布进行的,裁切后的画布不能恢复到原来的大小,也就是说画布是越切越小的,要想保证最后仍然能在canvas最初定义的大小下绘图需要注意save()和restore()。画布是先裁切完了再进行绘图。并不一定非要是图片,路径也可以放进去~ 小程序 canvas 裁切BUG [代码]ctx.setFillStyle("#fff"); ctx.fillRect(0, 0, 320, 500); //第一个填充矩形 wx.downloadFile({ url: headUri, success(res) { ctx.beginPath() ctx.arc(50, 50, 25, 0, 2 * Math.PI) ctx.clip() ctx.drawImage(res.tempFilePath, 25, 25); //第二个填充图片 ctx.draw() ctx.restore() ctx.setFillStyle("#fff"); ctx.fillRect(0, 0, 320, 500); ctx.draw(true) ctx.restore() } }) [代码] clip裁切这个功能,如果有超过一张图片/背景叠加,则裁切效果失效。 错误参考:http://html51.com/info-38753-1/ 四、将canvas导出成虚拟地址 [代码]wx.canvasToTempFilePath({ fileType: 'jpg', canvasId: 'customCanvas', success: (res) => { console.log(res.tempFilePath) //为canvas的虚拟地址 } }) res: { errMsg: "canvasToTempFilePath:ok", tempFilePath: "http://tmp/wx02935bb29080a7b4.o6zAJswFAuZuKQ5NZfPr….cGnD1a02PlVC0b3284be3a41d08986c2477579a5fd8e.jpg" } [代码] 这里需要把canvas里面的内容,导出成一个临时地址才能保存在相册,比如: http://tmp/wx02935bb29080a7b4.o6zAJswFAuZuKQ5NZfPr5UfJVR4k.cGnD1a02PlVC0b3284be3a41d08986c2477579a5fd8e.jpg 五、询问并获取访问手机本地相册权限 [代码]wx.getSetting({ success(res) { console.log(res) if (!res.authSetting['scope.writePhotosAlbum']) { //判断权限 wx.authorize({ //获取权限 scope: 'scope.writePhotosAlbum', success() { console.log('授权成功') //转化路径 self.saveImg(); } }) } else { self.saveImg(); } } }) [代码] 判断是否有访问相册的权限,如果没有,则请求权限。 六、保存到用户手机本地相册 [代码]wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success: function (data) { wx.showToast({ title: '保存到系统相册成功', icon: 'success', duration: 2000 }) }, fail: function (err) { console.log(err); if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") { console.log("当初用户拒绝,再次发起授权") wx.openSetting({ success(settingdata) { console.log(settingdata) if (settingdata.authSetting['scope.writePhotosAlbum']) { console.log('获取权限成功,给出再次点击图片保存到相册的提示。') } else { console.log('获取权限失败,给出不给权限就无法正常使用的提示') } } }) } else { wx.showToast({ title: '保存失败', icon: 'none' }); } }, complete(res) { console.log(res); } }) [代码] 保存到本地需要一定的时间,需要加一个loading的状态。 七、关于组件中引用canvas [代码]let ctx = wx.createCanvasContext('posterCanvas',this); //需要加this [代码] 在components中canvas无法选中的问题: 在components自定义组件下,当前组件实例的this,表示在这个自定义组件下查找拥有 canvas-id 的 <canvas> ,如果省略则不在任何自定义组件内查找。
2021-09-13 - 微信小程序生成图片和图片保存
生成图片这个功能需要使用 Canvas ,先将要保存的图片使用 Canvas 画出来,然后调用相关方法保存到手机上。文中使用或是未使用的有关小程序中 Canvas 的 api 可以在 小程序Canvas相关Api 这里查看。 为了使用方便,我将这个需求的实现做成了一个组件,便于项目的其他地方复用,也遇到了一些因为使用自定义组件带来的问题 <!–more–> 要实现的效果图 [图片] 实现思路 相关的代码比较长,而且大部分为调用 Canvas 的 api 代码,整体贴出无必要。本文中只描述思路,具体代码看 小程序生成图片的微信代码片段 。 代码中的几个方法 [代码]drawRoundedRect[代码] :用来绘制圆角矩形,此处不详述它的画图原理 [代码]point[代码] :为方法 1 服务的,一看就懂 [代码]downFile[代码] :对微信的下载方法进行了一层简单封装,传入 url ,返回一个 Promise [代码]save[代码] : 保存图片的相关逻辑 [代码]doAuth[代码] :当调用 [代码]wx.saveImageToPhotosAlbum[代码] 方法保存图片时,如果没有保存图片的权限会保存失败,此时需要让用户重新授权 [代码]computedPercent[代码] :一个快捷的计算比例的方法,传入从设计图上量出来的像素数即可, [代码]oldWidth[代码] 是设计图上的 Canvas 区域宽度 [代码]initData[代码] :数据初始化,获取设备相关信息,将网络图下载到本地 [代码]writeCanvas[代码] : 主要画图逻辑,调用此方法时保证所需数据已处理完毕,开始画图 数据初始化 需求中需要显示用户头像和小程序码,小程序码后面是要挂参数的,可以简单理解为要挂个用户参数在后面,类似这样 [代码]?uid=2233[代码] ,这就是组件中要传入的 scene 的值,然后根据这个参数,在开始画图之前,先调用接口从服务端那里获取图片的链接,再利用微信的 [代码]wx.downloadFile[代码] 方法将图片下载到本地,在 Canvas 中使用本地路径,用户头像和小程序码都下载好了之后就可以开始画图了,否则的话,提示网络错误。 为了演示方便,本文中的网络图都换成了本地图片 画图 由于是在组件中,所以获取 Canvas 上下文的时候要传入 [代码]this[代码] ,根据设计图,从里向外依次往 Canvas 上叠加就是了,从设计图上量出的像素调用方法来获取比例,画完之后调用 Canvas 的 [代码]draw[代码] 方法技术绘画,并且将 loading 状态取消 保存图片 保存图片的时候,要注意保存的图片的宽高都乘一下设备的像素比,防止出来的图片太小了,保存图片需要相关权限,若用户为授权,要弹窗让他授权之后再进行保存操作 遇到的问题 以下部分问题有时效性,请大家理性看待。 canvas 结束绘画要调用 [代码]ctx.draw()[代码] 方法,不调用的话是什么都不会显示的 [代码]wx.createCanvasContext(string canvasId, Object this)[代码] ,在自定义组件下,当前组件实例的 [代码]this[代码] ,表示在这个自定义组件下查找拥有 [代码]canvas-id[代码] 的 [代码]<canvas>[代码] ,如果省略则不在任何自定义组件内查找。简而言之就是在页面级调用这个方法的时候,第二个参数可以不传,会默认传入 this ;但是在自定义组件中调用这个方法的话,要传入 this 部分手机上保存的图片分辨率太小,导致图片上的字看不清。最后使用了一个百分比的计算,所有的的坐标或者大小都是根据屏幕宽高和设计图宽高比例计算出来了,这样可以保证即使在不同手机上或者在不同的容器中,都是有恰当比例的;并且保存图片的时候,要注意保存的图片的宽高都乘一下设备的像素比 Canvas 中不能放网络图,所以网络图需要先下载到本地之后在使用 如果用到了下载网络图片的话,别忘记设置微信的 [代码]downloadFile[代码] 合法域名 结语 对于大部分同学来说,自己项目的需求和我这里实现的可能是有些出入的,所以本文只是起到一个例子的作用,可以帮助你快速上手这个模块的开发
2023-08-14 - 企业内部员工视频学习小程序,通过学习获得积分,小程序类型是工具类的,需要资质么?审核会不会有问题?
我们想做一个工具类型小程序只给企业内部员工学习使用,方式是通过观看企业相关产品或宣传视频,在视频观看过程中弹出设定好的一些题目让员工回答,回答成功可继续观看视频,优秀员工可获得一定积分奖励。小程序类型是企业管理工具类的,这样可以做么?需要什么资质么?
2022-02-15 - 开通企业付款到零钱的整个过程
看到很多人在为开通企业付款到零钱而烦恼,以下说明一下我们开通的整个过程,仅供参考。 先说一下开通企业付款到零钱的必要条件: 1、入驻90天。(我的理解是上线至少90天) 2、连续正常支付30天。 3、保持健康交易。(无法解释,自己理解吧,别到处问了,不可能有官方来解释哪种是健康交易,哪种不是。) 说在前面: 1、我们开通的时候是在19年,当时的内部判断规则和现在的是不是一样,不得而知,大家自己考虑。 2、我们小程序是付费内容的业务,需要给博主支付到零钱,当时还做不到每天一定有正常流水,所以只能手动开通该功能。 以下是开通的过程: 1、每天早晚两个闹钟,提醒我们打开小程序支付;(第10天的时候忘了,前功尽弃,重新开始) 2、每次都是支付1分钱。(现在建议随机费用,每次不要相同) 3、在体验版上支付。(现在建议在线上版上支付,留个暗口,总能做到的) 4、硬写的支付代码,直接统一下单,拉起支付,没有与正常业务流程有关系。(现在建议最好与小程序正常的业务流程一致) 5、整个支付流程闭环,即从统一下单到支付回调,并应答,每次流程完整。(现在依然建议如此) 6、从头到尾,只有一个人负责此事,支付的也是同一个人。(现在建议如果允许,经常换人支付,看上去更正常嘛) 以上差不多就是当时过程的全部,如果现在再按此操作,还是不能开通,要不只能怪人品,要不就是现在后台规则变了,需要你自己去摸索了,官方是不可能正面回答这类问题的。
2021-03-19 - 新富文本组件
mp-html小程序富文本组件 news欢迎加入 QQ 交流群:699734691示例小程序添加获取组件包功能[图片] 功能介绍 支持在多个平台使用 支持丰富的标签(包括 table、video、svg 等) 支持丰富的事件效果(自动预览图片、链接处理等) 支持锚点跳转、长按复制等丰富功能 支持大部分 html 实体 丰富的插件(关键词搜索、内容编辑等) 效率高、容错性强且轻量化使用方法1. npm 方式 在项目根目录下执行 npm install mp-html 开发者工具中勾选 使用 npm 模块 并点击 工具 - 构建 npm 在需要使用页面的 json 文件中添加 { "usingComponents": { "mp-html": "mp-html" } } 在需要使用页面的 wxml 文件中添加 <mp-html content="{{html}}" /> 在需要使用页面的 js 文件中添加 Page({ onLoad() { this.setData({ html: 'Hello World!' }) } }) 2. 源码方式 将源码中的代码包(dist/mp-weixin)拷贝到 components 目录下,更名为 mp-html 在需要使用页面的 json 文件中添加 { "usingComponents": { "mp-html": "/components/mp-html/index" } } 后续步骤同上 获取github 链接:https://github.com/jin-yufeng/mp-html npm 链接:https://www.npmjs.com/package/mp-html 文档链接:https://jin-yufeng.gitee.io/mp-html
2022-03-04 - 安卓端小程序地图组件双指缩放级别为啥特别慢?
同一个小程序,在 iOS 设备中地图组件双指缩放非常流畅,而且缩放等级也比较大。但是在安卓手机中,双指缩放等级特别小,同样的范围内,iOS 只需缩放3-4次,而安卓需要缩放10-15次才能达到同样的地图视野,请问这是为什么?
2019-11-27 - 微信小程序发红包的两种方法
本篇主要介绍微信小程序给用户发现金红包的两种方式,大家可根据自己的实际情况酌情使用。1,小程序开通了小程序红包的接口,但是目前该接口的的使用场景有限,仅限于场景值1011,1025,1047,1124时,基本为用户扫码打开小程序领取红包,这种方式的优势是有红包封面,有点击拆红包的按钮体验比较好,比较适合线下推广二维码时使用。开发时先后端调用发放红包接口,然后再传参给小程序端,调用领取红包接口wx.sendBizRedPacket方法即可。 打开微信支付官方文档中的小程序红包,公众号appid和用户openid参数描述模糊不清,说得就是微信公众号的appid和用户openid,压根没有提到小程序。 [图片] 经过多次调试,终于测试通过,小程序红包开通条件和开发过程中需要注意以下几点: 小程序需要绑定微信支付,且绑定的微信支付商户号需开通现金红包,如果小程序是用公众号认证的,可以很方便的绑定认证微信公众号时开通的微信支付商户号。文档里公众号appid即小程序的appid,用户openid为用户对小程序的openid,该用户openid需在小程序里调用 wx.login() 获取临时登录凭证code,并回传到开发者服务器。调用auth.code2Session接口,换取用户唯一标识OpenID和会话密钥session_key。调用发放红包接口,https://api.mch.weixin.qq.com/mmpaymkttransfers/sendminiprogramhb 如果不填写'notify_way' => 'MINI_PROGRAM_JSAPI',不返回package,可以直接发现金红包,通知形式为服务通知,用户打开即可领取成功;如果填写notify_way则返回有package,只是package里的参数没有官方给的appid,但是有spid,但是不影响小程序正常领红包,用户依然可能通过领取红包接口成功领取现金红包。下面为带notify_way时请求参数和接口返回结果。$redpackData = [ 'mch_billno' => $mch_billno, 'send_name' => '今日头彩查询', 're_openid' => $miniopenid, 'total_num' => 1, //固定为1,可不传 'total_amount' => $total_amount, //单位为分,不小于100 'wishing' => '天天中头彩', 'scene_id' => 'PRODUCT_1', 'notify_way' => 'MINI_PROGRAM_JSAPI', 'act_name' => '打开有礼', 'remark' => '今日头彩,天天好彩头']; $result = [ "return_code" => "SUCCESS", "return_msg" => "发放成功", "result_code" => "SUCCESS", "err_code" => "SUCCESS", "err_code_des" => "发放成功", "mch_billno" => "1508784931202012171608188656", "mch_id" => "150878XXX", "wxappid" => "wxdccaff246b9f9b5c", "re_openid" => "ogn1H45HCRxVRiEMLbLLuABbXXX", "total_amount" => "100", "send_listid" => "1000041701202012173014299105358", "package" => "sendid=41469f3063dfc421bf3377897711d6f040e096a74ec6cb2a6c138178f67d681f&ver=8&sign=b3ff1X1fa2ba0aeeb6b9006dec2bc75b872ef7ee11d5e8bbb22e8836eaa2e76f090c307ba12452010f57dcaebbdec45a3196bff2d850eb9e9a49eedf483aa061&mchid=100846xxX&spid=150878xxx"]; 调用小程序领取红包接口成功领取红包,传给前端的参数中特别注意 'timeStamp' => time() . "",//时间戳,必须为字符串,增加.""转为字符串。小程序红包目前仅支持场景值1011,1025,1047,1124,包括扫描二维码,扫描小程序码和扫描一物一码等,具体可参与小程序红包文档。 2,调用微信支付的企业付款到零钱接口,微信支付的文档里是没有专门提到这种方式的,相信很多的开发者都已经在生产环境中大量使用了,这里不再赘述,实际是用小程序的appid和用户之于小程序的openid来调用企业付款到零钱接口,这种方式的优势是现金直接划到用户零钱帐户,很多小程序做红包相关的活动时都是采用此种变通方式实现的。 【今日头彩查询】是一款供彩民订阅和查询福利彩票和体育彩票开奖信息的小程序,里面已经集成了以上两种的发送红包的方式,用户扫码(注意是扫码不是长按识别)打开程序即可体验第一种方式;第二种方式隐藏在转发里,打开小程序后,点击右上角转发按钮转发到微信群或者微信好友,如果你的微信号是经过实名认证并且近期没有违规操作的,会在微信支付收到商家转帐入帐通知。 [图片] [图片] [图片]
2021-01-25 - wx.miniProgram.getEnv在安卓手机怎么不生效?
我目前是要做一个webview的点击保存图片功能,使用的wx.miniProgram.postMessage,运行后在苹果手机上可以点击保存,在安卓手机上为什么不可以?甚至都触发不了wx.miniProgram.postMessage,有大神知道什么情况嘛 var ua = navigator.userAgent.toLowerCase() if (ua.match(/MicroMessenger/i) === 'micromessenger') { wx.miniProgram.getEnv((res) => { if (res.miniprogram) { wx.miniProgram.postMessage({ data: { imgData: imgBase64Data } }) wx.miniProgram.navigateBack({ delta: 1 }) } }) } 上面是我的代码
2021-07-14 - 小程序内部的网页怎么清除缓存?
小程序内部加载过的h5页面怎么清除缓存,我代码改了之后一只都没有变化
2018-05-23 - 小程序webview缓存清除
请问小程序webview里面的缓存怎么清,样式怎么改都是以前的,直接在微信访问链接都改了,小程序里面的还没改。非常严重!!!!!!!希望有人帮我顶上去,让官网的人看到,给出一个有效的解决方案!
2018-09-23 - 【类知乎小房子】自定义返回键 自定义标题栏 自定义主页按钮 及参数计算
自定义顶部标题和左上角按钮方法解析及实践 前言 之前有兄台发过设置custom的方法 但是没有具体的实现方法 以至于很多不了解小程序的开发者不能循序渐进的理解制作自定义标题的方法 在这里详细总结了计算各参数的方法 我也写了一个自定义标题组件 只需要引用 直接在页面中调用即可 但因为掺杂了业务代码 需要整理过后会放出来 具体方法 首先在app.json中 将window.navigateionStyle 设置为custom [图片] 使用 wx.getSystemInfoSync 获取系统的属性 其中有顶部状态栏的高度 使用 wx.getMenuButtonBoundingClientRect 获取右上角胶囊菜单的相关属性 包括胶囊菜单的高度、相距上下左右屏幕的绝对位置 [图片] 如上图 我们需要获取四个参数 来确定整个标题栏的各项参数和左侧自定义胶囊的位置 获取顶部状态栏高度sys.statusBarHeight 具体代码 [代码]var sys= wx.getSystemInfoSync() var menu = wx.getMenuButtonBoundingClientRect() var statusHeight = menu.statusBarHeight var titleHeight = menu.height var titleRowWidth = sys.right - menu.right var titleColumnHeight = menu.top - menu.statusBarHeight [代码] 注意 小程序原生组件会遮挡自定义头部组件 如 canvas组件 input textarea的提示信息placeholder 该问题可以使用cover-view将头部定义为原生组件 设置层级解决 20191125后续更新 wx.getMenuButtonBoundingClientRect()返回undefined的情况 wx.getMenuButtonBoundingClientRect()在安卓和IOS端均会出现获取不到值的情况(返回undefined) 官方给出的答案是已经修复了该问题 但实际测试还是会出现类似问题 该问题与 平台 和 微信基础库 (随微信版本更新)无关 导致我们无法获取胶囊按钮的属性 进而无法计算header的高度 该问题极难复现 我在自己的真机上遇到过2次 在我的应用中出现概率不到1% 应对方法1: 官方建议延迟100MS 或 在返回undefined的情况下 重新获取一次 应对方法2: 判断平台 给与预估的默认值 IOS端和不同安卓端 IOS各机型的高度为44px 安卓端我测试最多的情况是48px 但安卓端实际情况需要具体测试 做进一步兼容 代码如下 [图片] 这里wx.getMenuButtonBoundingClientRect()方法在低版本微信中是不能用的 而且低版本的微信中不能使用wx.canIUse方法判断该方法是否存在 因此用捕获错误的方式兼容 在menu的属性返回undefined时 用我们预估的值去兼容 另外github.com有一个通过手机型号 返回手机各项参数的库 其中一项就是头部状态栏的高度 如果你想更准确的适配更多机型 可以使用这个库 无论哪种方法都不是最优的解决方案 大家酌情按照场景进行适配
2021-03-03 - #小程序云开发挑战赛#-日常工具box-七西队
日常工具box一个较为实用的日常小工具分为五大功能:手持弹幕、九宫切图、任务清单、写字板、指南针每个功能相对独立,为方便用户使用,集合在一个微信小程序内[图片] 目标用户: 适用于各个年龄段的微信用户,主要目标用户为年轻人群体。 具体功能介绍: 手持弹幕:编辑栏中输入需要滚动的语句,并点击发送,可在属性栏中选择字体大小、颜色、速度、背景颜色。九宫切图:上传图片后,可自动将图片剪切为九张图片,可选择保存。任务清单:输入各个任务内容,可勾选是否完成。写字板:相当于手机临时草稿纸,可直接手写绘画。指南针:判断当前方位。具体功能图片: [图片] [图片] [图片] [图片] [图片] 微信小程序体验二维码: [图片] 演示视频: https://v.qq.com/x/page/r31514lawis.html 功能代码: https://github.com/w-jess/Test.git
2020-09-13 - 小程序 支持html富文本吗
业务场景: 项目是一个商品类型,现在商品介绍管理端是用的富文本做的内容发布和编辑;小程序对接的时候,能否支持这样的场景,比如react里面有单独的标签来接收html, 希望解决问题: 能够加入一个支持html解析的组件,最起码能够保持格式不变和能够展示图片!
2018-06-25 - 小程序与小游戏获取用户信息接口调整,请开发者注意升级。
为优化用户体验,使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始,小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口,将无法弹出授权询问框,默认调用失败。正式版暂不受影响。开发者可使用以下方式获取或展示用户信息: 一、小程序: 1、使用 button 组件,并将 open-type 指定为 getUserInfo 类型,获取用户基本信息。 详情参考文档: https://developers.weixin.qq.com/miniprogram/dev/component/button.html 2、使用 open-data 展示用户基本信息。 详情参考文档: https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html 二、小游戏: 1、使用用户信息按钮 UserInfoButton。 详情参考文档: https://developers.weixin.qq.com/minigame/dev/document/open-api/user-info/wx.createUserInfoButton.html 2、开放数据域下的展示用户信息。 详细参考文档: https://developers.weixin.qq.com/minigame/dev/document/open-api/data/wx.getUserInfo.html 请各位开发者注意及时调整接口。
2018-04-16