记录--微信小程序跳转H5、小程序、App

news2024/11/27 2:50:42

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

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

跳转H5

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

跳转小程序

  • 参考 navigator 👍 、wx.navigateToMiniProgram ❌ 、Taro.navigateToMiniProgram ❌
// 方式一:似乎不能用了,有哪位好心人能用的话求咨询
<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

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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/143311.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

axios:基本使用、常用配置项、create方法、请求和响应拦截器、取消请求

axios的使用一、发送ajax请求1.axios函数发送通用请求2.精简版GET请求3.精简版POST请求二、配置通用属性&#xff08;create方法&#xff09;三、请求和响应拦截器1.请求拦截器2.响应拦截器四、取消请求五、axios源码解析官网&#xff1a;https://github.com/axios/axios 一、…

GitHub桌面版和汉化包,使用详细(GitHub Desktop安装,github软件汉化包详细使用过程)

github大家都比较熟悉&#xff0c;而它的桌面版使用则更加方便&#xff08;GitHub桌面版就是GitHub Desktop&#xff0c;它们的数据都是相通的&#xff09;&#xff0c;但是软件是英文版本&#xff0c;使用起来不太方便&#xff0c;这里为大家提供了该软件和汉化包&#xff0c;…

记一次靶场实战【网络安全】

前言 【一一帮助安全学习一一】 ①网络安全学习路线 ②20份渗透测试电子书 ③安全攻防357页笔记 ④50份安全攻防面试指南 ⑤安全红队渗透工具包 ⑥网络安全必备书籍 ⑦100个漏洞实战案例 ⑧安全大厂内部视频资源 ⑨历年CTF夺旗赛题解析 一、信息收集 先用nmap扫一下ip。 锁定…

多元线性回归分析

回归分析&#xff1a;研究X和Y之间相关性的分析回归分析是数据分析中最基础也是最重要的分析工具&#xff0c;绝大多数的数据分析问题&#xff0c;都可以使用回归的思想来解决。回归分析的任务就是&#xff0c;通过研究自变量X和因变量Y的相关关系&#xff0c;尝试去解释Y的形成…

gumbel-softmax的使用、课程学习的使用、有监督的对比学习的使用、无监督的对比学习的使用

一、gumbel-softmax的使用 gumbel-softmax里面的 τ\tauτ值越接近无穷获得的向量越接近一个均匀分布的向量&#xff1b;τ\tauτ值越接近0获得的向量越接近一个one-hard vector&#xff1b;τ\tauτ值越接近1则gumbel-softmax就和softmax越类似 # score&#xff1a;代表序列…

Ubuntu服务器使用NTP功能同步时间

前提&#xff1a; 1. 要明确自己的需求&#xff0c;是设计一个NTP服务器&#xff0c;然后给内网的其他用户提供NTP服务&#xff1f; 2. 还是发现自己Ubuntu系统时间错误&#xff0c;想要同步一个时间进来&#xff1f; 如果是2&#xff0c;继续往下看吧&#xff0c;如果是1&am…

2021年一篇强人工智能论文,基于AGI Brain改进的二代版本

AGI Brain II: The Upgraded Version with Increased Versatility Index返回论文和资料目录 1.论文简介 论文基于19年提出的第一代AGI Brain I 改进。主要有两点改进&#xff0c;1.提出一个AGI指标&#xff0c;2.用Mamdani模糊推理联想记忆代替原本的神经网络NN表示外显记忆&…

字节跳动最爱考的前端面试题:计算机网络基础

注意&#xff1a;每道题前面出现的 (xx) 数字代表这道题出现的频次&#xff0c;此 计算机网络 基础是基于 30 篇前端面经整理出的问题和对应的回答、参考链接等。文章内容为拿到 Offer 的本人整理。 &#xff08;3&#xff09;问&#xff1a;HTTP 缓存 HTTP 缓存又分为强缓存和…

ArcGIS基础实验操作100例--实验55栅格与ASCII转换

本实验专栏参考自汤国安教授《地理信息系统基础实验操作100例》一书 实验平台&#xff1a;ArcGIS 10.6 实验数据&#xff1a;请访问实验1&#xff08;传送门&#xff09; 高级编辑篇--实验55 栅格与ASCII转换 目录 一、实验背景 二、实验数据 三、实验步骤 &#xff08;1&a…

nodejs+vue+element+eachers构建开源项目大型连续剧(3)建立前端基础项目(暂时用的vue2框架)

书接上回&#xff0c;在第二集我们成功安装了mysql数据库&#xff0c;并通过nodejs服务器关联到数据库&#xff0c;并成功更改了数据库中的数据。这一集呢&#xff0c;主要是进行一个前端vue2项目的构建&#xff0c;后面如果大家想要看vue3的话可以后续更新&#xff0c;毕竟现在…

计算机原理二_操作系统概述

目录儿三、操作系统概述3.1 操作系统的基本概念3.1.1 操作系统的概念3.1.2 操作系统的目标和功能3.1.2.1 目标3.1.2.2 功能3.1.3 操作系统的特征3.2 操作系统的发展与分类3.2.1 分类3.3 操作系统的运行环境3.3.1 操作系统的运行机制3.3.1.1 用户态、核心态3.3.1.2 时钟与中断3.…

SLAM初探

SLAM初探 1.视觉SLAM框架 整个视觉SLAM包括以下流程 传感器信息读取&#xff0c;主要是相机图像信息的读取和处理前端视觉里程计&#xff0c;它的任务是估算相邻图像之间相机的运动和局部的地图后端优化&#xff0c;接受不同时刻视觉里程计输出的相机位姿以及回环检测的信息&…

【C++高阶数据结构】LRU

​ &#x1f3c6;个人主页&#xff1a;企鹅不叫的博客 ​ &#x1f308;专栏 C语言初阶和进阶C项目Leetcode刷题初阶数据结构与算法C初阶和进阶《深入理解计算机操作系统》《高质量C/C编程》Linux ⭐️ 博主码云gitee链接&#xff1a;代码仓库地址 ⚡若有帮助可以【关注点赞收藏…

LeetCode刷题复盘笔记—一文搞懂动态规划之583. 两个字符串的删除操作问题(动态规划系列第四十篇)

今日主要总结一下动态规划的一道题目&#xff0c;583. 两个字符串的删除操作 题目&#xff1a;583. 两个字符串的删除操作 Leetcode题目地址 题目描述&#xff1a; 给定两个单词 word1 和 word2 &#xff0c;返回使得 word1 和 word2 相同所需的最小步数。 每步 可以删除任意…

ArcGIS基础实验操作100例--实验56 TIFF与GRID栅格转换

本实验专栏参考自汤国安教授《地理信息系统基础实验操作100例》一书 实验平台&#xff1a;ArcGIS 10.6 实验数据&#xff1a;请访问实验1&#xff08;传送门&#xff09; 高级编辑篇--实验56 TIFF与GRID栅格转换 目录 一、实验背景 二、实验数据 三、实验步骤 &#xff08;…

orika 工具下划线转驼峰不同字段名映射

1.问题: 业务需要把第三方接口的带下划线的字段规范为驼峰的字段 第三方接口的bean对象: public class ObjectsDetail extends XMLElementData implements Serializable {private static final long serialVersionUID 5080447582610246168L;private String objectclass;priv…

用300行Python代码实现一个人脸识别系统源码,基于dlib

用300行Python代码实现一个人脸识别系统 完整代码下载地址&#xff1a;用300行Python代码实现一个人脸识别系统源码&#xff0c;基于dlib 今天我们来python实现一个人脸识别系统&#xff0c;主要是借助了dlib这个库&#xff0c;相当于我们直接调用现成的库来进行人脸识别&…

科技云报道:“大建设”时期,AI算力何去何从?

科技云报道原创。 算力就是生产力&#xff0c;得算力者得天下。 随着新一代人工智能技术的快速发展和突破&#xff0c;以深度学习计算模式为主的AI算力需求呈指数级增长。 数据显示&#xff0c;在1960到2010年间&#xff0c;AI的计算复杂度每两年翻一番&#xff1b;在2010到2…

fastposter v2.11.0 天花板级的海报生成器

fastposter v2.11.0 天花板级的海报生成器 &#x1f525;&#x1f525;&#x1f525; fastposter海报生成器是一款快速开发海报的工具。只需上传一张背景图&#xff0c;在对应的位置放上组件&#xff08;文字、图片、二维&#x1f434;、头像&#xff09;即可生成海报。 点击代…