天天看点

前端工程师如何快速的开发一个微信JSSDK应用一、订阅号网页与平凡的HTML5网页的区别二、开辟订阅号网页需要那些技能?三、订阅号开发的微信技术

亲们,订阅号出来已经很久了,作为一个前端工程师或者全栈工程师,你是不是错过了什么?

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

订阅号的网页就是微信的网页,普通的网页是w3c范例下的网页。

订阅号的网页通常是以遵守w3c的网页规范为前提的,但是也有可能有所差异,具体要凭据微信浏览器的解析本领而定,但是通常是支持大部分的w3c标准的。一定程度上w3c规范的网页作为订阅号的网页是没有题目的。

订阅号网页必要微信的认证。在认证后通常可以得到比普通的w3c网页更多的能力。比如扫描二维码,微信支付,拍照片,录音,wifi设备等能力。

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

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

html + css + js的前端技术

服务器技术

微信开发是所用到的sdk技术

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

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

大众号配置信息

包括app id, app secret

服务器验证哀求接口

即需要有一个接口可以与微信服务器对接,用于处置惩罚微信服务器返回的消息

公共号配置信息需要登录

获取,关于如何注册微信个人订阅号的问题请查看微信相关帮助。不在这里赘述了。

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

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

appid(应用id)

appsecret(应用密钥)

appid是固定不变的,appsecret是可以变革的。secret最好定期变化,以防止泄漏造成宁静问题。

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

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

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

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

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

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

1. 首先是一个最简单的包含有jssdk的html代码:

2. 然后添加js初始代码

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

然后添加初始化jssdk的代码

效果如下 :

对于配置jssdk来说,最重要的是需要在服务器端提供一个配置参数,这个可以参考node-weixin的参数配置接口。如许前端只需要将当前的url转入就可以完成整个jssdk的参数的匹配。

获得配置信息后只要将接口权限配置一下就可以完成整个jssdk的配置了。

3. 调用jssdk的接口api

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

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

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

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

图片如下:

前端工程师如何快速的开发一个微信JSSDK应用一、订阅号网页与平凡的HTML5网页的区别二、开辟订阅号网页需要那些技能?三、订阅号开发的微信技术
前端工程师如何快速的开发一个微信JSSDK应用一、订阅号网页与平凡的HTML5网页的区别二、开辟订阅号网页需要那些技能?三、订阅号开发的微信技术

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

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

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

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

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

wetop支持(windows, linux, mac os三种桌面os),可以到

进行下载

或者

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

继续阅读