文档章节

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

博卡君
 博卡君
发布于 2017/01/09 01:09
字数 1535
阅读 187
收藏 0

输入图片说明

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

界面和交互

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

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

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

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

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

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

速度提升

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

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

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

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

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

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

代码架构

开发效率:在功能相近的前提下,开发「名片盒」微信服务号和「博卡名片王」小程序所需要的时间不同。「名片盒」的开发前期立项很快,因为当时微信服务号已经具备了相当完备的生态体系和 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

© 著作权归作者所有

博卡君
粉丝 808
博文 16
码字总数 24235
作品 0
深圳
程序员
私信 提问
北京赛车飞艇,加拿大28出租,OA系统,现金盘平台,信誉盘,H5棋牌API,PC蛋蛋,聊天室,程序源码,重庆时时彩,百家乐,快三,11选5,

2019最新八合一程序完美源码。包搭建,包安装,包维护,一条龙服务,让你省心省力。 目前 正在运营,全网独家支持在线充值和在线兑换!让您无需人工操作! 市面上只出售月租版,我们直接提供...

豹子CMS
04/28
0
0
Koahub源码交易市场推出最新更新的wemall源码了吗?

Koahub源码交易市场推出最新更新的wemall源码 WeMall开源版微商城更新: 更新版特色 1.支持微信小程序 2.支持订阅号,服务号和企业号 3.适合学习和研究 4.基于thinkphp3.2.3 简介 wemall微信...

wemall微信商城
2016/10/21
239
0
“小程序·云开发”系列沙龙(小游戏专场)

极速上线、体验流畅、稳定可靠——如何低成本达成小游戏开发的目标?使用小程序·云开发将获得哪些独家优势?小游戏用云有哪些实践案例参考? ]本期沙龙,腾讯云云开发团队联合微信团队,全面...

腾讯云开发者社区
08/07
2
0
01第三方平台概述

第三方平台概述 一、概述 公众平台第三方平台是为了让公众号或小程序运营者,在面向垂直行业需求时,可以一键授权给第三方平台(并且可以同时授权给多家第三方),通过第三方平台来完成业务,...

MadDragon
2018/03/12
134
0
分享50家公众号投稿资源,请进。

想必,关于如何在简书和在公众号投稿,大家已经看过很多作品了。 这次整合了50家公众号投稿资源,供作者们参考。 建议选取自己合适的公号查看历史消息,熟知公众号往期推文风格,或查看投稿信...

coco颂
2018/04/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

读书笔记:深入理解ES6 (五)

第五章 解构:使数据访问更便捷 第1节 为什么使用解构功能?   在ES5中,开发者们从对象、数组中获取特定数据并赋值给变量,编写了很多看起来同质化的代码。例如: 1 let options = {2 ...

张森ZS
30分钟前
24
0
CentOS7 yum方式安装MySQL5.7

在CentOS中默认安装有MariaDB,这个是MySQL的分支,但为了需要,还是要在系统中安装MySQL,而且安装完成之后可以直接覆盖掉MariaDB。 1 下载并安装MySQL官方的 Yum Repository [root@localho...

roockee
38分钟前
15
0
Allegro三种自定义设置快捷键的方法

Allegro自定义设置快捷键的三种方法: 1、在Allegro PCB editor 命令窗口直接定义 2、通过修改用户变量env文件来设置快捷键 3、定义笔画为快捷键 1、在Allegro PCB editor 命令窗口直接定义 ...

demyar
43分钟前
18
0
如何做一张能让人眼前一亮的大屏?

作为在职场驰骋的社会人,提到数据可视化大家应该都不陌生了。数据可视化的作用也不用我多说,主要是利用图形化手段,更清晰直观地将数据展示。多层次、交互式的可视化分析能够方便决策者理解...

朕想上头条
43分钟前
9
0
TL138/1808/6748-EthEVM开发板硬件CPU、FLASH、RAM

TL138/1808/6748-EthEVM是广州创龙基于SOM-TL138/1808/6748核心板开发的一款开发板,具有三个网络接口。由于SOM-TL138/1808/6748核心板管脚兼容,所以此三个核心板共用同一个底板。开发板采用...

Tronlong创龙
48分钟前
16
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部