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 相关文章推荐
JavaScript Array扩展实现代码
Oct 14 Javascript
js制作的鼠标悬浮时产生的下拉框效果
Oct 27 Javascript
JavaScript用Number方法实现string转int
May 13 Javascript
jQuery实现html表格动态添加新行的方法
May 28 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 Javascript
JQuery 设置checkbox值二次无效的解决方法
Jul 22 Javascript
JavaScript数据类型转换的注意事项
Jul 31 Javascript
JS获取input file绝对路径的方法(推荐)
Aug 02 Javascript
小程序如何定位所在城市及发起周边搜索
Feb 11 Javascript
vue实例的选项总结
Jun 09 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
Jul 12 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
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.ini修改php上传文件大小限制的方法详解
2013/06/17 PHP
PHP实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
2010/06/12 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
2014/06/09 Javascript
通过jquery 获取URL参数并进行转码
2014/08/18 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
2014/12/14 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
Js数组排序函数sort()介绍
2015/06/08 Javascript
JavaScript数组对象赋值用法实例
2015/08/04 Javascript
简单谈谈javascript中this的隐式绑定
2016/02/22 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
express+mockjs实现模拟后台数据发送功能
2018/01/07 Javascript
layui之select的option叠加问题的解决方法
2018/03/08 Javascript
JS canvas绘制五子棋的棋盘
2020/05/28 Javascript
微信小程序实现省市区三级地址选择
2020/06/21 Javascript
layui layer select 选择被遮挡的解决方法
2019/09/21 Javascript
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
[49:35]LGD vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
python实现的解析crontab配置文件代码
2014/06/30 Python
python发送HTTP请求的方法小结
2015/07/08 Python
Python获取SQLite查询结果表列名的方法
2017/06/21 Python
python实现对excel进行数据剔除操作实例
2017/12/07 Python
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
Python 带有参数的装饰器实例代码详解
2018/12/06 Python
pytorch自定义初始化权重的方法
2019/08/17 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
Python描述符descriptor使用原理解析
2020/03/21 Python
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
2013/01/31 HTML / CSS
2014全国两会大学生学习心得体会
2014/03/10 职场文书
2014大学班主任工作总结
2014/11/08 职场文书
平安家庭事迹材料
2014/12/20 职场文书
初中教务主任竞聘演讲稿(范文)
2019/08/20 职场文书
MySQL修改默认引擎和字符集详情
2021/09/25 MySQL
Docker下安装Oracle19c
2022/04/13 Servers