微信内H5打开小程序

男娘i 2022-11-15 11:17 215阅读 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:  跳转小程序页面的路径

注意按钮样式的写法

发表评论取消回复

表情：

评论列表（有 0 条评论，215人围观）

还没有评论，来说两句吧...

相关阅读

相关 H5 video播放视频，微信内小窗播放

腾讯对微信尤其是安卓版本的内置浏览器内核做了一点点小处理，在X5内核下，播放会强制全屏，如果需要进行边视频边互动下则无法实现。无论使用百度或者是科学上网google都没有解

浅浅的花香味﹌/ 2023年10月11日 12:19/ 0 赞/ 76 阅读

相关 js通过判断h5页面是否内嵌在(app,小程序,微信)内

testBrowser() { let ua = window.navigator.userAgent.toLowerCase();

青旅半醒/ 2023年01月19日 06:00/ 0 赞/ 527 阅读

相关微信清理h5,小程序，公众号缓存

扫描下面的二维码 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubm

朴灿烈づ我的快乐病毒、/ 2023年01月19日 03:04/ 0 赞/ 9 阅读

相关微信公众号网页H5跳转微信小程序

[https://www.jianshu.com/p/5bc4589dd034][https_www.jianshu.com_p_5bc4589dd034] wx.c

比眉伴天荒/ 2023年01月15日 09:30/ 0 赞/ 269 阅读

相关微信内H5打开小程序

前置条件：已认证的服务号，订阅号不行引入js: <script type="text/javascript" src="https://res.wx.qq.com/op

男娘i/ 2022年11月15日 11:17/ 0 赞/ 216 阅读

相关微信小程序打开另一个小程序

前言有时候，我们需要在自己的小程序中打开另一个小程序，可以使用navigateToMiniProgram这个api来实现，可以看一下api的相关参数。 ![在这里插

àì夳堔傛蜴生んèń/ 2022年09月10日 09:30/ 0 赞/ 647 阅读

相关前端---H5唤醒微信小程序

前言： H5唤醒小程序目前有两种方式。本篇博客研究的是H5通过获取URL Scheme打开小程序。此种方式的思路：先通过小程序的appid和secret(小程

柔光的暖阳◎/ 2022年09月03日 01:18/ 0 赞/ 466 阅读

相关小程序打开h5链接

第一个页面，点击这个页面，跳转到h5的页面 <view class="jumprow" bindtap='jumpToUcard'> <text clas

浅浅的花香味﹌/ 2022年05月12日 01:20/ 0 赞/ 226 阅读

相关快速小程序开发之微信小程序内嵌 H5

> 小编推荐：[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公

男娘i/ 2022年04月10日 11:18/ 0 赞/ 859 阅读

相关微信小程序——小程序/公众号/H5支付

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

男娘i/ 2021年07月25日 16:58/ 0 赞/ 608 阅读