转自：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/',
      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/',
      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/',
      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/',
      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/',
      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 时，扫码返回的结果
}
});

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

  1. Java微信公众平台开发(十二)--微信用户信息的获取

    转自:http://www.cuiyongzhi.com/post/56.html 前面的文章有讲到微信的一系列开发文章,包括token获取.菜单创建等,在这一篇将讲述在微信公众平台开发中如何获取微信 ...

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

    转自:http://www.cuiyongzhi.com/post/78.html 好长时间没有写文章了,主要是最近的工作和生活上的事情比较多而且繁琐,其实到现在我依然还是感觉有些迷茫,最后还是决定静 ...

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

    在前面的文章中有介绍到我们在微信web开发过程中常常用到的 [微信JSSDK中Config配置],但是我们在真正的使用中我们不仅仅只是为了配置Config而已,而是要在我们的项目中真正去使用微信JS- ...

  4. Java微信公众平台开发(十)--微信用户信息的获取

    前面的文章有讲到微信的一系列开发文章,包括token获取.菜单创建等,在这一篇将讲述在微信公众平台开发中如何获取微信用户的信息,在上一篇我们有说道微信用户和微信公众账号之间的联系可以通过Openid关 ...

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

    转自:http://www.cuiyongzhi.com/post/38.html (一)接入流程解析 在我们的开发过程中无论如何最好的参考工具当然是我们的官方文档了:http://mp.weixin ...

  6. Java微信公众平台开发(十)--微信自定义菜单的创建实现

    转自:http://www.cuiyongzhi.com/post/48.html 自定义菜单这个功能在我们普通的编辑模式下是可以直接在后台编辑的,但是一旦我们进入开发模式之后我们的自定义菜单就需要自 ...

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

    转自:http://www.cuiyongzhi.com/post/58.html 为帮助开发者更方便.更安全地开发和调试基于微信的网页,微信推出了 web 开发者工具.它是一个桌面应用,通过模拟微信 ...

  8. David Camp 微信公众平台开发官方内容拓展版---PHP版本

    微信公众平台开发(一) 配置接口 微信公众平台开发(二) 微信公众平台示例代码分析 微信公众平台开发(三) 订阅事件(subscribe)处理 微信公众平台开发(四) 简单回复功能开发 微信公众平台开 ...

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

    好久没有在博客园更新东西了,今天给大家分享一份比较不错的视频学习资源吧. 主要是关于PHP实现微信公众平台开发,  不知道大家对于微信平台的开发有多少了解,那么今天就从基础开始吧,资源目录如下(PS ...

随机推荐

  1. python django框架(一)

    s4day63内容回顾: 1. 安装 2. 创建用户 + 授权 3. 连接 - 数据库 终端创建数据库(字符编码) - 数据表 终端 ORM pymysql create ...)engine=inn ...

  2. UI- 五种手势识别总结

    #pragma mark - 手势  总共有五种手势  分别为 Tap点击 Pan拖拽 LongPress长时间按压 Pinch捏合手势 rotation旋转 1. 定义成员变量 UIImageVie ...

  3. linux简单介绍，helloworld，vi使用，用户管理

    linux特点1.免费的.开源的2.支持多线程.多用户的3.安全性好4.对内存和文件管理优越 缺点:操作相对困难 linux最小只需要4m -> 嵌入式开发 我们使用 vm[虚拟机] 虚拟了一个 ...

  4. CSS3 Media Query 响应式媒体查询

    在CSS中,有一个极其实用的功能:@media 响应式布局.具体来说,就是可以根据客户端的介质和屏幕大小,提供不同的样式表或者只展示样式表中的一部分.通过响应式布局,可以达到只使用单一文件提供多平台的 ...

  5. python 魔法方法补充（__setattr__,__getattr__,__getattribute__）

    python 魔法方法补充 1 getattribute (print(ob.name) -- obj.func())当访问对象的属性或者是方法的时候触发 class F(object): def _ ...

  6. CBP是什么？

    coded_block_pattern  简称CBP,用来反映该宏块编码中残差情况的语法元素.CBP共有6位,其中前面2位代表UV分量,描述如下表所示:后面4位是Y分量,分别代表宏块内的4个8x8子宏 ...

  7. ActiveReports报表控件V11 SP1版本正式发布！

    无需编码,即可轻松搞定商业报表六大需求的 ActiveReports 报表控件,于今日宣布正式发布 V11 SP1 版本,并在其 官方网站 提供免费下载. V11 版本是 ActiveReports ...

  8. CENTOS7.3 64位架设使用MYSQL数据库的ASP.NET CORE网站

    注:本人使用的是云服务器,具体CentOS怎么安装这里不作赘述. 网站架设效果可以查看https://www.resape.com 一.在CentOS上安装Dotnet Core环境 1.Add th ...

  9. Gradle配置IDEA正常识别JPA Metamodel Generator动态生成的代码

    我们在使用JPA动态查询构建查询条件时,为了实现安全的类型检查,常常需要引用Hibernate JPA Metamodel Generator自动为我们生成静态元模型类. 而这些类由于编译时由Hibe ...

  10. 剑指Offer面试题：6.旋转数组中的最小数字

    一 题目:旋转数组中的最小数字 题目:把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转.输入一个递增排序的数组的一个旋转,输出旋转数组的最小元素.例如数组{3,4,5,1,2}为{1, ...