微信网页开发/JS-SDK说明文档

概述

微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。

通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。

JSSDK使用步骤可以详细查看说明文档

分享接口

请注意，不要有诱导分享等违规行为，对于诱导分享行为将永久回收公众号接口权限，详细规则请查看：朋友圈管理常见问题

请注意，原有的 wx.onMenuShareTimeline、wx.onMenuShareAppMessage、wx.onMenuShareQQ、wx.onMenuShareQZone 接口，即将废弃。请尽快迁移使用客户端6.7.2及JSSDK 1.4.0以上版本支持的 wx.updateAppMessageShareData、wx.updateTimelineShareData接口。

自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）

wx.ready(function () {   //需在用户可能点击分享按钮前就先调用wx.updateAppMessageShareData({ title: '', // 分享标题desc: '', // 分享描述link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: '', // 分享图标success: function () {// 设置成功}})
});

自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）

wx.ready(function () {      //需在用户可能点击分享按钮前就先调用wx.updateTimelineShareData({ title: '', // 分享标题link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: '', // 分享图标success: function () {// 设置成功}})
});

1、首先请求接口，通过config接口注入权限验证配置

ps：接口封装

/*** SDK 可以在 index.html 引入 https://res.wx.qq.com/open/js/jweixin-1.6.0.js* 也可以下载下来本地引入JS 文件*/
import wx from "@/utils/WeChat/jweixin-1.6.0";
/*** loadWeChatShare 是权限验证接口，需要根据自己的项目接口调整* export function loadWeChatShare(params) {*   return mGet("/mobile/wechat/share", params);* }*/
import { loadWeChatShare } from "@/api/wechat";/*** config 初始化* @param params {object} 其他参数* @param callback {function} 回调函数*/
export function lWeChatConfig(params, callback) {loadWeChatShare({id: params.id,url: params.url || window.location.href.split("#")[0]}).then(res => {const { data } = res;wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: data.appId, // 必填，公众号的唯一标识timestamp: data.timestamp, // 必填，生成签名的时间戳nonceStr: data.nonceStr, // 必填，生成签名的随机串signature: data.signature, // 必填，签名jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"] // 必填，需要使用的JS接口列表});wx.ready(() => {if (callback) callback();});wx.error(err => {console.error("config fail:", err);});});
}

2、使用 wx.config 注册分享功能

/*** 分享接口* @param params {Object} config 参数* @param data {Object} 分享参数* @param callback {Function} 回调函数*/
export function lWeChatShare(params, data, callback) {lWeChatConfig(params, () => {console.log("分享标题", data.title);console.log("分享描述", data.desc);console.log("分享链接", data.link);console.log("分享图标", data.imgUrl);// 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）wx.updateAppMessageShareData({title: data.title, // 分享标题desc: data.desc, // 分享描述link: data.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: data.imgUrl, // 分享图标success: function() {callback();}});// 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）wx.updateTimelineShareData({title: data.title, // 分享标题link: data.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: data.imgUrl, // 分享图标success: function() {callback();}});});
}

3、在页面中调用分享

import { lWeChatShare } from "@/utils/WeChat/jwx";// 标题、描述、链接、图片地址根据自己的项目调整
lWeChatShare({id: this.id
}, {title: "微信分享标题",desc: "这是微信分享描述",link: "https://test.wechat.com?id=1",imgUrl: "https://avatar.csdnimg.cn/A/7/A/1_qq_34707272_1577265439.jpg"
},() => {console.log("详情页面分享成功");
});

附：jwx 源码

Vue H5微信分享功能实现相关推荐

Vue开发微信H5 微信分享签名失败问题解决方案
Vue开发微信H5 微信分享签名失败问题解决方案参考文章: (1)Vue开发微信H5 微信分享签名失败问题解决方案 (2)https://www.cnblogs.com/golddemon/p/94 ...
vue项目做微信分享功能
vue项目做微信分享功能安装sdk npm install weixin-js-sdk --save 方法 1.新建js文件wxapi.js 2.在wxapi.js中引入sdk以及配置一些基本信息( ...
vue 如何调用微信分享_Vue开发添加微信分享功能（全局分享）
在Vue4.0开发微信公众号的时候,需要做微信分享功能.这个功能其实还算简单,具体的思路如下: 1.安装微信JSSDK和Axios(axios是http请求插件) 2.向后台请求微信配置参数 3.初始 ...
微信公众号h5的分享功能
微信公众号h5的分享功能配置如下: 微信配置 wx.config({debug,appId,timestamp,nonceStr,signature,jsApiList: ['onMenuShareA ...
Android微信h5分享,H5网页实现微信分享功能
H5网页实现微信分享功能一,首先在公众号管理后台"公众号设置"的"功能设置"里填写JS接口安全域名,域名需要通过ICP备案,没有备案域名可以用SAE.BAE等 ...
H5页面实现微信分享功能及踩坑历程
看了官网,写的也挺简单的,也在网上搜索了一些demo,然后开始写: 我理解的误区: 我一直以为可以跟app分享一样,有个分享按钮点击触发分享:搜索了很多博客,得到结论,前几年好像是可以通过按钮引导分享 ...
vue项目全局配置微信分享_Vue开发添加微信分享功能（全局分享）
在Vue4.0开发微信公众号的时候,需要做微信分享功能.这个功能其实还算简单,具体的思路如下: 1.安装微信JSSDK和Axios(axios是http请求插件) 2.向后台请求微信配置参数 3.初始 ...
h5 微信分享和踩坑指南
文章目录思路踩坑集锦链接不能直接作用与分享 url 参数不能携带特殊字符,比如花括号 "{}" 代码实现思路 h5 微信分享的官方文档在这里,如果链接挂了,可以按照一下路 ...
Vue实现微信分享好友，分享朋友圈。
实现微信分享功能. 1 .基于vue去实现在微信里去分享给你的微信好友,或者去分享到你的朋友圈里.如果是react 等等一样用法. 2.目前实现微信分享功能是通过点击微信控件触发的,代码拿走直接用, ...
vue 调用微信分享接口分享截图图片
vue 调用微信分享接口分享截图图片现在好多应用都需要分享图片等等的需求 . 大体需要这几个步骤获取分享图片将 ...

Vue H5微信分享功能实现

概述