uniapp jssdk 微信分享

h5的微信分享与小程序分享不同,在微信h5中不允许存在按钮点击分享,只能通过右上角···进行分享,默认微信浏览器是可以分享的,那么我们为什么还要做分享呢? 因为默认的分享没有图片、标题描述,所以我们只需要在用户分享前,执行一遍代码,再分享,就能显示图片标题啥的了

希望能认真审查代码,毕竟看懂了才是你的,一味的复制是无意义的

1.下载jssdk (打开项目根目录执行)

npm install weixin-js-sdk

2.新建common文件夹与common/wxShare.js文件

我这里是将下载好的 jweixin-1.6.0.js文件复制到common文件中了
在这里插入图片描述

3.wxShare.js代码(如多个页面需要分享,方便调用)

import wxj from "@/common/jweixin-1.6.0.js" // 引入js文件, 复制代码时需要检查文件路径是否正确
	/**   
	 * 分享封装
	 * 一般正常情况下,都会出现一些问题,例如签名错误啊之类的,下面是官网文档,有你想要的答案
	 * 官方文档地址: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1
	 * configData 微信配置文件 包括appid 、timestamp、nonceStr、signature ;这些都需要后端人员传给你
	 * list 分享数据 包括(title、desc、imgUrl)共三个参数足够,分别时 标题、描述与图片
	 */
function myshare (configData, list) {
   
	let link = location.href // 获取当前页面的地址参数
	// 必须先配置参数,这些参数需要用到公众号,让后端去拿 然后前端请求数据即可
	wxj.config({
   
		debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
		appId: configData.appId, // 必填,公众号的唯一标识
		timestamp: configData.timestamp,<
### 配置步骤 在 UniApp 中集成微信 JS-SDK 并实现文件上传功能涉及多个方面。为了确保顺利实施,以下是详细的配置过程。 #### 1. 引入微信 SDK 可以通过 npm 安装 `weixin-js-sdk` 来简化开发流程[^2]: ```bash npm install weixin-js-sdk --save ``` 接着,在需要使用的页面按需引入该模块: ```javascript import wx from 'weixin-js-sdk'; ``` #### 2. 获取签名参数 要使微信 JS-SDK 生效,必须先获取服务器端返回的签名参数(timestamp, nonceStr 和 signature)。这一步通常由后端完成,并通过接口传递给前端应用。具体操作可参照官方文档说明[^3]。 #### 3. 初始化并注入权限验证配置 收到上述三个必要参数之后,就可以调用微信提供的 jsapi 接口来初始化 sdk: ```javascript wx.config({ debug: false, appId: '', // 必填,公众号的唯一标识 timestamp: , // 必填,生成签名的时间戳 nonceStr: '', // 必填,生成签名的随机串 signature: '',// 必填,签名 jsApiList: ['chooseImage', 'uploadImage'] // 必填,需要使用的JS接口列表 }); ``` 注意:此处列举了两个用于图片选择和上传的关键 API 方法名称。 #### 4. 使用 chooseImage 进行本地资源选取 当用户点击按钮触发事件时,可以利用 `chooseImage` 方法让用户从相册或相机中挑选照片作为待上传对象: ```javascript wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success (res) { const localIds = res.localIds; // 返回选定照片的本地ID列表 console.log(localIds); uploadFile(localIds); // 调用自定义函数处理后续逻辑 } }) ``` #### 5. 执行实际的数据传输工作 最后一步就是执行真正的文件上载动作。这里需要注意的是,由于安全原因,直接使用 `uploadImage` 不会得到完整的 URL 地址;因此建议采用服务端代理的方式接收临时 media_id 后再做进一步处理: ```javascript function uploadFile(localId){ wx.uploadImage({ localId: localId[0], // 需要上传的图片的本地 ID,由 chooseImage 接口获得 isShowProgressTips: 1, // 默认为1,显示进度提示 success(res){ let serverId = res.serverId; // 将serverId发送至后台换取真实url... }, fail(err){ console.error('Upload failed:', err); } }); } ``` --- ### 注意事项 - **安全性考量**:考虑到数据的安全性和隐私保护,务必遵循最新的 OAuth 认证机制以及 HTTPS 协议。 - **兼容性测试**:不同版本的小程序可能会存在差异,所以应该充分考虑多平台间的适配问题。 - **错误捕获与日志记录**:在整个过程中加入 try-catch 结构捕捉异常情况,并做好相应的调试信息输出以便排查潜在隐患。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值