个人中心 | 微信开放社区

【bug】android下onShow不会重置referrerInfo属性

你想反馈一个 Bug 还是提一个需求？如果是 Bug： * Bug 表现是什么？预期表现是什么？小程序之间跳转时，是通过onShow，onLaunch中的 extraData 字段传参数的。问题是在Android手机，每次触发 onShow (比如切换应用前后台)，参数中都会保留 extraData字段。而IOS手机上，则会重置 extraData字段。考虑到 wx.navigateBackMiniProgram 接口，只能从onShow 函数中获取参数，导致目前我需要对andorid做特殊处理。 * 如何复现？如果在android下从小程序A，跳转到小程序B，使用 wx.navigateBackMiniProgram 跳转回小程序A，观察onShow参数： [图片] 手机切换到首页，再切换回小程序，观察onShow参数，发现referrInfo对象依然存在 [图片] 如果在IOS下从小程序A，跳转到小程序B，使用 wx.navigateBackMiniProgram 跳转回小程序A，观察onShow参数： [图片] 手机切换到首页，再切换回小程序，观察onShow参数，referrInfo对象被重置了 [图片] * 提供一个最简复现 Demo 1. 涉及到小程序之间跳转，不好出demo 如果是需求： * 你希望有什么能力？ * 你需要这个能力的场景是 ?

2018-01-26

1收藏7评论4986浏览

线上设置版本库2.11.2，用户版本最新还是提示更新微信，怎么排查？

遇到一个问题，线上版本基础库设置的是2.11.2，看文档对应的IOS微信版本7.0.12及以上版本可用。有部分用户IOS微信版本7.0.18，进入小程序还是一直提示微信版本过低，请更新微信，点击更新微信按钮，跳到Appstore又是最新版无法更新只能点击打开 [图片][图片]

2020-11-26

1收藏2评论4159浏览

小程序自定义TabBar后如何实现keep-alive

小程序自定义TabBar后如何实现keep-alive 前段时间写了小程序实现TabBar创意动画和小程序开发技巧后，有小伙伴提问到，自定义[代码]TabBar[代码]是可以做很多交互，但点击切换[代码]TabBar[代码]页面，都会伴随着组件的销毁和重建，这点确实会影响性能。这里就提供一个方案来实现“[代码]keep-alive[代码]”。如有更好的方案，欢迎评论区交流。欢迎点赞和收藏~ 自定义TabBar方案虽然在之前文章提到过了，本次采用[代码]组件化实现[代码] 我们可以新建一个[代码]home[代码]文件夹，在[代码]home/index.wxml[代码]中写一个tabBar，然后把[代码]TabBar[代码]页面写成组件，然后点击TabBar切换相应的组件展示就可以。代码如下： wxml部分 [代码] <view id='index'>  <head name='{{name}}' bgshow="{{bgshow}}" backShow='false'></head>  <index change='{{activeIndex==0}}'></index>  <cart change='{{activeIndex==1}}'></cart>  <order change='{{activeIndex==2}}'></order>  <my change='{{activeIndex==2}}'></my>  <view class="tab ios"> <view class="items {{activeIndex==index?'active':''}}" wx:for="{{tab}}" bindtap="choose" data-index='{{index}}' wx:key='index' wx:for-item="items"> <image wx:if="{{activeIndex==index}}" src="{{items.activeImage}}"></image> <image wx:else src="{{items.image}}"></image> <text>{{items.name}}</text> </view> </view> </view> [代码] home页面的ts [代码]Page({ data: { activeIndex:0, tab:[ { name:'商品', image:'../../images/index.png', activeImage:'../../images/index-hover.png', }, { name:'购物车', image:'../../images/cart.png', activeImage:'../../images/cart-hover.png', }, { name:'订单', image:'../../images/order.png', activeImage:'../../images/order-hover.png', }, { name:'我的', image:'../../images/my.png', activeImage:'../../images/my-hover.png', } ] }, // 切换事件 choose(e:any){ const _this=this; const {activeIndex}=_this.data; if(e.currentTarget.dataset.index==activeIndex){ return }else{ _this.setData({ activeIndex:e.currentTarget.dataset.index }) } }, }) [代码] 上面代码不难理解，点击以后改变[代码]activeIndex[代码]从而控制每个组件的渲染和销毁，这样付出的代价还是比较大的，需要我们进一步的优化。如何实现keep-alive 我们知道，这里主要是避免组件反复创建和渲染，有效提升系统性能。实现思路 1.在[代码]tab[代码]每个选项增加两个值：[代码]status[代码]和[代码]show[代码]，[代码]show[代码]控制组件是否需要渲染，[代码]status[代码]控制组件[代码]display[代码] 2.初始化时候设置首页的[代码]status[代码]和[代码]show[代码]，其他都为[代码]false[代码] 3.当我们切换时:把上一个[代码]tab[代码]页面的[代码]status[代码]改为[代码]false[代码],然后把当前要切换页面的[代码]tab[代码]数据中的[代码]status[代码]和[代码]show[代码]都改为[代码]true[代码],最后再更新一下[代码]activeIndex[代码]的值。 wxml代码： [代码]  <view wx:if="{{tab[0].show}}" hidden="{{!tab[0].status}}"> <index></index> </view>  <view wx:if="{{tab[1].show}}" hidden="{{!tab[1].status}}"> <cart></cart> </view>  <view wx:if="{{tab[2].show}}" hidden="{{!tab[2].status}}"> <order></order> </view>  <view wx:if="{{tab[3].show}}" hidden="{{!tab[3].status}}"> <my></my> </view> [代码] ts代码 [代码]Page({ data: { activeIndex:0, //当前选中的index tab:[ { name:'商品', image:'../../images/index.png', activeImage:'../../images/index-hover.png', status:true,//控制组件的display show:true, //控制组件是否被渲染 }, { name:'购物车', image:'../../images/cart.png', activeImage:'../../images/cart-hover.png', status:false, show:false, }, { name:'订单', image:'../../images/order.png', activeImage:'../../images/order-hover.png', status:false, show:false, }, { name:'我的', image:'../../images/my.png', activeImage:'../../images/my-hover.png', status:false, show:false, } ] }, choose(e:any){ const _this=this; const {activeIndex}=_this.data; //如果点击的选项是当前选中，就不执行 if(e.currentTarget.dataset.index==activeIndex){ return }else{ //修改上一个tab页面的status let prev='tab['+activeIndex+'].status', //修改当前选中元素的status status='tab['+e.currentTarget.dataset.index+'].status', //修改当前选中元素的show show='tab['+e.currentTarget.dataset.index+'].show'; _this.setData({ [prev]:false, [status]:true, [show]:true, activeIndex:e.currentTarget.dataset.index,//更新activeIndex }) } }, }) [代码] 这样基本就大功告成了，来看一下效果： [图片] 当我们点击切换时候，如果当前组件没有渲染就会进行渲染，如果渲染过后进行切换只是改变[代码]display[代码]，完美实现了需求，大功告成！实际业务场景分析在实际使用中还有两种种情况：情况1：比如某些数据并不希望他首次加载后就数据保持不变，当切换页面时候希望数据进行更新，比如笔者做的电商小程序，在首页点击商品加入购物车，然后切换到购物车，每次切换时候肯定需要再次进行请求。情况2：像个人中心这种页面，数据基本请求一次就可以，没必要每次切换请求数据，这种我们不需要进行改进。我们给组件传递一个值：[代码]status[代码],然后在组件中监听这个值的变化，当值为[代码]true[代码]时候，去请求接口更新数据。具体代码如下： wxml代码(只列举关键部分)： [代码] <view wx:if="{{tab[0].show}}" hidden="{{!tab[0].status}}"> <index change='{{tab[0].status}}'></index> </view>  <view wx:if="{{tab[1].show}}" hidden="{{!tab[1].status}}"> <cart change='{{tab[0].status}}'></cart> </view> [代码] 首页组件/购物车组件[代码]ts[代码]代码: [代码]Component({ /** * 组件的属性列表 */ properties: { change: { type: String,//类型 value: ''//默认值 }, }, observers: { //监听数据改变进行某种操作 'change': function(change) { if(change=='true'){ console.log('更新首页数据'+change) } } }, }) [代码] 来看一下最终效果： [图片] 结尾目前能想到的实现方法就是这样，如果你有更好的方法，欢迎评论区交流，文章如有错误问题欢迎指正。

2021-06-21

4收藏2评论2980浏览

小程序这个可以做之自定义tabbar

接受挑战设计师终于对小程序的tabbar忍无可忍了，高度、字体...，他找到了小李：“小李，我很担心啊，它影响了我们小程序的和谐，美感。它放在底部与我们格格不入，样式、字体、高度...。它割裂了我们与用户的交互，我们的弹层再高也会被它掩盖。”。画风一转，设计师歪嘴一笑：“能不能把它做掉？”， [图片] 小李斜躺在公司配备的人体工学椅上，手拿MI 10 Pro，轻声道：“我可以试试，不过你知道的，得加钱！”，设计师满意的退下，他知道就没小李答应过没办成的事儿。小李表面平淡，内心却是万匹草泥马经过，作为练习时长两年半的前端练习生，他熟读小程序文档，不就是为了今天吗，寒窗苦读一夜文，不为一朝有用时？微信tabbar宁有种乎？自定义tabbar根据微信自定义 tabBar的文档，简单的三步走加上一点点细节就能完成配置信息在 [代码]app.json[代码] 中的 [代码]tabBar[代码] 项指定 [代码]custom[代码] 字段，同时其余 [代码]tabBar[代码] 相关配置也补充完整。所有 tab 页的 json 里需声明 [代码]usingComponents[代码] 项，也可以在 [代码]app.json[代码] 全局开启。示例：{ "tabBar": { "custom": true, "color": "#000000", "selectedColor": "#000000", "backgroundColor": "#000000", "list": [{ "pagePath": "page/component/index", "text": "组件" }, { "pagePath": "page/API/index", "text": "接口" }] }, "usingComponents": {} } 添加 tabBar 代码文件在代码根目录下添加入口文件:custom-tab-bar/index.js custom-tab-bar/index.json custom-tab-bar/index.wxml custom-tab-bar/index.wxss 编写 tabBar 代码用自定义组件的方式编写即可，该自定义组件完全接管 tabBar 的渲染。另外，自定义组件新增 [代码]getTabBar[代码] 接口，可获取当前页面下的自定义 tabBar 组件实例。转换为Taro3代码[图片] 大概长这样！它掉了很快项目就上了线，事情告一段落，小李又一次维护了小程序的美与和谐，再一次坚持了“这个可以做”的原则。直到产品的iOS 14发现自定义tababr会消失之后，所以爱会消失吗，一切都变了样。小李开始慌了，找着一个又一个说辞，逛开发社区，看相关问题。总算是看到了官方回复：自定义 tabBar 在切换 tab 时会使 tabBar 消失 setState，永远滴神！小李很快按照官方回复：在显示 tab 页后，利用一次 setData 调用触发页面重渲染，让 tabBar 重新显示。另辟蹊径小李觉得这件事情非常hack，无端调用setData。他仿佛掉入了锚定效应的坑，按照微信自定义tabbar文档来自定义tabbar，按照微信说的setState来解决tabbar消失。按照微信的文档： [代码]custom-tab-bar[代码]目录下的组件将被放到tab页面。等等，放到tab页面？为啥我不可以自己放？ [图片] 思想挣开了锚，此刻小李可以自由的在大海遨游。将自定义tabbar 当作普通组件主动挂载到几个tab页面，将空组件放到[代码]custom-tab-bar[代码]目录下，no setState，no hack！

2021-04-13

2收藏4评论3690浏览

GitHub账号

选择需要上架的开放服务

案例类型