前端工程师如何快速的开发一个微信JSSDK应用
亲们，订阅号出来已经很久了，作为一个前端工程师或者全栈工程师，你是不是错过了什么？
大概许多攻城狮同砚还没有反应过来订阅号怎么回事，就马上要被微信的应用号秀一脸了。在应用号还没有正式出来之前，我们赶紧一起来看看怎样给自己的订阅号加个网页功效吧。
一、订阅号网页与平凡的HTML5网页的区别
可能会有很多同学还没有弄清楚普通的HTML网页与订阅号网页的差别，我在这里简朴的说明一下。
- 订阅号的网页就是微信的网页，普通的网页是W3C范例下的网页。
- 订阅号的网页通常是以遵守W3C的网页规范为前提的，但是也有可能有所差异，具体要凭据微信浏览器的解析本领而定，但是通常是支持大部分的W3C标准的。一定程度上W3C规范的网页作为订阅号的网页是没有题目的。
- 订阅号网页必要微信的认证。在认证后通常可以得到比普通的W3C网页更多的能力。比如扫描二维码，微信支付，拍照片，录音，WIFI设备等能力。
以是订阅号网页具备比普通的W3C网页更强的终端能力，可以更好的提供移动端的服务，对付很多个人与公司来说都是值得尝试的。
二、开辟订阅号网页需要那些技能？
在了解了订阅号网页与普通网页的差别后，我们根本上知道了开发订阅号所需要的基本的技术。
- HTML + CSS + JS的前端技术
- 服务器技术
- 微信开发是所用到的SDK技术
由于1,2都是通用技术，所以我不在这里具体介绍了。我们现在重要介绍一下微信开发所需要的SDK技术。
三、订阅号开发的微信技术
订阅号开发所需要的纯微信上的技术预备如下：
- 大众号配置信息
包括app id, app secret - 服务器验证哀求接口
即需要有一个接口可以与微信服务器对接，用于处置惩罚微信服务器返回的消息 - 一个引入了JSSDK的微信页面
公共号配置信息
公共号配置信息需要登录
获取，关于如何注册微信个人订阅号的问题请查看微信相关帮助。不在这里赘述了。
配置信息所在的位置是：开发=》基本配置
在开发者ID栏目里有两个东西
- AppID(应用ID)
- AppSecret(应用密钥)
AppID是固定不变的，AppSecret是可以变革的。secret最好定期变化，以防止泄漏造成宁静问题。
一个存案的服务器域名
域名备案是中国特色，所以大家需要好好享受这个特色。我就不在这里详细介绍了。
有了域名后，将域名填入：
设置 =》 公众号设置 =》 功能设置 =》 JS接口安全域名
然后填入你想放的域名即可。
准备一个JSSDK的微信页面
准备微信页面是我们这次的重点。在这里会涉及到所有关于微信页面的制作的业务逻辑。我们将会分解每个步骤，详细解说原理与操作。
由于正式上线公共帐号需要备案的域名，所以对于大部分人来说照旧有点不方便。所以在这里我主要讲解如何开发与测试订阅号微信页面，然后将这个过程复制到已经备案的域名所对应的服务器上即可。
第一步是制作JSSDK的HTML页面
1. 首先是一个最简单的包含有JSSDK的HTML代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name=viewport content="width=device-width"> <title>微信网页</title> <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> </head> <body> <h1>微信JSSDK网页</h1> </body> </html>2. 然后添加JS初始代码
为了代码的简洁，我们引入了jquery.
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>然后添加初始化jssdk的代码
<script> $(document).ready(function() { // 根据实际填写接口的配置地点 // 这里的接口地址是基于node-weixin配置的。 var url = "/jssdk/config"; // 当前的网页请求地址 var weixinUrl = location.href.split('#')[]; $.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的配置了。
3. 调用JSSDK的接口API
JSSDK的接口API有很多，我们可以通过一个简单的扫描调用来验证我们的代码的正确性。
首先我们要添加一个可以点击的HTML元素：
<h2 class="qrcode">点击扫描</h2>然后我们将wx.ready里的回调函数举行重写：
function() { $('.qrcode').click(function () { wx.scanQRCode({ // 默认为0，扫描效果由微信处理，1则直接返回扫描结果， needResult: , // 可以指定扫二维码还是一维码，默认二者都有 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），可以到
进行下载
或者
google搜索node-weixin-desktop找到源码，自行进行编译。
前端工程师如何快速的开发一个微信JSSDK应用的更多相关文章
- 如何快速地开发一个微信小程序
如何快速地开发一个微信小程序呢?我觉得作为初学者,最好能有一个模板,然后改这个模板. 同样作为初学者,刚开始的时候我有下面的几个问题,后来通过问同学,我弄清楚了. 微信小程序可以连接MySQL或者Sq ...
- 【如何快速的开发一个完整的iOS直播app】(原理篇)
原文转自:袁峥Seemygo 感谢分享.自我学习 目录 [如何快速的开发一个完整的iOS直播app](原理篇) [如何快速的开发一个完整的iOS直播app](播放篇) [如何快速的开发一个完整的 ...
- 【如何快速的开发一个完整的 iOS 直播 app】(美颜篇)
来源:袁峥Seemygo 链接:http://www.jianshu.com/p/4646894245ba 前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播 ...
- 如何快速的开发一个完整的iOS直播app(原理篇)
目录 [如何快速的开发一个完整的iOS直播app](原理篇) [如何快速的开发一个完整的iOS直播app](播放篇) [如何快速的开发一个完整的iOS直播app](采集篇) 前言 大半年没写博客了,但 ...
- 抖音短视频爆火的背后到底是什么——如何快速的开发一个完整的直播app
前言 今年移动直播行业的兴起,诞生了一大批网红,甚至明星也开始直播了,因此不得不跟上时代的步伐,由于第一次接触的原因,因此花了很多时间了解直播,今天我来教你从零开始搭建一个完整的直播app,希望能帮助 ...
- 【如何快速的开发一个完整的iOS直播app】(美颜篇)
原文转自:袁峥Seemygo 感谢分享.自我学习 前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,美颜功能是很重 ...
- 【如何快速的开发一个完整的iOS直播app】(采集篇)
原文转自:袁峥Seemygo 感谢分享.自我学习 前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,首先需要采集主 ...
- 【如何快速的开发一个完整的iOS直播app】(播放篇)
原文转自:袁峥Seemygo 感谢分享.自我学习 前言 在看这篇之前,如果您还不了解直播原理,请查看上篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,集成ijkpl ...
- 【如何快速的开发一个完整的iOS直播app】(推流篇)
前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,肯定需要流媒体服务器,本篇主要讲解直播中流媒体服务器搭建,并且讲解了如 ...
随机推荐
- SQL之case when then用法
case具有两种格式.简单case函数和case搜索函数. 按 Ctrl+C 复制代码 这两种方式,可以实现相同的功能.简单case函数的写法相对比较简洁,但是和case搜索函数相比,功能方面会有些限 ...
- Birt报表存储过程多选参数的设置
Birt对存储过程的操作是很简单的一行语句,只需要在Data Set中写上类似这样 {call CAMPAIGN_REAL_TIME_MONITOR(?,?)} 如下图 本报表是存在两个参数,一个允许 ...
- iOS中多线程知识总结(一)
这一段开发中一直在处理iOS多线程的问题,但是感觉知识太散了,所以就把iOS中多线程的知识点总结了一下. 1.基本概念 1)什么是进程?进程的特性是什么? 进程是指在系统中正在运行的一个应用程序. ...
- TSQL 数据类型转换
转换函数 cast 或 convert 将表达式类型转换成另一个数据类型,如果转换失败,将导致整个事务失败.SQL Server 2012 新增两个转换函数:try_cast 和 try_conver ...
- SQL Server 日期函数：EOMonth、DateFormat、Format、DatePart、DateName
一,月份的最后一天 函数 EOMonth 返回指定日期的最后一天 EOMONTH ( start_date [, month_to_add ] ) 1,对于start_date 有两种输入方式,能够转 ...
- sizzle分析记录：getAttribute和getAttributeNode
部分IE游览器下无法通过getAttribute取值? <form name="aaron"> <input type="text" name ...
- 深入学习jQuery样式操作
× 目录 [1]设置样式 [2]增加样式 [3]删除样式[4]切换样式[5]判断样式[6]样式操作 前面的话 使用javascript脚本化CSS是一个系列,包括行间样式.计算样式.CSS类.样式表. ...
- 创建第一个 vlan network "vlan100" - 每天5分钟玩转 OpenStack（94）
上一节我们在 ML2 配置中 enable 了 vlan network,今天将创建 vlan100 并讨论底层网络变化. 打开菜单 Admin -> Networks,点击 “Create N ...
- Backup Volume 操作 - 每天5分钟玩转 OpenStack（59）
本节我们讨论 volume 的 Backup 操作. Backup 是将 volume 备份到别的地方(备份设备),将来可以通过 restore 操作恢复. Backup VS Snapshot 初看 ...
- 关于css中pointer-events属性的怪异行为
在我的记忆中pointer-events就是用来进行事件穿透的,也就是说,如果给父元素设置了pointer-events:none,那么父元素不再监听鼠标事件事件(类似于touch,click这样的) ...