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>

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

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

相关文章

Python Scrapy分布式爬虫

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 在当今信息爆炸的时代&#xff0c;获取大规模数据对于许多应用至关重要。而分布式爬虫作为一种强大的工具&#xff0c;在处理大量数据采集和高效爬取方面展现了卓越的能力。 本文将深入探讨分布式爬虫的实际应用…

springboot中如何用连接池的形式去连接sftp代码详细实例?

在Spring Boot中&#xff0c;你可以使用spring-integration-sftp库来与SFTP服务器建立连接并进行文件传输。这个库提供了连接池的支持&#xff0c;以便更有效地管理和重用SFTP连接。 首先&#xff0c;确保在你的Spring Boot项目中添加以下依赖&#xff1a; xml Copy code <…

Java数据结构《队列和邻接矩阵实现图的广度优先搜索》题目

一、前言&#xff1a; 这是怀化学院的&#xff1a;Java数据结构中的一道难度偏难的一道编程题(此方法为博主自己研究&#xff0c;问题基本解决&#xff0c;若有bug欢迎下方评论提出意见&#xff0c;我会第一时间改进代码&#xff0c;谢谢&#xff01;) 后面其他编程题只要我写完…

redis相关题

1 什么是Redis Redis(Remote Dictionary Server) 是⼀个使⽤ C 语⾔编写的&#xff0c;开源的&#xff08;BSD许可&#xff09;⾼性能⾮关系型&#xff08;NoSQL&#xff09;的键值对数据库。Redis 可以存储键和五种不同类型的值之间的映射。键的类型只能为字符串&#xff0c;…

mysql相关查询语法(自用)

mysql 条件 if WHERE IF(条件, true执行条件, false执行条件 ) SELECT * FROM book WHERE IF(price > 120, btypeid10, btypeid11);case when SELECTpp_.id,pp_.project_name FROMpv_project pp_CASE 1WHEN trueTHEN1 1ELSEpp_.project_name bbbbb END 日期相关 …

C++作业3

设计一个Per类&#xff0c;类中包含私有成员:姓名、年龄、指针成员身高、体重&#xff0c;再设计一个Stu类&#xff0c;类中包含私有成员:成绩、Per类对象p1&#xff0c;设计这两个类的构造函数、析构函数和拷贝构造函数。 代码&#xff1a; #include <iostream>using n…

Flutter页面刷新失败?看看是不是这个原因

文章目录 问题描述解决办法在控件A中定义回调函数在页面中使用控件A 原因分析回顾问题原因分析 setState使用注意事项上下文正确性异步更新避免深层嵌套避免频繁调用避免在 build 方法中调用避免在 dispose 方法中调用 问题描述 我用flutter开发了一个页面&#xff0c;页面上有…

Java SpringBoot Controller常见写法

文章目录 环境Controller调用脚本运行结果总结 环境 系统: windows 11 工具: java, idea, git bash Controller 接口常见有以下几种方式 其中&#xff1a; Tobj 调用脚本 我的是windows 系统&#xff0c;使用 git bash 窗口运行, 用 cmd 或者 power shell 会有问题 curl …

8、Qt中定时器的使用

一、说明 在Qt中常使用如下两种定时器 1、使用QObiect类的定时器事件QTimerEvent 与定时器相关的函数有&#xff1a;startTimer()、timeEvent()、killTimer()&#xff1b;startTimer(int interval)函数开始一个定时器并返回定时器ID&#xff0c;如果不能开始一个定时器&…

手把手教你Spring Security Oauth2自定义授权模式

目录 前言1、自定义认证对象2、自定义TokenGranter3、自定义AuthenticationProvider4、配置自定义AuthenticationProvider、自定义TokenGranter5、配置客户端授权模式6、测试 前言 在Oauth2中&#xff0c;提供了几种基本的认证模式&#xff0c;有密码模式、客户端模式、授权码…

传统算法:使用 Pygame 实现选择排序

使用 Pygame 模块实现了选择排序的动画演示。首先,它生成一个包含随机整数的数组,并通过 Pygame 在屏幕上绘制这个数组的条形图。接着,通过选择排序算法对数组进行排序,动画效果可视化每一步的排序过程。在排序的过程中,程序找到未排序部分的最小元素,并将其与未排序部分…

数据结构 / 队列 / 循环队列

1. 定义 为充分利用向量空间&#xff0c;克服假溢出现象的方法是&#xff1a;将向量空间想象为一个首尾相接的圆环&#xff0c;并称这种向量为循环向量。存储在其中的队列称为循环队列&#xff08;Circular Queue&#xff09;。循环队列是把顺序队列首尾相连&#xff0c;把存储…

前端知识笔记(十二)—————前端面试容易问到的问题总结

1.$(document).ready()方法和window.onload有什么区别&#xff1f; 执行时间不同&#xff1a;window.onload必须等到页面内的所有元素&#xff08;&#xff09;加载完毕后才能执行。 $(document).ready()是页面DOM结构绘制完毕后就执行&#xff0c;不必等到加载完毕 执行次数…

字符集与编码规则

字符集 强调&#xff1a;UTF-8是编码规则&#xff0c;不是字符集 过程&#xff1a; 字符 --查表获得对应数字&#xff0c;--编码 解码---查表----获取字符 ASCII码 &#xff1a;一个字节 8bit GBK字符集&#xff08;windows系统默认使用的GBK,系统显示ANSI&#xff09; 存…

西南科技大学信号与系统A实验一(信号的产生与时域运算)

目录 一、实验目的 二、实验原理 三、实验内容 四、思考题 一、实验目的 1、 掌握用matlab软件产生基本信号的方法。 2、 应用matlab软件实现信号的加、减、乘、反褶、移位、尺度变换及卷积运算 二、实验原理 (一) 产生信号波形的方法 利用Matlab软件的信号处…

QLabel实现点击事件

主要是通过安装过滤器&#xff0c;实现点击事件。 事件过滤器的操作&#xff1a; 首先给需要添加事件过滤器的部件注册监听对象&#xff1b; 对象名->installEventFilter(true); 重写eventFilter(QObject *obj, QEvent *event)函数进行处理。 MainWindow::MainWindow(QW…

Java泛型核心知识总结

目录 Java 泛型核心知识总结泛型什么是泛型&#xff1f;有什么用&#xff1f;泛型有哪些限制&#xff1f;为什么&#xff1f;项目中哪里用到了泛型&#xff1f;什么是类型擦除&#xff1f;什么是桥方法&#xff1f; 通配符什么是通配符&#xff1f;有什么作用&#xff1f;通配符…

四、Lua循环

文章目录 一、while(循环条件)二、for&#xff08;一&#xff09;数值for&#xff08;二&#xff09;泛型for&#xff08;三&#xff09;repeat util 既然同为编程语言&#xff0c;那么控制逻辑里的循环就不能缺少&#xff0c;它可以帮助我们实现有规律的重复操作&#xff0c;而…

AIGC-文生视频

stable diffusion&#xff1a; stable diffusion原理解读通俗易懂&#xff0c;史诗级万字爆肝长文&#xff0c;喂到你嘴里 - 知乎个人网站一、前言&#xff08;可跳过&#xff09;hello&#xff0c;大家好我是 Tian-Feng&#xff0c;今天介绍一些stable diffusion的原理&#…

【Python基础】字符集与字符编码

先行了解的知识&#xff1a; 1. 编码和解码 计算机内存储的信息都是二进制表示。 我们看到的英文&#xff0c;数字&#xff0c;汉字等在计算机内如何表示&#xff0c;那就需要编码 计算机内存储的信息需要解析出来&#xff0c;那就是解码 2.字符集与分类 什么是字符集&#xf…