場景描述：

因為小程式跳轉的時候需要公眾號關聯，但是關聯的數量是有限的！因此該文章的處理方案是：
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(忽略大小寫問題！)

希望小夥伴們能夠看到自己想要的效果！