uni-app在vue3中对接微信JSSDK

第一步：引入jssdk

在项目的终运行命令：npm i weixin-js-sdk 如下图

第二步，在项目人口文件导入微信jssdk

import wx from "weixin-js-sdk"，挂载到全局app.config.globalProperties.$wx=wx;

第三步：获取JSSDK在网页中的授权信息及初始化JSSDK，授权信息是后台发返回的

const url =process.env.VUE_APP_BASE_URL+ "/v1/auth/jssdk?url=";
export function getWxSignature(context,jsApiList) {uni.request({url: url+location.href.split('#')[0],//当前页面路劲method: 'GET',success: res => init(context, res,jsApiList),fail: () => context.message.error("获取微信签名失败")});
}
// 接口列表
export const wxapis={scanQRCode:"scanQRCode"
}function init(context, e,jsApiList) {const { data: { data } } = e context.$wx.config({debug: false,appId: data.appId,timestamp: data.timestamp,nonceStr: data.nonceStr,signature: data.signature,jsApiList: jsApiList});context.$wx.ready(function() {console.log("接口开通成功");});
}

在组件里面调用getWxSignature

<script>import { getWxSignature, wxapis } from "@/utils/initWechatJSSDK.js"export default {onLoad(param) {getWxSignature(this, [wxapis.scanQRCode])}}
</script>

公众后台配置：

uni-app在vue3中对接微信JSSDK相关推荐

vue项目中对接微信公众号使用微信js-sdk
首先,确保你安装了weixin-js-sdk. 如果还没有安装 npm install weixin-js-sdk 注意:----在vue项目中引入jssdk,微信为了方便用户使用,将官方的jssdk ...
如何正确的在项目中接入微信JS-SDK
微信JS-SDK的功能如果你点进来,那么我相信你应该知道微信的JS-SDK可以用来做什么了.微信的官方文档描述如下. 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. ...
uniapp中使用微信jssdk
在做自定义分享时,用到了微信jssdk,记录一下. 声明:本文演示uniapp中使用jssdk,示例为网页自定义分享 npm方式使用下方指令进行安装,正文部分为非npm方式. npm install ...
php拍照从手机相册中选择,微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例...
本文实例讲述了微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法.分享给大家供大家参考,具体如下: 目前中js-sdk 1.0版本中,预览图片提供了2个接口,接口的定义参考官方文档 1.预览 ...
react中使用微信jssdk分享总结
1.线上微信官方jssdk文档 jssdk文档 2.react项目中添加配置jssdk的工具方法 javascript 代码 export function jsSdkConfig(axios, ho ...
react，tsx中使用微信jssdk分享总结
React+tsx的H5项目使用企业微信JS-SDK 步骤: 1.(配置域名):点击企业微信PC版左下角登录管理后台-应用管理-应用-设置应用主页,网页授权及JS-SDK. 2.(引入JS-SDK): ...
vue中使用微信jssdk语音聊天功能
1.绑定域名 2.引入JS文件前面两步不细说,直接看官方文档就行,官方文档 3.wx.config配置: 在这边要注意有一个坑必须要注意一下:可能会遇到安卓系统配置正常,ios上面报签名无效配置失败 ...
React Typescript项目对接微信jssdk
1. 背景最近在做react的ts项目,突然发现微信官方sdk是js文件,且无法直接在webpack项目中使用 2. 操作 1. 在wepack.base.config文件中增加 externals ...
vue中使用微信jssdk语音聊天功能，实现语音输入内容的van-field输入框组件
一.配置项 1.绑定域名 2.引入JS文件前两步直接看官方文档 3.wx.config配置: 这边要注意有一个坑必须要注意一下:可能会遇到安卓系统配置正常,ios上面报签名无效配置失败. 如果是使用 ...

uni-app在vue3中对接微信JSSDK

uni-app在vue3中对接微信JSSDK相关推荐

最新文章

热门文章