上周公司做了4个小程序，为实现互推，将这4个和颜值招聘放在同一公众号下，下面就开发和代码实现互推进行介绍，当然官方文档也有详细说明。
目前，我们关联在同一个公众号下的小程序有5个，要想实现互推，需要一个页面展示可互推的小程序列表，如下图1。
于是同事LDH写了个通用的more文件，其中wxml和js文件代码如下：
more.wxml
<!--pages/more/more.wxml-->
<view class='moreContainer'>
<view bindtap='more' data-appid='{{appIDS.yz}}'>
<image src='/img/yz_logo.jpg'></image>
<view>
<text class='title'>颜值招聘</text>
<text class='content'>靠形象吃饭靠才艺挣钱</text>
</view>
</view>
<view bindtap='more' data-appid='{{appIDS.zc}}'>
<image src='/img/zc_logo.jpg'></image>
<view>
<text class='title'>观察力测试</text>
<text class='content'>找不同</text>
</view>
</view>
<view bindtap='more' data-appid='{{appIDS.jyl}}'>
<image src='/img/jyl_logo.jpg'></image>
<view>
<text class='title'>测记忆力</text>
<text class='content'>看看你有多老</text>
</view>
</view>
<view bindtap='more' data-appid='{{appIDS.nl}}'>
<image src='/img/nl_logo.jpg'></image>
<view>
<text class='title'>心理年龄在线测试</text>
<text class='content'>鉴定心理年龄</text>
</view>
</view>
<view bindtap='more' data-appid='{{appIDS.qt}}'>
<image src='/img/qt_logo.jpg'></image>
<view>
<text class='title'>钱途测试</text>
<text class='content'>看看未来能挣多少钱</text>
</view>
</view>
</view>
more.js
//获取应用实例
const app = getApp()
Page({
// 页面的初始数据
data: {
appIDS：{}
},
// 页面加载
onLoad: function (options) {
this.setData({
appIDS: getApp().globalData.allAppIDs
})
}，
// 自定义点击事件
more:function(e){
console.log(e.currentTarget.dataset.appid)
wx.navigateToMiniProgram({
appId: e.currentTarget.dataset.appid,
path: '',
extraData: {},
envVersion: '',
success: function(res) {},
fail: function(res) {},
complete: function(res) {},
})
}
}
因只需要在本小程序打开其他4个小程序，所以各自删掉自己对应小程序的这一层view，但感觉这种做法很傻，想做些改进。
于是我研究了下，我的思路是：是否可以读取到本小程序的appID，判断下列表more页面中每一项对应的appID是否与当前小程序appID一致，一致则隐藏，否则显示。
接下来需要解决的第一个问题：如何获取当前小程序appID？
很显然创建和开发小程序项目时，当前小程序appID是已知的，我可以在app.js文件的globalData里新增一个变量curAppID来记录，所以在more.wxml里可以用wx:if实现显示与隐藏。
同时为进一步简化代码，在globalData设置一个allApps的数组存放这5个小程序的信息如appID、logo、title、desc等。
调整后：
more.wxml
<view class='moreContainer'>
<view bindtap='more' data-appid='{{allApps[index].appID}}' wx:for="{{allApps.length}}" wx:key="{{index}}" wx:if="{{allApps[index].appID != curAppID}}">
<image src='{{allApps[index].image}}'></image>
<view>
<text class='title'>{{allApps[index].title}}</text>
<text class='content'>{{allApps[index].desc}}</text>
</view>
</view>
</view>
more.js
//获取应用实例
const app = getApp()
Page({
// 页面的初始数据
data: {
curAppID: '',
allAppS：[]
},
// 页面加载
onLoad: function (options) {
this.setData({
allApps: app.globalData.allApps,
curAppID: app.globalData.curAppID
})
}，
// 自定义点击事件
more:function(e){
console.log(e.currentTarget.dataset.appid)
wx.navigateToMiniProgram({
appId: e.currentTarget.dataset.appid,
path: '',
extraData: {},
envVersion: '',
success: function(res) {},
fail: function(res) {},
complete: function(res) {},
})
}
}
改进之后是不是更简洁来呢？以后如果需要扩展，新增其他关联互推的小程序，只需要在app.js的globalData里扩展allApp数组即可，而且移植到其他小程序里，只要修改curAppID和globalData数组，是不是很简单了～
最后还是回到小程序互推上来说说吧：
1、实现互推的条件：同一公众号下，而非同个 open 账号下
2、成功互推的条件：当前小程序和要跳转的小程序均已上线
满足互推条件1的情况下，出现互推失败，可以分为下几种异常情况：（PS：环境为真机非模拟器效果）
1、当前小程序已上线：跳转未上线的，提示：“小程序尚未发布”；
2、当前小程序未上线：跳转未上线的，提示：“小程序尚未发布”；跳转已上线的，能跳转进去然后提示：“该功能无法使用，请返回使用小程序其他功能”
关于如何打开小程序以及回退时传递数据，详细可以参考官方文档，这里不做赘述。
