vue引入微信sdk 实现分享朋友圈获取地理位置功能


Posted in Javascript onJuly 04, 2019

最近入职的公司主要做微信端的h5,所以在所难免要引用sdk。虽然官方文档写的还算清楚,但是还是有坑。

1.在index.html中 引入微信sdk

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

2.在assets/js 下新建文件 wx.js

export default {
 wxShowMenu: function (that,sign='') {
  let url = window.location.href.split('#')[0]
  that.$http.post('/xxx', //请求你们公司后台的接口 获取相关的配置
   that.$getSingQuery({
    appKey: 'xxx',
    url
   }))
   .then(res => {
    var getMsg = res.data.data;
    // console.log('微信配置----------')
    // console.log(res.data)
    wx.config({
     debug: false, //生产环境需要关闭debug模式  测试环境下可以设置为true 可以在开发者工具中查看问题
     appId: getMsg.appid, //appId通过微信服务号后台查看
     timestamp: getMsg.timestamp, //生成签名的时间戳
     nonceStr: getMsg.noncestr, //生成签名的随机字符串
     signature: getMsg.sign, //签名
     jsApiList: [ //需要调用的JS接口列表
      'updateAppMessageShareData', //自定义“分享给朋友”及“分享到QQ”按钮的分享内容(1.4.0) 新接口
      'updateTimelineShareData', //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容(1.4.0) 老接口
      'onMenuShareTimeline', //分享到朋友圈 老接口
      'onMenuShareAppMessage',//分享给盆友 老接口
      'getLocation' //获取定位
     ]
    });
    wx.error(function (res) {
     // alert(JSON.stringify(res))
     console.log(res)
     // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
    });
    wx.ready(function () {
     if(sign=='location'){ //由于 获取定位往往是页面一加载 就提示获取地理位置 所以可以直接在写在 wx.ready
      wx.getLocation({
       type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
       success: function (res) {
        var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
        var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
        var speed = res.speed; // 速度,以米/每秒计
        var accuracy = res.accuracy; // 位置精度
        that.latitude=res.latitude;
        that.longitude=res.longitude;
        that.geocodeRegeo()//逆地理编码 调用你vue实例里的方法
        do something...
       }
      });
     }
    });
   })
   .catch(error => {
    alert(error)
    console.log(error)
   })
 }
}

3.在main.js 将WXConfig绑在vue原型上 这样哪个页面需要初始化 直接通过原型就可以拿到

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

4.在需要的页面 进行初始化

微信JS-SDK说明文档:同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用。

所以 我们在你需要的页面 mounted 时, this.WXConfig.wxShowMenu(this); 调用就可以。

我这里将this传入 只是为了能直接在wx.js 调用vue上的一些方法。比如axios

mounted: function () {
  this.WXConfig.wxShare(this);
 },

通过按钮自定义触发

html

<div class="fxbox bor_b"
   @click="shareFriend">分享给朋友</div>
<div class="fxbox bor_b"
   @click="shareFriendCircle">分享到朋友圈</div>

js

shareFriendCircle () {
   let that = this
   wx.onMenuShareTimeline({
    title: this.dataCode.title, // 分享标题
    desc: this.dataCode.desc, //分享描述
    link: this.dataCode.link,// 分享链接
    imgUrl: this.dataCode.imgUrl, // 分享图标
    success () {
     console.log('分享给朋友圈 旧')

    }
   });
  },
    // 分享给朋友 旧
  shareFriend () {
   let that = this
   wx.onMenuShareAppMessage({
    title: this.dataCode.title, // 分享标题
    desc: this.dataCode.desc, //分享描述
    link: this.dataCode.link,// 分享链接
    imgUrl: this.dataCode.imgUrl, // 分享图标
    success () {
     console.log('分享给朋友 旧')
    }
   });
  },

5.新老接口的区别

新接口 
  'updateAppMessageShareData' //自定义“分享给朋友”及“分享到QQ”按钮的分享内容(1.4.0) 
  'updateTimelineShareData',//自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容(1.4.0)
老接口
  'onMenuShareTimeline', //分享到朋友圈 
  'onMenuShareAppMessage',//分享给盆友

注意

新接口中的 success 回调函数 指的是 你的那些title desc... 自定义设置成功 了的回调函数,而不是用户主动点击微信右上角的三个点,点击分享给朋友或者朋友圈,分享成功的回调函数。
老接口 success 回调函数 是指 用户成功分享 给朋友或者朋友圈的回调函数
经测试 使用新接口 在 ios 下表现正常 ,在 部分安卓机下失效 了

建议使用老接口 无此问题

6.补充

还有一点, link: this.dataCode.link,// 分享链接

该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

总结

以上所述是小编给大家介绍的vue引入微信sdk 实现分享朋友圈获取地理位置功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
基于jquery+thickbox仿校内登录注册框
Jun 07 Javascript
JavaScript中的稀疏数组与密集数组[译]
Sep 17 Javascript
jquery按回车提交数据的代码示例
Nov 05 Javascript
js对象转json数组的简单实现案例
Feb 28 Javascript
在AngularJS中使用AJAX的方法
Jun 17 Javascript
javaScript中Math()函数注意事项
Jun 18 Javascript
jquery.validate使用详解
Jun 02 Javascript
JavaScript动态检验密码强度的实现方法
Nov 09 Javascript
JQuery异步提交表单与文件上传功能示例
Jan 12 Javascript
KOA+egg.js集成kafka消息队列的示例
Nov 09 Javascript
微信小程序 select 下拉框组件功能
Sep 09 Javascript
node.js如何自定义实现一个EventEmitter
Jul 16 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
Jul 04 #Javascript
微信小程序自定义弹窗实现详解(可通用)
Jul 04 #Javascript
Vue 3.x+axios跨域方案的踩坑指南
Jul 04 #Javascript
Vue.js递归组件实现组织架构树和选人功能
Jul 04 #Javascript
vue-cli配置flexible过程详解
Jul 04 #Javascript
vue动态配置模板 'component is'代码
Jul 04 #Javascript
react 移动端实现列表左滑删除的示例代码
Jul 04 #Javascript
You might like
PHP的FTP学习(一)
2006/10/09 PHP
PHP session_start()问题解疑(详细介绍)
2013/07/05 PHP
深入讲解PHP Session及如何保持其不过期的方法
2015/08/18 PHP
深入理解PHP之OpCode原理详解
2016/06/01 PHP
PHP学习记录之数组函数
2018/06/01 PHP
javascript数组组合成字符串的脚本
2021/01/06 Javascript
Extjs学习笔记之六 面版
2010/01/08 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
vue axios用法教程详解
2017/07/23 Javascript
React Native使用Modal自定义分享界面的示例代码
2017/10/31 Javascript
Angular设置别名alias的方法
2018/11/08 Javascript
微信小程序实现页面监听自定义组件的触发事件
2020/11/01 Javascript
[03:04]2018年度DOTA2玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
Python中的lstrip()方法使用简介
2015/05/19 Python
在Python中使用swapCase()方法转换大小写的教程
2015/05/20 Python
python统计日志ip访问数的方法
2015/07/06 Python
python从入门到精通(DAY 1)
2015/12/20 Python
Python二叉树定义与遍历方法实例分析
2018/05/25 Python
Python如何发布程序的详细教程
2018/10/09 Python
使用PIL(Python-Imaging)反转图像的颜色方法
2019/01/24 Python
QML使用Python的函数过程解析
2019/09/26 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
利用python实现平稳时间序列的建模方式
2020/06/03 Python
CSS3+js实现简单的时钟特效
2015/03/18 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
2013/01/09 HTML / CSS
GEOX鞋美国官方网站:意大利会呼吸的鞋
2017/07/12 全球购物
香港时尚女装购物网站:ZAFUL
2017/07/19 全球购物
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
二手房购房协议书范本
2014/10/05 职场文书
80后婚前协议书范本
2014/10/24 职场文书
2015年小学英语教师工作总结
2015/05/12 职场文书
九九重阳节致辞
2015/07/31 职场文书
python 解决微分方程的操作(数值解法)
2021/05/26 Python