Java微信公众平台开发(十五)--微信JSSDK的使用

转自：http://www.cuiyongzhi.com/post/63.html

在前面的文章中有介绍到我们在微信web开发过程中常常用到的 【微信JSSDK中Config配置】 ，但是我们在真正的使用中我们不仅仅只是为了配置Config而已，而是要在我们的项目中真正去使用微信JS-SDK给我们带来便捷，那么这里我们就简述如何在微信web开发中使用必要的方法！微信的JS-SDk中为我们提供的方法很多，这里我有一个简单截图如下：

在上图的提供的所有口中我们可以按照接口实现的难易程度分成两个部分：

  • 较易实现：基础接口、分享接口、设备信息接口、地理位置接口、界面操作接口、微信扫一扫接口；
  • 较难实现：图像接口、音频接口、智能接口、微信小店接口、微信卡券接口、微信支付接口；（注：这里说较难是因为需要后端和本地文件配合接口，这些接口后面会一篇篇文章具体详解）

在这里我们将讲述所有较易实现的接口的具体实现方法，在文章 http://www.cuiyongzhi.com/index.php/post/57.html  中讲述过了如何配置和引入需要的js，通过这些配置之后我们就可以开始使用js的方法了！

①基础接口-判断当前浏览器是否支持某些js接口


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

/*

 * 注意：

 *  所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

 */

wx.ready(function () {

  //1. 判断当前版本是否支持指定 JS 接口，支持批量判断，只需要将需要判断的接口放入到jsApiList中即可

 checkJsApifunction () {

    wx.checkJsApi({

      jsApiList: [

        ‘getNetworkType‘,

        ‘previewImage‘

      ],

      success: function (res) {

        alert(JSON.stringify(res));

      }

    });

  };

②分享接口，这里包含：分享给朋友、分享到朋友圈、分享到qq、分享到微博、分享到qq空间(但是这里要提醒要注意不要有诱导分享等违规行为，对于诱导分享行为将永久回收公众号接口权限)


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

 // 2. 分享接口

  // 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口

  onMenuShareAppMessagefunction () {

    wx.onMenuShareAppMessage({

      title: ‘菜鸟程序员成长之路！‘,

      desc: ‘关注java平台开发，前后端框架技术，分享前后端开发资源，服务端教程技术，菜鸟程序员！‘,

      link: ‘http://www.cuiyongzhi.com/‘,

      imgUrl: ‘http://res.cuiyongzhi.com/2016/03/201603201591_339.png‘,

      trigger: function (res) {

        // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回

        alert(‘用户点击发送给朋友‘);

      },

      success: function (res) {

        alert(‘已分享‘);

      },

      cancel: function (res) {

        alert(‘已取消‘);

      },

      fail: function (res) {

        alert(JSON.stringify(res));

      }

    });

    alert(‘已注册获取“发送给朋友”状态事件‘);

  };

  // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口

  onMenuShareTimelinefunction () {

    wx.onMenuShareTimeline({

      title: ‘菜鸟程序员成长之路！‘,

      link: ‘http://www.cuiyongzhi.com/‘,

      imgUrl: ‘http://res.cuiyongzhi.com/2016/03/201603201591_339.png‘,

      trigger: function (res) {

        // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回

        alert(‘用户点击分享到朋友圈‘);

      },

      success: function (res) {

        alert(‘已分享‘);

      },

      cancel: function (res) {

        alert(‘已取消‘);

      },

      fail: function (res) {

        alert(JSON.stringify(res));

      }

    });

    alert(‘已注册获取“分享到朋友圈”状态事件‘);

  };

  // 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口

  onMenuShareQQfunction () {

    wx.onMenuShareQQ({

      title: ‘菜鸟程序员成长之路！‘,

      desc: ‘关注java平台开发，前后端框架技术，分享前后端开发资源，服务端教程技术，菜鸟程序员！‘,

      link: ‘http://www.cuiyongzhi.com/‘,

      imgUrl: ‘http://res.cuiyongzhi.com/2016/03/201603201591_339.png‘,

      trigger: function (res) {

        alert(‘用户点击分享到QQ‘);

      },

      complete: function (res) {

        alert(JSON.stringify(res));

      },

      success: function (res) {

        alert(‘已分享‘);

      },

      cancel: function (res) {

        alert(‘已取消‘);

      },

      fail: function (res) {

        alert(JSON.stringify(res));

      }

    });

    alert(‘已注册获取“分享到 QQ”状态事件‘);

  };

  

  // 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口

  onMenuShareWeibofunction () {

    wx.onMenuShareWeibo({

     title: ‘菜鸟程序员成长之路！‘,

      desc: ‘关注java平台开发，前后端框架技术，分享前后端开发资源，服务端教程技术，菜鸟程序员！‘,

      link: ‘http://www.cuiyongzhi.com/‘,

      imgUrl: ‘http://res.cuiyongzhi.com/2016/03/201603201591_339.png‘,

      trigger: function (res) {

        alert(‘用户点击分享到微博‘);

      },

      complete: function (res) {

        alert(JSON.stringify(res));

      },

      success: function (res) {

        alert(‘已分享‘);

      },

      cancel: function (res) {

        alert(‘已取消‘);

      },

      fail: function (res) {

        alert(JSON.stringify(res));

      }

    });

    alert(‘已注册获取“分享到微博”状态事件‘);

  };

  // 2.5 监听“分享到QZone”按钮点击、自定义分享内容及分享接口

  onMenuShareQZonefunction () {

    wx.onMenuShareQZone({

      title: ‘菜鸟程序员成长之路！‘,

      desc: ‘关注java平台开发，前后端框架技术，分享前后端开发资源，服务端教程技术，菜鸟程序员！‘,

      link: ‘http://www.cuiyongzhi.com/‘,

      imgUrl: ‘http://res.cuiyongzhi.com/2016/03/201603201591_339.png‘,

      trigger: function (res) {

        alert(‘用户点击分享到QZone‘);

      },

      complete: function (res) {

        alert(JSON.stringify(res));

      },

      success: function (res) {

        alert(‘已分享‘);

      },

      cancel: function (res) {

        alert(‘已取消‘);

      },

      fail: function (res) {

        alert(JSON.stringify(res));

      }

    });

    alert(‘已注册获取“分享到QZone”状态事件‘);

  };

③设备信息接口--这里是获取设备网络状态，以防在页面中存在视频或者大流量文件播放的时候对用户给出友好提示！


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

  // 3 设备信息接口

  // 3.1 获取当前网络状态

  getNetworkTypefunction () {

    wx.getNetworkType({

      success: function (res) {

        alert(res.networkType);

        var networkType = res.networkType; // 返回网络类型2g，3g，4g，wifi

        if(networkType==‘3g‘){

            alert("您好，您的网络状态是3g网络，这里将播放视频文件会产生大流程!");

        }

      },

      fail: function (res) {

        alert(JSON.stringify(res));

      }

    });

  };

④地理位置接口，这里包含查看经纬度对应的地图位置和获取当前位置的经纬度，可用做地图位置展示的第一步！


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

  // 4 地理位置接口

  // 4.1 查看地理位置

  openLocationfunction () {

    wx.openLocation({

      latitude: 23.099994,

      longitude: 113.324520,

      name: ‘TIT 创意园‘,

      address: ‘广州市海珠区新港中路 397 号‘,

      scale: 14,

      infoUrl: ‘http://weixin.qq.com‘

    });

  };

  // 4.2 获取当前地理位置

  getLocationfunction () {

    wx.getLocation({

      success: function (res) {

        alert(JSON.stringify(res));

      },

      cancel: function (res) {

        alert(‘用户拒绝授权获取地理位置‘);

      }

    });

  };

⑤界面操作接口，这里说的界面操作其实就是在微信浏览器中操作和改名的那右上角的【三个点】，对这里隐藏的菜单进行操作和关闭微信浏览器！


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

  // 5 界面操作接口

  // 5.1 隐藏右上角菜单

  hideOptionMenufunction () {

    wx.hideOptionMenu();

  };

  // 5.2 显示右上角菜单

  showOptionMenufunction () {

    wx.showOptionMenu();

  };

  // 5.3 批量隐藏菜单项

  hideMenuItemsfunction () {

    wx.hideMenuItems({

      menuList: [

        ‘menuItem:readMode‘, // 阅读模式

        ‘menuItem:share:timeline‘, // 分享到朋友圈

        ‘menuItem:copyUrl‘ // 复制链接

      ],

      success: function (res) {

        alert(‘已隐藏“阅读模式”，“分享到朋友圈”，“复制链接”等按钮‘);

      },

      fail: function (res) {

        alert(JSON.stringify(res));

      }

    });

  };

  // 5.4 批量显示菜单项

  showMenuItemsfunction () {

    wx.showMenuItems({

      menuList: [

        ‘menuItem:readMode‘, // 阅读模式

        ‘menuItem:share:timeline‘, // 分享到朋友圈

        ‘menuItem:copyUrl‘ // 复制链接

      ],

      success: function (res) {

        alert(‘已显示“阅读模式”，“分享到朋友圈”，“复制链接”等按钮‘);

      },

      fail: function (res) {

        alert(JSON.stringify(res));

      }

    });

  };

  // 5.5 隐藏所有非基本菜单项

  hideAllNonBaseMenuItemfunction () {

    wx.hideAllNonBaseMenuItem({

      success: function () {

        alert(‘已隐藏所有非基本菜单项‘);

      }

    });

  };

  // 5.6 显示所有被隐藏的非基本菜单项

  showAllNonBaseMenuItemfunction () {

    wx.showAllNonBaseMenuItem({

      success: function () {

        alert(‘已显示所有非基本菜单项‘);

      }

    });

  };

  // 5.7 关闭当前窗口

  closeWindowfunction () {

    wx.closeWindow();

  };

⑥微信扫一扫接口，这个接口可以在页面调用微信的扫一扫功能，其中参数needResult可以设置扫描之后的处理方式；


1

2

3

4

5

6

7

8

  // 6 微信原生接口

 wx.scanQRCode({

    needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，

    scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有

    success: function (res) {

    var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果

}

});

原文地址：https://www.cnblogs.com/sharpest/p/10254977.html

时间： 2024-11-08 01:01:43

Java微信公众平台开发(十五)--微信JSSDK的使用的相关文章

Java微信公众平台开发(十六)--微信网页授权(OAuth2.0授权)获取用户基本信息

转自:http://www.cuiyongzhi.com/post/78.html 好长时间没有写文章了,主要是最近的工作和生活上的事情比较多而且繁琐,其实到现在我依然还是感觉有些迷茫,最后还是决定静下心来坚持一开始的选择,继续我们的微信系列文章的后续更新,也希望在自己有时间的时候能把更多的内容呈现给大家,前面一系列的文章讲述了很多微信开发相关的基础知识点 [微信系列文章],那么从这一篇开始将讲述微信较深一层次或者说在产品应用中时刻会用到的一些技术点,那么下面就让我们进入正题吧,这一篇我要讲述的

微信公众平台开发(一) 申请微信公众账号

一.微信公众平台介绍 微信公众平台是腾讯公司在微信的基础上新增的功能模块,通过这一平台,个人和企业都可以打造一个微信的公众号,可以群发文字.图片.语音.视频.图文消息五个类别的内容. 二.注册微信公众号 1.注册地址: https://mp.weixin.qq.com/ 点击右上角的"立即注册"申请微信公众账号. 2.填写基本信息 3.激活邮箱账号 到邮箱中收取邮件,激活公众平台账号. 4.信息登记 通过邮箱激活后,填写基本信息.选择为"个人"后,后面只能选择&qu

PHP微信公众平台开发高级篇—微信JS-SDK

PHP微信公众平台开发高级篇—微信JS-SDK 第一步.绑定域名: 第二步.引入JS文件: 第三部.通过Config接口注入权限验证配置 第四部.通过Read接口处理成功验证 第五部.通过Error接口处理失败验证 实际案例:分享接口内容

【微信公众平台开发】借用微信内置图片浏览功能

开发微信公众平台时,碰到文章中有很多图片,需要可以点开图片浏览:那么点击图片直接调用微信客户端自带的图片播放组件会省很多事.否则你得去摆弄折腾各种图片浏览插件,比如photoswipe. 个人封装功能成一个js文件.把该文件放到你需要的网页里面即可,这样文章当你点击图片时,就会调用图片浏览功能! <script> function addLoadEvent(func){ //将函数作为参数,此函数就是 onload 触发时需要执行的某个函数 var oldonload=window.onloa

Java微信公众平台开发(一)--接入微信公众平台

转自:http://www.cuiyongzhi.com/post/38.html (一)接入流程解析 在我们的开发过程中无论如何最好的参考工具当然是我们的官方文档了:http://mp.weixin.qq.com/wiki/8/f9a0b8382e0b77d87b3bcc1ce6fbc104.html 通过文档我们可以看出其中接入微信公众平台开发,开发者需要按照如下步骤完成: 填写服务器配置 验证服务器地址的有效性 依据接口文档实现业务逻辑 按照上面的逻辑可能是填写服务器配置信息是在第一步,但

微信公众平台开发之申请微信开发测试号及花生壳内网映射

微信公众测试号申请方式 1.已有微信公众平台账号 登录微信公众平台,点击工具栏左下角"开发者工具" 找到公众平台测试账号,点击进入 测试号管理界面 2.没有公众平台账号 直接打开网址:http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login   扫描登录即可. 使用花生壳内网映射 微信公众平台开发需要有自己的服务器资源,如果没有,可以使用自己能上网的电脑用花生壳做内网映射. 进入花生壳官网:http://hsk.oray

Java微信公众平台开发(十四)【番外篇】--微信web开发者工具使用

转自:http://www.cuiyongzhi.com/post/58.html 为帮助开发者更方便.更安全地开发和调试基于微信的网页,微信推出了 web 开发者工具.它是一个桌面应用,通过模拟微信客户端的表现,使得开发者可以使用这个工具方便地在 PC 或者 Mac 上进行开发和调试工作.你可以: 使用自己的微信号来调试微信网页授权 调试.检验页面的 JS-SDK 相关功能与权限,模拟大部分 SDK 的输入和输出 使用基于 weinre 的移动调试功能 利用集成的 Chrome DevTool

PHP实现微信公众平台开发 全套视频资源下载

好久没有更新东西了,今天给大家分享一份比较不错的视频学习资源吧. 主要是关于PHP实现微信公众平台开发,   不知道大家对于微信平台的开发有多少了解,那么今天就从基础开始吧,资源目录如下(PS :适各自的能力去看吧!) 第一部分: PHP实现微信公众平台开发-基础篇 (下载请点击) 注: 本课程作为学习微信开发的基础课程,详细介绍了微信开发的准备条件,以及如何申请一个微信公众账号,并在项目应用中如何成功接入微信开发的api接口,课程由浅入深,内容详实,非常适合新手学习. 第二部分: PHP实现微

微信公众平台开发问答 【转发】

微信公众平台开发问答 微信公众平台开发问答是一个微信知识问答区,专注于提供微信应用及开发技术知识的整理.归类和检索. 主题:新手常见问题 问:我是新手,没有开发基础,应该如何学习微信公众平台的开发?答:先学习PHP和Mysql,可以在网上找相应的教程,也可参考书籍<PHP和MySQL Web开发(原书第4版)>:再学习微信公众平台开发入门教程,了解微信收发消息原理及回复:然后根据微信开发文档,熟悉接口,并在此基础上实现一些基本的小功能,并扩展到更复杂的功能上. 问:URL和Token是什么意思