转自：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. 影响wifi信号强度因素

    影响WIFI信号强度因素: 1.室内错综复杂的环境,会在一定程度上导致WIFI无线信号产生多径传播现象,从而导致信号强度的不稳定性: 2.室内的人员密集程度和人员流动情况也会对WIFI信号强度产生影响 ...

  2. 【51nod-1596】搬货物

    现在有n个货物,第i个货物的重量是 2wi .每次搬的时候要求货物重量的总和是一个2的幂.问最少要搬几次能把所有的货物搬完. 样例解释: 1,1,2作为一组. 3,3作为一组. Input 单组测试数 ...

  3. Cannot run program "svn" (in directory "G:\IntelliJ IDEA 2017.2.5"): CreateProcess error=2, 系统找不到指定的文件。

  4. Celery分布式应用

    最近有应用需要部署到不同的服务器上运行,但是有没有PBS这样的调度系统,就想起来Python的调度神器 Celery.现在针对我的实际应用做一些记录. 1. 安装 因为我并不注重结果而是把命令拿到不同 ...

  5. C#调用EasyPusher推送到EasyDarwin实现视频流中转

    本文转自:http://www.cnblogs.com/kangkey/p/6772863.html 最近在公司项目中,遇到需要将内网的监控视频信息,在外网进行查看,最终通过查阅资料,发现EasyDa ...

  6. matlab中double和im2double

    uint8的图像里 im2double其实就是double(I/255); 像素值被标准化到0-1. 16位图像以此类推.

  7. 人生苦短之我用Python篇（基础）

    Python简介 Python,是一种面向对象的解释型计算机程序设计语言,由荷兰人Guido van Rossum于1989年发明,第一个公开发行版发行于1991年. Python是纯粹的自由软件, ...

  8. I.MX6 PHY fixup 调用流程 hacking

    /********************************************************************************** * I.MX6 PHY fixu ...

  9. 转载 fpga中 restoring 和 non-restoring 除法实现。

    对于non-restoring方法,主要是用rem和den移位数据比较,rem_d长度为den+nom的总长,den_d长度为den+nom的总长度,rem_d的初始值为{{d_width{1'b0} ...

  10. Python学习系列（二）(基础知识)

    Python基础语法 Python学习系列(一)(基础入门) 对于任何一门语言的学习,学语法是最枯燥无味的,但又不得不学,基础概念较繁琐,本文将不多涉及概念解释,用例子进行相关解析,适当与C语言对比, ...