首页手记如何快速的开发一个微信jssdk应用？

如何快速的开发一个微信jssdk应用？

标签：

前端工具

一、订阅号网页与普通的HTML5网页的区别

可能会有很多同学还没有弄清楚普通的HTML网页与订阅号网页的差别，我在这里简单的说明一下。

订阅号的网页就是微信的网页，普通的网页是W3C规范下的网页。
订阅号的网页通常是以遵守W3C的网页规范为前提的，但是也有可能有所差异，具体要根据微信浏览器的解析能力而定，但是通常是支持大部分的W3C标准的。一定程度上W3C规范的网页作为订阅号的网页是没有问题的。
订阅号网页需要微信的认证。在认证后通常可以获得比普通的W3C网页更多的能力。比如扫描二维码，微信支付，拍照片，录音，WIFI设备等能力。
所以订阅号网页具备比普通的W3C网页更强的终端能力，可以更好的提供移动端的服务，对于很多个人与公司来说都是值得尝试的。

二、开发订阅号网页需要那些技术？

在了解了订阅号网页与普通网页的差别后，我们基本上知道了开发订阅号所需要的基本的技术。

HTML + CSS + JS的前端技术
服务器技术
微信开发是所用到的SDK技术
由于1,2都是通用技术，所以我不在这里详细介绍了。我们现在主要介绍一下微信开发所需要的SDK技术。

三、订阅号开发的微信技术

订阅号开发所需要的纯微信上的技术准备如下：

公共号配置信息
包括app id, app secret
服务器验证请求接口
即需要有一个接口可以与微信服务器对接，用于处理微信服务器返回的消息
一个引入了JSSDK的微信页面
公共号配置信息

公共号配置信息需要登录

http://mp.weixin.qq.com

获取，关于如何注册微信个人订阅号的问题请查看微信相关帮助。不在这里赘述了。
配置信息所在的位置是：开发=》基本配置
在开发者ID栏目里有两个东西

AppID(应用ID)
AppSecret(应用密钥)
AppID是固定不变的，AppSecret是可以变化的。secret最好定期变化，以防止泄漏造成安全问题。
一个备案的服务器域名

域名备案是中国特色，所以大家需要好好享受这个特色。我就不在这里详细介绍了。
有了域名后，将域名填入：
设置 =》公众号设置 =》功能设置 =》 JS接口安全域名
然后填入你想放的域名即可。

准备一个JSSDK的微信页面

准备微信页面是我们这次的重点。在这里会涉及到所有关于微信页面的制作的业务逻辑。我们将会分解每个步骤，详细讲解原理与操作。
由于正式上线公共帐号需要备案的域名，所以对于大部分人来说还是有点不方便。所以在这里我主要讲解如何开发与测试订阅号微信页面，然后将这个过程复制到已经备案的域名所对应的服务器上即可。

第一步是制作JSSDK的HTML页面

首先是一个最简单的包含有JSSDK的HTML代码
然后添加JS初始代码

为了代码的简洁，我们引入了jquery.

然后添加初始化jssdk的代码

// 当前的网页请求地址
var weixinUrl = location.href.split('#')[0];

$.ajax({
  url: url, //这个地址是服务器配置JSSDK的地址
  data: {
      // 这个地址是发生jssdk调用的url地址
      // 用于服务器配置      
    url: weixinUrl
  }
}).success(function(json) {
  // 获得服务器返回的配置信息
  var data = json.data;
  var config = {};
  for (var k in json.data) {
    config[k] = json.data[k];
  }
  // config.debug = true;

  // 添加你需要的JSSDK的权限
  config.jsApiList = [
    'checkJsApi',
    'scanQRCode'
  ];
  config.timestamp = parseInt(config.timestamp);
  wx.config(config);
  wx.ready(function() {
    alert("微信jssdk配置成功!");
  });
  wx.error(function(res) {
    alert('微信JSSDK配置失败！');
  });
});

});
</script>

对于配置JSSDK来说，最重要的是需要在服务器端提供一个配置参数，这个可以参考node-weixin的参数配置接口。这样前端只需要将当前的URL转入就可以完成整个JSSDK的参数的匹配。
获得配置信息后只要将接口权限配置一下就可以完成整个JSSDK的配置了。

调用JSSDK的接口API
JSSDK的接口API有很多，我们可以通过一个简单的扫描调用来验证我们的代码的正确性。
首先我们要添加一个可以点击的HTML元素：

<h2 class="qrcode">点击扫描</h2>
然后我们将wx.ready里的回调函数进行重写：

function() {
$('.qrcode').click(function () {
wx.scanQRCode({
// 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
needResult: 1,
// 可以指定扫二维码还是一维码，默认二者都有
scanType: ["qrCode", "barCode"],
success: function (res) {
// 当needResult 为 1 时，扫码返回的结果
var result = res.resultStr;
alert(result);
}
});
});
}

这样我们在这个class为qrcode的HTML元素上点击后就可以调用二维码扫描功能了。

利用WeTop进行微信网页

上面的过程我们没有讨论到服务器，是因为我们使用了wetop，wetop已经帮你将所有的服务器测试环境配置好了。所以你完全不用自己开发服务器就可以进行微信的前端开发了。使用WeTop的方法非常简单。

在配置 =》公共号参数配置 =》 app 将所有的参数配置完成

在接口 => AccessToken获取测试测试能否正确的获取token

在接口 => jssdk 页面测试里测试

通过指定模板地址，就可以将自己的网页放到手机服务器上进行测试了。JSSDK测试的默认地址是jssdk.html。

WeTop支持(Windows, Linux, Mac OS三种桌面OS），可以到

http://yun.baidu.com/s/1nuBpOBR

进行下载

或者

google搜索node-weixin-desktop找到源码，自行进行编译。