微信公众号开发者

微信公众号

普通订阅号功能能直接使用微信自带编辑器，生成图文消息，当需要使用部分功能时，仅仅使用微信的片机器不能满足要求，需要开发者直接对微信公众号进行开发

简述一下开发过程

0.进入开发者模式

进入微信公众平台，左侧开发选项——基本配置，开通微信开发者选项

前端人员直接进入开发者工具——开发者文档——微信网页开发——微信JS——SDK说明文档，查看开发步骤

开发步骤：微信JS-SDK说明文档

1.绑定域名：

GIT暂时就不说了，写号的文件记得上传到服务器再跟微信的JS的域名进行绑定

设置-公众号设置-JS接口安全域名（服务器地址/新浪云应用地址）

注意：必须将微信提供的 TXT 文件放入应用地址的根目录，否则不能绑定接口 文件名：MP_verify_lEpLf31RqezmXOaj.txt

2.引入JS文件：

在主体页面引入调用JS接口的JS文件：http://res.wx.qq.com/open/js/jweixin-1.0.0.js

同时主体页面修改为php文件，在文件头添加如下话语：

GetSignPackage();
?>

这样主体文件就变为了php文件，要调用微信的接口还需要引入其他文件
sample
注：php文件夹中的三个文件

3.通过config接口注入权限验证配置

直接代码说话，配置需要的功能和网页的链接

wx.config({
           debug: true,
           appId: '',
           timestamp: ,
           nonceStr: '',
           signature: '',
           jsApiList: [
             // 所有要调用的 API 都要加到这个列表中
             //相册或相机
             'chooseImage',
             //打开内置地图
             'openLocation',
             //查看网络状况
             'getNetworkType',
             //扫一扫
             'scanQRCode'
           ]
        });

以后想添加不同的功能直接在jsApiList中添加就好

4.ready 添加接口事件

wx.ready(function () {
           // 在这里调用 API
           var div1 = document.querySelector("#box :nth-of-type(1)");
           var div2 = document.querySelector("#box :nth-of-type(2)");
           var div3 = document.querySelector("#box :nth-of-type(3)");
           var div4 = document.querySelector("#box :nth-of-type(4)");
           //相册或相机
           div1.onclick = function () {
               wx.chooseImage({
                   count: 9, // 默认9
                   sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                   sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                   success: function (res) {
                       var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                       alert(localIds);
                   }
               });
           }
           //内置地图
           div2.onclick = function () {
               wx.openLocation({
                 latitude: 39.9046363143,
                 longitude: 116.4071136987,
                 name: '北京 故宫',
                 address: '北京长安街XXX号',
                 scale: 10,
                 infoUrl: 'http://weixin.qq.com'
               });
           }
           //手机网络状态
           div3.onclick = function () {
               wx.getNetworkType({
                   success: function (res) {
                       var networkType = res.networkType; // 返回网络类型2g，3g，4g，wifi
                       alert(networkType);
                   }
               });
           }
           //扫一扫
           div4.onclick = function () {
               wx.scanQRCode({
                   needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                   scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
                   success: function (res) {
                       var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                   }
               });
           }
         
       });

5.通过error接口处理失败验证

wx.error(function(res){
           // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
       });