版权说明 本文首发于指尖魔法屋>uni-app对微信小程序云函数的适配. 转载请附上原地址 引言：此方法可用作大部分微信小程序支持，但uni-app文档中却找不到相关说明的API 需求 需要在微信小程序中，实现一个中间图标突出显示的异形导航栏。 如下图 [图片] 实现方法设计 要做这种异形的导航栏，用直接在配置文件里面写list的方法肯定做不到。那么，就有以下两种可替代方法。 在每一个页面都加载一个tabBar组件，与页面同时渲染。 设置自定义tabBar,修改tabBar的样式。 优缺点分析：方法1实现起来略为简单，但是会出现代码可重用率低，降低性能，已经界面跳动等问题。方法2则是微信官方提供的，自定义方式，相信在性能方面也会有很大的优势。故选择方法2。 1. 查看文档及官方Demo 官方文档 简要描述一下就是需要在根目录中加入一个[代码]custom-tab-bar[代码]目录，里面的文件结构与自定义组件的结构一致。然后再在小程序配置文件中修改tabbar为custom模式。 官方代码 主要重点为三个部分 配置文件 [图片] custom-tab-bar目录 [图片] 页面生命周期中的设置索引方法 [图片] 这段代码其实很容易理解，pageLifetimes就是监听组件所在页面的生命周期。上述代码就是监听页面显示。当页面显示后，获取到tabBar的对象，然后再设置tabBar中的index索引。 2. 迁移到uni-app框架 上面的方法是使用微信小程序的开发方式，而我使用的是uni-app框架开发微信小程序的。所以我们需要把它们移植到uni-app框架内。 配置文件的修改 uni-app中，page.json被编译为微信小程序的app.json。所以，我们直接修改page.json [图片] custom-tab-bar目录的适配 我们知道，uni-app使用的是类Vue开发，将一个Vue文件编译为四个微信页面文件（wxml，wxss，json，js）。那么，是否可以直接写一个[代码]custom-tab-bar.vue[代码]的文件呢？刚开始我也是这么想的，后来发现uni-app只会编译page目录和component目录下的vue文件。而微信小程序要求[代码]custom-tab-bar[代码]必须在项目的根目录下。那么就只能在uni-app下创建一个[代码]custom-tab-bar[代码]目录，并老老实实写微信四件套了。 [图片] 写完后，uni-app会将该目录完美的复制至微信小程序项目的根目录。 tab页面内的适配方法 这个在我实际开发中，是最令我头痛的了。因为微信小程序的[代码]this[代码]引用与uni-app的[代码]this[代码]引用并不相同。所以如果直接复制代码是会编译出错的。而另一个问题则是，uni-app并未提供[代码]pageLifetimes[代码]的事件监听。 在我经过一番摸索之后，发现将设置索引方法写在onShow事件里面，效果是等效的。接下来便只剩下this的问题了。 如果直接复制的话，会出现无任何效果的情况 [图片] 因为uni-app的this引用不一样，所以它在判断[代码]getTabBar[代码]的时候，获取的是“undefined”所以不会执行下面的操作。如果你将判断去掉，则会直接报“undefined”错误。 难道实现不了？其实不然，万变不离其宗。uni-app也是编译到小程序的，所以绝对有迹可循。 我们首先看看uni-app里面this的内容。 [图片] 我们可以很明显的看到里面有个[代码]$mp[代码]的对象，说明这应该是微信小程序专用的对象。接下来我们继续分析[代码]$mp[代码]。 [图片] 这里面有一个隐藏很深的[代码]getTabBar[代码]方法，我们直接调用它，和在微信小程序里面调用[代码]this.getTabBar[代码]是等效的。 所以我们就可以把[代码]onShow[代码]里面的内容写成这样。 [图片] 一些优雅点的封装 设置索引方法独立出来 在methods对象中，添加 [代码]setTabBarIndex(index){ if (typeof this.$mp.page.getTabBar === 'function' && this.$mp.page.getTabBar()) { this.$mp.page.getTabBar().setData({ selected:index }) } } [代码] 使用[代码]mixin[代码]避免重复书写复制 在[代码]main.js[代码]中，添加 [代码]Vue.mixin({ methods:{ setTabBarIndex(index){ if (typeof this.$mp.page.getTabBar === 'function' && this.$mp.page.getTabBar()) { this.$mp.page.getTabBar().setData({ selected:index }) } } } }) [代码] 混入后的使用 在页面文件中 [代码]onShow() { this.setTabBarIndex(0) //index为当前tab的索引 } [代码] over!

为更好地保护用户隐私信息，优化用户体验，平台将会对小程序内的帐号登录功能进行规范。本公告所称“帐号登录功能”是指开发者在小程序内提供帐号登录功能，包括但不限于进行的手机号登录，getuserinfo形式登录、邮箱登录等形式。具体规范要求如下： 1．服务范围开放的小程序 对于用户注册流程是对外开放、无需验证特定范围用户，且注册后即可提供线上服务的小程序，不得在用户清楚知悉、了解小程序的功能之前，要求用户进行帐号登录。 包括但不限于打开小程序后立即跳转提示登录或打开小程序后立即强制弹窗要求登录，都属于违反上述要求的情况； 以下反面示例，在用户打开小程序后立刻弹出授权登录页； [图片] 建议修改为如下正面示例形式：在体验小程序功能后，用户主动点击登录按钮后触发登录流程，且为用户提供暂不登录选项。 [图片] 2．服务范围特定的小程序 对于客观上服务范围特定、未完全开放用户注册，需通过更多方式完成身份验证后才能提供服务的小程序，可以直接引导用户进行帐号登录。例如为学校系统、员工系统、社保卡信息系统等提供服务的小程序；  下图案例为正面示例：校友管理系统，符合规范要求。 [图片] 3．仅提供注册功能小程序 对于线上仅提供注册功能，其他服务均需以其他方式提供的小程序，可在说明要求使用帐号登录功能的原因后，引导用户进行帐号注册或帐号登录。如ETC注册申请、信用卡申请； 如下反面示例，用户在进入时未获取任何信息，首页直接强制弹框要求登录注册ETC，这是不符合规范的。 [图片] 建议修改为如下正面示例所示形式：允许在首页说明注册功能后，提供登录或注册按钮供用户主动选择点击登录。 [图片] 4．提供可取消或拒绝登录选项 任何小程序调用帐号登录功能，应当为用户清晰提供可取消或拒绝的选项按钮，不得以任何方式强制用户进行帐号登录。 如下图所示反面示例，到需要登录环节直接跳转登录页面，用户只能选择点击登录或退出小程序，这不符合登录规范要求。 [图片] 建议修改为下图正面示例形式，在需帐号登录的环节，为用户主动点击登录，并提供可取消按钮，不强制登录。 [图片] 针对以上登录规范要求，平台希望开发者们能相应地调整小程序的帐号登录功能。如未满足登录规范要求，从2019年9月1日开始，平台将会在后续的代码审核环节进行规则提示和修改要求反馈。