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

左手的ㄟ右手 2022-05-10 04:08 406阅读 0赞

#### 场景描述： ####

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

#### **下面展示效果**： ####

**1.点击关联有appid的时候，直接进入小程序**  
**2.点击没有appid的时候弹出小程序码，长按识别可以进入小程序**  
![在这里插入图片描述][70]  
![在这里插入图片描述][70 1]  
![在这里插入图片描述][70 2]

#### 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(忽略大小写问题！)

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

[70]: /images/20220510/21169360133c49508994960f149b4198.png
[70 1]: /images/20220510/93ad1e26ed124f82a3a590236cec54fe.png
[70 2]: /images/20220510/957aba5371994da5a010b67aac1fd156.png