ToB企服应用市场:ToB评测及商务社交产业平台

标题: 微信h5情况使用开放标签（wx-open-launch-weapp）打开三方小步伐 [打印本页]
作者: 王柳    时间: 8 小时前
标题: 微信h5情况使用开放标签（wx-open-launch-weapp）打开三方小步伐
1. 设置微信公众平台的业务域名

首先，需要确保你已经在微信公众平台上精确设置了 H5 页面所使用的业务域名。没有设置业务域名的 H5 页面将无法正常调用微信开放标签。
这是微信 H5 页面与小步伐之间通讯的基础，确保该域名在微信认证的情况中可用。
2. 获取并设置小步伐的原始 ID

使用 wx-open-launch-weapp 标签时，必须提供目标小步伐的原始 ID（即 username 字段），该字段通常以 gh_ 开头。你可以在微信小步伐后台找到这个 ID。

在开放标签中，你需要将这个 ID 设置到 username 属性中，以确保 H5 页面能够精确调用指定的小步伐。
3. 确保 H5 页面在 HTTPS 情况下运行

微信对安全性的要求很高，全部涉及微信 API 和开放标签的 H5 页面必须在 HTTPS 情况下运行。假如页面没有使用 HTTPS 协议，将导致功能无法正常使用。
确保你的 H5 页面已经摆设到 HTTPS 情况。
4. 引入微信 JSSDK

在你的 index.html 中引入微信 JSSDK，以便在 H5 页面中调用微信的功能接口。
  1. html
  2. <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
复制代码
5. 设置微信 config

为了让微信 JSSDK 正常工作，需要在页面加载时进行 wx.config 的设置。这一步通常放在一个单独的设置文件中，好比 wxConfig.js。
  1. // API 为获取公众号信息定义的接口
  2. API().then((result) =>{
  3.   wx.config({
  4.     debug: false, // 开启调试模式
  5.     appId: result.appId, // 必填，公众号的唯一标识
  6.     timestamp: result.timestamp, // 签名时间戳 必填
  7.     nonceStr: result.nonceStr, // 签名随机串 必填
  8.     signature: result.signature,// 签名必填
  9.     jsApiList: ['miniProgram.navigateTo', 'onMenuShareAppMessage'],// 使用的 JS 接口列表 必填
  10.     openTagList: ['wx-open-launch-weapp'] // 开放标签
  11.   });
  12.   wx.ready(() => {
  13.      console.log('config初始化正确')
  14.   });
  15.   wx.error((error) => {
  16.      console.log(`config error`);
  17.   });
  18. }).catch((err) =>{
  19.   console.log('接口加载错误', err)
  20. })
复制代码
6. 使用 wx-open-launch-weapp 标签

在页面中，使用 wx-open-launch-weapp 标签以展示一个按钮，用户点击按钮后将跳转到小步伐的指定页面。
  1. vue
  2. <template>
  3.    <wx-open-launch-weapp
  4.      id="launch-btn"
  5.      :username="gh_xxxxxxxxx"
  6.      :path="/subpack/xxxx/xxxx"
  7.      @launch="successFun"
  8.      @error="errorFun"
  9.     >
  10.       <script type="text/wxtag-template">
  11.         <style>
  12.             .content{
  13.               width: 100%;
  14.               height: 48px;
  15.               background-color: red;
  16.             }
  17.          </style>
  18.          <div class="content"></div>
  19.        </script>
  20.   </wx-open-launch-weapp>
  21. </template>
  22. // username 是要跳转到小程序的原始id
  23. // path 是要跳转到的小程序路径 为空就跳转到首页
  24. // 注：写在开放标签里面的标签元素是不能使用v-if v-show这些的，如需写逻辑展示 如下
  25. // <template v-if="xxx">
  26. //   <wx-open-launch-weapp>
  27. //   </wx-open-launch-weapp>
  28. // </template>
  29. // 在wx-open-launch-weapp标签外层套一层template写逻辑判断使用，开放标签里面使用写法不变
  30. js
  31. <script>
  32. methods: {
  33.    successFun() {
  34.      console.log('成功打开小程序')
  35.    },
  36.    errorFun(err) {
  37.      console.log('打开小程序失败', err)
  38.    }
  39. }
  40. </script>
复制代码
7. 使用注意事项总结



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4