vue 微信公众号使用weixin-java-mp、JSSDK自定义分享

1、后端：使用weixin-java-mp 4.1.0
pom.xml引入依赖

<!--微信公众号--><dependency><groupId>com.github.binarywang</groupId><artifactId>weixin-java-mp</artifactId><version>4.1.0</version></dependency>

controller层代码：

@RestController
@RequestMapping("/wx/share")
public class WxShareController {private final WxMpService wxMpService;/*** 微信公众号通过config接口注入权限验证配置所需参数* @return* @throws Exception*/@GetMapping("getConfigData")public Result<?> getConfigData(@RequestParam("url")String url) throws Exception {WxJsapiSignature wxJsapiSignature2 = this.wxMpService.createJsapiSignature(URLDecoder.decode(url,"UTF-8"));return Result.OK(wxJsapiSignature2);}

vue前端：

<p class="share"><a-icon type="export" @click="toShare(info.id)" /><span class="font" >分享</span></p><script>methods: {//分享：自定义分享toShare: function (){getConfigData({url: encodeURIComponent(location.href.split('#')[0])}).then(res => {console.log("---分享",res.result);const result = res.result;// 重写的分享方法wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: result.appId, // 必填，公众号的唯一标识timestamp: result.timestamp, // 必填，生成签名的时间戳nonceStr: result.nonceStr, // 必填，生成签名的随机串signature: result.signature,// 必填，签名jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline',] // 必填，需要使用的JS接口列表});wx.ready(() => {   //需在用户可能点击分享按钮前就先调用wx.onMenuShareAppMessage({title: '我的分享', // 分享标题desc: '我的描述', // 分享描述link: 'https://*******/base/index', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: 'https://**********.jpg', // 分享图标type: 'link', // 分享类型,music、video或link，不填默认为linksuccess: function () {// 设置成功this.$message.success("设置自定分享成功！");}})});this.$message.success('请点击右上角进行分享！');})}</script>

vue 微信公众号使用weixin-java-mp、JSSDK自定义分享相关推荐

vue在微信里面的兼容问题_详解Vue微信公众号开发踩坑全记录
本文介绍了Vue微信公众号开发踩坑全记录,分享给大家,也给自己留个笔记. 需求微信授权登录(基于公众号的登录方案) 接入JS-SDK实现图片上传,分享等功能现状及难点采用的Vue框架,前后端分 ...
(Node+Vue+微信公众号开发)企业级产品全栈开发速成周末班
(Node+Vue+微信公众号开发)企业级产品全栈开发速成周末班从零到壹全栈部落产品:个人独立博客,21点见 Vue + Node + MongoDB支持服务端渲染的博客系统(5天) 开发环境技术 ...
vue 微信公众号开发
vue 微信公众号开发开题上个月初入职了一家新公司.来了新公司很忙.本来计划是在上个月底写一篇博客的,写一下关于新公司的事情. 几度思考之后还是没写.也许做程序员接手别人的项目,都会说别人的项目多 ...
vue微信公众号页面分享
vue微信公众号页面分享 utils=>share.js const wx = require("weixin-js-sdk"); // 这块因为我们业务是必须在公众号里面的 ...
vue微信公众号授权开发流程
vue微信公众号授权开发流程项目采用的是vue2.0开发的,还未更新到vue3.0.项目描述:只有通过微信授权登录,不需要绑定手机号. 1.注册公众号,这个不多说了 2.配置公众号在[公众号设置] ...
JAVA微信公众号开发第8篇JSSDK图片上传预览
简介博主微信JSSDK&图片上传预览基于微信分享做拓展,所以一些配置操作请点击查阅JAVA微信公众号开发第7篇JSSDK&微信分享博文页面 <html><head ...
微信公众号开发java流程_微信公众号开发教程java 编程语言的特点及选择
微信公众号开发教程java 编程语言的特点及选择微信公众号为用户提供了相关的工具,来对微信公众号进行一个简单的开发.但是如果想实现一些复杂的功能,其实还是要借助于一些编程语言的使用.所以要了解,在微 ...
php实现微信公众号文章付费阅读功能的代码分享
关于php实现微信公众号文章付费阅读功能,就是一片公众号文章,点进去显示标题,作者,时间,公众号名称和部分内容,要想阅读所有内容,那就支付0.01元就可以阅读所有的内容,这就是付费阅读!!!当然金额可 ...
vue 微信公众号支付接口_基于vue的h5项目之支付宝支付与微信支付
本文仅记录基于vue开发h5项目过程中使用支付宝和微信支付过程中的重点与槽点,仅为前端部分,如有疏漏不正之处,请于文末评论探讨.注意:标红部分灰常重要,仔细阅读官方文档非常重要,耐心非常重要,细心非常 ...
Vue微信公众号分享全过程
Vue关于微信分享的资料很少,记录一下本人开发的全过程,不足之处多多指点. 微信公众号的文档就不贴了. 下载微信js-sdk 推荐使用npm安装,npm install jweixin-module ...

vue 微信公众号使用weixin-java-mp、JSSDK自定义分享

vue 微信公众号使用weixin-java-mp、JSSDK自定义分享相关推荐

最新文章

热门文章

vue 微信公众号 使用weixin-java-mp、JSSDK自定义分享

vue 微信公众号 使用weixin-java-mp、JSSDK自定义分享相关推荐

最新文章

热门文章

vue 微信公众号使用weixin-java-mp、JSSDK自定义分享

vue 微信公众号使用weixin-java-mp、JSSDK自定义分享相关推荐