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

本文涉及的产品
.cn 域名,1个 12个月
简介: 亲们,订阅号出来已经很久了,作为一个前端工程师或者全栈工程师,你是不是错过了什么?大概许多攻城狮同砚还没有反应过来订阅号怎么回事,就马上要被微信的应用号秀一脸了。在应用号还没有正式出来之前,我们赶紧一起来看看怎样给自己的订阅号加个网页功效吧。一、订阅号网页与平凡的HTML5网页的区别可能会有很多同学还没有弄清楚普通的HTML网页与订阅号网页的差别,我在这里简朴的说明一下。订阅号的网页就
亲们,订阅号出来已经很久了,作为一个前端工程师或者全栈工程师,你是不是错过了什么?
大概许多攻城狮同砚还没有反应过来订阅号怎么回事,就马上要被 微信的应用号秀一脸了。在应用号还没有正式出来之前,我们赶紧一起来看看怎样给自己的订阅号加个网页功效吧。

一、订阅号网页与平凡的HTML5网页的区别

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

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

二、开辟订阅号网页需要那些技能?

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

  1. HTML + CSS + JS的前端技术
  2. 服务器技术
  3. 微信开发是所用到的SDK技术

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

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

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

  1. 大众号配置信息
    包括app id, app secret
  2. 服务器验证哀求接口
    即需要有一个接口可以与微信服务器对接,用于处置惩罚微信服务器返回的消息
  3. 一个引入了JSSDK的微信页面

公共号配置信息

公共号配置信息需要登录

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

  1. AppID(应用ID)
  2. 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('#')[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. 调用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元素上点击后就可以调用二维码扫描功能了。

图片如下:

wxx

利用WeTop进行微信网页

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

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

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

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

目录
相关文章
|
10天前
|
前端开发 JavaScript API
(前端3D模型开发)网页三维CAD中加载和保存STEP模型
本文介绍了如何使用`mxcad3d`库在网页上实现STEP格式三维模型的导入与导出。首先,通过官方教程搭建基本项目环境,了解核心对象如MxCAD3DObject、Mx3dDbDocument等的使用方法。接着,编写了加载和保存STEP模型的具体代码,包括HTML界面设计和TypeScript逻辑实现。最后,通过运行项目验证功能,展示了从模型加载到保存的全过程。此外,`mxcad3d`还支持多种其他格式的三维模型文件操作。
|
3天前
|
机器学习/深度学习 前端开发 算法
婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
婚恋交友系统平台通过线上互动帮助单身男女找到合适伴侣,提供用户注册、个人资料填写、匹配推荐、实时聊天、社区互动等功能。开发流程包括需求分析、技术选型、系统架构设计、功能实现、测试优化和上线运维。匹配推荐算法优化是核心,通过用户行为数据分析和机器学习提高匹配准确性。
22 3
|
19天前
|
移动开发 缓存 前端开发
深入理解前端路由:原理、实现与应用
本书《深入理解前端路由:原理、实现与应用》全面解析了前端路由的核心概念、工作原理及其实现方法,结合实际案例探讨了其在现代Web应用中的广泛应用,适合前端开发者和相关技术人员阅读。
|
1天前
|
前端开发 搜索推荐 安全
陪玩系统架构设计陪玩系统前后端开发,陪玩前端设计是如何让人眼前一亮的?
陪玩系统的架构设计、前后端开发及前端设计是构建吸引用户、功能完善的平台关键。架构需考虑用户需求、技术选型、安全性等,确保稳定性和扩展性。前端可选用React、Vue或Uniapp,后端用Spring Boot或Django,数据库结合MySQL和MongoDB。功能涵盖用户管理、陪玩者管理、订单处理、智能匹配与通讯。安全性方面采用SSL加密和定期漏洞扫描。前端设计注重美观、易用及个性化推荐,提升用户体验和平台粘性。
11 0
|
29天前
|
前端开发 项目管理
Gitflow分支策略及其在前端工程化中的应用
Gitflow 分支策略也并非适用于所有项目。对于一些小型或简单的前端项目,可能会显得过于复杂。在实际应用中,需要根据项目的具体情况和团队的需求进行适当调整和优化。
|
25天前
|
自然语言处理 前端开发 JavaScript
深入理解前端中的 “this” 指针:从基础概念到复杂应用
本文全面解析前端开发中“this”指针的运用,从基本概念入手,逐步探讨其在不同场景下的表现与应用技巧,帮助开发者深入理解并灵活掌握“this”的使用。
|
25天前
|
存储 前端开发 JavaScript
前端中对象的深度应用与最佳实践
前端对象应用涉及在网页开发中使用JavaScript等技术创建和操作对象,以实现动态交互效果。通过定义属性和方法,对象可以封装数据和功能,提升代码的组织性和复用性,是现代Web开发的核心技术之一。
|
29天前
|
前端开发
结合具体案例分析Gitflow分支策略在大型前端项目中的应用优势
通过这个具体案例可以看出,Gitflow 分支策略在大型前端项目中能够提供有条不紊的开发环境,保障项目的稳定性和持续发展。
|
28天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
41 5
|
1月前
|
前端开发 开发者
本文将深入探讨 BEM 的概念、原理以及其在前端开发中的应用
BEM(Block-Element-Modifier)是一种前端开发中的命名规范和架构方法,旨在提高代码的可维护性和复用性。通过将界面拆分为独立的模块,BEM 提供了一套清晰的命名规则,增强了代码的结构化和模块化设计,促进了团队协作。本文深入探讨了 BEM 的概念、原理及其在前端开发中的应用,分析了其优势与局限性,为开发者提供了宝贵的参考。
48 8
下一篇
DataWorks