在vue项目中我们先npm install weixin-js-sdk --save下载下来在main.js文件中引入
import wx from 'weixin-js-sdk';//引入
Vue.prototype.wx = wx//
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
//  分享 调用sdk
// 微信分参数
getConfig() {
this.showFx = true
var _this=this;
// let url = location.href.split('#')[0] //获取锚点之前的链接
let url = encodeURIComponent(window.location.href.split('#')[0]) //获取锚点之前的链接
console.log(url)
//let url = 'http://xiaofeng.ckugua.com/index.html' //获取锚点之前的链接
// console.log(url)
_this.$Ajax.post('webchat/config?url='+url).then(response => {
// console.log(response)
let res = JSON.parse(response.data.data);
console.log(res)
_this.wxInit(res);
})
},
// 微信分享
wxInit(res) {
var _this=this;
let url = window.location.href.split('?')[0] //获取锚点之前的链接
console.log(url)
// let links = url+'#/Food/' + this.$route.params.id;
let links = url+'#/product/productDetails?pid='+_this.$route.query.pid;
console.log(links)
let title = '晓峰科技';
let desc = '了解更多,请关注“晓峰科技”公众号';
let imgUrl = 'http://wx.qlogo.cn/mmhead/Q3auHgzwzM4soO2NoID1uZPHibOVgkJoPoaelibibF3GagvW2o43wRASA/0';
_this.wx.config({
debug: false,
appId: res.appId,
timestamp: res.timestamp,
nonceStr: res.nonceStr,
signature: res.signature,
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline']
});
_this.wx.ready(function() {
_this.wx.onMenuShareAppMessage({
title: title, // 分享标题
desc: desc, // 分享描述
link: links, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function() {
alert('分享成功')
_this.showFx =false;
},
cancel: function() {
alert('分享失败')
_this.showFx =false;
}
});
//微信分享菜单测试
_this.wx.onMenuShareTimeline({
title: title, // 分享标题
desc: desc, // 分享描述
link: links, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function() {
alert('分享成功')
_this.isShow =true;
},
cancel: function() {
alert('分享失败')
_this.isShow =true;
}
})
});
_this.wx.error(function(err) {
alert(JSON.stringify(err))
});
}

  

实现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. Visual Studio Code同时debug多种代码的方式

    今天看了一下,猜应该是configurations里面多写一个就行,试了下,真的可以同时debug Python和Go代码. 可以打断点.单步执行Python和Go代码. launch.json 如下 ...

  2. 【每日一句】make a scene

    scene有场面.场景的意思,只是make a scene可不是指做场面.scene还有还有一个意思,指很生气而大吵大闹(的情景),因此make a scene就是指某人情绪失控发脾气.如今一起从以下 ...

  3. 在WPF中添加3D特性

    原文:在WPF中添加3D特性 35.4  在WPF中添加3D特性 本节介绍WPF中的3D特性,其中包含了开始使用该特性的信息. 提示: WPF中的3D特性在System.Windows.Media.M ...

  4. 对scrollTop的研究

    本文主要从原生 JS以及jquery来说明scrollTop是如何实现的,以及一些技巧,以及在PC端和移动端使用的差异. 首先用代码表示下如何回到顶部的简单原理 <!doctype html&g ...

  5. OpenGL(二十一) glPolygonOffset设置深度偏移解决z-fighting闪烁问题

    开启深度测试后OpenGL就不会再去绘制模型被遮挡的部分,这样实现的显示画面更为真实,但是由于深度缓冲区精度的限制,对于深度相差非常小的情况(例如在同一平面上进行两次绘制),OpenGL就不能正确判定 ...

  6. 写在程序猿的困惑(特别Java程序猿)入行一年,感觉我不知道接下来该怎么办才能不断进步的,寻求翼

    入行了一年.感觉不知道接下来该怎么做才干继续进步了,求不吝赐教(V2EX) @kafka0102 :做技术能够学的东西太多了.仅仅是在不同的阶段做好不同的规划.要结合当前所做的事情去做更深入或广度的学 ...

  7. java_Mac安装多个JDK版本并设置环境变量

    JDK6.JDK7.JDK8三个版本的汇总地址:https://pan.baidu.com/s/1pKSYv8Z 安装 JDK6安装 JDK6下载地址 见网盘 安装完毕后确认版本 JavaForOSX ...

  8. 从PRISM开始学WPF(八)导航Navigation?

    原文:从PRISM开始学WPF(八)导航Navigation? 0x6Navigation Basic Navigation Prism中的Navigation提供了一种类似导航的功能,他可以根据用户 ...

  9. Windows10 【系统周期表】【系统下载表】【大型软件表】

    系统周期表 商用名称 商用英文名 代号 版本 系统版本 上市日期 服务周期 备注 Windows 10 无 Threshold 1 1507 10.0.10240.17443 2015.07.29 2 ...

  10. Oracle报错:不是单组分组函数

    报错:不是单组分组函数 实例:select sum(HWJZ) ,rq from  JcChargeInfo 原因: 1.如果程序中使用了分组函数,则有两种情况可以使用: 程序中存在group by, ...