wx-open-launch-weapp使用心得

公司有个需求是需要公众号跳转到小程序。翻阅了下文档发现需要使用到wx-open-launch-weapp.于是按照官方案例写了下dome

导入jssdk

通过config接口注入权限验证配置并申请所需开放标签，这里的jssdk版本必须是1.6.0。如果不是的话无法显示。

 wxConfig (signData) {
      wx.config({
        debug: false,
        appId: signData.AppId, // 必填，公众号的唯一标识
        timestamp: signData.Timestamp, // 必填，生成签名的时间戳
        nonceStr: signData.NonceStr, // 必填，生成签名的随机串
        signature: signData.Signature, // 必填，签名
        jsApiList: ['onMenuShareTimeline'],
        openTagList: ['wx-open-launch-weapp']
      })
      wx.ready(() => {
      })
      wx.error(res => {
        this.SET_SIGN_DATA({})
        console.log('微信验证失败s：' + res)
      })
  }

开放标签案例（vue项目）

样式和dom必须写再开放标签里面，这里需要注意的是css只支持px，只支持网络图片，不支持icon图标

<wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxxxxx"  path="pages/login/login/main.html" @error="handleErrorFn" @launch="handleLaunchFn">
    <script type="text/wxtag-template">
        <style>.btn { display: flex;align-items: center; }</style>								
        <div> <button class="wx-btn">跳转小程序</button>	</div>			
    </script>
</wx-open-launch-weapp>

开放标签的参数说明

• username：小程序的原始id值。这个原始id很好获取，再微信公众号上面关联小程序就会有这个原始值
• path：可以不填，不填就会跳转到小程序的首页(获取小程序链接小技巧)

我的案例

因为开放标签不支持rem，所以只能自己计算。所以我这里就再js动态渲染，图片使用网上图片

renderDom () {
        /* eslint-disable */
        const script = document.createElement('script')
        const imgWidth = this.handleRem(65)
        const h3Size = this.handleRem(18)
        const pSize = this.handleRem(15)
        const rightImg = this.handleRem(18)
        const itemWidth = this.handleRem(307)
        const imgMargin = this.handleRem(10)
        const itemMarginTop = this.handleRem(18)
        script.type = 'text/wxtag-template'
        script.text = `<div style="width: ${itemWidth}px; display: flex; align-items: center; justify-content: space-between; margin-top: ${itemMarginTop}px">
              <div style="display: flex; align-items: center;">
                <div style="width: ${imgWidth}px; height: ${imgWidth}px; margin-right: ${imgMargin}px">
                  <img style="width: 100%; height: 100%" src="https://res.com/20/n/chaxun.png" alt="">
                </div>
                <div class="other-text">
                  <h3 style="color: #333; font-size: ${h3Size}px; padding: 0; margin: 0;">fasdfasd</h3>
                  <p style="color: #999; font-size: ${pSize}px; padding: 0; margin: 0;">fasfasdf </p>
                </div>
              </div>
              <img style="width: ${rightImg}px" src="https://res.com/arrow_right.png"></img>
            </div>` 
        let html = `<wx-open-launch-weapp style="width:100%;display:block;height:100%;" username="gh_xxxxxxx" path="pages/home/fasf">${script.outerHTML}</wx-open-launch-weapp>`
        return html
      },
      handleRem (size) {
        const htmlFontSize = window.getComputedStyle(document.documentElement,null).fontSize.replace('px','')
        return size / 37.5 * htmlFontSize
      }

动态渲染

<div v-html="renderDom()"></div>

最后注意按钮无法显示的原因

1. jssdk版本一定要注意是1.6.0，低于就不显示
2. 服务号一定要认证
3. 要再微信浏览器中才会显示，本地是调试不了的
4. jsApiList一定要写，不写也显示不出来。随便导入一个就行