微信内H5页面唤起小程序&App

微信内H5页面唤起小程序&App

2 years ago

source link: https://blog.51cto.com/react/5474337
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

微信开放标签是微信公众平台面向网页开发者提供的扩展标签集合。通过使用微信开放标签，网页开发者可安全便捷地使用微信或系统的能力，为微信用户提供更优质的网页体验。此文档面向网页开发者，介绍微信开放标签如何使用及相关注意事项。需要注意的是，微信开放标签有最低的微信版本要求，以及最低的系统版本要求。微信版本要求为：7.0.12及以上。系统版本要求为：iOS 10.3及以上、Android 5.0及以上。

开放标签使用步骤

1.绑定域名

登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”, JS接口安全域名对应H5页面域名地址

2.引入JS文件

在需要调用JS接口的页面引入如下JS文件：

http://res.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）

也支持npm包方式引入, 版本需1.6.0及以上

npm install weixin-js-sdk --save

3.通过config接口注入权限验证配置并申请所需开放标签

与使用JS-SDK配置方式相同，所有需要使用开放标签的页面必须先注入配置信息，并通过openTagList字段申请所需要的开放标签，否则将无法使用（同一个url仅需调用一次）。

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [], // 必填，需要使用的JS接口列表
  openTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
});

4.页面唤起小程序代码

<wx-open-launch-weapp
    id="launch-btn"
    username="gh_XXXXX"
    weappid="wxd44d0XXX0f0dXXX"
    path="/pages/page/page.html?id=aaa"
>
    <script type="text/wxtag-template">
        <!--html页面展示代码-->
    </script>
</wx-open-launch-weapp>

5.页面唤起App代码

    <wx-open-launch-app
       @launch="launch"
       @error="launchError"
       id="launch-btn"
       appid="应用APP的Appid"
       extinfo="传递给APP的参数（可用于打开app的后续逻辑）"
      >
         <script type="text/wxtag-template">   
            <!--html页面展示代码-->
        </script>
    </wx-open-launch-app>

1.此功能的开放对象

已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。

2.参数说明

username 所需跳转的小程序原始id，即小程序对应的以gh_开头的id, 注意不是公众号的id
对于path属性，所声明的页面路径必须添加.html后缀，如pages/home/index.html
如果跳转提示缺少ID, 检查username对应原始ID是否正确

3. Vue项目中会报错该标签不存在

在main.js文件中添加忽略代码，忽略打开微信小程序的组件

Vue.config.ignoredElements = ['wx-open-launch-weapp']

开放标签说明文档

Recommend

141

Engadget 中国版 cn.engadget.com 7 years ago
Cache

Nike 的「PlayStation」球鞋要唤起玩家的爱鞋之心

能讨得鞋迷和玩家这两个不同群体喜爱的鞋款，相对来说还是比较少见的。不过 Nike 刚发的 PG2 却做到了这一点，它成功将 PlayStation DualShock 手柄的元素融入到了 NBA 球星 Paul George 的签名款球鞋之中。按照 Nike 的说法，爱玩游戏的 Paul George 为了这双鞋的...