后端开发是如何搞定APP开发的--《前端那些事》

讨论范围

2010年以前，前端开发一般指的是网站端将页面翻译成JavaScript，并对多种浏览器比如IE、Firefox、Opera、世界之窗等做兼容；随着Chrome的崛起以及移动互联网的普及，跨端的前端框架如雨后春笋般出现，从Facebook的reactjs到Google的flutter（立意点是一处写多端用提升效率降低成本，并尽可能减小相比于原生开发语言带来的性能影响），再到各个应用程序的小程序，近十年，相比于其他的开发者，前端开发者的世界可谓是轰轰烈烈。

所以当下的前端，它不再仅仅指代以往的前端开发（将页面通过JavaScript实现出来），它还包括终端开发（包括Android、IOS以及其他的一些端）、跨端开发、小程序开发、视觉UI设计等。标准的软件开发流程大致如下：

用户调研  ->  产品原型  ->  视觉设计  ->  前端开发  ->  后端开发  ->  测试上线

可以看到，从用户调研完成开始到后端开发之前，其实都是前端开发的范畴，有些公司会分类为前台、中台、后台。

而本文，我们讨论的范围是作为一名后端开发，如何独立实现APP的开发上线。

技术选型

当前，APP主要分为Android和IOS两个系统平台，其中Android开发语言为Kotlin、Java（Google在2019正式宣布kotlin代替Java成为Android开发的首选语言），IOS的开发语言为Swift、Objective-C。

一个人同时掌握多套终端开发技能是不难的，然而作为一名有追求的程序员，最大的特质是懒，即同样的逻辑是不太愿意重复实现的，另外也比较浪费时间；另外，IOS开发需要向苹果公司购买证书，个人开发者每年99美元，我们只是先自己折腾一下，短期内考虑只推出Android平台的app就好。

基于以上，我决定选择一种跨端的框架来实现。

上手试试

开发工具：

Android studio  Google官方提供的IDE，我这里用于跑Android模拟器

HBuilderX         UNIAPP官方提供的IDE，用于开发app页面逻辑

uniapp项目常规的目录结构及解释如下：(注：App.vue和main.js的注释写反了)

以简单的用户信息页面为例，模板代码如下：

<template><viewclass="user-info-root"><viewclass="user-info-item user-info-item-avatar"><viewclass="user-info-item-title">        头像
</view><viewclass="user-info-item-value"><imageclass="user-info-item-value-avatar":src="userInfo.avatarUrl"mode="aspectFill"></image></view><!-- <view class="user-info-item-go-to"></view> --></view><viewclass="user-info-item"@click="goToUpdateName"><viewclass="user-info-item-title">        昵称
</view><viewclass="user-info-item-value">        {{userInfo.nick}}
</view><viewclass="user-info-item-go-to"></view></view><viewclass="user-info-item"@click="goToUpdateGender"><viewclass="user-info-item-title">        性别
</view><viewclass="user-info-item-value">        {{userInfo.gender === 1 ? '男' : '女'}}
</view><viewclass="user-info-item-go-to"></view></view><navigatorclass="user-info-item"url="/pages/cityList/cityList"><viewclass="user-info-item-title">        地区
</view><viewclass="user-info-item-value">        {{userInfo.province}} {{userInfo.city}}
</view><viewclass="user-info-item-go-to"></view></navigator><viewclass="user-info-item"@click="goToUpdateDescription"><viewclass="user-info-item-title">        个人描述
</view><viewclass="user-info-item-value">        {{userInfo.description}}
</view><viewclass="user-info-item-go-to"></view></view></view></template>

获取数据的逻辑如下：

asyncloadUserInfo() {
uni.showLoading({
title: '数据加载中...'  });
let [userInfoData] =awaithttpUtils.postJson("/api/user/info", {});
this.userInfo=userInfoData.data;
uni.hideLoading();
},

虚拟机展示效果：

涉及后端的表结构设计、HTTP接口的提供这里就不展开了。

至此，在模拟器上我们可以顺利的创建页面、编写逻辑、渲染页面了。

经过两个多月的开发，APP已基本成型，页面端向大家分享一下：

总结

随着移动互联网的发展，前端领域发展的尤为迅速，当下我们可以借助许多成熟的跨端框架，通过自己擅长的开发方式进行多端应用的实现，提升效率的同时，也让更多个体开发者可以方便快捷的实现自己的想法，在此向这些开源的跨端框架致敬。

通过两个多月的开发，整体体验下来对框架由陌生到熟悉，中间遇到了非常多的坑，也走到了几个死胡同，学到很多，而这些不亲身实践是很难想到的和体会到的。

而这两个多月里，整体的创意设计、架构设计、APP逻辑开发、后端开发的占用实践比例大致是1：1：3：1，相信如果重头再来开发的话，APP逻辑开发的耗时占比将于后端开发差不多。

感谢跨端框架，助力我实现APP自由。

过程中如果有更多需要交流的，欢迎留言评论或者发邮件给我，我的邮箱swmabby@gmail.com