我是车辙，我的掘金小册《SkyWalking：利用监控和链路跟踪》曾经上线啦，这是我的第一本电子书，欢送大家订阅。

大家好，我是车辙。在实现小册后的一段时间，我忽然想开发一款集体H5产品。在起初有这样想法的时候，心田其实还是有不少纠结的。

大家都晓得，尽管我是计算机专业，但我从毕业到当初工作4年工夫，基本上所有的工作都是和后端无关。惟一和前端沾边的学习技能还是在大学期间学的，那时候因为毕业设计是爬虫网站，次要用于小说的爬取和浏览。所以它的大部分内容还是当前端为主，前端界面非常简单，用了Bootstrap 布局和JavaScript。

如果要做一款H5产品，除了须要学习新的框架，像Vue或者React, 还得去学习Css 以及各种布局，兴许前面还得对其进行机型适配，想想就头大。

当初放弃前端的起因还是感觉 Css 太简单了，天底下怎么会有这么难的技术。数据结构和算法和它比都算简略的。

起初求教了前端的敌人和共事，他们通知我要做一款集体的产品是有速成的方法的，能够通过CodeFun疾速生成前端代码。至于后端和上线部署对我来说还是没有什么难度的。磕磕绊绊之下，我的产品在两周前终于搞定了，完结撒花。

文末有链接，大家能够去体验下

接下来，我会基于我的学习、踩坑经验，给那些后端精通、前端小白的程序员们提供一个产品疾速开发计划。

画设计稿

正经的互联网公司，在我的项目立项后。产品首先须要出一份原型，而后交由 UI 出一份设计稿，接着前端负责实现。对于咱们集体开发者而言，原型能够不必出，设计稿还是须要的。况且，多画图对咱们程序员还是很有帮忙的，不论是时序图还是流程图，还是设计稿，都能锤炼咱们的思维能力

我应用的设计工具是Figma，国外的一款设计平台。相比于 Axure，我更看重它的在线设计合作能力。如果对Figma不相熟的同学，能够参考B站的视频教程疾速学习，小破站牛逼！B站地址

你能够疾速把这个B站视频看完，而后再用个半天，差不多就能靠 Figma 画出个设计稿了。如果须要Logo图标，能够去阿里妈妈的图标网站iconfont下载。地址

上面的就是我的产品设计稿了。

前端代码生成

画完设计稿，之前咱们提到过，能够通过CodeFun 这个平台疾速生成前端代码，它的官网简介说是 UI 设计稿主动生成源代码。CodeFun 能够说和Figma 进行了深度绑定，它在Figma中开发了一款插件，能够把Figma的产品设计稿上传到CodeFun 中。把我这边的设计稿上传后，能够看到在 CodeFun 中胜利生成了页面。

轻易点击一张设计稿，它就能帮咱们生成对应平台的程序代码，包含Uniapp、Vue、微信小程序等。

然而接下来的抉择就犯了难，该抉择哪个平台?因为我的平台定位是微信H5，但不排除之后可能会复制到小程序。网上搜寻后，网友举荐了UniApp作为开发平台，它能把 UniApp 的原生代码转换成微信小程序、H5,甚至 App 的代码，并且官网的文档足够丰盛，至多对于我来说足够了。

H5 开发

对于 Uniapp 的学习，B站上视频一堆，只不过内容都很多，就算开着2倍速，也无奈在短时间内学会，看完说不定还会忘。所以咱们能够参考网上某马的入门教程，理解 Uniapp 的根本应用，不须要多，理解下根本配置和 Tabbar 的生成即可。

具体地址就不发了，可能会有给某马打广告的嫌疑

配置实现后，通过微信小程序开发工具，能有这个样子就差不多。

款式开发

接着把 CodeFun 生成的代码文件复制到Uniapp，你认为这很简略的吗？其实这才是苦楚的开始。为什么这么说？

  1. CodeFun 生成的动态代码齐全只能看，比如说它生成的文本框只是一个Div + Css。你须要把它替换成对应的组件。因为咱们是Uniapp 开发的，所以我倡议去它的官网找对应的组件会比拟快，而且兼容性也会更强。另外像一些绝对简单的组件，Scoll、DateTime、swiper-item 都须要咱们去替换掉。
  2. 它生成的 Css 既多还简单,重重嵌套，有时候一个简略的 View 会有4、5个款式。还有一些布局，比方flex布局，主轴和副轴是什么，对于前端小白的我，每次碰到不会的，都得去网上看下什么意思。为了避免遗记，我都会把它记下来，睡前再回顾一遍。
  3. 有些Uniapp的组件和 CodeFun生成的代码会存在肯定抵触。比如说居中、字体等，这时候就得手动去调整款式。如果调不通，须要去批改组件源码。这对我来说可太难了，记得一开始改个左右居中对齐就花了我3个小时，差点就把我的急躁给熬没了。
  4. CodeFun 生成的css因为不通语境，命名形式都是相似于:Section1、Section2、Group1、Group2 保护起来特地的麻烦。

所以说，主动生成代码其实也是存在不少弊病，只不过作为刚入门的老手，能帮忙咱们疾速开发，劣势还是大于劣势的。

事件开发

到这一步，产品其实曾经初具雏形。咱们要做的是给他增加各种事件以及和后端的交互。基本上这一步次要的难点在于 Vuex 和同步异步的应用，像 v-model、v-for、v-if 这种学习起来还是比较简单的。

其实我一开始次要就是用 LocalStorage 存储信息，感觉没有Vuex不也能开发嘛，不过随着页面间的交互多起来，问题就裸露了：我在A页面的批改了用户信息后，到B页面数据并没有随之变动。只好乖乖的去学Vuex。所以这里我倡议，如果你的我的项目页面较少，就用LocaStorage就完事了，如果页面较多且有交互，就用Vuex + localStorage。

剩下的还有同步异步问题就靠Promise去解决，这个货色一开始我特地了解不了，比方应用await关键字的应用场景。感觉后端的异步比前端还是要简略点。

额定问题

在开发过程中，还存在些额定的问题。

  1. 比方微信受权问题，因为我是须要微信登录的，然而在Hash模式下因为#号导致了微信回调地址出错，所以我最初还是改成了History模式。至于这个引出的问题，咱们在部署环节再讲。
  2. 一开始我认为微信受权须要实在的测试环境地址，打算通过内网穿透测试。前面才发现你能够批改本地Host 发明个假的域名用于本地测试。

部署到服务器

在本地开发实现后，咱们须要部署到测试环境中。Uniapp 提供了一键构建打包的性能，间接应用就能够了。
而服务器我倡议购买腾讯云的，相比于阿里云更加便宜点，【吐槽下阿里云太贵了】。

而后腾讯云和宝塔是有单干的，用宝塔操作服务器、装置软件、保护软件什么的，的确比本人手动敲代码更简略。装置以下几个软件：

  1. JDK11
  2. MySQL

  3. Nginx

    留神开明对应的防火墙端口，比方MySQL就须要开明3306端口，Redis 须要开明 6379端口

这边的几个问题有：

  1. 跨域问题：跨域次要就是因为域名、端口、协定不统一导致的。以前还没思考过为什么前端本地调试的时候没有跨域问题，原来是前端做了代理，帮忙咱们和后端进行了交互。然而在测试环境上就是些Html和js代码,所以咱们能够通过Nginx帮忙咱们做这个代理。。
  2. history 问题，因为history模式去除了#，在刷新页面的时候会默认申请后端，然而后端没有这个接口，就导致了404。所以咱们须要在Nginx 通过try_files进行配置，先去前端页面找，找不到再去申请后端服务器。

后端的部署，我举荐应用云效【我感觉是我目前为止体验最好的产品了】。全副部署实现后，产品就正式上线了。

OK，到这差不多就完结了。其实还有很多问题存在，比如说微信领取的JS-SDK，组件封装等等，不过篇幅无限，就到此为止吧。最初奉上体验地址，心愿大家返回试用。前端小白的作品。

总结

通过这次实打实的体验前端同学的工作，我以前感觉前端简略的想法真是大错特错，前端的难度一点都不比后端低。像这次机型适配，我压根就没实现。。。

最初心愿大家多多点赞、珍藏。就和珍藏电子书一样，点赞、珍藏了，也就代表学会了，不要问我怎么理解的这么分明。

我是车辙，掘金小册《SkyWalking》作者，一名常被HR调侃为XX杨洋的互联网打工人，。

有须要源码的同学能够关注公众号《车辙的编程学习圈》支付，说不定什么时候这个产品也开源了，点击支付
本文由博客一文多发平台 OpenWrite 公布！