H5 uniapp 接入wx sdk
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因为要兼容小程序等,会重写wx对象,导致引入的jweixin-1.6.0.js中对象不生效。 综合网络资料,有两种解决方案: 一,通过npm工具引入 npm install jweixin-module --save 实际上是借用了wx的另一个对象jWeixin …...
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…...
电脑如何录音?适合初学者的详细教程
“电脑怎么录音呀?参加了一个学校举办的短视频大赛,视频拍摄都很顺利,音乐却出了问题,朋友说可以用电脑录制一段音乐应付一下,可是我不会操作,有哪位大佬教教我!” 声音是一种强大的媒介&#…...
从零开始的C++(二十)
哈希: 用于unorder_map和unorder_set,其本身是一种思想,即通过一个值利用某种算法去映射到另一个值上。利用哈希思想具体实现的是哈希表。 哈希通常函数:插入和查找 1.插入:用某种算法算出插入值对应的插入下标。 …...
shell编程系列(8)-使用sed处理文本
文章目录 引言sed用法详解在文本中定位打印文本替换文本删除文本新增文本 结语 引言 在日常工作学习中我们都会遇到要编辑文本的场景,例如我们要用vim或者nano等命令去编辑代码,处理文本文件等,这些命令的特点都是需要我们进行交互式的实时处…...
NDK是什么?有什么用?需要掌握什么技术栈?
文章目录 NDK使用NDK的优点使用NDK需要掌握的知识C/C的编译原理C/C基本语法和编写能力原生共享库:原生静态库:Java 原生接口 (JNI):应用二进制接口 (ABI): CMakeLLDB参考 NDK NDK(Native Development Kit,…...
《代码长寿经:程序员养生指南》
嘿,代码海洋的航行者们!你们是否有过熬夜加班后,头发渐渐稀疏、眼镜度数直线上升,还不小心多了几斤“编码赘肉”的经历?程序员这个行业,似乎人均亚健康,有人戏称程序员的职业发展路径是…...
统计素数并求和(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 区间内…...
新建的springboot项目中application.xml没有绿色小叶子(不可用)
经常有朋友会遇到新建了一个springboot项目,发现为啥我创建的application.xml配置文件不是绿色的??? 下面教大家如何解决,这也是博主在做测试的时候遇到的: 将当前位置application.xml删掉,重新…...
powershell获取微软o365 21v日志
0x00 背景 o365 21v为o365的大陆版本,主要给国内用户使用。微软提供了powershell工具和接口获取云上日志。微软o365国内的代理目前是世纪互联。本文介绍如何用powershell和配置证书拉取云上日志。 0x01 实践 第一步,ip权限开通: 由世纪互联…...
整体迁移SVN仓库到新的windows服务器
一、背景 公司原有的SVN服务器年代比较久远经常出现重启情况,需要把SVN仓库重新迁移到新的服务器上,在网上也搜到过拷贝Repositories文件直接在新服务器覆盖的迁移方案,但考虑到原有的操作系统和现有的操作系统版本不一致,SVN版本…...
D365 CRM Power Platform 后端开发概览
博主十年前写的后端技术文章大部分都out-of-date啦,有些东西还能在PP系统中继续沿用,大部分东西都变成old fashion了。 博主后续争取多找些时间,将之前的后端开发文档都翻新一遍,争取与时俱进,让它们还能继续使用下个…...
【Java 并发编程】进程线程、lock、设计模式、线程池...
博主:_LJaXi Or 東方幻想郷 专栏: Java | 从入门到入坟 Java 并发编程 并发编程多线程的入门类和接口线程组和线程优先级线程的状态及主要转化方法线程间的通信重排序和 happens-beforevolatilesynchronized 与锁CAS 与原子操作AQS计划任务Stream 并行计…...
【axios】拦截器:axios.interceptors.request.use|axios.interceptors.response.use
文章目录 概述设置拦截器Axios 拦截器的实现任务注册任务编排任务调度 来源 概述 axios有请求拦截器(request)、响应拦截器(response)、axios自定义回调处理(这里就是我们常用的地方,会将成功和失败的回调…...
webrtc兼容android4.x的一次探索
背景是我们有一个四年前的应用,该应用TargetVersion设定为16,这个应用四年前用了m70版本的webrtc。最近我升级到webrtc-m110,发现各种崩溃,把崩溃修好之后,发现黑屏了。为了处理黑屏,故有本文。 黑屏问题表…...
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.…...
数据库时间类型之间的转换魔法
解锁时间数据的魔法 时间,是数据库中一个充满魔法的复杂表现形式。在这篇博客中,我们将探讨在数据库中时间戳(timestamp)、日期(date)、日期时间(datetime)和字符串之间的转换技巧&…...
conda和pip常用命令整理
文章目录 一、conda常用指令1. 更新2 .环境管理3. 包管理 二、pip常用命令1. 常用命令2. 国内镜像 一、conda常用指令 1. 更新 conda --version 或 conda -V #查看conda版本 conda update conda # 基本升级 conda update anaconda # 大的升级 conda upd…...
英语翻译小软件 ← Python实现
【程序描述】 利用Python实现一个英语翻译小软件。 ★ 当输入一个英文单词后,输出对应的中文意思。 ★ 当输入 q 时,退出程序。 ★ 当输入一个不存在的词条时,捕获异常,提示“No finding!”。【程序代码】 dict{&quo…...
将项目放到gitee上
参考 将IDEA中的项目上传到Gitee仓库中_哔哩哔哩_bilibili 如果cmd运行ssh不行的话,要换成git bash 如果初始化后的命令用不了,直接用idea项放右键,用git工具操作...
谷歌浏览器插件
项目中有时候会用到插件 sync-cookie-extension1.0.0:开发环境同步测试 cookie 至 localhost,便于本地请求服务携带 cookie 参考地址:https://juejin.cn/post/7139354571712757767 里面有源码下载下来,加在到扩展即可使用FeHelp…...
TDengine 快速体验(Docker 镜像方式)
简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能,本节首先介绍如何通过 Docker 快速体验 TDengine,然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker,请使用 安装包的方式快…...
React Native 导航系统实战(React Navigation)
导航系统实战(React Navigation) React Navigation 是 React Native 应用中最常用的导航库之一,它提供了多种导航模式,如堆栈导航(Stack Navigator)、标签导航(Tab Navigator)和抽屉…...
前端倒计时误差!
提示:记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来?二、五大解决方案1. 动态校准法(基础版)2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...
linux arm系统烧录
1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 (忘了有没有这步了 估计有) 刷机程序 和 镜像 就不提供了。要刷的时…...
Caliper 配置文件解析:config.yaml
Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...
力扣-35.搜索插入位置
题目描述 给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引。如果目标值不存在于数组中,返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...
Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?
在大数据处理领域,Hive 作为 Hadoop 生态中重要的数据仓库工具,其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式,很多开发者常常陷入选择困境。本文将从底…...
免费数学几何作图web平台
光锐软件免费数学工具,maths,数学制图,数学作图,几何作图,几何,AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...
Web中间件--tomcat学习
Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机,它可以执行Java字节码。Java虚拟机是Java平台的一部分,Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...
