vue中H5页面跳转小程序

最新推荐文章于 2024-09-14 13:39:52 发布

W Y L

最新推荐文章于 2024-09-14 13:39:52 发布

阅读量1.3k

点赞数

文章标签：小程序 js javascript

本文链接：https://blog.csdn.net/weixin_45959525/article/details/116651700

版权

最近在做的就是H5页面跳转小程序的一个功能，我下面说的是我在项目中遇到的问题和解决方法，不知道对你们有没有帮助，如果有更好的方式，大家提出来讨论互相学习哦~这样才能进步的快
在这里插入图片描述

官方开放标签的文档–文档多看几次，细节部分注意
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#%E5%BC%80%E6%94%BE%E6%A0%87%E7%AD%BE

H5页面-html相关的问题和答案

username="gh_xxxxxxxx" 这个是小程序的原始id
path="/pages/index/index.html" 这个是要跳转小程序的页面地址
<script type="text/wxtag-template"></script> 我是用的是script，不知道是不是在vue中，使用template在开发者工具中不显示按钮
<style></style>这个里面就是写样式
布局的时候可能会有小图标，本地图片出不来，我使用的是网上的url，直接把图片地址转成url就可以了。网站：https://riyugo.com/

<wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxx" path="/pages/index/index.html" @launch="handleLaunchFn" @error="handleErrorFn">
    <script type="text/wxtag-template">
        <style>
        	这个就是对下面的样式
        </style>
        <li class="main-item">
    		<img src="https://riyugo.com/o/210510/s7smlv.png" alt="">
    		<p>跳转小程序按钮</p>
		</li>
    </script>
</wx-open-launch-weapp>

H5页面-js相关的问题和答案

先引入文件：跳转使用的是sdk，借助公众号跳转

// 引入js
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
// sdk文件
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

判断是不是微信环境

isMiniPage() {
    var ua = window.navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == 'micromessenger') { 
        // 微信环境下
    } else {
        // 非微信环境逻辑
    }
}

配置config信息，这里面配置的都是公众号的config信息

wx.config({
    debug: false, // 开启调试模式
    appId: result.AppId, // 必填，公众号的唯一标识
    timestamp: result.TimeStamp, // 必填，生成签名的时间戳
    nonceStr: result.NonceStr, // 必填，生成签名的随机串
    signature: result.Signature, // 必填，签名
    jsApiList: ["openLocation"], // 必填，需要使用的JS接口列表
    openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表，这里写的是跳转小程序的
});
// 通过ready接口处理成功验证
wx.ready(function () {
    console.log('success')
});
// 通过error接口处理失败验证
wx.error(function (res) {
    console.log('error', res)
});

// 用户点击跳转按钮并对确认弹窗进行操作后触发
handleLaunchFn(e) {
    console.log(e, 'handleLaunchFn')
},
// 用户点击跳转按钮后出现错误
handleErrorFn(e) {
    console.log('handleErrorFn', e.detail);
}