虽然小程序提供了不少原生能力，但有时我们想在小程序中使用web生态的能力时或者对接第三方活动页面时，会使用webview组件来承载网页，但这里有一些小程序中关于webview的重要提示，在了解之后可以进一步决定某些业务场景下还是否应该使用H5内嵌小程序实现业务。 提示： 1.小程序中的webview中的H5 ，需要添加web-view可信域名，需要在对应的网页的部署根目录中添加相应校验文件，如果对接的是第三方无法添加校验文件的，则无法打开。 2.小程序中的webview如需使用微信相关能力，须配置jssdk，须提供微信公众号账号主体，并按文档进行正确的页面授权和配置（需后端配合）。 3.小程序中的webview有较强的缓存（社区相关问题较多），需要用户手动清除通用存储并删除小程序才可以，如需H5每次部署后，不再有缓存，可寻找后端修改Nginx配置为无缓存 4.小程序中的webview中无论使用原生input拍照或jssdk提供的拍照能力，当IOS内存不足总会出现H5重新加载的情况，当前无解决方案（社区相关问题较多）。 参考JS-SDK说明文档web-view | 微信开放文档微信h5页面，调用拍照后，页面刷新 | 微信开放社区web-view嵌入的h5页面缓存严重，如何清除？ | 微信开放社区

自定义navigate+分包+自定义tabbar，有需要的可以拿去用用，可能会存在一些问题，根据自己的业务改改吧 大家也可以多多交流 代码片段：在这里 {"version":"1.1.5","update":[{"title":"修复 [复制代码片段提示] 无法使用的问题","date":"2020-06-15 09:20","imgs":[]}]} 更新日志:     2019-11-25  自定义navigate 也可以调用wx.showNavigationBarLoading 和 wx.hideNavigationBarLoading     2019-11-25  页面滚动条显示在自定义navigate 和 自定义tabbar上面的问题(点击“体验custom Tabbar” [图片] [图片] 其他demo: 云开发之微信支付：代码片段

小程序实现TabBar创意动画(文末附完整源代码) 小程序日益增多的情况下，UI风格显得越来越重要，在页面中如果能让[代码]TabBar[代码]个性化一点，加一些小交互，用户体验会大大提升。由于小程序对[代码]svg[代码]不太友好，所以我们尽量使用[代码]css[代码]动画进行实现。之前文章小程序开发技巧中提到过[代码]TabBar[代码]自定义方案，感兴趣的可以了解一下。下面就分享一下今天写的几个交互效果，文末也会分享源代码。记得点赞+关注+收藏！ NO.1 这种效果主要使用了[代码]transform[代码]和[代码]opacity[代码]来实现。文字默认隐藏并缩小，点击后[代码]icon[代码]图标[代码]transform[代码]的[代码]y轴[代码]方向上移，同时控制文字的[代码]opacity[代码]。圆形块根据点击的[代码]index[代码]去动态计算[代码]x轴[代码]的偏移位置即可。 [图片] 核心css代码(完整代码见文末)： [代码] .tabbar .item .text{ position: absolute; width: 100%; bottom: 10rpx; text-align: center; font-size: 22rpx; opacity: 0; transition: all .8s; transform: scale(0.8); width: 100%; } .tabbar .item.active .text{ opacity: 1; transform: scale(1); } .tabbar .item.active .icon{ color: #3561f5; transform: translateY(-55rpx); } .tabbar .item .icon{ font-size: 50rpx!important; text-align: center; transition: all .8s; } [代码] NO.2 这个效果用到一个css动画工具库：bouncejs，它可以在线生成css动画，然后复制到项目中使用即可。下方效果采用跳跃式切换，整体看上去非常有活力。使用了[代码]animation[代码]动画。由于css动画代码过多，想看完整代码见文末[代码]github[代码]地址。 [图片] NO.3 下方这个效果还是用bouncejs在线编辑，编辑完成后只需要点击后给相应的元素添加类名即可。 [图片] 结尾 如需源代码可以移步github。 👉欢迎关注+收藏+点赞，感谢支持～

[图片] 论坛里有不少人疑惑新版的getUserProfile是不是已经上，同时发现开发环境中原有的老方法已经不支持了，这里我为大家集中解决下疑惑~ 1、线上是否已经不支持wx.getUserInfo老方法了？ 支持！目前，根据官方文档说明：在4月13日前发布的，线上环境2.16.0基础库以下已经不支持老版方法。（4月8日更新，怀疑官方已提前发布） [图片] 本人今天4月6日10点半线上支持老方法，但是4月8日发布2.16.0以下低版本已经去掉弹窗授权了。请大家尽快更新发布新版方法 2、哪些环境已经是新方法了？ 开发环境（包括但不限于IDE工具，真机调试），微信后台提供的体验版环境，且已不支持老办法。 3、新老两种方法是否并行？ 线上环境：目前并行（4月13日前），但getUserProfile新方法 只在2.10.4以上版本支持。 开发环境和体验版：不并行，不支持左右横跳哈。 4、如何解决兼容性适配？ 上才艺啦，呸，上代码。 先来看下原本代码的授权逻辑 [代码]//老的逻辑 wx.getSetting({ async success(res) { console.log(res.authSetting); //判断小程序用户是否授权 if (res.authSetting['scope.userInfo']) { //已授权 } else { //未授权情况 } } }) [代码] 之前主要通过wx.getSetting的方法来判断，而现在重大的改变是老方法getUserInfo不再弹窗，就算改成getUserProfile弹窗授权，新方法中getSetting中scope.userInfo 这个值并没有返回（这里跟文档有些出入，不知道官方后面会不会修正） [图片] [图片] 同时，这里需要做兼容判断，把获取到内容存在数据库中，避免反复弹窗骚扰用户。 [代码]//根据官方文档 做了一些修改 Page({ data: { userInfo: {}, hasUserInfo: false, canIUseGetUserProfile: false, }, onLoad() { //先请求自定义接口，获取上次存的useInfo wx.request({ url: 'test.api', //仅为示例，并非真实的接口地址 data: {}, success (res) { console.log(res.useInfo) //判断之前是否已获取并存储过用户信息 if(res.useInfo){ }else { //这里不要使用 wx.canIuse来判断，避免一些适配问题 if (wx.getUserProfile) { //直接使用官方推荐的方法 this.setData({ canIUseGetUserProfile: true }) } } } }) }, getUserProfile(e) { // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认 // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗 wx.getUserProfile({ desc: '需要你的信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写 success: (res) => { //这里需要将获取的 res.userInfo 存起来，你可以存在数据库，也可以存在local storage里 //wx.request...请求接口 this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } }) }, getUserInfo(e) { // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息 this.setData({ userInfo: e.detail.userInfo, hasUserInfo: true }) }, }) [代码] [代码]<!-- html部分 ---> <block wx:if="{{!hasUserInfo}}"> <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button> <button wx:else open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button> </block> <block wx:else> <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </block> [代码] [图片] 5、如何更新用户信息？ 首先，目前的规则如果不弹窗，肯定是无法每次拿到用户的最新信息，为了避免每次弹窗请求授权骚扰用户，所以最好根据产品规划，定期获取用户的信息（看心情）。 6、官方接口文档 https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801 觉得有用，请点个赞哦，让我继续分享更有动力~

前言 由于一些开发者的滥用，为了优化用户体验，微信官方在获取用户信息上，提供了新的API「wx.getUserProfile」，接下来作者将带你解读官方公告（传送门： 小程序登录、用户信息相关接口调整说明），进一步提升“面向公告编程”能力。 常见问题 1、线上版本是不是一定要接入新的 API 才能正常使用？ 并不是哦，如果你的小程序是在 2021 年 4 月 13 日后发布的才需要接入，此前发布的线上版本仍不受影响。 2、wx.getUserProfile 从 2.10.4 基础库开始支持，那么 2.10.4 以下基础库不就使用不了这个 API 了吗？ 并不是哦，2.10.4 以下基础库仍然可以通过调用原有 API「wx.getUserInfo」获取用户信息及进行解密。 3、为什么开发版和体验版调用 wx.getUserInfo 都不返回用户信息了？ wx.getUserInfo 开发版和体验版已对齐匿名表现(返回如下图结果)，因此开发者可在 2021 年 4 月 13 日前在开发版或者体验版中，适配新的登录授权流程。 [图片] 4、wx.getSetting 无法获取用户信息的授权(即 scope.userInfo )？ 从 2021 年 4 月 13 日开始，无论是通过 wx.authorize 请求授权还是 wx.getSetting 获取授权状态，都将直接返回 true。【PS：由于 wx.getUserProfile 每次调用时都需要用户弹窗授权，因此将无法获取用户授权状态】 [图片] 5、wx.getUserProfile 为什么只能获取到 userInfo 信息，却获取不到 rawData、signature、encryptedData、iv 等信息呢？ 据悉，这几天会灰度 2.10.4 ~ 2.16.0 之间支持获取 rawData、signature、encryptedData、iv 等加密信息，具体以官方通知 / 文档为准 新的 API 对基础库有一定的要求，除了参数 userInfo 的值需要 2.10.4 及以上基础库支持获取之外，其它参数也需要 2.16.0 及以上基础库才支持获取。【PS：目前基础库在 2.10.4 ~ 2.16.0 之间将无法获取 rawData、signature、encryptedData、iv 等信息，具体以官方通知为准】 [图片] 6、PC 端微信暂不支持新的 API「wx.getUserProfile」应该怎么处理？ 可以通过以下方式兼容。【PS：暂不推荐使用 wx.canIUse(“getUserProfile”) 做兼容判断，后续可使用该方式进行判断】 [代码]if (wx.getUserProfile) { console.log("支持 wx.getUserProfile") } else { console.log("不支持 wx.getUserProfile") } [代码] 7、开发者工具或真机提示 wx.getUserProfile is not a function 错误信息，应该怎么处理？ ① 确认开发者工具为 1.05.2103022 及以上版本，并且调试基础库为 2.10.4 及以上。 ② 确认手机微信为 7.0.9 以上版本，且基础库为 2.10.4 及以上。 ③ 如果工具内基础库已设置为 2.10.4 及以上，仍报同样的错误信息，可尝试调高工具基础库直至支持此 API 【PS：一切以真机为准！】 8、wx.getUserProfile 获取 encryptedData 及 iv 参数后进行解密，无法获取到 openid 等信息？ 原来调用 wx.getUserInfo 后进行解密可以获取到 openId 等信息如图 1 所示，但是新的 wx.getUserProfile 将无法直接获取到此类用户标识，返回的信息如图 2 所示。 [图片] 9、解密用户信息将不会返回 openId 及 unionId 这类信息，应该怎么解决处理？ 新的登录流程有变化！开发者通过 wx.login 获取到用户登录凭证 (code)，调用微信登录接口（auth.code2Session）将直接返回 openId、unionId（请先确认已在开放平台绑定该小程序，绑定流程：登录 微信开放平台 — 管理中心 — 小程序 — 绑定小程序） 10、wx.getUserProfile 跟 wx.login 无法同时调用，报 getUserProfile:fail can only be invoked by user TAP gesture 错误信息？ 请勿在 wx.login 的 success 回调中调用 wx.getUserProfile。 解决方式： 先使用 [代码]checkSession[代码] 进行登录态检查；提前调用 [代码]wx.login[代码] 再调用 [代码]wx.getUserProfile[代码]，完成授权登录流程。 先拖更 据悉：wx.getUserProfile 计划从基础库版本 2.6.6 开始支持 有疑问欢迎在下方留言或者发社区私信

公告更新时间：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日

最近微信关于用户头像、昵称授权又做了调整。 点击查看原文 解决方案思路如下： 1、在util.js里写一个通用函数，函数的功能是，用户授权成功，将头像昵称，存入服务器，同时，在本地缓存设置标记用户授权成功。 [代码]// util.js function getUserProfile() { wx.getUserProfile({ desc: '用于完善个人资料', success: function(res) { var userInfo = res.userInfo // console.log('userInfo==>', userInfo) wx.setStorageSync('storage_info', 1);//本地标记 //下面将userInfo存入服务器中的用户个人资料 //... }, fail() { console.log("用户拒绝授权") } }) } [代码] 2、在需要用户授权时，做判断，如果本地已经授权，直接执行正常业务逻辑。如果未授权，则提示授权。 [代码] chooseTap: function(e) { //如果未授权，就提示授权，如果授权了，就执行正常的业务逻辑 if (!wx.getStorageSync('storage_info')) { util.getUserProfile() return } //下面是正常业务逻辑 //... } [代码] 3、在用户进入小程序时，从服务器获取用户信息（如果已授权，就有之前存入的头像，昵称），在页面展示用户信息。 完成以上3步，就全部完成了。 说明：把授权状态存入缓存的好处是：因为wx.getUserProfile每次都会弹授权框，如果每次都让用户授权，体验不好。如果只授权一次，存入服务器，以后都展示的是这个用户信息。在用户微信改名，改头像后，服务器储存的用户信息还是以前的。 所以，把授权状态存入缓存，起码在用户更换手机，或者删除过小程序，又进来时，会弹出授权提示，可以让用户重新授权，将服务器里用户的信息进行一次更新。

小程序官方文档，https://developers.weixin.qq.com/miniprogram/dev/component/video.html，并没有介绍custom-cache属性，这个属性是公开的吗？ 这个属性究竟是什么含义? `custom-cache={{false}}` 意味着不使用小程序的缓存，需要用户自己在小程序框架外搭件缓存？还是优先使用小程序缓存，然后在使用用户自己定义的缓存？如果是前者，我感觉这个属性的含义与字面的含义背道而驰了..

之前在研究百度的实时语音识别，并应用到了微信小程序中，写篇文章分享一下。 先看看完成的效果吧 [图片] 前置条件 申请百度实时语音识别key 百度AI接入指南 创建小程序 设置小程序录音参数 在index.js中输入 [代码] const recorderManager = wx.getRecorderManager() const recorderConfig = { duration: 600000, frameSize: 5, //指定当录音大小达到5KB时触发onFrameRecorded format: 'PCM', //文档中没写这个参数也可以触发onFrameRecorded的回调，不过楼主亲测可以使用 sampleRate: 16000, encodeBitRate: 96000, numberOfChannels: 1 } [代码] 使用websocket连接 [代码] linkSocket() { let _this = this //这里的sn是百度实时语音用于排查日志，这里我图方便就用时间戳了 let sn = new Date().getTime() wx.showLoading({ title: '识别中...' }) recorderManager.start(recorderConfig) //开启链接 wx.connectSocket({ url: 'wss://vop.baidu.com/realtime_asr?sn=' + sn, protocols: ['websocket'], success() { console.log('连接成功') _this.initEventHandle() } }) }, //监听websocket返回的数据 initEventHandle() { let _this = this wx.onSocketMessage((res) => { let result = JSON.parse(res.data.replace('\n','')) if(result.type == 'MID_TEXT'){ _this.setData({ textDis: 'none', value: result.result, }) } if(result.type == 'FIN_TEXT'){ let value = _this.data.text let tranStr = value + result.result _this.setData({ value: '', valueEn: '', textDis: 'block', text: tranStr, }) } }) wx.onSocketOpen(() => //发送数据帧 _this.wsStart() console.log('WebSocket连接打开') }) wx.onSocketError(function (res) { console.log('WebSocket连接打开失败') }) wx.onSocketClose(function (res) { console.log('WebSocket 已关闭！') }) }, [代码] 发送开始、音频数据、结束帧 [代码] wsStart() { let config = { type: "START", data: { appid: XXXXXXXXX,//百度实时语音识别appid appkey: "XXXXXXXXXXXXXXXXXX",//百度实时语音识别key dev_pid: 15372, cuid: "cuid-1", format: "pcm", sample: 16000 } } wx.sendSocketMessage({ data:JSON.stringify(config), success(res){ console.log('发送开始帧成功') } }) }, wsSend(data){ wx.sendSocketMessage({ data:data, success(res){ console.log('发送数据帧成功') } }) }, wsStop(){ let _this = this this.setData({ click: true, }) let config = { type: "FINISH" } wx.hideLoading() recorderManager.stop() wx.sendSocketMessage({ data:JSON.stringify(config), success(res){ console.log('发送结束帧成功') } }) }, [代码] 小程序录音回调 [代码] onShow: function () { let _this = this recorderManager.onFrameRecorded(function (res){ let data = res.frameBuffer _this.wsSend(data) }) recorderManager.onInterruptionBegin(function (res){ console.log('录音中断') _this.wsStopForAcc() }) recorderManager.onStop(function (res){ console.log('录音停止') }) }, wsStopForAcc(){ let _this = this this.setData({ click: true, }) let config = { type: "FINISH" } wx.sendSocketMessage({ data:JSON.stringify(config), success(res){ wx.hideLoading() console.log('发送结束帧成功') } }) }, [代码]