前端工程师如何快速的开发一个微信JSSDK应用

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
查看查看134 回复回复4 收藏收藏 分享淘帖 转播转播 分享分享 微信
查看: 134|回复: 4
收起左侧

前端工程师如何快速的开发一个微信JSSDK应用

[复制链接]
3rdev 发表于 2016-8-25 00:18:39 | 显示全部楼层 |阅读模式
快来登录
获取优质的苹果资讯内容
收藏热门的iOS等技术干货
拷贝下载Swift Demo源代码
订阅梳理好了的知识点专辑
亲们,订阅号出来已经很久了,作为一个前端工程师或者全栈工程师,你是不是错过了什么?

大概许多攻城狮同行还没有反应过来订阅号怎么回事,就马上要被微信的应用号秀一脸了。在应用号还没有正式出来之前,我们赶紧一起来看看怎样给自己的订阅号加个网页功效吧。




1、订阅号网页与平常的HTML5网页的区别

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

  • 订阅号的网页就是微信的网页,普通的网页是W3C范例下的网页。
  • 订阅号的网页通常是以遵守W3C的网页规范为前提的,但是也有可能有所差异,具体要凭据微信浏览器的解析本领而定,但是通常是支持大部分的W3C标准的。一定程度上W3C规范的网页作为订阅号的网页是没有问题的。
  • 订阅号网页必要微信的认证。在认证后通常可以得到比普通的W3C网页更多的能力。比如扫描二维码,微信支付,拍照片,录音,WIFI设备等能力。


以上是订阅号网页具备比普通的W3C网页更强的终端能力,可以更好的提供移动端的服务,对于很多个人与公司来说都是值得尝试的。




2、开发订阅号网页需要那些技能?

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

  • HTML + CSS + JS的前端技术;
  • 服务器技术;
  • 微信开发时所用到的SDK技术。


由于1、2都是通用技术,所以我不在这里具体介绍了。我们现在重要介绍一下微信开发所需要的SDK技术。




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

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

  • 大众号配置信息,包括App ID、App Secret;
  • 服务器验证请求接口,即需要有一个接口可以与微信服务器对接,用于处理微信服务器返回的消息;
  • 一个引入了JSSDK的微信页面。




3.1、公共号配置信息

公共号配置信息需要登录获取,关于如何注册微信个人订阅号的问题请查看微信相关帮助。不在这里赘述了。

配置信息所在的位置是:开发=》基本配置

在开发者ID栏目里有两个东西

  • AppID(应用ID)
  • AppSecret(应用密钥)


AppID是固定不变的,AppSecret是可以变化的。secret最好定期变化,以防止泄漏造成问题。



3.2、一个存案的服务器域名

域名备案是中国特色,所以大家需要好好享受这个特色。我就不在这里详细介绍了。

有了域名后,将域名填入:

设置 =》 公众号设置 =》 功能设置 =》 JS接口安全域名

然后填入你想放的域名即可。



3.3、准备一个JSSDK的微信页面

准备微信页面是我们这次的重点。在这里会涉及到所有关于微信页面的制作的业务逻辑。我们将会分解每个步骤,详细解说原理与操作。

由于正式上线公共帐号需要备案的域名,所以对于大部分人来说照旧有点不方便。所以在这里我主要讲解如何开发与测试订阅号微信页面,然后将这个过程复制到已经备案的域名所对应的服务器上即可。


3.3.1、第一步是制作JSSDK的HTML页面

首先是一个最简单的包含有JSSDK的HTML代码:

[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>



3.3.2、然后添加JS初始代码

为了代码的简洁,我们引入了jQuery。

[HTML] 纯文本查看 复制代码
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>


然后添加初始化jssdk的代码:

[HTML] 纯文本查看 复制代码
<script>
        $(document).ready(function() {
                // 根据实际填写接口的配置地点
                // 这里的接口地址是基于node-weixin配置的。
                var url = "/jssdk/config";
                
                // 当前的网页请求地址
                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的配置了。


3.3.3、调用JSSDK的接口API

JSSDK的接口API有很多,我们可以通过一个简单的扫描调用来验证我们的代码的正确性。

首先我们要添加一个可以点击的HTML元素:

[HTML] 纯文本查看 复制代码
<h2 class="qrcode">点击扫描</h2>


然后我们将wx.ready里的回调函数举行重写:

[JavaScript] 纯文本查看 复制代码
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元素上点击后就可以调用二维码扫描功能了。

图片如下:

前端工程师如何快速的开发一个微信JSSDK应用 1

前端工程师如何快速的开发一个微信JSSDK应用 - 敏捷大拇指 - 前端工程师如何快速的开发一个微信JSSDK应用 1


前端工程师如何快速的开发一个微信JSSDK应用 2

前端工程师如何快速的开发一个微信JSSDK应用 - 敏捷大拇指 - 前端工程师如何快速的开发一个微信JSSDK应用 2





4、利用WeTop进行微信网页

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

  • 在配置 =》 公共号参数配置 =》 app 将所有的参数配置完成
  • 在接口 => AccessToken获取测试 测试能否正确的获取token
  • 在接口 => jssdk 页面测试 里测试
  • 通过指定模板地址,就可以将自己的网页放到手机服务器上进行测试了。JSSDK测试的默认地址是jssdk.html。


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

进行下载
或者
google搜索node-weixin-desktop找到源码,自行进行编译。


都看到这里了,就把这篇资料推荐给您的好朋友吧,让他们也感受一下。

回帖是一种美德,也是对楼主发帖的尊重和支持。

*声明:敏捷大拇指是全球最大的Swift开发者社区、苹果粉丝家园、智能移动门户,所载内容仅限于传递更多最新信息,并不意味赞同其观点或证实其描述;内容仅供参考,并非绝对正确的建议。本站不对上述信息的真实性、合法性、完整性做出保证;转载请注明来源并加上本站链接,敏捷大拇指将保留所有法律权益。如有疑问或建议,邮件至marketing@swifthumb.com

*联系:微信公众平台:“swifthumb” / 腾讯微博:@swifthumb / 新浪微博:@swifthumb / 官方QQ一群:343549891(满) / 官方QQ二群:245285613 ,需要报上用户名才会被同意进群,请先注册敏捷大拇指

嗯,不错!期待更多好内容,支持一把:
支持敏捷大拇指,用支付宝支付10.24元 支持敏捷大拇指,用微信支付10.24元

评分

参与人数 1金钱 +10 收起 理由
Anewczs + 10 多谢贡献内容,内容太详实啦!.

查看全部评分

游戏人生 发表于 2016-8-27 14:35:44 | 显示全部楼层
说白了就是用到一个微信提供的JSSDK而已
h5lover 发表于 2016-8-28 14:59:33 | 显示全部楼层
游戏人生 发表于 2016-8-27 14:35
说白了就是用到一个微信提供的JSSDK而已

还是要玩转H5对吧
我是90后 发表于 2016-8-30 22:16:52 | 显示全部楼层
有没有样例?求Demo源代码~
jswift 发表于 2016-11-23 13:13:04 | 显示全部楼层
wetop是微信出品的还是第三方的?
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

做任务,领红包。
我要发帖

分享扩散

都看到这里了,就把这资料推荐给您的好朋友吧,让他们也感受一下。
您的每一位朋友访问此永久链接后,您都将获得相应的金钱积分奖励
热门推荐

合作伙伴

Swift小苹果

  • 北京治世天下科技有限公司
  • ©2014-2016 敏捷大拇指
  • 京ICP备14029482号
  • Powered by Discuz! X3.1 Licensed
  • swifthumb Wechat Code
  •   
快速回复 返回顶部 返回列表