当前位置： 首页 > news >正文

H5 uniapp 接入wx sdk

news 文章来源：https://blog.csdn.net/rrrrroy_Ha/article/details/134650700 2025/5/16 20:41:29

uniapp因为要兼容小程序等，会重写wx对象，导致引入的jweixin-1.6.0.js中对象不生效。

综合网络资料，有两种解决方案：

一，通过npm工具引入

npm install jweixin-module --save

 实际上是借用了wx的另一个对象jWeixin

//main.jsimport jWeixin from 'jweixin-module'
Vue.prototype.$wx = jWeixin
// index.jsthis.$wx.config({debug: true,appId,timestamp,nonceStr,signature,jsApiList,
})
this.$wx.ready(()=> {})

 参考文章：uniapp开发h5 调用微信sdk 全网最全指南！！！！ 血泪史！！!

二，手动引入

鉴于uniapp会重写wx的特性，在初始化后，可以再手动引入js，覆盖原有的wx对象

// 新增模板 template.html 
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><title><%= htmlWebpackPlugin.options.title %></title><!-- Open Graph data --><!-- <meta property="og:title" content="Title Here" /> --><!-- <meta property="og:url" content="http://www.example.com/" /> --><!-- <meta property="og:image" content="http://example.com/image.jpg" /> --><!-- <meta property="og:description" content="Description Here" /> --><script>var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +(coverSupport ? ', viewport-fit=cover' : '') +'" />')</script><link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" /></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --></body><!-- <script>window.wx = {}</script><script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> -->
</html>

// manifest.json
"h5" : {"optimization" : {"treeShaking" : {"enable" : true}},"sdkConfigs" : {"maps" : {}},"router" : {// "base" : "/process-client/","mode" : "history"},"devServer" : {"disableHostCheck" : true,"proxy" : {"/api" : {"target" : "http://xxx.xx.xxx.xxx:xxx","changeOrigin" : true,"secure" : false,"logLevel" : "debug","pathRewrite" : {"^/api" : ""}}},"https" : false},"template" : "template.html"}
// utils/wx-sdk.jsexport const createdScript = (callback) => {window.wx = nullconst script1 = document.createElement('script')script1.setAttribute('type', 'text/javascript')script1.setAttribute('src', 'https://res.wx.qq.com/open/js/jweixin-1.2.0.js')document.head.appendChild(script1)script1.onload = function () {window.wx = window.jWeixincallback && callback()}
}

// App.vue<script>
import { createdScript } from '@/utils/wx-sdk.js'
export default {onShow: function () {console.log('App Show')createdScript(() => {api({url: window.location.href}).then(([err, res]) => {if (err) {return}wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: res.appId, // 必填，企业微信的corpIDtimestamp: Number(res.timestamp), // 必填，生成签名的时间戳nonceStr: res.nonceStr, // 必填，生成签名的随机串signature: res.signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法jsApiList: []})})})},
}
</script>

相关文章：

H5 uniapp 接入wx sdk

uniapp因为要兼容小程序等&#xff0c;会重写wx对象&#xff0c;导致引入的jweixin-1.6.0.js中对象不生效。 综合网络资料&#xff0c;有两种解决方案&#xff1a; 一&#xff0c;通过npm工具引入 npm install jweixin-module --save 实际上是借用了wx的另一个对象jWeixin …...

编程日记 2023/12/1 20:43:33

ubuntu离线安装包

方便快捷方式 查看依赖 apt-cache depends 包名(gcc或language-pack-zh-hans)下载deb及其依赖包 # 下载.deb包到指定目录 cd /var/cache/apt/archives apt-get download $(apt-cache depends --recurse --no-recommends --no-suggests --no-conflicts --no-breaks --no-repl…...

编程日记 2023/12/1 20:40:31

电脑如何录音？适合初学者的详细教程

“电脑怎么录音呀&#xff1f;参加了一个学校举办的短视频大赛&#xff0c;视频拍摄都很顺利&#xff0c;音乐却出了问题&#xff0c;朋友说可以用电脑录制一段音乐应付一下&#xff0c;可是我不会操作&#xff0c;有哪位大佬教教我&#xff01;” 声音是一种强大的媒介&#…...

编程日记 2023/12/1 20:37:29

从零开始的C++（二十）

哈希&#xff1a; 用于unorder_map和unorder_set&#xff0c;其本身是一种思想&#xff0c;即通过一个值利用某种算法去映射到另一个值上。利用哈希思想具体实现的是哈希表。 哈希通常函数&#xff1a;插入和查找 1.插入&#xff1a;用某种算法算出插入值对应的插入下标。 …...

编程日记 2023/12/1 20:35:27

shell编程系列(8)-使用sed处理文本

文章目录 引言sed用法详解在文本中定位打印文本替换文本删除文本新增文本 结语 引言 在日常工作学习中我们都会遇到要编辑文本的场景&#xff0c;例如我们要用vim或者nano等命令去编辑代码&#xff0c;处理文本文件等&#xff0c;这些命令的特点都是需要我们进行交互式的实时处…...

编程日记 2023/12/1 20:34:26

NDK是什么？有什么用？需要掌握什么技术栈？

文章目录 NDK使用NDK的优点使用NDK需要掌握的知识C/C的编译原理C/C基本语法和编写能力原生共享库&#xff1a;原生静态库&#xff1a;Java 原生接口 (JNI)&#xff1a;应用二进制接口 (ABI)&#xff1a; CMakeLLDB参考 NDK NDK&#xff08;Native Development Kit&#xff0c;…...

编程日记 2023/12/1 20:33:26

《代码长寿经：程序员养生指南》

嘿&#xff0c;代码海洋的航行者们&#xff01;你们是否有过熬夜加班后&#xff0c;头发渐渐稀疏、眼镜度数直线上升&#xff0c;还不小心多了几斤“编码赘肉”的经历&#xff1f;程序员这个行业&#xff0c;似乎人均亚健康&#xff0c;有人戏称程序员的职业发展路径是&#xf…...

编程日记 2023/12/1 20:32:25

统计素数并求和（Python）

题目描述 统计素数并求和 本题要求统计给定整数 M M M 和 N N N 区间内素数的个数并对它们求和。 输入格式: 输入在一行中给出两个正整数 M M M 和 N ( 1 ≤ M ≤ N ≤ 500 ) N(1≤M≤N≤500) N(1≤M≤N≤500)。 输出格式: 在一行中顺序输出 M M M 和 N N N 区间内…...

编程日记 2023/12/1 20:29:20

新建的springboot项目中application.xml没有绿色小叶子（不可用）

经常有朋友会遇到新建了一个springboot项目&#xff0c;发现为啥我创建的application.xml配置文件不是绿色的&#xff1f;&#xff1f;&#xff1f; 下面教大家如何解决&#xff0c;这也是博主在做测试的时候遇到的&#xff1a; 将当前位置application.xml删掉&#xff0c;重新…...

编程日记 2023/12/1 20:27:19

powershell获取微软o365 21v日志

0x00 背景 o365 21v为o365的大陆版本&#xff0c;主要给国内用户使用。微软提供了powershell工具和接口获取云上日志。微软o365国内的代理目前是世纪互联。本文介绍如何用powershell和配置证书拉取云上日志。 0x01 实践 第一步&#xff0c;ip权限开通&#xff1a; 由世纪互联…...

编程日记 2023/12/1 20:22:14

整体迁移SVN仓库到新的windows服务器

一、背景 公司原有的SVN服务器年代比较久远经常出现重启情况&#xff0c;需要把SVN仓库重新迁移到新的服务器上&#xff0c;在网上也搜到过拷贝Repositories文件直接在新服务器覆盖的迁移方案&#xff0c;但考虑到原有的操作系统和现有的操作系统版本不一致&#xff0c;SVN版本…...

编程日记 2023/12/1 20:21:13

D365 CRM Power Platform 后端开发概览

博主十年前写的后端技术文章大部分都out-of-date啦&#xff0c;有些东西还能在PP系统中继续沿用&#xff0c;大部分东西都变成old fashion了。 博主后续争取多找些时间&#xff0c;将之前的后端开发文档都翻新一遍&#xff0c;争取与时俱进&#xff0c;让它们还能继续使用下个…...

编程日记 2023/12/1 20:20:12

【Java 并发编程】进程线程、lock、设计模式、线程池...

博主&#xff1a;_LJaXi Or 東方幻想郷 专栏&#xff1a; Java | 从入门到入坟 Java 并发编程 并发编程多线程的入门类和接口线程组和线程优先级线程的状态及主要转化方法线程间的通信重排序和 happens-beforevolatilesynchronized 与锁CAS 与原子操作AQS计划任务Stream 并行计…...

编程日记 2023/12/1 20:18:10

【axios】拦截器：axios.interceptors.request.use|axios.interceptors.response.use

文章目录 概述设置拦截器Axios 拦截器的实现任务注册任务编排任务调度 来源 概述 axios有请求拦截器&#xff08;request&#xff09;、响应拦截器&#xff08;response&#xff09;、axios自定义回调处理&#xff08;这里就是我们常用的地方&#xff0c;会将成功和失败的回调…...

编程日记 2023/12/1 20:16:08

webrtc兼容android4.x的一次探索

背景是我们有一个四年前的应用&#xff0c;该应用TargetVersion设定为16&#xff0c;这个应用四年前用了m70版本的webrtc。最近我升级到webrtc-m110&#xff0c;发现各种崩溃&#xff0c;把崩溃修好之后&#xff0c;发现黑屏了。为了处理黑屏&#xff0c;故有本文。 黑屏问题表…...

编程日记 2023/12/1 20:15:07

Kafka的存储机制和可靠性

文章目录 前言一、Kafka 存储选择二、Kafka 存储方案剖析三、Kafka 存储架构设计四、Kafka 日志系统架构设计4.1、Kafka日志目录布局4.2、Kafka磁盘数据存储 五、Kafka 可靠性5.1、Producer的可靠性保证5.1.1、kafka 配置为 CP(Consistency & Partition tolerance)系统5.1.…...

编程日记 2023/12/1 20:13:06

数据库时间类型之间的转换魔法

解锁时间数据的魔法 时间&#xff0c;是数据库中一个充满魔法的复杂表现形式。在这篇博客中&#xff0c;我们将探讨在数据库中时间戳&#xff08;timestamp&#xff09;、日期&#xff08;date&#xff09;、日期时间&#xff08;datetime&#xff09;和字符串之间的转换技巧&…...

编程日记 2023/12/1 20:12:05

conda和pip常用命令整理

文章目录 一、conda常用指令1. 更新2 .环境管理3. 包管理 二、pip常用命令1. 常用命令2. 国内镜像 一、conda常用指令 1. 更新 conda --version 或 conda -V #查看conda版本 conda update conda # 基本升级 conda update anaconda # 大的升级 conda upd…...

编程日记 2023/12/1 20:11:04

英语翻译小软件 ← Python实现

【程序描述】 利用Python实现一个英语翻译小软件。 ★ 当输入一个英文单词后&#xff0c;输出对应的中文意思。 ★ 当输入 q 时&#xff0c;退出程序。 ★ 当输入一个不存在的词条时&#xff0c;捕获异常&#xff0c;提示“No finding!”。【程序代码】 dict{&quo…...

编程日记 2023/12/1 20:10:03

将项目放到gitee上

参考 将IDEA中的项目上传到Gitee仓库中_哔哩哔哩_bilibili 如果cmd运行ssh不行的话&#xff0c;要换成git bash 如果初始化后的命令用不了&#xff0c;直接用idea项放右键&#xff0c;用git工具操作...

编程日记 2023/12/1 20:07:00

【机器视觉技术】：开创人工智能新时代

&#x1f3a5; 屿小夏 &#xff1a; 个人主页 &#x1f525;个人专栏 &#xff1a; IT杂谈 &#x1f304; 莫道桑榆晚&#xff0c;为霞尚满天&#xff01; 文章目录 &#x1f4d1; 前言&#x1f324;️ 机器视觉技术的实现☁️ 图像采集☁️ 图像处理☁️ 数据建模☁️应用展示…...

编程日记 2023/12/1 20:04:57

网易区块链,网易区块链赋能赣州脐橙数字藏品,数字指纹解决方案

目录 网易区块链 网易区块链赋能赣州脐橙数字藏品，助力革命老区三农之路 数字指纹解决方案 网易区块链 网易区块链成立于2017年，致力于Web3.0区块链技术的研发和应用。自主研发的区块链“天玄”引擎，在单链场景下支持每秒最高30万笔交易，单日可处理上链数据超10亿。 与…...

编程日记 2023/12/1 20:03:57

程序员如何兼职?

首先&#xff0c;写博客和制作短视频是一个好方法。想象一下&#xff0c;你是一个资深的程序员&#xff0c;而你的博客就像是一个个人课堂&#xff0c;帮助那些初入编程领域的人理解各种编程概念和技巧。你可以分享你的工作经验、解决问题的过程&#xff0c;甚至可以分享一些有…...

编程日记 2023/12/1 20:00:53

教育企业CRM选择技巧

教育行业的发展一波三折&#xff0c;要想在激烈的赛道脱颖而出&#xff0c;就需要有一套有效的CRM系统&#xff0c;来帮助教育机构提升招生效率、增加学员留存、提高教学质量。下面说说&#xff0c;教育企业选择CRM系统要具备的四大功能。 1、招生管理功能 教育机构的首要目标…...

编程日记 2023/12/1 19:59:52

算法：Java计算二叉树从根节点到叶子结点的最大路径和

要求从根节点到叶子结点的最大路径和&#xff0c;可以通过递归遍历二叉树来实现。对于二叉树中的每个节点&#xff0c;我们都可以考虑包含该节点的最大路径和。在递归的过程中&#xff0c;我们需要不断更新全局最大路径和。 具体的思路 递归函数设计&#xff1a; 设计一个递归函…...

编程日记 2023/12/1 19:58:52

袖珍可穿戴手持气象仪是什么？

随着科技的不断发展&#xff0c;我们身边的世界正在变得越来越智能化。近日&#xff0c;一款名为WX-SQ12可穿戴手持气象仪的科技新品引起了人们的广泛关注。这款气象仪不仅具有创新性的可穿戴设计&#xff0c;还具备强大的气象数据监测功能&#xff0c;让用户可以随时掌握天气变…...

编程日记 2023/12/1 19:56:50

【Azure 架构师学习笔记】- Azure Databricks (1) - 环境搭建

本文属于【Azure 架构师学习笔记】系列。 本文属于【Azure Databricks】系列。 前言 Databricks 已经成为了数据科学的必备工具&#xff0c;今时今日你已经很难抛开它来谈大数据&#xff0c;它常用于做复杂的ETL中的T&#xff0c; 数据分析&#xff0c;数据挖掘等&#xff0c;…...

编程日记 2023/12/1 19:55:49

无需繁琐编程 开启高效数据分析之旅！

不学编程做R统计分析&#xff1a;图形界面R Commander官方手册 R Commander是 R 的图形用户界面&#xff0c;不需要键入命令就可通过熟悉的菜单和对话框来访问 R 统计软件。 R 和 R Commander 均可免费安装于所有常见的操作系统——Windows、Mac OS X 和 Linux/UNIX。 本书作…...

编程日记 2023/12/1 19:53:46

JOSEF约瑟 剩余电流保护器 CLJ3-100A+LH30 导轨安装

CLJ3系列剩余电流动作继电器 系列型号&#xff1a; CLJ3-100A剩余电流动作继电器 CLJ3-250A剩余电流动作继电器 CLJ3-400A剩余电流动作继电器 CLJ3-630A剩余电流动作继电器 LH30剩余电流互感器 LH80剩余电流互感器 LH100剩余电流互感器 LH140剩余电流互感器 一、产品概…...

编程日记 2023/12/1 19:52:46

vue3自定义指令-文本超出宽度滚动

fontScroll.ts 指令文件 import { Directive } from vuefunction randomInt(min, max) {return Math.floor(Math.random() * (max - min 1)) min; } export default {// 可控制滚动速度&#xff0c;默认滚动速度20px/s,最低动画时长2smounted: (el, binding, vNode): void &…...

编程日记 2023/12/1 19:51:45