1. vue项目中我们先npm install weixin-js-sdk --save下载下来在main.js文件中引入
  1. import wx from 'weixin-js-sdk';//引入
  2. Vue.prototype.wx = wx//
  1. jq项目中我们需要引入这个js-sdk(在需要调用js接口的页面引入js文件 http://res.wx.qq.com/open/js/jweixin-1.2.0.js,如果你的服务器是https请求的话请引入 https://res.wx.qq.com/open/js/jweixin-1.2.0.js
  1. // 分享 调用sdk
  2. // 微信分参数
  3. getConfig() {
  4. this.showFx = true
  5. var _this=this;
  6. // let url = location.href.split('#')[0] //获取锚点之前的链接
  7. let url = encodeURIComponent(window.location.href.split('#')[0]) //获取锚点之前的链接
  8. console.log(url)
  9. //let url = 'http://xiaofeng.ckugua.com/index.html' //获取锚点之前的链接
  10. // console.log(url)
  11. _this.$Ajax.post('webchat/config?url='+url).then(response => {
  12. // console.log(response)
  13. let res = JSON.parse(response.data.data);
  14. console.log(res)
  15. _this.wxInit(res);
  16. })
  17. },
  18. // 微信分享
  19. wxInit(res) {
  20. var _this=this;
  21. let url = window.location.href.split('?')[0] //获取锚点之前的链接
  22. console.log(url)
  23. // let links = url+'#/Food/' + this.$route.params.id;
  24. let links = url+'#/product/productDetails?pid='+_this.$route.query.pid;
  25. console.log(links)
  26. let title = '晓峰科技';
  27. let desc = '了解更多,请关注“晓峰科技”公众号';
  28. let imgUrl = 'http://wx.qlogo.cn/mmhead/Q3auHgzwzM4soO2NoID1uZPHibOVgkJoPoaelibibF3GagvW2o43wRASA/0';
  29. _this.wx.config({
  30. debug: false,
  31. appId: res.appId,
  32. timestamp: res.timestamp,
  33. nonceStr: res.nonceStr,
  34. signature: res.signature,
  35. jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline']
  36. });
  37. _this.wx.ready(function() {
  38. _this.wx.onMenuShareAppMessage({
  39. title: title, // 分享标题
  40. desc: desc, // 分享描述
  41. link: links, // 分享链接
  42. imgUrl: imgUrl, // 分享图标
  43. success: function() {
  44. alert('分享成功')
  45. _this.showFx =false;
  46. },
  47. cancel: function() {
  48. alert('分享失败')
  49. _this.showFx =false;
  50. }
  51. });
  52. //微信分享菜单测试
  53. _this.wx.onMenuShareTimeline({
  54. title: title, // 分享标题
  55. desc: desc, // 分享描述
  56. link: links, // 分享链接
  57. imgUrl: imgUrl, // 分享图标
  58. success: function() {
  59. alert('分享成功')
  60. _this.isShow =true;
  61. },
  62. cancel: function() {
  63. alert('分享失败')
  64. _this.isShow =true;
  65. }
  66. })
  67. });
  68. _this.wx.error(function(err) {
  69. alert(JSON.stringify(err))
  70. });
  71. }

  

实现h5公众号分享功能(vue项目也适用)的更多相关文章

  1. 用Flutter开发的跨平台项目,完美运行在Android和IOS上,Material简洁风格,包括启动页、引导页、注册、登录、首页、体系、公众号、导航、项目,还有漂亮的妹子图库,运行极度流畅,结构清晰,代码规范,值得拥有

    Flutter学习资源汇总持续更新中...... Flutter官方网站 Flutter中文网 wendux的Flutter实战 Flutter官方exampleflutter_gallery 阿里巴 ...

  2. 微信公众号 分享接口 签名通过 分享无效果(JSSDK自定义分享接口的策略调整)

    为规范自定义分享链接功能在网页上的使用,自2017年4月25日起,JSSDK“分享到朋友圈”及“发送给朋友”接口,自定义的分享链接,其域名或路径必须与当前页面对应的公众号JS安全域名一致,否则将调用失 ...

  3. 分享一个vue项目“脚手架”项目的实现步骤

    搭建缘由 源于公司每次新启动一个由多人协同开发的项目都由负责人初始化项目之后,每个人再去从私服pull一下项目才开始开发.但是每次初始化工程都是一步步的造轮子,一个个依赖去安装,新建一个个不同功能的文 ...

  4. 微信支付-小程序H5 公众号 Payment SDK

    前言 今天是2020年一天,去年最后一个月开发了订单和支付系统,尤其在支付系统和微信对接的时候遇到了很多坑,这里给大家总结下,以免大家遇到相同的问题还浪费大量时间 微信支付前期准备 微信商户号,需要商 ...

  5. 微信"附近的人"新增商家公众号入驻功能

    微信近日升级了“附近的人”,新增商家公众号(认证的服务号和有卡券功能的公众号)可自入驻,这是微信在推出卡券和微信wifi功能后,又一加强连接线下商户能力的功能. 微信在“附近的人”中 增加搜索商户功能 ...

  6. 微信公众号"赞赏"功能来了 觉得不错就给作者打个赏吧

    微信很早以前就开始测试“赞赏”功能了,只是官方还没出公告,近日腾讯科技就发了一篇题为 试试给微信公众号“赞赏” 的文章,算是一个回应吧.微信打赏功能势在遏制公众账号抄袭,鼓励用户创造优质内容,内容付费 ...

  7. ios微信公众号分享回调事件

    IOS手机在分享成功后,回调事件无法正常执行,在回调方法里面加入: setTimeout(function () { //todo }, ); 例如: //分享 Share({ title: &quo ...

  8. 微信小程序 「柒留言」 — 实现微信公众号留言功能(限时免费入驻,建议收藏)

    「柒留言」小程序留言助手使用指南(接近原生界面) 前言 从去年 3 月以后新公众号就没得留言功能了,新申请的微信公众号没有留言功能,没有留言就无法跟读者进行互动,写出去的文章得不到反馈,着实感觉有蛮难 ...

  9. 微信支付(PC扫码支付和H5公众号支付)

    最近在做微信支付,微信支付比较坑,官方居然只有.NET.C#.PHP的demo居然没有java的demo.然后微信支付是不提供测试账号的需要直接用正式的公众号.首先来介绍下微信扫码支付吧,微信扫码有两 ...

随机推荐

  1. jQuery分离构造器

    http://www.imooc.com/code/3401 通过new操作符构建一个对象,一般经过四步: A.创建一个新对象   B.将构造函数的作用域赋给新对象(所以this就指向了这个新对象) ...

  2. linux 静态库和动态库(共享库)的制作与使用(注意覆盖问题)

    一.linux操作系统支持的函数库分支 静态库:libxxx.a,在编译时就将库编译进可执行程序 优点:程序的运行环境中不需要外部的函数库 缺点:可执行程序大 动态库:又称共享库,libxxx.so, ...

  3. Java反射获取内部类有局限

    这周接触到继承及修改具有包访问权的内部类内容,略梳理了下各种资料,发觉在包外修改内部类内容必须通过实例....... 网上关于这部分的内容比较少,参考了下这位的帖子:http://blog.csdn. ...

  4. Windows系统的四个重要概念——进程、线程、虚拟内存、内核模式和用户模式

    引言 本来在写一篇Windows内存管理的文章,写着写着就发现好多基础的概念都要先讲.更可怕的是,这些基础的概念我却不能完全讲清楚.只好再把这本<深入解析Windows操作系统>翻到第一章 ...

  5. 【003】【Java虚拟机——对象死亡的判断】

    对象死亡! 垃圾收集器在对堆进行回收前,首先要做的事情就是要确定这些对象之中哪些还"存活"着, 哪些已经"死去" (即不可能再被不论什么途径使用的对象). 1)  引用计 ...

  6. 保存画面为图片 当前MFC保存该程序为图片 c++ vc

    将屏幕保存为图片.使用vs2008编译通过. [cpp] view plaincopy #include "stdafx.h" #include <windows.h> ...

  7. 《Linux Device Drivers》第十一章 核心数据类型——note

    基本介绍 因为Linux多平台特性,不管是哪一个重要驱动力应该是便携 与内核代码相关的核心问题应该是访问的同时是数据项的已知长度.能力和利用不同的处理器 内核使用的数据类型主要分为三类 类似int这种 ...

  8. python3操作注册表设置/取消IE代理

    import io, sys, time, re, os import winreg def enableProxy(IP, Port): proxy = IP + ":" + s ...

  9. kendo ui gird温馨提示(使用本地数据) 一个

    加入js引用 <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" r ...

  10. java堆 (转)

     Java栈和堆 ----这两个概念未知很长一段时间,终于找到了一个很好的文本.使用和共享 1. 堆(stack)堆(heap)他们是Java使用Ram本地存储的数据. 与C++不同,Java主动管理 ...