遇到很多坑记录一下

先看一遍微信的官方手册

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

代码实现步骤

第一步、引入大神写的微信工具包

<dependency><groupId>com.github.binarywang</groupId><artifactId>weixin-java-common</artifactId><version>3.7.0</version></dependency><dependency><groupId>com.github.binarywang</groupId><artifactId>weixin-java-miniapp</artifactId><version>3.7.0</version></dependency><dependency><groupId>com.github.binarywang</groupId><artifactId>weixin-java-mp</artifactId><version>3.7.0</version></dependency>

第二步、配置工具类的参数

我用的springboot resource里的配置就不放了

@Configuration
public class WeChatAccountConfig {@Value("${wechat2.appId}")private String appId;@Value("${wechat2.secret}")private String appSecret;@Value("${wechat2.token}")private String token;@Value("${wechat2.aesKey}")private String encodingAESKey;public String getAppId() {return appId;}public String getAppSecret() {return appSecret;}public String getToken() {return token;}public String getEncodingAESKey() {return encodingAESKey;}}

@Component
public class WeChatConfig {@Autowiredprivate WeChatAccountConfig weChatAccountConfig;@Beanpublic WxMpService wxMpService(){WxMpService wxMpService = new WxMpServiceImpl();wxMpService.setWxMpConfigStorage(wxMpConfigStorage());return wxMpService;}public WxMpConfigStorage wxMpConfigStorage(){WxMpDefaultConfigImpl wxMpConfigStorage = new WxMpDefaultConfigImpl();wxMpConfigStorage.setAppId(weChatAccountConfig.getAppId());wxMpConfigStorage.setSecret(weChatAccountConfig.getAppSecret());wxMpConfigStorage.setToken(weChatAccountConfig.getToken());wxMpConfigStorage.setAesKey(weChatAccountConfig.getEncodingAESKey());return wxMpConfigStorage;}}

第三步、获取微信签名

@AutoLog(value = "")@ApiOperation(value="", notes="活动")@GetMapping(value = "/getAppShareConfig")public Result<?> getAppShareConfig(HttpServletRequest req) {String url=req.getParameter("clientUrl");try {WxJsapiSignature signature = wxMpService.createJsapiSignature(url);return Result.ok(signature);} catch (Exception e) {return Result.error("获取签名出错");}}

第四步前台，调用签名并分享
微信jssdk别忘记自己引入一下

created() {this.imgPath=root;let id = this.$route.query.id;this.loadData(id);// alert(window.location.href.split('#')[0]);let clientUrl=window.location.href.split('#')[0];let params={clientUrl:window.location.href.split('#')[0]}appShareConfig(params).then(res =>{let data=res.result;console.log(data);wx.config({debug: false,appId: data.appId,timestamp: data.timestamp,nonceStr: data.nonceStr,signature: data.signature,jsApiList: ['updateAppMessageShareData','updateTimelineShareData']});wx.ready(function () {// 调整分享到微信以及QQ的形态wx.updateAppMessageShareData({title: document.title, // 分享标题desc: document.title, // 分享描述link: window.location.href,imgUrl: '图标url', // 分享图标}, function (res) {});// 调整分享到朋友圈以及QQ空间的形态wx.updateTimelineShareData({title: document.title, // 分享标题link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: '分享出去的链接图片的url', // 分享图标}, function (res) {});});});},

到这基本步骤都已经完成了。
下面说一下遇到的坑。
第一个，vue默认的hash路由，参数就是带#的那种，为了避免麻烦我直接改成了history路由；

const router = new Router({ mode:'history',base:'/h5', routes });

然后nginx也是需要调整的

location /h5{alias  /opt/h5/;try_files $uri $uri/ /opt/h5/index.html;index index.html index.htm;if (!-e $request_filename) {rewrite ^/(.*) /h5/index.html last;break;}}

第二个，网上好多例子是ajax上传对整个url进行了encodeURIComponent(window.location.href.split(’#’)[0]。例如

 $.get('app/config.php?sign_url=' + encodeURIComponent(window.location.href.split('#')[0]), function (data) {

vue里一般都是axios json对象上传根本不需要多余的编码

Vue+H5 活动内容调用微信分享相关推荐

vue 调用微信分享接口分享截图图片
vue 调用微信分享接口分享截图图片现在好多应用都需要分享图片等等的需求 . 大体需要这几个步骤获取分享图片将 ...
java对接微信分享_Java编程调用微信分享功能示例
本文实例讲述了Java编程调用微信分享功能.分享给大家供大家参考,具体如下: 这篇文章介绍如何使用java开发微信分享功能,因为工作,已经开发完成,可使用. 如果想要自定义微信的分享功能,首先在自己的 ...
java如何调用微信功能_Java编程调用微信分享功能示例
本文实例讲述了java编程调用微信分享功能.分享给大家供大家参考,具体如下: 这篇文章介绍如何使用java开发微信分享功能,因为工作,已经开发完成,可使用. 如果想要自定义微信的分享功能,首先在自己的 ...
在H5页面中禁止微信分享转发按钮-mugeda
在H5页面中禁止微信分享转发按钮(mugeda) 在页面脚本中插入以下代码方法一: 加一段js代码 document.addEventListener('WeixinJSBridgeReady', ...
在H5页面中禁止微信分享转发按钮
在H5页面中禁止微信分享转发按钮(mugeda) 在页面脚本中插入以下代码方法一: 加一段js代码 document.addEventListener('WeixinJSBridgeReady', ...
vue前端移动项目调用微信扫一扫的实现
vue前端移动项目调用微信扫一扫的实现 1安装插件 npm install weixin-jsapi --save 2在main.js中引入 // 在man.js中引入 import wx from ...
vue 如何调用微信分享_Vue项目通过JSSDK调用微信分享接口
最近在做一个公司微信分享项目的功能,毕竟第一次做,对于小白也是个挑战,特此记录一下自己的开发过程,以便以后查阅.(转载请标明出处,码字好辛苦的qaq) 使用步骤: 1.绑定域名: 一开始当然是去查微信 ...
简单粗暴教你在VUE中引入微信SDK 调用微信分享、朋友圈分享、QQ分享......
写在前面: 刚做了一个微信端的网页,用到了微信分享,在网上看了好多的资料,发现好多文档都写得云里雾里,让人看的头疼.通过对很多大佬文章的综合整理,才完成了微信分享的部分.所以我想着自己写一篇文章,能让 ...
vue 如何调用微信分享_Vue开发添加微信分享功能（全局分享）
在Vue4.0开发微信公众号的时候,需要做微信分享功能.这个功能其实还算简单,具体的思路如下: 1.安装微信JSSDK和Axios(axios是http请求插件) 2.向后台请求微信配置参数 3.初始 ...

Vue+H5 活动内容调用微信分享

遇到很多坑记录一下

先看一遍微信的官方手册

代码实现步骤

Vue+H5 活动内容调用微信分享相关推荐

最新文章

热门文章