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

2022-03-12 04:26:46

讨论范围

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的注释写反了)

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

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

<template>
    <view class="user-info-root">
        <view class="user-info-item user-info-item-avatar" >
            <view class="user-info-item-title">
                头像
            </view>
            <view class="user-info-item-value">
                <image class="user-info-item-value-avatar" :src="userInfo.avatarUrl" mode="aspectFill"></image>
            </view>
            <!-- <view class="user-info-item-go-to">
            </view> -->
        </view>

        <view class="user-info-item" @click="goToUpdateName">
            <view class="user-info-item-title">
                昵称
            </view>
            <view class="user-info-item-value">
                {{userInfo.nick}}
            </view>
            <view class="user-info-item-go-to">
            </view>
        </view>

        <view class="user-info-item" @click="goToUpdateGender">
            <view class="user-info-item-title">
                性别
            </view>
            <view class="user-info-item-value">
                {{userInfo.gender === 1 ? '男' : '女'}}
            </view>
            <view class="user-info-item-go-to">
            </view>
        </view>

        <navigator class="user-info-item" url="/pages/cityList/cityList">
            <view class="user-info-item-title">
                地区
            </view>
            <view class="user-info-item-value">
                {{userInfo.province}} {{userInfo.city}}
            </view>
            <view class="user-info-item-go-to">
            </view>
        </navigator>

        <view class="user-info-item" @click="goToUpdateDescription">
            <view class="user-info-item-title">
                个人描述
            </view>
            <view class="user-info-item-value">
                {{userInfo.description}}
            </view>
            <view class="user-info-item-go-to">
            </view>
        </view>
    </view>
</template>

获取数据的逻辑如下：

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