专栏首页g歌德aJava微信公众平台开发(十二)--微信JSSDK的使用 (一)修改我们的menue。(二)测试

Java微信公众平台开发(十二)--微信JSSDK的使用 (一)修改我们的menue。(二)测试

在前面的文章中有介绍到我们在微信web开发过程中常常用到的 【微信JSSDK中Config配置】 ,但是我们在真正的使用中我们不仅仅只是为了配置Config而已,而是要在我们的项目中真正去使用微信JS-SDK给我们带来便捷,那么这里我们就简述如何在微信web开发中使用必要的方法!在开始之前,上一篇有朋友有疑问,如何在手机端显示,这里我们来补充一下:

这里的前提是你要跟着做到,浏览器显示返回200 状态码。

(一)修改我们的menue。

打开我们的menueMain,将Button修改,修改后的代码如下:

 1 @Component
 2 public class MenuMain {
 3     public void createMenu(){
 4          ViewButton cbt=new ViewButton();
 5             cbt.setUrl("http://zqfbk.iok.la/mychat/jssdkconfig.jsp");
 6             cbt.setName("测试");
 7             cbt.setType("view");
 8              
 9              
10             ViewButton vbt=new ViewButton();
11             vbt.setUrl("https://www.cnblogs.com/gede");
12             vbt.setName("博客");
13             vbt.setType("view");
14              
15             JSONArray sub_button=new JSONArray();
16             sub_button.add(cbt);
17             sub_button.add(vbt);
18              
19              
20             JSONObject buttonOne=new JSONObject();
21             buttonOne.put("name", "菜单");
22             buttonOne.put("sub_button", sub_button);
23              
24             JSONArray button=new JSONArray();
25             button.add(vbt);
26             button.add(buttonOne);
27             button.add(cbt);
28              
29             JSONObject menujson=new JSONObject();
30             menujson.put("button", button);
31             System.out.println(menujson);
32             
33             //这里为请求接口的url   +号后面的是token,这里就不做过多对token获取的方法解释
34             String url="https://api.weixin.qq.com/cgi-bin/menu/create?access_token="+GlobalConstants.getInterfaceUrl("access_token");
35              
36             try{
37                 String rs=HttpUtils.sendPostBuffer(url, menujson.toJSONString());
38                 System.out.println(rs);
39             }catch(Exception e){
40                 System.out.println("请求错误!");
41             }
42     }
43 }

修改完成后,运行项目,调用我们的生成菜单方法:在浏览器中输入:http://zqfbk.iok.la/mychat/menue/。调用成功,后台会返回如下信息:

(二)测试

进入我们的公众号,点击测试,如下图,则配置成功:

接下来这里我们就简述如何在微信web开发中使用必要的方法!

在微信公众号提供的所有接口中我们可以按照接口实现的难易程度分成两个部分:

  • 较易实现:基础接口、分享接口、设备信息接口、地理位置接口、界面操作接口、微信扫一扫接口;
  • 较难实现:图像接口、音频接口、智能接口、微信小店接口、微信卡券接口、微信支付接口;(注:这里说较难是因为需要后端和本地文件配合接口)

在这里我们将讲述所有较易实现的接口的具体实现方法,在文在文章 https://www.cnblogs.com/gede/p/10949458.html中讲述过了如何配置和引入需要的js,通过这些配置之后我们就可以开始使用js的方法了!

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

 1 /*
 2  * 注意:
 3  *  所有的JS接口只能在公众号绑定的域名下调用,公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
 4  */
 5 wx.ready(function () {
 6   //1. 判断当前版本是否支持指定 JS 接口,支持批量判断,只需要将需要判断的接口放入到jsApiList中即可
 7  checkJsApifunction () {
 8     wx.checkJsApi({
 9       jsApiList: [
10         'getNetworkType',
11         'previewImage'
12       ],
13       success: function (res) {
14         alert(JSON.stringify(res));
15       }
16     });
17   };

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

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

 1 // 3 设备信息接口
 2   // 3.1 获取当前网络状态
 3   getNetworkTypefunction () {
 4     wx.getNetworkType({
 5       success: function (res) {
 6         alert(res.networkType);
 7         var networkType = res.networkType; // 返回网络类型2g,3g,4g,wifi
 8         if(networkType=='3g'){
 9             alert("您好,您的网络状态是3g网络,这里将播放视频文件会产生大流程!");
10         }
11       },
12       fail: function (res) {
13         alert(JSON.stringify(res));
14       }
15     });
16   };

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

 1 // 4 地理位置接口
 2   // 4.1 查看地理位置
 3   openLocationfunction () {
 4     wx.openLocation({
 5       latitude: 23.099994,
 6       longitude: 113.324520,
 7       name: 'TIT 创意园',
 8       address: '广州市海珠区新港中路 397 号',
 9       scale: 14,
10       infoUrl: 'http://weixin.qq.com'
11     });
12   };
13  
14   // 4.2 获取当前地理位置
15   getLocationfunction () {
16     wx.getLocation({
17       success: function (res) {
18         alert(JSON.stringify(res));
19       },
20       cancel: function (res) {
21         alert('用户拒绝授权获取地理位置');
22       }
23     });
24   };

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

 // 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  // 6 微信原生接口
2  wx.scanQRCode({
3     needResult: 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
4     scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有
5     success: function (res) {
6     var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
7 }
8 });

那么到这里微信JS-SDK方法实现中的简答实现部分基本就讲述完成了!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Spring------自动化装配Bean(一) 一、创建 CompactDisc接口和SgetPeppers实现类二、启用spring组件扫描三、编写测试类,并运行 四、补充说明

      CompactDisc接口方法为播放。SgtPeppers实现CompactDisc接口。

    用户2417870
  • Ubuntu下安装nginx及使用

    首先介绍以下nginx。下图来自百科介绍:详细介绍地址:https://baike.baidu.com/item/nginx/3817705?fr=aladdi...

    用户2417870
  • 软件工程期末考试复习(五) 设计问题过程设计的工具程序复杂程度的定量度量

    1、程序流程图又称为程序框图,它是使用最广泛的描述过程设计的方法。程序流程图中使用的符号(a) 选择(分支); (b) 注释; (c) 预先定义的处理; (d)...

    用户2417870
  • 微信JS-SDK的使用

    通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为...

    越陌度阡
  • 微信公众平台开放JS-SDK(微信内网页开发工具包)

    微信公众平台开放JS-SDK(微信内网页开发工具包),这次开放接口是质的飞跃,是对开发者和广大用户一个利好的消息。未来的公众号图文消息会更丰富多彩,准备脑洞大开...

    ytkah
  • String - 171. Excel Sheet Column Number

    Given a column title as appear in an Excel sheet, return its corresponding colum...

    用户5705150
  • 小程序10行代码实现微信头像挂红旗,国庆节个性化微信头像

    至于如何创建小程序,我这里就不在细讲了,我也有写过创建小程序的文章,也有路过相关的学习视频,去翻下我历史文章找找就行。

    编程小石头
  • 谷歌大脑深度学习从入门到精通视频课程[1.4]:前馈神经网络——多层神经网络

    AI100 已经引入 Hugo Larochelle 教授的深度学习课程,会每天在公众号中推送一到两节课,并且对视频中的 PPT 进行讲解。课后,我们会设计一...

    AI科技大本营
  • PHP 获取客户端 IP 地址的办法实例代码

    $_SERVER[‘REMOTE_ADDR’]:浏览当前页面的用户计算机的ip地址

    砸漏
  • PHP 获取客户端 IP 地址的方法实例代码

    $_SERVER[‘REMOTE_ADDR’]:浏览当前页面的用户计算机的ip地址

    砸漏

扫码关注云+社区

领取腾讯云代金券