小程序跳转小程序，长按识别小程序码跳转小程序解决方案

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_40670946/article/details/82842232

场景描述：

因为小程序跳转的时候需要公众号关联，但是关联的数量是有限的！因此该文章的处理方案是：
a.关联的小程序，直接可以点击打开
b.没有关联的，那么可以长按识别小程序码来进入小程序

下面展示效果：

1.点击关联有appid的时候，直接进入小程序
2.点击没有appid的时候弹出小程序码，长按识别可以进入小程序

js代码：

Page({
  data: {
     gameInfo: [
	      {
	        appid: "",
	        gameId: 12329,
	        gameLogo: "http://zhihuiyuan.oss-cn-beijing.aliyuncs.com/1-wechet/game/1537246277627.png",//展示的图片
	        gameName: "萌宠地图",
	        gameUrl: "http://zhihuiyuan.oss-cn-beijing.aliyuncs.com/mYPYmhStYj.jpg",//小程序码
	      },
	      {
	        appid: "wx2cb0ab4b1be0e577",
	        gameId: 12331,
	        gameLogo: "http://zhihuiyuan.oss-cn-beijing.aliyuncs.com/1-wechet/game/1537246649090.png",//展示的图片
	        gameName: "游戏点评家",
	        gameUrl: "",
	      },
	    ],
    },
    //点击方法1:跳转小程序
  intoUrl: function(e) {
    console.log(e);
    var gameAppId = e.currentTarget.dataset.appid; //游戏appid
    if (gameAppId){//存在appId
      wx.navigateToMiniProgram({
        appId: gameAppId, // 要跳转的小程序的appid
        path: "", // 跳转的目标页面
        extarData: {
          open: 'auth'
        },
        success(res) {
          console.log("跳转成功展示");
        }
      })
    }else{//不存在appId
      this.previewImageUrl(e);
    }
  },
  previewImageUrl: function (e) {
    var url = e.currentTarget.dataset.url;
    var imgArr = [];
    imgArr.push(url);
    wx.previewImage({
      current: imgArr[0], // 当前显示图片的http链接 
      urls: imgArr // 需要预览的图片http链接”列表“ 
    });
  },
})

注意：previewImage中”urls“需要填写数组形式的值

wxml代码：

<view class="recommend_scroll_box">
  <view class="recommend_hot_box" wx:for="{{gameInfo}}" wx:key="{{info.gameId}}" wx:for-item="info">
    <view>
      <image src='{{info.gameLogo}}' data-url="{{info.gameUrl}}" data-appid='{{info.appid}}' bindtap="intoUrl"></image>
    </view>
    <text>{{info.gameName}}</text>
  </view>
</view>

注意：data-url如果写成data-URL,注意取值的时候还是var url = e.currentTarget.dataset.url(忽略大小写问题！)

希望小伙伴们能够看到自己想要的效果！