vue + weixin-js-sdk 的坑

最新推荐文章于 2024-04-29 14:42:38 发布
最新推荐文章于 2024-04-29 14:42:38 发布
阅读量894 收藏 1
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40274290/article/details/110002985
版权

在这里插入图片描述
在main里引入weixin-js-sdk
在这里插入图片描述
开发者工具打印 没有问题 随后调用各种微信的api开发

部署代码后 在公众号里打开H5 报错 wx is not defined
在这里插入图片描述
在网上找了M久后 ，修改引入方式
在这里插入图片描述
开发者工具报错 wx is not defined
在这里插入图片描述
部署后 正常允许

JSQiong
关注
专栏目录
vue 引入weixin-js-sdk报错： import wx from ‘weixin-js-sdk‘ wx=‘undefined‘
且听风吟的博客
02-27 2014
vue 引入weixin-js-sdk报错： import wx from ‘weixin-js-sdk‘ wx=‘undefined‘
vue中使用jweixin-module
qinshi501的博客
01-28 2598
但是通常，你可能直接下载官方的jweixin-1.x.x.js文件，而不是通过npm安装一个模块，因为微信JS-SDK并不总是作为一个标准的npm包提供。如果你选择下载jweixin-1.x.x.js文件，你可以将它放在你的项目的静态资源文件夹中（例如public/js/），然后在你的index.html文件中通过标签引入它。在你的Vue组件中，你需要发起一个请求到你的后端服务器，以获取用于微信JS-SDK的签名。签名是基于URL的，所以每次页面URL变化时，你可能都需要重新获取签名。
vue 引入 weixin-js-sdk
for what
08-11 1846
npm install weixin-js-sdk import 'wx' from 'weixin-js-sdk' 基本就是这样，但是在引入之后调用wx是undefined 查看了npm引用包后，将 import 改为 require，但是仍然是undefined。查找了关键词“VUE使wx 包undefined”，找到一个 vue+typescript 的坑，解决方法是： const wx = window['wx'] 最终写法： varwx=require('weixin-js-sd...
vue 项目如何引入微信sdk接口的方法
11-29
做微信的网页基本上都要接入微信的sdk，我在做的时候，也颇费了一番功夫，然后就想记录一下，供自己日后翻阅，以及让有需要的朋友可以做一下参考，如果喜欢的可以点波赞，或者关注一下，希望可以帮到大家。 安装sdk npm install weixin-js-sdk --save 开始之前大家可以先读一读微信公众号的 接入文档 ，vue是单页面项目，比如你想要接入微信分享功能，分享功能在每个路由地址都要有，因为每个路由的url是不一样的，搜易就需要在每个路由地址都引入一遍。 整体步骤： vue引入sdk的话，就是在路由组件里面的，组件生命周期的：creatd()和mounted()里面放代码。 用伪
vue3中使用jweixin-module报错
qq_36093530的博客
03-01 6422
在vue3中使用： var jweixin = require('jweixin-module'); 会编译报错：require is not defined,没有require模块，改成import的话，由于jweixin-module不支持export写法，所以引入也不能成功. 解决： 使用第三方封装的jdk: weixin-js-sdk npm install weixin-js-sdk -S import jweixin from 'weixin-js-sdk' ...
vue 中使用weixin-js-sdk实现微信分享
前端程序猿的博客
01-25 3820
vue 中使用weixin-js-sdk实现微信分享 安装 引入 配置 使用
weixin-js-sdk常见使用方法（vue）
monkey的博客
11-07 4462
1.安装npm install weixin-js-sdk 2.判断是否是在微信浏览器中 env.js <script> var ua = navigator.userAgent.toLowerCase(); var isWeixin = ua.indexOf('micromessenger') != -1; var isAndroid = ua.indexOf('androi...
vue开发微信公众号---JS-SDK授权以及api的使用方式_公众号jssdk api文档
最新发布
2401_84436095的博客
04-29 636
并且把这个附录1给他看即可。最后的结果就是他会做出一个接口出来，你只需传入一个url(当前网址的前缀部分)，即可获得appId、timestamp、nonceStr、signature这四个内容。在附录1中记录了js-sdk的权限签名算法，如果你是前后端分离开发的前端人员，我的前端代码参考如下：(需要给后端人员提供appId和appsecret)看到步骤三、步骤四、步骤五我就遇到了问题，步骤三的配置数据从哪里来？------每一次使用jssdkapi的某个功能都需要走一下这个流程。
vue 使用weixin-sdk 录音功能
cream
08-30 5438
刚毕业，进入公司，遇到的第一个vue项目，使用weixin-sdk-js 做录音功能，于是开始了研究之旅，经过的许久的研究，终于是禅悟出了一点皮毛 多次试验，失败，总结：weixin-js-sdk 是要在线上使用的，而且只能在微信上使用 多说不易，上干货 献上官方使用说明文档地址 https://mp.weixin.qq.com/wiki?t=resource/res_main&amp;...
Vue中使用 j s
weixin_44500533的博客
10-28 329
在Vue中新建.js文件: 将js代码封装在函数中: function love() { //写入js代码 } //暴露出来 export { love } import {love} from '../plugins/love.js' //写入函数 mounted: function () { return love() } ...
微信js-sdk获取接口信息时，总提示wx is undefined
小爷吃饭的博客
04-30 1294
微信js-sdk获取接口信息时，总提示wx is undefined，文件也引入了&lt;script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"&gt;&lt;/script&gt;后来发现因为引入的先后顺序和缓存原因，当前引入的js未生效，在这之前加上：  &lt;script type="text/javascript"&gt; ...
Vue.js 安装
weixin_46078289的博客
05-17 67
1.可以在 Vue.js 的官网上直接下载 vue.min.js 下载官网： https://cn.vuejs.org/ 2.使用 CDN 方法 例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--view层 模板--&
referenceerror wx is not defined 微信JsSdk开发
weixin_33962923的博客
10-27 1497
如果你和我一样遇到了“referenceerror wx is not defined”错误，很有可能是jweixin-1.0.0.js与你其它某js冲突。 解决办法： &lt;script type="text/javascript"&gt; define = null; require = null; &lt;/script&gt; &lt;script src...
vue介绍
weixin_45624196的博客
11-25 134
#vue介绍 vue介绍 介绍 (vue官网)[https://cn.vuejs.org/]国人尤雨溪创建。15年起短短两年发展起来，github从1k start到70k。到目前150k 侧重view层。基于js es5语法。渲染性能较好。 argular 出现到最早到，企业级，语法传统，学习成本略高，国内用户较少。 react 也比较流行。国内跟view分庭抗礼。 Vue及其生态 vue.j...
vue使用微信JS-SDK
javascript和jq设置金额整数与小数点后面的字体大小
08-16 3612
首先先查阅官方微信js-SDK，根据官方提示引入sdk，使用sdk vue npm 引入微信sdk，这个是优化封装。修正了微信js-sdk官方1.6.0的bug，并针对iOS系统url验证签名错误进行优化。 npm i jweixin-1.6.0 在需要分享的页面引入 import wx from 'jweixin-1.6.0' 这里我做了sdk请求的封装，就不用每个页面都去请求config配置的写法了，直接在需要的页面引入的sdk，把参数带进去就可以了，我在vue的utils文件夹里面新增
vue 配置 微信SDK wifi功能
echo_Ae的博客
04-27 2352
// 自行去微信sdk配置configWXDeviceWiFi wx.config({ .... jsApiList: [ ... 'configWXDeviceWiFi' ] }) created() { setTimeout(() => { this.wxInvoke() }, 1000) }, methods: { ...
uniapp(vue3) - 微信小程序平台使用import引入外部js文件出现undefined，正常引入js文件(sdk插件)文件路径正确但console.log控制台打印时却是undefined
高级前端工程师
08-23 4282
uniapp在vue里面用import引入js文件,结果为undefined，uniappvue3.0 通过import引入外部js，vue3+ts import引入第三方js文件报错解决方法，uniapp引入第三方js插件，uniapp引用外部js_Uniapp怎么引入外部js，uniapp引用外部js报错undefined，uniapp 引入第三方js报错undefined，uniapp vue3.0 通过import引入外部js(sdk)文件undefined，uniapp(vue3) - 微信小程序
微信分享——js-sdk接口的爬坑分享
weixin_42855542的博客
12-19 413
有好东西，大家要一起分享 也是公司运营部门在某些时候做推广的一些方式。 那么我们平时用的这些分享接口怎么实现呢？ 以下为微信公众平台为我们提供的微信页面开发js-sdk说明文档： https://mp.weixin.qq.com/wiki?t=resource/res_main&amp;id=mp1421141115 我们简单的实现文档提供的步骤： 再次我直接进入调用js文件 关于1.1.3的...
vue 中使用微信分享接口（简单实用）
weixin_44002432的博客
11-07 1112
前言 开发微信小程序时，基本上都要接入微信的SDK，而微信也提供了非常多的接口供我们去完成我们想要的功能。微信分享功能常常是我们在开发中常见的需求之一，本文将围绕微信分享接口使用展开，给自己以后碰到需求是查阅的同时，也希望对需要的朋友提供帮组。 封装微信分享接口 开始之前大家可以先读一读官方微信公众号的接入文档，毕竟官方的才是最权威的。 安装 npm install weixin-js-sd...
weixin-js-sdk 如何在 vue3 + ts 项目中引入和使用
06-03
在Vue3 + TypeScript项目中使用weixin-js-sdk，你需要执行以下步骤： 1. 安装weixin-js-sdk ``` npm install weixin-js-sdk ``` 2. 在组件中引入weixin-js-sdk ``` import wx from 'weixin-js-sdk'; ``` 3. 在组件mounted钩子函数中初始化JS-SDK ``` mounted() { this.initJSSDK(); } ``` 4. 编写初始化JS-SDK的方法 ``` async initJSSDK() { const res = await this.$http.get('/api/signature'); wx.config({ debug: false, appId: res.data.appId, timestamp: res.data.timestamp, nonceStr: res.data.nonceStr, signature: res.data.signature, jsApiList: ['chooseImage', 'uploadImage'] }); } ``` 上面的代码中，我们从后端获取了一个签名，然后使用wx.config方法进行JS-SDK的初始化。其中，debug表示是否开启调试模式，appId、timestamp、nonceStr、signature是签名相关的参数，jsApiList是需要使用的微信JS接口列表。 5. 在需要使用微信JS接口的地方调用相应的方法 ``` async chooseImage() { const res = await this.$http.get('/api/upload'); wx.chooseImage({ count: 1, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success (res) { const localIds = res.localIds; // 上传到服务器 wx.uploadImage({ localId: localIds[0], isShowProgressTips: 1, success: function (res) { const serverId = res.serverId; // 返回图片的服务器端ID // 将serverId发送到服务器进行保存等操作 } }); } }); } ``` 上面的代码中，我们在chooseImage的成功回调函数中，获取到了选择的图片的本地ID，然后使用wx.uploadImage方法将图片上传到服务器。在上传成功的回调函数中，我们可以获取到图片的serverId，然后将serverId发送到服务器进行保存等操作。 以上就是在Vue3 + TypeScript项目中使用weixin-js-sdk的步骤。需要注意的是，我们需要从后端获取签名等参数才能进行JS-SDK的初始化，因此需要与后端进行配合。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值