一款微信小程序是如何诞生的。

上一个暑假，我在一家互联网初创公司实习了一个半月的时间，作为前端开发实习生，参与了公司团队的一款微信小程序的开发。这是一只小巧而年轻的团队，在产品开发的过程中，大伙齐心加班加点，在 APP 版本上线的那一晚，熬了个通宵。这一个月的开发经历让我这个初入互联网行业的小白“印象深刻”，我也很感激这一群“出生入死” 的战友们，虽然前端和后常常“亦敌亦友”，产品和开发总是“血海深仇”，但团队始终保持热情，保持活力，我想这也是年轻团队最大的优势。

一款微信小程序的开发和大多数产品开发一致，要经过产品需求讨论、原型撰写、UI 设计、程序开发这些环节。我们的团队采用了敏捷开发的模式，下面我就对开发过程中我所接触到的、了解到的开发工具和技术栈做一个记录：

需求 + 原型设计：

Axure RP： Axure RP 是一款快速原型设计工具，支持多人协作设计和版本控制管理，由来自美国的 Axure 公司出品。这是一款收费的软件。Axure RP 8.0 可以免费试用30天，免费试用的版本是企业版（所有功能全开），到期后需要付费授权才能继续使用。
官网下载地址：Axure RP 8

UI 设计：

PxCook： PxCook 有一个可爱的中文名像素大厨，是一款切图设计工具软件，由国内的 FancyNode 团队开发。PxCook 自我评价是“最高效易用的自动标注工具”，其优点在于将标注、切图这两项设计需求集成在这一个软件内完成。
软件官网：PxCook

前端开发：

微信开发者工具： 微信小程序作为微信内置的功能，在开发的时候也有所限制，必须使用微信提供的 JavaScript 框架。并且，需要使用 WXML，WXSS 代替传统的 HTML 和 CSS，前后这两套样式语法其实挺类似：
WXSS 在 CSS 的基础上添加了一些功能，如能根据屏幕宽度进行自适应的船新尺寸单位： responsive pixel, rpx。
WXML 被赋予了数据绑定的功能，并且替换了一套基于<view>的船新的 tag 标签。
值得注意的是，微信提供的这套框架没有做成 Angular.js 一样的双向数据绑定，而是需要通过在 script 中的 this.setData 方法更新页面的数据。
小程序开发官网：小程序
（关于数据双向绑定：Angular.js 的数据双向绑定指的是从 View 到 Data 的事件绑定和从 Data 到 View 的属性绑定，能保证页面的 View 和 Data 始终保持一致。常用于表格和输入框的数据处理。）
Koala： 一款前端预处理器语言图形编译工具，由一位国内的前端大牛写成。开发过程中主要用到了 Koala 的实时编译功能，将 SCSS 文件编译成 CSS。Koala 能做到实时地监听文件，当文件改变时自动执行编译。使用 SCSS 这款CSS预处理语言主要是看中了它在 CSS 语法的基础上加入的嵌套式语法，让样式编写的结构更加一目了然。
此外，跳出了微信的框架之后，我们就可以随心所欲的选择 IDE 来编写 SCSS 样式文件，而我使用了更加顺手的 WebStorm。
下图是 Koala 的 GUI 界面。（没错，官方会在每千人用户中抽取一位幸运用户，下载软件，附赠考拉一只，我信了。）

Koala 的官网：Koala
Sourcetree： 一款 Git 管理工具，由澳大利亚的 Atlassian 公司开发。这是我们开发过程中用到的版本控制工具。
Sourcetree 官网：Sourcetree
gulp.js： 一款开源的自动化构建工具。小程序最终的样式需要 WXSS 的格式，所以，我们使用 gulp 将上述编译成的 CSS 文件的后缀修改为 .wxss。没错！需要做的只是修改后缀，可见 WXSS 和 CSS 的语法是高度相似的。gulp 和上述的 Koala 一样都能实现自动监听文件修改的功能。
gulp.js 的 Github 地址：gulp.js

后端开发：

Laravel： 后端用 PHP 语言编写，使用了 Laravel 作为项目框架。Laravel 是一款开源的框架，由 Taylor Otwell 在 2011 年开发，是 PHP 语言的最热门、使用最多的框架之一。
Laravel 框架官网：Laravel
Navicat： Navicat 是一款可视化数据库管理工具，后端大大们在项目中利用它来管理 MySQL 数据库。Navicat 是一款卓软数码科技 (PremiumSoft) 有限公司的产品。
Navicat 中文官网：Navicat 中国
Navicat 维基百科介绍页：Navicat - Wikipedia
Docker： Docker 被称为“轻量的虚拟机”。Docker 给每个应用程序装了一个 container，集装箱，机器不用管 docker 的集装箱里面装的是什么，只需要懂怎么安装集装箱就好，货物也只需要懂怎么把自己放进集装箱就好。
Docker 的出现给开发环境的移植带来极大的便利，完全无视了不同系统、不同硬件的差别带来的兼容性问题。
我觉得 Docker 的“集装箱理论”是一款产品自我介绍的典范！
Docker 官网：Docker

开发管理：

NEI接口管理平台： NEI (Netease Easy Interface) 是一款接口管理平台自动化构建工具，来自网易。开发过程中前端和后端的独立开发、模块化开发模式能提高效率、便于测试。这种低耦合的开发模式也是敏捷开发的宗旨。 后端编写完成业务逻辑之后，将实现功能的代码块包装成一个接口，以供前端调用。而 NEI 就是一个接口管理平台，后端大大们将“接口字段的名字、调用接口需要哪些参数、调用的返回值是什么”等信息上传至 NEI，前端小小们在实现按钮的提交功能、分页功能、下拉页面刷新功能的时候，就可以到 NEI 上找到对应地接口，然后愉快地继续写 bug code 了。
NEI 平台的官网链接：NEI
TAPD： TAPD (Tencent Agile Product Development) 是腾讯敏捷产品研发平台。TAPD 对于开发者来说就像一个任务清单，一个任务需求就是一张磁贴，而 TAPD 的面板就是一张大的磁板。每个任务的优先级、当前处理人、预计开始时间、预计结束时间等都被标注在该任务下，而磁板又被划分为规划中、实现中、已实现等板块，开发者根据目前的进度，主动拖动任务磁贴到正确的板块中，这样开发、产品和上头的人都能非常直观掌握开发进度。
另外，不同的产品迭代周期都能重新制作一份任务磁板；实现后的任务经过测试人员的测试发现缺陷后，也能通过 TAPD 回馈给开发，送上一张 brand new 的缺陷磁贴。总之，TAPD 确实是开发过程中管理进度的好平台，好帮手。
TAPD 平台官网：TAPD
阿里云： 团队开发过程中，代码交给了阿里云托管。作为国内公有云的“南波湾”、日前全世界公有云的 TOP5，这是一个值得信赖的平台。
阿里云开发者平台官网：开发者平台

一款微信小程序是如何诞生的。相关推荐

普本在校生是如何零基础在一个月内开发出第一款微信小程序的
先自我介绍一下,我是一个普通本科的大三在读生,在2020年春节前后,自己一个人开发并上线了第一款微信小程序,后续陆续开发了N款小程序,并且自己通过毕设.课设的开发在2020年上半年的疫情期间挣了一万多 ...
动态壁纸+工具箱+表情包外卖等10几个功能组合的一款微信小程序源码
动态壁纸+工具箱+表情包外卖等10几个功能组合的一款微信小程序源码这是一款多功能组合的一款微信小程序源码具体功能有如下表情包功能动态壁纸功能静态壁纸功能头像功能外卖推广功能空白名字生成 ...
linux带头像通讯录软件,这款微信小程序，拯救空白了很久的通讯录头像！
原标题:这款微信小程序,拯救空白了很久的通讯录头像! 一直以来,智能手机用户都被一个不大不小的问题困惑着--无论 iOS 还是 Android 平台,手机通讯录早已经支持了自定义好友头像的功能.然而由 ...
云服务器定时启动程序_过去、现在和未来：开发一款微信小程序的技术迭代全过程...
2019 年 10 月 19 日,由腾讯云与微信小程序团队联合举办的"小程序·云开发"技术峰会在北京召开.23 万小程序·云开发注册账户,50 多万开发者上手使用,这是腾讯云与微信 ...
这5款微信小程序，实用又不占内存！
微信小程序是很多朋友都爱使用,是因为实用又不占手机内存,还没找到合适的小程序,大家可以看看今天小编为大家分享的这5款小程序哦,每一款都很实用! 1.WiFi一键联它会自动帮你显示并连接周围的WiFi ...
有趣又实用的4款微信小程序，有了它们，APP都要靠边站！
不知道你是否经常在群里收到这样那样的小程序小游戏?各种通关小程序丰富了人们的生活,然鹅,小程序可不仅仅只有小游戏,还有很多有趣实用的小程序等着你去发现.这不,小编今天就发现了5款实用的微信小程序,这就 ...
（下）开发一款微信小程序的个性简历，能打开大厂之门并获得门票？（附源码）
回顾阅读本文之前,可以先看看上一篇分享的内容,主要讲微信小程序的由来,它的特点及产品优势,行业应用,开发语言,运行环境,开发前的准备工作等等. 本项目是基于微信小程序原生框架,常用原生组件及官方AP ...
微信小程序识别图片并提取文字_这款微信小程序可以批量图片转文字？识别准确率超高！...
在日常学习和生活中,我们都不乏会碰到那些需要将图片中的文字转换成可复制和编辑的内容的时候. 不管是书本还是电子文档又或者是电脑应用中的截图,其实都只要利用小编介绍的这个微信小程序就能轻松完成, 不仅能 ...
耗时一个月上架了一款微信小程序，赚了2022年的第一笔副收入
今天不谈技术,只谈经历. 前戏相信有很多的程序员都有一个产品梦,希望有一款属于自己产品.毕竟工作中遇到的有些"脑残"的产品经理不是一个两个,最后不得不因为"技术服务于业 ...

一款微信小程序是如何诞生的。

一款微信小程序是如何诞生的。相关推荐

最新文章

热门文章