全网独家首发！！看微信服务号如何华丽变身小程序！

摘要: 博卡君归来！！



大家好，我是博卡君。经过漫长的等待，微信小程序终于和大家见面了。在之前的《全球首个小程序开发教程》中，我曾经以将「名片盒」微信服务号逐渐打造为小程序的过程为例，向大家展示了微信小程序的开发流程和细节。现在，这款基于「名片盒」服务号改造而来的小程序已经正式上线，并正式命名为「博卡名片王」。今天，我们就以正式版的「博卡名片王」为例，一起来看看一个微信服务号是如何华丽变身为小程序的吧！

界面和交互

服务号变成小程序为「博卡名片王」带来的最直观的变化是界面的逻辑结构更清晰。微信服务号只能通过菜单完成一些功能性操作，但菜单按钮的位置固定在屏幕下方，无法实现更复杂的交互。小程序则可以充分利用屏幕空间，设计不同的交互形式。



微信服务号的页面整体是静态的，菜单只能固定在底部，而且只有两级菜单，无法完成多层次的复杂操作



「博卡名片王」小程序中，各功能不仅以按钮方式展示，而且用户在每个页面都可以通过上下、左右滑动实现多维度操作，更符合用户直觉

除了基本的交互逻辑之外，小程序还拥有更流畅、多变的过场特效，不仅可以让应用更美观，也能提升界面的交互性。



「名片盒」服务号的拍照界面只有一个孤零零的拍照框



「博卡名片王」小程序的拍照界面则拥有生动的动画效果，可以提示用户如何拍照扫描

速度提升

除了页面交互和操作逻辑更为合理之外，全新代码结构也为小程序带来了远超服务号的响应速度。在实际使用中，「名片盒」每次打开名片夹都要经过一次约一到两秒的载入过程，「博卡名片王」小程序的载入过程则短到可以忽略不计，几乎「秒开」。



「名片盒」服务号在载入名片夹时有一个肉眼可见的载入过程



「博卡名片王」进入小程序后默认页面就是名片夹，几乎已经做到了秒开

小程序还让名片派发的速度和效率大幅提升。「名片盒」派发名片时需要点击菜单中的「派发名片」，然后等待名片二维码弹出。而「博卡名片王」小程序则完全没有以上过程，优秀的交互逻辑使得用户直接点击「我」按钮就可以直达个人名片页，还能通过横划的方式快速录入个人名片。



「名片盒」服务号的派发名片过程需要经过两次点击，还要等待名片弹出，相对比较繁琐



在「博卡名片王」中，用户可以一次点击就进入个人名片页面，无需等待，还能快速录入名片

代码架构

开发效率：在功能相近的前提下，开发「名片盒」微信服务号和「博卡名片王」小程序所需要的时间不同。「名片盒」的开发前期立项很快，因为当时微信服务号已经具备了相当完备的生态体系和 api 接口，很容易搭建起整个服务的框架。但服务号后期迭代和上升的空间有限，无论 UI 还是代码结构都相对比较固定。

小程序刚好相反，特别是我在开发「博卡名片王」初期，微信小程序整个开发环境尚未成熟，很多功能实现起来比较不稳定。但小程序的后期迭代和功能增加的空间很大，而且随着代码的成熟和稳定，一个开发人员从零打造一个小程序的时间成本也会跟着降低。

上手难度：由于服务号支持市面上大部分 js 插件，所以在开发上更灵活一点；小程序的开发则需要原生应用开发者留意自己的需求能否在小程序当前已有的 api 上实现。整体来说，难度相当。

代码：微信服务号和小程序在代码上除了 css 样式外区别很大。小程序只能使用小程序定义的组件来写结构，其 js 不能使用外部的插件，各种功能都被当前开放的 api 约束，独立性更强；而服务号的代码胜在通用性强，完全和 web 端代码一样，各类 js 主流插件都可以使用。

以一段 js 代码为例：

小程序
Page({
//事件名 这个事件名绑定在 wxml 就是 bindtap="fnName"
fnName: function(res){
//dosomething
//发生一些事件
var a = 1; //内部变量，其它方法访问不到
},
fnNames: function(res){
//dosomething
//发生一些事件
}

});
服务号和 web 开发方式基本一致，只是在需要使用它提供的 jdk 时引入即可
(function(){
//dosomething
})()
//如 jq 方法
$(function(){
//dosomething
})

好了，以上就是「名片盒」微信服务号华丽变身「博卡名片王」小程序的全过程，既有直观的用户体验对比，也有一些技术上的分析，希望无论你是普通用户还是开发者，都能第一时间体会到一款微信服务号进化为小程序后的区别。今天就聊到这里吧，欢迎大家加入小程序开发者交流群，我们多多沟通交流。

 



扫描二维码
让你的小程序优先曝光

小程序开发者交流 QQ 群

一群：375772941（已满）

二群：371736433（已满）

三群：383863133

博卡君

QQ 号：3535872782

微信号：bokajunjunjun