微信内置浏览器中h5页面打开第三方小程序

最新推荐文章于 2024-07-30 10:56:44 发布

o_oppp

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量1k

点赞数

文章标签：微信 javascript 小程序

本文链接：https://blog.csdn.net/o_oppp/article/details/128806021

版权

1、安装weixin-js-sdk

npm install weixin-js-sdk

2、在a页面配置（部分代码）

<script>
import wx from 'weixin-js-sdk'
export default{
	data(){
		retutn{
		 	wxStatus: false, //微信sdk验证成功
		 }
	},
	create(){
	},
	methods(){
		//微信sdk配置
    wxinit() {
    //wxconfig获取后台参数接口
      wxconfig({
        url: window.location.href.split('#')[0],//当前页面路径
      })
        .then((res) => {
          wx.config({
            debug: false, // 开启调试模式
            appId: res.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名
            jsApiList: ['chooseImage', 'previewImage'], // 必填，需要使用的JS接口列表
            openTagList: ['wx-open-launch-weapp'], // 开放标签，跳转小程序
          })
          // 通过ready接口处理成功验证
          wx.ready(function () {
            console.log('success')
          })
          // 通过error接口处理失败验证
          wx.error(function (res) {
            console.log('error', res)
            this.wxStatus = false //验证失败
          })
        })
        .catch(() => {
          this.wxStatus = false //验证失败
        })
    },
	},
}
</script>

3、在a页面弹窗中使用（部分代码）

<div id="wechat-web-container" v-if="wxStatus">
            <wx-open-launch-weapp
              id="launch-btn"
              username="第三方小程序原始id(gh开头)"
              path="跳转到第三方小程序页面路径"
              @launch="handleLaunchFn"
              @error="handleErrorFn"
              style="display: inline-block; border: none"
            >
              <script type="text/wxtag-template">
                <button
                  style="
                    padding: 10px 20px;
                    text-align: center;
                    font-size: 14px;
                    display: block;
                    border: none;
                    border-radius: 20px;
                    background-color: #43bf90;
                    color: #fff;
                    width: 140px;
                  "
                >
                  前往第三方小程序
                </button>
          </script>
     </wx-open-launch-weapp>
</div>

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