小程序互推

上周公司做了4个小程序，为实现互推，将这4个和颜值招聘放在同一公众号下，下面就开发和代码实现互推进行介绍，当然官方文档也有详细说明。

目前，我们关联在同一个公众号下的小程序有5个，要想实现互推，需要一个页面展示可互推的小程序列表，如下图1。

图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等。

图2

调整后：
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、当前小程序未上线：跳转未上线的，提示：“小程序尚未发布”；跳转已上线的，能跳转进去然后提示：“该功能无法使用，请返回使用小程序其他功能”

关于如何打开小程序以及回退时传递数据，详细可以参考官方文档，这里不做赘述。