小程序 · H5跳转小程序

方法一：通过服务端接口或在小程序管理后台「生成 URL Scheme」

在小程序管理后台「工具」-「生成 URL Scheme」入口可以获取打开小程序任意页面的 URL Scheme

生成的 URL Scheme 如下所示：

weixin://dl/business/?t=1qFTj3VcOqc

开发者需要使用 H5 页面中转，再跳转到 Scheme 实现打开小程序，跳转代码如下：

location.href = 'weixin://dl/business/?t=1qFTj3VcOqc'

代码：

<template><div></div>
</template><script>
export default {name: "shareLink",components: {},computed: {},data() {return {openlink: "weixin://dl/business/?t=txY2fV8J76h",};},created() {// this.openlink = "weixin://dl/business/?t=Oa8UQlNZnGc";},mounted() {this.judge();},methods: {/***  判断运行环境*/isWorkClient() {var ua = navigator.userAgent.toLowerCase();var isWXWork = ua.match(/wxwork/i) == "wxwork";var isWeixin = !isWXWork && ua.match(/micromessenger/i) == "micromessenger";var isMobile = false;var isDesktop = false;if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i)) {isMobile = true;} else {isDesktop = true;}if (isWeixin) {} else if (isDesktop) {} else if (isWXWork) {// 判断是否是企微环境return true;} else {}return false;},judge() {this.jump();},jump() {if (this.isWorkClient()) {// 企微环境直接跳详情this.$router.push({path: "/",name: "toDoPage",});} else {// 跳转小程序location.href = this.openlink;}},},
};
</script>

参考：
服务端API:URL Scheme /generate
开放能力 /获取小程序链接 /获取 URL Scheme

方法二：开放标签打开

根据微信的开放标签wx-open-launch-weapp可以实现从h5页面跳转小程序的需求

安装weixin-js-sdk 版本要求1.6.0

npm install weixin-js-sdk

wx.config({debug: true,// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: appId,         // 必填，公众号的唯一标识，填自己的！timestamp: timestamp, // 必填，生成签名的时间戳，刚才接口拿到的数据nonceStr: nonceStr,   // 必填，生成签名的随机串signature: signature, // 必填，签名，见附录1jsApiList: ['wx-open-launch-weapp',],openTagList: ["wx-open-launch-weapp"] // 跳转小程序时必填})let _this = thiswx.ready(function (res) {console.log(res)})wx.error(function (res) {// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名console.log(res)});

<wx-open-launch-weappclass="openweapp"id="launch-btn"username="gh_c001fa831731"path="pages/index/index.html"><script type="text/wxtag-template"><style>.btn { padding: 12px;opacity:0 }</style><button class="btn">打开小程序</button></script></wx-open-launch-weapp>
mounted() {var btn = document.getElementById("launch-btn");btn.addEventListener("launch", function (e) {console.log("success");});btn.addEventListener("error", function (e) {alert("小程序打开失败");console.log("fail", e.detail);});},

vue会显示wx-open-launch-weapp组件未注册
在main.js中加入

Vue.config.ignoredElements = ['wx-open-launch-weapp']

参考：
开发指引 /基础能力 /静态网站 /H5 跳小程序
微信网页开发 /开放标签说明文档

应用场景：

企微分享H5到微信群里，企微打开进入H5，微信打开进入小程序(通过后端获取的短期有效的 URL Scheme )

企微home.vue

    async getOpenlink() {let self = this;let param = {id: this.ID,// groups: "",};try {let { retcode, explanation, openlink, creattime } =await API.knowledgeGetOpenlink(param);if (retcode === 0) {// 调用企微分享功能wx.invoke("shareAppMessage",{title: self.data.sharetitle, // 分享标题desc: self.data.sharedesc, // 分享描述// link: self.data.shareurl, // 分享链接link:location.href.split("#")[0] +"#/shareLink?id=" +self.ID +"&creattime=" +creattime +"&openlink=" +openlink,},function (res) {if (res.err_msg == "shareAppMessage:ok") {self.transToGroup();}});} else {this.$vux.toast.show({text: explanation,type: "text",width: "60%",isShowMask: true,position: "middle",});}} catch (error) {}},

H5中间页share-link.vue

<template><div></div>
</template><script>
import * as API from "@/api";export default {name: "shareLink",components: {},computed: {},data() {return {creattime: 0,id: "",openlink: "",type: "",};},created() {},mounted() {this.creattime = this.$route.query.creattime;this.id = this.$route.query.id;this.openlink = this.$route.query.openlink;this.type = this.$route.query.type;this.judge();},methods: {/***  判断运行环境*/isWorkClient() {var ua = navigator.userAgent.toLowerCase();var isWXWork = ua.match(/wxwork/i) == "wxwork";var isWeixin =!isWXWork && ua.match(/micromessenger/i) == "micromessenger";var isMobile = false;var isDesktop = false;if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i)) {isMobile = true;} else {isDesktop = true;}if (isWeixin) {} else if (isDesktop) {} else if (isWXWork) {// 判断是否是企微环境return true;} else {}return false;},/*** 判断下creattime 跟当前时间 是否30天以内* 有效：* 无效：* noticeid 重新获取 openlink*/judge() {let currentTime = new Date().getTime();if (currentTime - this.creattime > 30 * 24 * 60 * 60 * 1000) {this.getData();} else {this.jump();}},jump() {if (this.isWorkClient()) {// 企微环境直接跳详情this.$router.push({path: "/",name: "toDoPage",});} else {// 跳转小程序location.href = this.openlink;}},async getData() {let param = {page: "pages/home/home",type: this.type,};this.$vux.loading.show();try {let { openurl, retcode, explanation } = await API.getAppShortUrl(param);if (retcode === 0) {this.openlink = url;this.jump();} else {this.$vux.toast.show({text: explanation || "系统繁忙，请稍后重试",type: "text",width: "60%",isShowMask: true,position: "middle",});}} catch (error) {this.$vux.toast.show({text: "系统繁忙，请稍后重试",type: "text",width: "60%",isShowMask: true,position: "middle",});} finally {this.$vux.loading.hide();}},},
};
</script>

小程序 · H5跳转小程序相关推荐

使用小程序·云开发静态托管实现免鉴权h5跳转小程序
背景微信虽然推出了微信开放标签可以实现h5跳转小程序. 但是,开发者在使用之前要在公众号设置JS接口安全域名,不仅限制个数还限制修改次数,而且在使用之前还得获取access_token.ticket ...
小程序跳转到另一个小程序,参数传递以及调试,H5跳转小程序,小程序内嵌H5,
业务场景:企业A的小程序内嵌了企业B的H5 问题:企业A内嵌企业B的H5发起微信支付的时候,绕不过微信的限制.总是支付失败. 问题解决思路:企业B新建一个小程序,让企业A调用企业B的小程序, B内嵌H ...
h5跳转小程序、短信跳转小程序＜wx-open-launch-weapp＞干货满满
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档前言由于微信官方限制了URL Scheme跳转,本文实现的是html跳转微信小程序,仅限微信内部调转.如果需要外部跳转微信小程序,可 ...
H5跳转小程序(微信开放标签使用)
今天七月,微信终于提供了H5跳转小程序的功能:果然方便了许多:限制条件也比较宽松吧. 限制条件: 微信版本要求为:7.0.12及以上. 系统版本要求为:iOS 10.3及以上.Android 5.0及 ...
V2微信内外网页H5跳转小程序链接生成系统开发
V2微信内外网页H5跳转小程序链接生成系统开发网页支持H5.服务号.封装app 功能// banner.首页.标题:创建您的链接.功能区.创建链接.选择类型.8种类型.小程序.一个人小程序.公众号. ...
H5跳转小程序，小程序跳转小程序
一.H5跳转小程序 wx-open-launch-weapp官网文档 jsapi_ticket 生成官方文档 jsapi_ticket加密时官方说url不加#及后面部分,但尝试后会debug报错,加 ...
H5跳转小程序 (成功案例)
H5跳转小程序 (踩坑记-成功案例) 自我的一段独白找到这篇文章之前我相信你也踩了不少坑,遇到了不少bug,请认真阅读步骤,带你走出雾霾:项目的需求是H5跳转微信小程序,H5项目是原生的html方法 ...
微信浏览器跳转小程序php,微信浏览器里面h5跳转小程序
微信浏览器里面h5跳转小程序注意事项,以vue框架为例一.获取jssdk配置,在wx.ready回调函数里面展示按钮wx.config({ debug: false, appId: data.ap ...
vue 实现H5跳转小程序
vue实现H5跳转小程序公司需求实现h5跳转小程序,看了很多文档发现对于小白不太容易理解,记录下,以备查阅. 适用环境微信版本要求为:7.0.12及以上. 系统版本要求为:iOS 10.3及以上. ...