微信内H5打开小程序

最新推荐文章于 2024-10-09 15:35:33 发布

无敌mouse

最新推荐文章于 2024-10-09 15:35:33 发布

阅读量937

点赞数

分类专栏： vuejs 文章标签：小程序 vue

本文链接：https://blog.csdn.net/mousede/article/details/115350754

版权

vuejs 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

前置条件：已认证的服务号，订阅号不行

引入js: <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"> 或者在vue中安装 weixin-js-sdk

调用后台接口获取签名等信息

this.$axios.post("url", params)
    .then(res => {
        wx.config({
          debug: false,
          appId: res.appid,
          signature: res.signature,
          jsapi_ticket: res.jsapi_ticket,
          nonceStr: res.nonceStr,
          timestamp: res.timestamp,
          jsApiList: [
              'checkJsApi', 
              'onMenuShareTimeline',//分享到朋友圈的接口
              'onMenuShareAppMessage'//分享给朋友的接口
          ],
          openTagList: ["wx-open-launch-weapp"]   // 跳转小程序 开放标签
	})
 })

vue前端开放标签的写法

<wx-open-launch-weapp id="launch-btn" username="gh_XXXXXXXXXXXXXX" :path="'pages/work_detail/index.html?id=' + id +'&contributeId=' + contributeId" style="width: 100%">
        <script type="text/wxtag-template">
          <style>.btn { width: 100%; height:40px;background: #d93d25;border-radius: 18px;color: #FFF;font-size: 18px;display: flex;align-items: center;justify-content: center;border: 0;}</style>
          <button class="btn">投票</button>
        </script>
</wx-open-launch-weapp>

username: 小程序的原始ID

path: 跳转小程序页面的路径

注意按钮样式的写法