uniapp微信js-sdk使用封装

uniapp微信js-sdk使用封装

下载依赖包 微信js-sdk

1、因为uni-app如果没有使用npm的方法,根目录就没有package.json,首先在项目根目录运行

npm init

如果已经有package.json,直接进入下一步

2、安装jweixin-module

npm i jweixin-module -S

此外,您也可以直接下载:https://unpkg.com/jweixin-module@1.4.1/out/index.js

使用

  1. 在您的js公共文件夹下创建wechat.js
import {
    
	params  as PARAMS,
	appurl as APPURL,
	appid as APPID
} from "./params.js"; // 公共域名 AppID
import {
   
	getConf
} from "@/common/http.api.js";
let jweixin = require('jweixin-module'); // 微信开放接口
let params = window.location.href;
export default {
   
	//判断是否在微信中
	isWechat: function() {
   
		var ua = window.navigator.userAgent.toLowerCase();
		if (ua.match(/micromessenger/i) == 'micromessenger') {
   
			return true;
		} else {
   
			return false;
		}
	},
	//初始化sdk配置
	initJssdk: function(callback) {
   
		let url = window.location.href.split('#')[0];
		//服务端进行签名 ,可使用uni.request替换。 签名算法请看文档
		uni.$u.api.getConf({
   
			url: url,
			appid:APPID
		}).then(res=>{
    
			if(res.flag ===  'Success'){
   
				jweixin.config({
   
					debug: false,
					appId: res.data.appId,
					nonceStr: res.data.nonceStr,
					timestamp: res.data.timestamp,
					signature: res.data.signature,
					url:res.data.url,
					jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData','scanQRCode']
				})
				if (callback) {
   
					callback(res.data);
				}
			}else{
   
				console.log('没进来');
			}
		}).catch((e) => {
   
			console.log('网络请求错误捕捉',e);
		});
	},
	//在需要定位页面调用
	getlocation: function(callback) {
   
		if (!this.isWechat(
  • 4
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
要在 Vue 中使用微信 JS-SDK 实现分享功能,需要完成以下步骤: 1. 获取微信公众号的 appid 和 appsecret,以及当前页面的 url。 2. 在服务器端配置好微信 JS-SDK 的权限验证,获取到 signature、timestamp 和 noncestr 等参数。 3. 在 Vue 中引入微信 JS-SDKSDK 文件,并初始化。 4. 调用微信 JS-SDK 的接口,完成分享功能。 下面是一个简单的示例代码: ```html <template> <div class="share"> <button @click="shareToWechat">分享到微信</button> </div> </template> <script> import wx from 'weixin-js-sdk' export default { data() { return { appId: '', timestamp: '', nonceStr: '', signature: '', imgUrl: '', shareUrl: '' } }, created() { // 获取微信 JS-SDK 配置参数 this.getWechatConfig() }, methods: { // 获取微信 JS-SDK 配置参数 async getWechatConfig() { const url = window.location.href.split('#')[0] const res = await this.$api.getWechatConfig({ url }) if (res.code === 0) { const data = res.data this.appId = data.appId this.timestamp = data.timestamp this.nonceStr = data.nonceStr this.signature = data.signature this.imgUrl = data.imgUrl this.shareUrl = data.shareUrl this.initWechatSDK() } }, // 初始化微信 SDK initWechatSDK() { wx.config({ debug: false, appId: this.appId, timestamp: this.timestamp, nonceStr: this.nonceStr, signature: this.signature, jsApiList: [ 'updateAppMessageShareData', 'updateTimelineShareData' ] }) wx.ready(() => { // 配置分享信息 wx.updateAppMessageShareData({ title: '分享标题', desc: '分享描述', link: this.shareUrl, imgUrl: this.imgUrl, success() { // 分享成功回调 } }) wx.updateTimelineShareData({ title: '分享标题', link: this.shareUrl, imgUrl: this.imgUrl, success() { // 分享成功回调 } }) }) }, // 分享到微信 shareToWechat() { wx.chooseWXPay({ // ... }) } } } </script> ``` 在上面的代码中,我们首先通过 `getWechatConfig` 方法获取微信 JS-SDK 的配置参数,然后在 `initWechatSDK` 方法中初始化微信 SDK,并配置分享信息。最后,在 `shareToWechat` 方法中调用微信 JS-SDK 的 `chooseWXPay` 接口,实现分享功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值