H5 Vue跳转小程序

准备工作

  1. 绑定域名

    先登录微信公众平台进入 公众号设置功能设置 里填写 JS接口安全域名

    控制台报 invalid url domain,就是当前地址没配在安全域名里

  2. 引入JS文件
    npm install weixin-js-sdk

  3. 通过config接口注入权限验证配置

javascript 复制代码
wx.config({
  debug: true, 
  appId: '', // 必填,公众号的唯一标识
  timestamp: , // 必填,生成签名的时间戳,微信相关接口获取
  nonceStr: '', // 必填,生成签名的随机串,微信相关接口获取
  signature: '',// 必填,签名,微信相关接口获取
  jsApiList: [] // 必填,需要使用的JS接口列表(非必填)
});

跳转的Vue页面

javascript 复制代码
<template>
  <div>
  	<!-- demo功能,用时把这个定位到触发跳转的元素上 -->
    <div style="width: 50px; height: 50px; background: red; position: relative">
      <wx-open-launch-weapp
        id="launch-btn"
        username="gh_??????" // 跳转小程序的原始id
        path="pages/index/index" // 跳转小程序的路径
        style="position: absolute; left: 0; top: 0; width: 100%; height: 100%"
      >
        <script type="text/wxtag-template">
          <div style="position: absolute; left: 0; top: 0; width: 100%; height: 100%;" />
        </script>
      </wx-open-launch-weapp>
    </div>
  </div>
</template>

<script>
import wx from 'weixin-js-sdk';

export default {
  methods: {
    getConfig() { 
      this.$http.wechat_api_auth({
          url: location.href.split('#')[0],
        })
        .then(res => {
          if (res.code === '0000') {
            wx.config({
              debug: false,
              appId: res.result.appid,
              timestamp: res.result.timestamp,
              nonceStr: res.result.noncestr,
              signature: res.result.signature,
              jsApiList: [],
              openTagList: ['wx-open-launch-weapp'],
            });
          }
        });
    },
  },

  mounted() {
    this.getConfig();
  },
};
</script>

main.js

javascript 复制代码
// 申明忽略标签 - 用于跳转小程序
Vue.config.ignoredElements = ['wx-open-launch-weapp'];

获取小程序原始ID

获取小程序路径

注意

  1. weixin-jsapiweixin-js-sdk不兼容,用weixin-js-sdk代替
  2. 跳转需要一个认证的公众号作为中介
  3. 需要知道目标小程序的原始ID和页面路径,页面路径必须要进到后台才拿的到,原始ID可以在小程序右上角的三个点那里获取
相关推荐
zkmall26 分钟前
ZKmall模块商城的推荐数据体系:从多维度采集到高效存储的实践
小程序·架构·开源·代码规范
Juchecar28 分钟前
Vue3 Class 和 Style 绑定详解
前端·vue.js
源码哥_博纳软云28 分钟前
JAVA国际版多商户运营版商城系统源码多商户社交电商系统源码支持Android+IOS+H5
android·java·ios·微信·微信小程序·小程序·uni-app
一名爱小惠的前端39 分钟前
🔥🔥🔥430+天,Naive UI Pro 跟大家见面
前端·vue.js·typescript
ZsTs11939 分钟前
还在死记 Vue 2 和 Vue 3 的区别?12个核心模块对比,让你彻底告别面试难题!
vue.js·面试·前端框架
兮漫天1 小时前
bun + vite7 的结合,孕育的 Robot Admin 【靓仔出道】(十八)
前端·javascript·vue.js
秋天的一阵风1 小时前
用 vue3+ts+pdfjs 做 PDF 预览?这组件难道不值得夸?🚀
前端·javascript·vue.js
前端小巷子2 小时前
Vue渲染器解析
前端·vue.js·面试
做一位快乐的码农3 小时前
基于springboot的理商管理平台设计与实现、java/vue/mvc
java·vue.js·spring boot
CRMEB定制开发10 小时前
CRMEB私域电商系统后台开发实战:小程序配置全流程解析
小程序·开源软件·小程序商城·商城源码·微信商城·crmeb