一、H5跳转小程序

wx-open-launch-weapp官网文档
jsapi_ticket 生成官方文档
jsapi_ticket加密时官方说url不加#及后面部分，但尝试后会debug报错，加上后正常显示按钮。可自行尝试

一定要先看文档很重要很重要！！！

1. 准备工作

已认证的服务号
已认证的非个人主体的小程序（暂不提小程序云开发的网页）

缺一不可，出现问题时先检测这两项是否具备

2. 露一手

绑定“JS接口安全域名”下的网页所在域名
公众号的appId,小程序的原始id

3. 代码编写（附上全码-记得修改里面的appid，原始id，路径等参数）

<!--* @Author: Li* @Date: 2022-02-18 11:09:12* @LastEditTime: 2022-03-03 11:15:37* @LastEditors: Please set LastEditors* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE* @FilePath: \newChat\src\views\home.vue
-->
<template><div style="height:100px;display: flex;justify-content: center;"><wx-open-launch-weapp id="launch-btn" path="目标小程序路径.html"username="gh_xxxxx"env-version="trial"><!-- 记得加.html--><!-- 目标小程序的原始id：gh_开头的--> <!--正式版release、开发版develop、体验版tria--><script type="text/wxtag-template"><style>.btn {margin-top: 100px;padding: 12px;width: 150px;border: 2px solid green;background-color: #fff;border-radius: 5px;}.btn:focus{outline: none;}</style><button class="btn" id="clickMe">立即打开小程序</button></script></wx-open-launch-weapp></div>
</template><script>import wx from 'weixin-js-sdk' // 安转依赖 "weixin-js-sdk": "^1.6.0" import sha1 from 'sha1' // 前端加密 所以安转了sha1export default {name: 'home',created() {this.toOpen(); // 初始化微信配置},methods: {async toOpen() {var path = window.location.href;let jsapi_ticket = " " // 记得看官方文档的附录，自己生成，或者后台提供接口获取 链接let timestamp = Date.parse(new Date()) / 1000;let nonceStr = this.randomWord(16)let url = pathlet string = "jsapi_ticket=" + jsapi_ticket + "&noncestr=" + nonceStr + "&timestamp=" + timestamp + "&url=" +urllet signature = sha1(string)// console.log(timestamp, nonceStr, jsapi_ticket, signature)wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印appId: 'wx开头的公众号appid', // 必填，公众号的唯一标识timestamp: timestamp, // 必填，生成签名的时间戳nonceStr: nonceStr, // 必填，生成签名的随机串signature: signature, // 必填，签名jsApiList: ["checkJsApi","chooseImage","uploadImage","previewImage"], // 必填，需要使用的JS接口列表openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-weapp']});// 通过ready接口处理成功验证wx.ready(function (res) {// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中wx.checkJsApi({jsApiList: ['wx-open-launch-weapp'],success: function (res) {// console.log("验证接口是否注册完成-成功");},fail: function (res) {// console.log(res);}});});// 通过error接口处理失败验证wx.error(function (res) {console.log(res)// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名});},randomWord(range) {var str = "",arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j','k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E','F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];// 随机产生for (var i = 0; i < range; i++) {let pos = Math.round(Math.random() * (arr.length - 1));str += arr[pos];}return str;}}}</script><style></style>

运行结果（一遍过，完美）

另外附上.html打开小程序的源码
和vue几乎无差 vue用 script type=“text/wxtag-template” 标签

HTML用 template 标签

<!--* @Author: your name* @Date: 2022-02-28 10:07:42* @LastEditTime: 2022-03-02 09:37:17* @LastEditors: Please set LastEditors* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE* @FilePath: \newChat\test.html
-->
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"><title></title><style type="text/css">*{margin: 0;padding: 0;}#app{display: flex;justify-content: center;}</style></head><body><div id="app"><wx-open-launch-weapp path="路径.html" id="launch-wxapp" username="gh_xxxx"env-version="trial"><template><style>.btn {margin-top: 100px;padding: 12px;width: 150px;border: 2px solid green;background-color: #fff;border-radius: 5px;}.btn:focus{outline: none;}</style><button class="btn">点击进入小程序</button></template></wx-open-launch-weapp></div></body><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js "></script><script>getStoreList()function getStoreList() { //调用后台接口获取config信息验证var path = window.location.href;var that = this;let jsapi_ticket = "" let timestamp = Date.parse(new Date()) / 1000;let nonceStr = randomWord(16)let url = pathlet string = "jsapi_ticket=" + jsapi_ticket + "&noncestr=" + nonceStr + "&timestamp=" + timestamp + "&url=" + urllet signature = sha1(string)wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: "", // 必填，公众号的唯一标识timestamp: timestamp, // 必填，生成签名的时间戳nonceStr: nonceStr, // 必填，生成签名的随机串signature: signature, // 必填，签名jsApiList: ['onMenuShareTimeline', 'chooseImage'], // 必填，需要使用的JS接口列表openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']})wx.ready(function(res) {// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中});wx.error(function(res) {// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名});}function randomWord(range) {var str = "",arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j','k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E','F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];// 随机产生for (var i = 0; i < range; i++) {let pos = Math.round(Math.random() * (arr.length - 1));str += arr[pos];}return str;}function encodeUTF8(s) {var i, r = [],c, x;for (i = 0; i < s.length; i++)if ((c = s.charCodeAt(i)) < 0x80) r.push(c);else if (c < 0x800) r.push(0xC0 + (c >> 6 & 0x1F), 0x80 + (c & 0x3F));else {if ((x = c ^ 0xD800) >> 10 == 0) //对四字节UTF-16转换为Unicodec = (x << 10) + (s.charCodeAt(++i) ^ 0xDC00) + 0x10000,r.push(0xF0 + (c >> 18 & 0x7), 0x80 + (c >> 12 & 0x3F));else r.push(0xE0 + (c >> 12 & 0xF));r.push(0x80 + (c >> 6 & 0x3F), 0x80 + (c & 0x3F));};return r;}// 字符串加密成 hex 字符串function sha1(s) {var data = new Uint8Array(encodeUTF8(s))var i, j, t;var l = ((data.length + 8) >>> 6 << 4) + 16,s = new Uint8Array(l << 2);s.set(new Uint8Array(data.buffer)), s = new Uint32Array(s.buffer);for (t = new DataView(s.buffer), i = 0; i < l; i++) s[i] = t.getUint32(i << 2);s[data.length >> 2] |= 0x80 << (24 - (data.length & 3) * 8);s[l - 1] = data.length << 3;var w = [],f = [function() {return m[1] & m[2] | ~m[1] & m[3];},function() {return m[1] ^ m[2] ^ m[3];},function() {return m[1] & m[2] | m[1] & m[3] | m[2] & m[3];},function() {return m[1] ^ m[2] ^ m[3];}],rol = function(n, c) {return n << c | n >>> (32 - c);},k = [1518500249, 1859775393, -1894007588, -899497514],m = [1732584193, -271733879, null, null, -1009589776];m[2] = ~m[0], m[3] = ~m[1];for (i = 0; i < s.length; i += 16) {var o = m.slice(0);for (j = 0; j < 80; j++)w[j] = j < 16 ? s[i + j] : rol(w[j - 3] ^ w[j - 8] ^ w[j - 14] ^ w[j - 16], 1),t = rol(m[0], 5) + f[j / 20 | 0]() + m[4] + w[j] + k[j / 20 | 0] | 0,m[1] = rol(m[1], 30), m.pop(), m.unshift(t);for (j = 0; j < 5; j++) m[j] = m[j] + o[j] | 0;};t = new DataView(new Uint32Array(m).buffer);for (var i = 0; i < 5; i++) m[i] = t.getUint32(i << 2);var hex = Array.prototype.map.call(new Uint8Array(new Uint32Array(m).buffer), function(e) {return (e < 16 ? "0" : "") + e.toString(16);}).join("");return hex;}</script>
</html>

二、小程序跳转小程序

小程序跳转小程序比较简单，微信提供的方法 wx.navigateToMiniProgram。

先看它的使用限制：

总结一下：需要用户主动触发，且有弹窗提示确认，跳转名单和数量不在限制。一句话，只要你知道目标小程序的appId和页面路径。就可以跳转

wx.navigateToMiniProgram({appId: '',path: 'page/index/index?id=123',extraData: {foo: 'bar'},envVersion: 'develop',success(res) {// 打开成功}
})

如若是uniapp开发的微信小程序，把wx.navigateToMiniProgram 改为 uni.navigateToMiniProgram。

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

基于h5的跳一跳游戏的开发与实现_「南宁小程序开发」企业开发小程序有哪些好处？...
现如今微信小程序成为了许多企业推广自身产品的一个平台,为什么他们会选择小程序呢?小程序到底有哪些好处?接下来,南宁小程序开发公司--视点网络告诉您开发小程序的好处有哪些. 轻量性:平时APP的转化过程 ...
小程序-实现怎么跳转打开 H5 网页链接(或跳转至公众号文章)
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号(ID:itclanCoder) 如果不知道如 ...
h5网页url跳转微信链接，小程序外链跳转任意站技术大揭秘
见多识广的你,想必也领略过"跳一跳"小游戏的魅力! 但你未必知道,小程序也能"跳"上那么一"跳"! 怎么个"跳"法? 来 ...
vue引入微信的JSSDK h5与小程序之间的跳转方案
vue引入微信的JSSDK使用 h5与小程序之间的跳转 vue如何使用微信的JSSDK 安装 npm install weixin-js-sdk --save 我喜欢设置全局属性,所以在main.j ...
h5跳转小程序页面url_H5跳转小程序，可以跳转任意小程序，以及任意小程序的页面地址获取。...
1登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名". 2这个JS接口安全域名就是访问你H5地址的域名. 3通过co ...
小程序接入h5页面_小程序-实现怎么跳转打开 H5 网页链接(或跳转至公众号文章)...
背景有时候,因为业务需求,在小程序当中,需要跳转到 h5 网页,或跳转到公众号,形成流量的闭环,那在小程序当中怎么实现呢? 实例效果前提条件该小程序与需要跳转至的公众号(订阅号/服务号)进行了绑定 ...
实现H5和小程序之间相互跳转
功能描述: 1. 当点击理赔服务的时候,跳转到小程序页面 2. 当点击返回的时候,从小程序跳回H5页面(内嵌H5以及关闭小程序) 功能1:H5跳转小程序 vue中实现步骤 == 在 template ...
跳转饿了么小程序、跳转美团小程序、获取小程序路径、小程序生成小程序码不能选择第三方小程序、领红包功能开发（附源码）
先上成果和功能我做的是随机推荐美食的小程序,食物数据是存库的而且后续会开放给用户新增食物的权限,然后有些小功能就是跳转到饿了么小程序和美团小程序领外卖红包,技术使用uniapp,开发工具是HBuil ...
如何实现公众号和小程序之间的跳转？
现在互联网上会有这样的需求,公众号小程序之间实现流量共享,将公众号的粉丝引流至小程序.将小程序的用户转化成公众号粉丝.有需求就有解决的方法,那方法有哪些了? 接下来我们详细探究一下有哪几种跳转方法? ...
微信小程序扫码跳转小程序过程记录
这里写自定义目录标题经验总结测试链接配置测试范围开发版体验版经验总结小程序开发真的很恶心,恶心,恶心测试地址一定要和你扫码的二维码内空一模一样,包括参数,否则你会跳转到正式版,或者无法 ...

H5跳转小程序，小程序跳转小程序

一、H5跳转小程序

二、小程序跳转小程序

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

最新文章

热门文章