vue-cli构建项目下使用微信分享功能

2024-10-03 21:47:42

一、index.html中引入微信官方分享js

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

二、在src下的assets/js文件夹下新建wx.jsapi.js文件，把分享做成公用方法

使用axios来发送请求，参照 //www.jb51.net/article/141008.htm 配置vue-cli项目的axios

代码：

import axios from 'axios'
export default {
 wxShowMenu : function() {
 axios.post('http://test.youxue.pxjy.com/wxtest').then(function(res){
  var getMsg = res.data.data;
  wx.config({
  debug: false,  //生产环境需要关闭debug模式
  appId: getMsg.appId, //appId通过微信服务号后台查看
  timestamp: getMsg.timestamp, //生成签名的时间戳
  nonceStr: getMsg.noncestr, //生成签名的随机字符串
  signature: getMsg.signature, //签名
  jsApiList: [ //需要调用的JS接口列表
   'onMenuShareTimeline', //分享给好友
   'onMenuShareAppMessage', //分享到朋友圈
   'showMenuItems',
   'hideMenuItems'
  ]
  });
  wx.ready(function() {
  wx.checkJsApi({
   jsApiList: ["showMenuItems"],
   success: function(res) {
    wx.showMenuItems({
     menuList: [
      'menuItem:share:appMessage', //发送给朋友
      'menuItem:share:timeline' //分享到朋友圈
     ]
    });
   }
  });
  //分享到朋友圈
  wx.onMenuShareTimeline({
   title: "分享描述", // 分享标题
   desc: "分享描述", //分享描述
   link: getMsg.shareLink,// 分享链接
   imgUrl: getMsg.imgUrl // 分享图标
  });
  //分享给朋友
  wx.onMenuShareAppMessage({
   title: "分享描述", // 分享标题
   desc: "分享描述", // 分享描述
   link: getMsg.shareLink, // 分享链接
   imgUrl: getMsg.imgUrl // 分享图标
  });
  });
 })
 }
}

其中分享链接和图片地址要用绝对地址，图片用方形，大小至少200*200px以上

6月份新版微信客户端发布后，用户从微信内的网页分享消息给微信好友，以及分享到朋友圈，开发者将无法获知用户是否分享完成。所以不再写成功和失败的回调方法。查看具体公告

三、main.js中引入并挂在vue的原型上

代码：

import WXConfig from './assets/js/wx.jsapi' // 微信分享Vue.prototype.WXConfig = WXConfig;

四、使用

代码：

this.WXConfig.wxShowMenu();

总结

以上所述是小编给大家介绍的vue-cli构建项目下使用微信分享功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

微信小程序通过保存图片分享到朋友圈功能

说明首先说明一点,小程序内是不能直接分享到朋友圈的.所以只能通过生成图片,携带小程序二维码,保存到手机相册,让用户自己选择发到朋友圈.然后可以通过在小程序中识别二维码来进入小程序的指定页面.参考市面上支持分享的应用,基本都是这种实现方式. 准备阶段 1.通过服务器获取小程序码这里可以参考下微信的官方文档,给后台指定的参数和路径等信息,让后台生成指定的小程序码.然后调用wx.getImageInfo将后台生成的小程序码保存起来. 注意一定要仔细看下微信的文档,如果生成小程序码的路径正式服务器不
微信小程序之分享页面如何返回首页的示例

做小程序开发发现,页面分享出去后,用户通过分享进去的页面很难找到返首页的情况.(微信官方操作是点击右上角三个点,在手机下方显示返回首页).民间很多方案是自己在页面加个悬浮Home标注. 今天我分享另外一种方法.请看下面.gif; 有没有发现,左上角有返回按钮了.原理简单,在你要分享的页面,分享配置时配置你的首页,并带上对应的参数,在首页 onLoad方法中可以获取.代码如下:  <view class="container">
微信js-sdk+JAVA实现“分享到朋友圈”和“发送给朋友”功能详解

主要为以下实现步骤: 1.绑定域名先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名".(特别提示不需要加上http或者https,吃过亏) 2.页面引入js文件 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script src="https://res.wx
微信小程序分享功能之按钮button 边框隐藏和点击隐藏

先上图样式设置: 在小程序社区看了下,说是伪类造成的.于是就重新定义下样式.然后就 ok 了. 总结以上所述是小编给大家介绍的微信小程序分享功能之按钮button 边框隐藏和点击隐藏,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持!
vue.js 微信支付前端代码分享

实例如下所示: onBridgeReady: function () { const openId = localStorage.getItem('openId') payService.payment(this.$route.params.orderId, 1, openId).then(rt => { //1:支付类型,可不填 this.message = rt.t WeixinJSBridge.invoke( 'getBrandWCPayRequest', { 'appId': this.
微信小程序项目总结之点赞删除列表分享功能

小程序点赞功能思路:在后台没有给你接口自己模拟数据 data:{ likes:{ iszan:false, num:0 } } 1.遍历评论列表判断点击的id 2.如果id相同判断是否点赞过如果为true -1 如果为false +1 3.更新数据 bindlike:function(e){ var newData = this.data.release.map(function(item){ if (item.id == e.currentTarget.dataset.id){ con
微信 jssdk 签名错误invalid signature的解决方法

几乎每一个开发用于微信公众号页面的工程师都遇到过微信jssdk报的各种错误,通常是permission denied,类似这样: 通常他们会建议你把debug选项开开,比如这样: wechat.config({ debug: true, appId: appId, timestamp: timestamp, nonceStr: nonceStr, signature: signature, jsApiList: ['scanQRCode'], }); 结果你又遇到了invalid signatu
Android使用友盟集成QQ、微信、微博等第三方分享与登录方法详解

最近项目需要加入第三方分享和登录功能,之前其他项目的第三方分享和登录一直都使用ShareSDK实现的.为了统一使用友盟的全家桶,所以三方分享和登录也就选择了友盟.这里记录一下完整的集成与使用流程. 1.申请友盟Appkey 直接到友盟官网申请即可 2.下载SDK 下载地址:http://dev.umeng.com/social/android/sdk-download 下载的时候根据自己需求进行选择,我这里选择选择的是精简版(包含常用的分享与登录功能),只测试微信,QQ,新浪微博. 下载后解压出
微信二次分享报错invalid signature问题及解决方法

基于微信公众号开发的h5页面(使用jssdk接口),由用户A分享给用户B,用户B再次分享这个页面时,不能成功分享.问题出在用户B收到的分享链接与用户A打开的链接不同 A用户的链接为 http://test.com/test.html B用户收到的连接 http://test.com/test.html&from=singlemessage from=singlemessage是微信客户端为了区分分享来源再链接后自动添加的标记,再次分享时,需要在js代码中对自动获取的连接进行encodeURICo
vue-cli构建项目下使用微信分享功能

一.index.html中引入微信官方分享js <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> 二.在src下的assets/js文件夹下新建wx.jsapi.js文件,把分享做成公用方法使用axios来发送请求,参照 //www.jb51.net/article/141008.htm 配置vue-cl
Vue单页式应用(Hash模式下)实现微信分享的实例

本文介绍了Vue单页式应用(Hash模式下)实现微信分享的实例,分享给大家,具体如下: 前端微信分享的基本步骤: 一.绑定域名: 先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名".这个不多说,微信开发的都应该清楚. 二.引入js文件: 在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js. 请注意,如果你的页面启用了ht
vue cli构建的项目中请求代理与项目打包问题

在上篇文章给大家介绍了vue-cli webpack模板项目搭建及打包时路径问题的解决方法,可以点击查看. vue-cli构建的项目中,生产模式下的打包路径.与生产模式下的请求代理简单示意总结以上所述是小编给大家介绍的vue cli构建的项目中请求代理与项目打包问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持! 您可能感兴趣的文章: Vue-cli创建项目从单页面到多页面的方法 Vue使用vue-cli创建项目 vue-cli项
Vue项目全局配置微信分享思路详解

这个项目为移动端项目,主要用于接入公众号服务.项目采用两种登录方式,微信授权登录以及账号密码登录.对于移动端项目而言,为了便于项目扩展以及提供开发热更新速度,项目分为不同的模块,每个模块是一个单页面应用.页面分为两种,一种是需要用户登录之后才能浏览,另一种是用户无需登录即可浏览.无论哪一种,均配置微信分享. 使用的技术 1.使用vue作为框架 2.使用vux作为UI组件库全局配置微信分享思路 1.区分一般和特殊,一般情况,全局配置默认分享文案:特殊情况分两种,一种是分享内容不需要异步获取,则在
vue项目中实现的微信分享功能示例

本文实例讲述了vue项目中实现的微信分享功能.分享给大家供大家参考,具体如下: /* 微信分享 */ Vue.prototype.wechatShare = (shareData) => { let resource = { title: '随我心愿!', desc: '体验优质服务', link: 'https://www.abc.cn/', img: 'https://www.abc.cn/images/share_logo.jpg' } let obj = Object.assign({}
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题

问题截图: 解决方案: 1.打开File --> Setting 窗口 2.搜索 Webpack 3.选择如下路径总结以上所述是小编给大家介绍的解决Idea.WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持! 如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
vue cli实现项目登陆页面流程详解

目录 1. 搭建项目 1.1 使用vue-cli创建项目 1.2 通过npm安装element-ui 1.3 导入组件 2 创建登录页面 2.1 创建登录组件 2.2 引入css(css.txt) 2.3 配置路由 2.4 在Login组件中将提交按键调整为100%宽度 2.5 运行效果 3. 后台交互 3.1 引入axios 3.2 axios/qs/vue-axios安装与使用 3.2.1 安装axios 3.2.2 发送get请求 3.2.3 发送post请求 3.2.4 简化axios使
thinkphp项目如何自定义微信分享描述内容

本文主要讲述:在thinkphp框架中,如何获取微信分享接口权限.如何设置安全域名.如何修改微信分享标题.修改微信分享描述.修改微信分享图片.如何定制微信分享内容. 修改后的示例:http://games.zixuephp.cn 下面是修改微信分享标题.微信分享描述.微信分享图片和不修改的效果对比图: 没有修改的微信分享效果图:其中分享内容是分享的页面的url路径. 修改过微信分享内容的效果如下图:分享内容为自己定制的内容. 1.必要条件:认证过的公众号. 2.在微信公众号管理后台中,点击公众号
vue2.0 如何在hash模式下实现微信分享

最近又把vue的demo拿出来整理下,正好要做"微信分享"功能,于是遇到新的问题: 由于hash模式下,带有"#",导致微信分享的签证无效:当改成history的模式后,分享ok: 但是问题来了,history模式下相当操蛋: 刷新页面,页面报错404:这不是扯犊子吗?[不过这个问题,可以在后台解决,这里就不说了] assets下的img文件,引入路径失败: 对于上面的问题,我是直接不能忍啊,所以history模式是肯定不行的:我决定依旧用hash模式:histor
vue单应用在ios系统中实现微信分享功能操作

表示是第一次使用vue做单应用显目,也是在逐渐的摸索中~更是各种踩坑,各种填坑,打算写博客么?是因为不想写笔记了,嗯嗯就是这么简单进入正题. 刚开始做微信分享的这个功能的时候,脑补了官方文档微信JS-SDK说明文档基础的知识不多说了,反正多看文档总是没错的~在安卓系统上面分享是没出错的,但是在ios上面问题就来了,表示无限吐槽ios,但是吐槽归吐槽,问题总是该解决的-在网上百度了很多vue单应用在ios系统中实现微信分享失败的原因以及解决方案原因单页面应用通过什么入口进去的 url保持

vue-cli构建项目下使用微信分享功能

相关推荐

随机推荐