使用微信 JSSDK 实现微信分享、定位

香菊网 发表于: 2019-06-28 分类: H5部分  软件soft  前端front  

我们之前有时候的需求是要求用户在微信里面做二次分享的时候能分享自定义的内容,这个时候需要我们用到了微信的sdk,本文主要讲解的是微信的sdk的使用和分享&定位&支付。

如果想实现微信内H5页面拉起支付请   点击 :微信内部H5页面支付  

 

1 、JSSDK 的介绍

官方文档地址:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
因为微信公众号的开通对于大部分开发人员来说还是一个稍高的门槛,所以,微信搞了一个微信测试号,开发人员使用微信扫一下就可以获取。测试号貌似是全接口调用的哦!不用担心没有权限调用。
申请入口:https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

jssdk使用

2 、开发配置

所有配置参考下图

jssdk配置

注意:配置JS接口安全域名时,注意是 域名 不需要填写http/https,如果填写的话,在代码执行wx.config()时,会报 config:fail,Error: invalid url domain 错误,正确示例:www.whongbin.com 

3、微信 JSSDK 使用 (实现分享)

在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.4.0.js

jssdk的签名权限,这个权限是由后台提供的,前端只需要把 签名权限 注入到wx.config中就可以了,这里也提供下jssdk的下载地址http://demo.open.weixin.qq.com/jssdk/sample.zip,SDK中有demo,有不懂的可以联系我或者下方留言,

let shareInfo = {
  title: '分享标题',
  desc: '分享说明',
  link: '分享链接',
  imgUrl: '分享图片',
  success: () => {requestMsg("分享成功!");}
}

// config 公共方法 
wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: '', // 必填,公众号的唯一标识
    timestamp: , // 必填,生成签名的时间戳
    nonceStr: '', // 必填,生成签名的随机串
    signature: '',// 必填,签名
    jsApiList: ['openLocation','onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone'] // 必填,需要使用的JS接口列表 这里填写需要用到的微信api openlocation为使用微信内置地图查看位置接口
});

// ready 生命周期
wx.ready(function () {
    wx.checkJsApi({
        jsApiList: ['checkJsApi','openLocation','onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone'],
        success: function (res) {}
    });
    //微信好友
    wx.onMenuShareAppMessage(shareInfo);
    //朋友圈
    wx.onMenuShareTimeline(shareInfo);
    //分享qq
    wx.onMenuShareQQ(shareInfo);
    //QQ空间
    wx.onMenuShareQZone(shareInfo);
    //腾讯微博
    wx.onMenuShareWeibo(shareInfo);
});
wx.error(function(res){
    console.log(res);
});

注意: 这里需要注意的地方debug在上线后要改为false,jsApiList里要填你要使用的接口,不然没有作用

4 、实现定位

$('.btn2').click(function () {
    wx.openLocation({
        latitude: 22.545538, // 纬度,浮点数,范围为90 ~ -90。如果是动态获取的数据,使用parseFloat()处理数据
        longitude: 114.054565, // 经度,浮点数,范围为180 ~ -180。如果是动态获取的数据,使用parseFloat()处理数据;
        name: '这里填写位置名', // 位置名
        address: '位置名的详情说明', // 地址详情说明
        scale: 10, // 地图缩放级别,整形值,范围从1~28。默认为最大
    });
})

 

标签: H5部分软件soft前端front
Copyright © 2019 幻雨焉缘博客 | 浙ICP备19001843号-1
----------------------------------
种一棵树,最好的培养时间是十年前,其次是现在 加油  (ง •_•)ง。        ──── 前端攻城狮