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

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.lryc.cn/news/250013.html

相关文章:

  • ubuntu离线安装包
  • 电脑如何录音?适合初学者的详细教程
  • 从零开始的C++(二十)
  • shell编程系列(8)-使用sed处理文本
  • NDK是什么?有什么用?需要掌握什么技术栈?
  • 《代码长寿经:程序员养生指南》
  • 统计素数并求和(Python)
  • 新建的springboot项目中application.xml没有绿色小叶子(不可用)
  • powershell获取微软o365 21v日志
  • 整体迁移SVN仓库到新的windows服务器
  • D365 CRM Power Platform 后端开发概览
  • 【Java 并发编程】进程线程、lock、设计模式、线程池...
  • 【axios】拦截器:axios.interceptors.request.use|axios.interceptors.response.use
  • webrtc兼容android4.x的一次探索
  • Kafka的存储机制和可靠性
  • 数据库时间类型之间的转换魔法
  • conda和pip常用命令整理
  • 英语翻译小软件 ← Python实现
  • 将项目放到gitee上
  • 【机器视觉技术】:开创人工智能新时代
  • 网易区块链,网易区块链赋能赣州脐橙数字藏品,数字指纹解决方案
  • 程序员如何兼职?
  • 教育企业CRM选择技巧
  • 算法:Java计算二叉树从根节点到叶子结点的最大路径和
  • 袖珍可穿戴手持气象仪是什么?
  • 【Azure 架构师学习笔记】- Azure Databricks (1) - 环境搭建
  • 无需繁琐编程 开启高效数据分析之旅!
  • JOSEF约瑟 剩余电流保护器 CLJ3-100A+LH30 导轨安装
  • vue3自定义指令-文本超出宽度滚动
  • uniapp在H5端实现PDF和视频的上传、预览、下载