这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

在业务中接触了微信小程序,客户对引流用户非常在意,每次都会提该需求,经常做就存档一下。使用的小程序账户都是企业版非个人版本。

跳转H5

  1. 在微信公众平台-小程序后台配置业务域名,要将校验文件放置到域名根目录下,才可配置成功,通过 https://url/校验文件名.txt 可测试成功与否。
  2. 使用 web-view 配置路径
  3. 如需传参通过 ?key=value 形式一起传输,在另一端接收 URL 上的参数便可。
<web-view :src="`https://url/index.html#/?timestamp=${timestamp}`" />

跳转小程序

// 方式一:似乎不能用了,有哪位好心人能用的话求咨询
<button @click="goMiniapp">跳转下载</button> Taro.navigateToMiniProgram({ // 我用的taro,原生用 wx.navigateToMiniProgram 就行
appId: "appid",
path: 'page/index/index',
extraData: { // 传递给小程序的数据
foo: 'bar'
},
envVersion: 'develop',
success(res) {
// 打开成功
}
}) // 方式2:可用,可以回退到自己的小程序
<navigator target="miniProgram" open-type="navigate" app-id="appid" path="pages/index/index">跳转小程序</navigator>

跳转App

2021.5 月开始小程序不再支持跳转到 App,那要怎么跳转 App 呢,看了一下腾讯视频的小程序是利用客服消息发送 App 下载地址,感觉此方法体验甚好,就参考了很多文档实测了一下。源地址:关于不再提供“小程序打开App技术服务”的通知

消息推送配置

消息推送配置指南 介绍的很清楚,也可以只看这个。

首先要开始微信的消息推送功能,在微信公众平台-小程序后台-开发管理-消息推送,选择启用,这个部分需要管理员或开发者进行扫码确认。

确认成功会跳转到配置页面,按需求配置即可。我这里选择了安全模式,会对后续客服消息

Token验证

微信服务器将发送 GET 请求到填写的服务器地址 URL 上,进行 Token 验证,所以要先新建好服务器并上线。

该图是关于返回的参数 + 如何创建 GET 请求

main.mjs 根据设定好的要求,按步骤创建get方法用于接收get请求。这里使用了ES6,需要对 package.json 增加 "type": "module"

import express from "express";
import request from "request"
import cors from "cors";
import bodyparser from "body-parser";
import CryptoJS from "crypto-js";
var app = express();
app.use(cors({ origin: "*" }));
app.use(bodyparser.json()); var config = {
token: 'sxRGsggaA7XaYlSKuKVJkThLs', // 和配置消息推送的token一致
content: "下载腾讯视频App,享受更多播放特权,请戳→http://m.v.qq.com/activity/downapp_activity.html", // 借用腾讯下载app的链接,做的demo
EncodingAESKey: "你的EncodingAESKey",
APPID: "你的APPID",
APPSECRET: "你的APPSECRET",
access_token: ""
} app.get("/url", (req, res) => {
console.log(req.query);
var signature = req.query.signature;
var timestamp = req.query.timestamp;
var nonce = req.query.nonce;
var echostr = req.query.echostr;
var ciphertext = CryptoJS.SHA1([config.token, timestamp, nonce].sort().join(''));
if (signature == ciphertext.toString()) {
res.send(echostr);
} else {
res.send({
status: 400,
data: "check msg error"
});
}
});
app.listen(process.env.PORT)

接下来就可以点提交键啦~~,成功配置后会跳转回到开发配置页面,此时你的相关配置就在这能查看到。

小程序跳转客服消息

参考微信组件 button

<button open-type="contact">前方客服会话获取下载链接</button>

配置AccessToken(非安全模式不需要这部)

参考微信接口 getAccessToken

main.mjs

function get_access_token() {
return new Promise((resolve, reject) => {
request(`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${config.APPID}&secret=${config.APPSECRET}`, { json: true }, (err, res, body) => {
if (err) {
reject(err)
} else {
resolve(body)
}
});
})
} var out_time = 7100 * 1000
var last_time = 0; async function get_token() {
if (Date.now() - out_time > last_time) {
var cur = await get_access_token()
config.access_token = cur.access_token;
last_time = Date.now(); console.log('当前token:', config.access_token)
console.log('过期时间:', new Date(last_time + out_time).toString(), '+8小时'); // 在服务器部署的是UTC时间,和北京时间差8小时。。
}
return config.access_token;
}
setInterval(get_token, 5000)
get_token();

配置客服自动回复

如非安全模式,参考  消息推送回复 就行内部代码很详细。

配置选择安全模式的话,需要对接收信息进行解密。 以下为 wx-crypto.mjs 解密模块

import crypto from 'crypto'; // 加密模块

function decodePKCS7(buff) {
let pad = buff[buff.length - 1];
if (pad < 1 || pad > 32) {
pad = 0;
}
return buff.slice(0, buff.length - pad);
}; // 微信转发客服消息解密
function decryptContact(key, iv, crypted) {
const aesCipher = crypto.createDecipheriv('aes-256-cbc', key, iv);
aesCipher.setAutoPadding(false);
let decipheredBuff = Buffer.concat([aesCipher.update(crypted, 'base64'), aesCipher.final()]);
decipheredBuff = decodePKCS7(decipheredBuff);
const lenNetOrderCorpid = decipheredBuff.slice(16);
const msgLen = lenNetOrderCorpid.slice(0, 4).readUInt32BE(0);
const result = lenNetOrderCorpid.slice(4, msgLen + 4).toString();
return result;
}; // 解密微信返回给配置的消息服务器的信息
function decryptWXContact(wechatData, EncodingAESKey) {
if (!wechatData) {
wechatData = '';
}
//EncodingAESKey 为后台配置时随机生成的
const key = Buffer.from(EncodingAESKey + '=', 'base64');
const iv = key.slice(0, 16);
const result = decryptContact(key, iv, wechatData);
const decryptedResult = JSON.parse(result);
console.log(decryptedResult);
return decryptedResult;
}; export {decryptWXContact}
main.mjs post方法,接收信息解密 + 返回消息。
import { decryptWXContact } from "./wx-crypto.mjs"
app.post("/url", async (req, res) => {
const { ToUserName, Encrypt } = req.body // ToUserName 推送接收的账号 if (!Encrypt) return res.send('success'); //配置时选的安全模式 因此需要解密 const decryptData = decryptWXContact(Encrypt, config.EncodingAESKey);
if (!decryptData) return res.send('success'); if (decryptData.MsgType == 'text') {
await sendmess(config.access_token, {
access_token: config.access_token,
touser: decryptData.FromUserName,
msgtype: 'text',
text: {
content: decryptData.Content == '下载' ? config.content || '' : '感谢您关注xxx小程序'
},
image: {},
link: {},
miniprogrampage: {}
})
}
res.send('success') // 不进行任何回复,直接返回success,告知微信服务器已经正常收到。
}); function sendmess(access_token, mess) {
return new Promise((resolve, reject) => {
var options = {
'method': 'POST',
'url': `https://api.weixin.qq.com/cgi-bin/message/custom/send?access_token=${config.access_token}`,
'headers': {
'Content-Type': 'application/json'
},
body: JSON.stringify({
"access_token": `${config.access_token}`,
...mess
})
}
request(options, function (error, response) {
if (error) reject(error);
resolve(response.body)
});
})
}

成果

本文转载于:

https://juejin.cn/post/7155829250547777572

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

记录--微信小程序跳转H5、小程序、App的更多相关文章

  1. 小程序跳转H5及其他页面

    一.小程序和公众号 答案是:可以相互关联. 在微信公众号里可以添加小程序. 图片有点小,我把文字打出来吧: 可关联已有的小程序或快速创建小程序.已关联的小程序可被使用在自定义菜单和模版消息等场景中. ...

  2. 微信小程序跳到h5,h5在跳回小程序

    1.在微信小程序后台: 设置->开发设置->业务域名: 添加业务逻辑域名 2.在html5页面添加如下代码: <! -- html --> < script type=& ...

  3. 小程序跳转 H5 时 cookie 值处理问题

    小程序使用 <web-view></web-view> 内嵌 H5,当跳转至 H5 后,校验用户的登录状态是最重要的. 在做手中的项目 b.xx.com 时,需要调用另一个域名 ...

  4. 拼多多(7pdd)微信跳转h5页面打开app跳转任意url关注技术weixin://dl/business/?ticket

    拼多多微信跳转接口利用了微信官方的weixin://dl/business/?ticket技术,此类接口可以在官方接口中找到,分析代码如下: <title>拼多多</title> ...

  5. 微信JSAPI 公众号支付 H5支付以及APP支付 WEBAPI接口开发测试

    统一下单入口 调用该方法入口: public void WxPayAPI() { //string PayPrice ="99.9"; ////订单号 //string Payor ...

  6. 小程序 公众号/h5相互跳转-webview

    小程序与h5的跳转 前提小程序管理后台配置域名白名单,并且h5页面是嵌在小程序里面(相互跳的前提条件) 在业务域名中设置好访问的h5地址 微信官方web-view 介绍地址 https://devel ...

  7. Intent实现界面跳转、程序跳转

    一个程序往往由多个界面组成,界面之间的跳转,实质是Activity之间的跳转. 从当前程序跳转到其它程序,实质是启动了目标程序的入口Activity. Intent被称为意图,常用于组件之间的交互,可 ...

  8. h5做的app和原生app的区别

    之所以说h5做的app和原生app的区别,是因为一位博友的问题: 随着 h5 的普及,是不是不再需要开发 app ? 我的回答是要分业务需求,分场合而定. 比如现在的微信小程序这么流行,甚至也取代了不 ...

  9. 微信公众号开发之H5页面跳转到指定的小程序

    前言: 最近公司有一个这样的需要,需要从我们在现有的公众号H5页面中加一个跳转到第三方小程序的按钮.之前只知道小程序之间是可以相互跳转的,今天查阅了下微信开发文档原来现在H5网页也支持小程序之间的跳转 ...

  10. 微信小程序跳H5页面

    主页面:index.wxml 主页面:index.js ↑跳转到另一个wxml页面→recharge.wxml recharge.wxml web-view中设置跳转h5的链接,可以加上需要的参数: ...

随机推荐

  1. SVC服务的发布

    目录 服务的发布 发布的方式 1.NodePort 方法一:创建的时候直接指定类型 方法二:在线修改(将其他类型改为NodePort) 2.LoadBalance 3.Ingress(推荐/重点) 服 ...

  2. NC16615 [NOIP2008]传纸条

    题目链接 题目 题目描述 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个m行n列的矩阵,而小渊和小轩被安排在矩阵对角线的两端,因此,他们就无法直接 ...

  3. Detours 的使用

    Detours 是一个用于在 ARM, ARM64, X86, X64 和 IA64 机器上拦截二进制函数的库. Detours 最常用来拦截应用程序中的 win32 api 调用,比如添加调试工具. ...

  4. redis7源码分析:redis 单线程模型解析,一条get命令执行流程

    有了下文的梳理后 redis 启动流程 再来解析redis 在单线程模式下解析并处理客户端发来的命令 1. 当 client fd 可读时,会回调readQueryFromClient函数 void ...

  5. 【Android逆向】frida 破解 滚动的天空

    1. apk 安装到手机中 2. 玩十次之后,会提示 充值 3. adb shell dumpsys window | grep mCurrentFocus 查看一些当前activity是哪一个 是 ...

  6. React Native如何每次唤醒APP都执行一段代码

    最近想要做一个类似于淘宝每次打开会根据用户剪贴板内容弹出对应商品的功能.要完成这个功能需要每次唤醒APP都读取一次剪贴板. 1.监听 && 销毁 1 async componentDi ...

  7. shell之sort,uniq,cut,tr

    # sort主要是要理解域 # sort选项 -c 测试文件是否已经分类 -m 合并两个分类文件 -u 删除所有复制行 -o 存储sort结果的输出文件名 -b 使用域进行分类时,忽略第一个空格 -n ...

  8. 在矩池云使用ChatGLM-6B & ChatGLM2-6B

    ChatGLM-6B 和 ChatGLM2-6B都是基于 General Language Model (GLM) 架构的对话语言模型,是清华大学 KEG 实验室和智谱 AI 公司于 2023 年共同 ...

  9. eclipse c++ 安装

    eclipse及其插件安装 对于我这种被VS惯坏了的人来说,make file 非常不友好的,最近要在redhat 下面去编译c++动态库和应用程序,原有的工程是在window下面的,要到linux下 ...

  10. 【Azure Developer】使用 Azure PowerShell 执行 Azure 表存储操作时遇见的4个问题

    要使用PowerShell操作Azure的表存储,需要经过以下步骤: 1:必须安装 Az 和 AzTable 模块.安装命令为: #安装 Az 模块 Install-Module -Name Az - ...