H5跳转小程序按钮(wx-open-launch-weapp)不显示问题

Posted pink味的草莓

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了H5跳转小程序按钮(wx-open-launch-weapp)不显示问题相关的知识,希望对你有一定的参考价值。

原因:

1、开发使用者必须是已认证的服-务-号(服务号可以置顶,订阅号不能),服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。

2、开发使用者必须是已认证的非个人主体的小程序,使用小程序云开发的静态网站托管绑定的域名下的网页,可以使用此标签跳转任意合法合规的小程序。

3、必须部署到正式服务器,测试公众号不显示图标。

4、必须是在已认证的服务号中做JS接口安全域名验证,“JS接口安全域名”和“IP白名单”都要,IP是指获取微信签名的服务器的IP。

注意:1、2两个条件必须满足其中一个;3、4两个条件必须满足,否则标签中的按钮不会显示(微信文档不讲武德,写的不清楚,稍微不注意就会掉坑)。

其他细节:

1、微信开发者工具,"verifyOpenTagList":[],是显示不了图标的。微信开发工具和真机测试结果可能不一样,一定要用真机测试。安卓和ios测试结果也可能不同,都要测试。

2、小程序的web-view不支持wx-open-launch-weapp。

3、jsApiList:['chooseImage', 'previewImage'](必须有,不然安卓不显示)

4、微信版本要求为:7.0.12及以上。 系统版本要求为:iOS 10.3及以上、android 5.0及以上

目录 | 微信开放文档

路由跳转小程序

一、组件跳转
第一中方式:

<navigator  url="/pages/wd/wd" open-type = "redirect">wd</navigator >
url 路径   open-type 这是跳转方式       
1. navigator  是只能跳转没有tabBar的有返回按钮  可以传值
2.switchTab 只能跳转tabBar的页面   不可传值  会报错
3.reLaunch 随便跳转     可以传值

第二种:

  wx.navigateTo({  //有返回键只能跳转不是tab页面
    url: '/pages/wd/wd',
  })
  
 wx.switchTab({  //2.switchTab 只能跳转tabBar的页面   不可传值  会报错
    url: '/pages/index/index?id=123',
  })


wx.redirectTo({  //可以跳转任何页面   没有返回 有首页
  url: "/pages/wd/wd?id=123",
})

传值的话:

可直接在后面拼接id
在跳转到的页面在 onLoad 接收  页面刷新时只触发一次 
 跳转到tabBar页面不能传值
 onLoad: function (options) {
   
console.log(options);
  },

传数组的话:

//得先转把数组成字符串然后传到那边
suiyi(){
  var arr=[1,6,5,9]
  var g=JSON.stringify(arr) // JSON.stringify//对象转换 字符串
wx.redirectTo({  //可以跳转任何页面   没有返回 有首页
  url: `/pages/wd/wd?id=${g}`,
})
},

 用onLoad接收: 

 onLoad: function (options) {
    var a=JSON.parse(options.id)  //字符串转对象
console.log(a);
  },

以上是关于H5跳转小程序按钮(wx-open-launch-weapp)不显示问题的主要内容,如果未能解决你的问题,请参考以下文章

H5跳转小程序,可以跳转任意小程序,以及任意小程序的页面地址获取。

vue项目-h5跳转小程序

h5跳转微信打开任意站url

h5打开微信小程序带参数

微信支持H5跳转App、跳转小程序

微信公共号H5页面跳转小程序。