微信小程序的设计与开发

2019-06-05 标签:微信小程序开发 浏览数:59

摘要: 微信小程序作为新型的移动应用吸引了手机用户的眼球。微信小程序受人关注的特性就是它无需下载,即开即用,节省了手机内存空间,又可以在微信置顶或是存放成快捷方式于手机界面,用户无需下载无需更新。在竞争激烈的移动应用行业中,微信小程序的诞生却是一鸣惊人。

资讯主图

一、项目背景

当今移动互联网日新月异,在《第38次中国互联网络发展状况统计报告》中显示,截至2016年6月,我国手机网民规模达6.56亿,网民中使用手机上网的人群占比由2015年底的90.1%提升至92.5%,仅通过手机上网的网民占比达到24.5%,网民上网设备进一步向移动端集中。移动应用app为满足手机用户各个方面的需要和清晰可见的经济效益外,也为了保持对用户的黏度,满足用户多样化需求,增加app用户数量,运营商需要对App进行创新和维护。app用户也须定期进行下载、重新安装和升级,给部分app用户造成了困扰。

自2013年8月百度在全球开发者大会上被正式推出“轻应用”这个概念以来,引起了诸多业内外人士的关注。轻应用(Light App)是一种无需下载、即搜即用的全功能App,既有媲美甚至超越Native App的用户体验,不占用用户手机储存空间,又具备Web app的可被检索与智能分发的特性,将有效解决优质应用和服务与移动用户需求对接的问题。

2016年9月21日,微信小程序正式开启内测。在微信生态下,触手可及、用完即走的微信小程序引起广泛关注。用户只需使用微信搜一搜或者扫一扫即可打开应用程序。它体现了“用完即走”的理念,用户又不用担心占据内存空间,更新安装等问题,应用将无处不在、随时可用。微信小程序采用自动版本同步,本地没有或需更新的时候将程序文件下载到本地执行,由于程序文件很小,占用的网络流量不大,所以可瞬间下载速度很快。因为代码在本地,这就减轻了在执行中对网络的依赖,执行效率高,用户体验好于以往的轻型移动应用。

小程序自身体积占用小,速度快。因其基于微信,形似于原生APP基于Android和iOS系统。微信通过程序优化,大大提高了小程序的响应速度。比Hybird应用在操作体验方面更加流畅、快速,摆脱了对浏览器性能的依赖,能够调用系统原生接口,还具有一定的数据缓存能力。


二、开发环境简介

微信web开发者工具,开发门槛比较低,它拥有自己的IDE开发环境,可直接登录微信公众平台登陆下载官方IDE开发包。运用微信web开发者工具开发和调试基于微信的网页,此工具是一个桌面应用,使开发者更加方便地在PC或者Mac上开发和调试微信客户端的表现。

小程序开发语言主要是WXML,WXSS,Javascript,后台开发语言为java,PHP语言。

WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。官方给出的基础标签<view>是块标签,<text>为文本标签,class,id,data都在白名单内,但href是不存在的,不过这些都属于inline标签,需自行设定display。

WXSS(WeiXin Style Sheets)是一套样式语言,用于描述WXML的组件样式。它和CSS很像,CSS属性基本都支持。小程序提供rpx这个单位。一屏幕宽是750rpx。

JavaScript 是属于网络的脚本语言。它被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用。JS的运行环境和view的运行环境互相隔离,JS只能通过时间获取时机和setData方法修改数据来改变view。


三、小程序开发流程

首先需注册微信小程序账号,获取微信小程序的AppID,其次下载官方发布的开发平台web微信开发者工具,它集成了开发调试、编译代码及程序发布等功能,使开发人员更加高效的完成工作,下载完成后创建项目即可查看和编辑小程序代码。在“调试”里即可测试并模拟小程序在移动端的展示效果。最终登录微信公众平台官网发布小程序。

小程序本身也具有互动性强,分散的特性。它的基本功能就包含客服功能,模板消息。但它并没有集中罗列于微信某个地方,而是制定开发规则,让用户去开发小程序。

此外,随着互联网时代的稳步更新,小程序从优改良,还具备很大优化空间。微信作为小程序与用户的连接器,用户可通过扫描二维码,直接搜索,点击链接快速进入小程序。


四、小程序性能需求分析

在系统设计上将遵循先进性、实用性、安全性、可靠性、经济性五大原则。

小程序的开发过程节省了大量的人力、财力,缩短时间成本,更加快速高效的搭建小程序,大大满足了企业的技术需求。


五、小程序页面布局设计

应用界面布局是界面设计中非常重要的组成部分。作用是让用户清楚界面中的重点,选择的内容是什么,以及各事物之间的关联。移动UI界面布局应强调主要内容或功能,大型控件比小型控件更加吸引用户眼球,更加容易被用户点击,这使他们在小程序应用中尤为有用,使用户在滑动屏幕时更容易专注重要信息,实现准确定位。


六、微信小程序与API设计

为了让开发者可以很方便的调起微信提供的能力,例如获取用户信息、微信支付等等,小程序提供了很多 API给开发者去使用。

需要注意的是:多数 API 的回调都是异步,你需要处理好代码逻辑的异步问题。

下面是实现对文章的增加、删除、修改功能,使用INSERT语句增加新文章,DELETE删除文章数据,UPDATE修改文章内容。最后选取更新后数据显示在前端文章列表中,API功能调用实现代码段:

总之,小程序主要针对用户高效获取信息及服务的需求。抛去冗杂的下载更新,占用内存的过程,只达到集成用户所需信息和服务,使用户高效获取信息和服务两个目标。

触发小程序,快速下单,购买商品或服务。在此基础上,也应满足企业品牌建设,设计出专业性、独特性的品牌形象;满足人机交互的可用性,提升用户对产品的好记和满意度,从而减少客服技术支持费用;满足以用户为导向的可视化的功能性,丰富后台功能,保证加密传输信息安全性提高;满足小程序内容的独创性和准确性,实现企业产品和服务精准定位;满足产品质量的可视化,提供给用户极佳的产品形象和详细的产品信息,以及售后服务保障。


关键字: 微信小程序开发

提供衡阳微信小程序开发,微信营销功能开发、公众号开发等开发服务