讨論範圍
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>
<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();
}, 虛拟機展示效果：
涉及後端的表結構設計、HTTP接口的提供這裡就不展開了。
至此，在模拟器上我們可以順利的建立頁面、編寫邏輯、渲染頁面了。
經過兩個多月的開發，APP已基本成型，頁面端向大家分享一下：
總結
随着移動網際網路的發展，前端領域發展的尤為迅速，當下我們可以借助許多成熟的跨端架構，通過自己擅長的開發方式進行多端應用的實作，提升效率的同時，也讓更多個體開發者可以友善快捷的實作自己的想法，在此向這些開源的跨端架構緻敬。
通過兩個多月的開發，整體體驗下來對架構由陌生到熟悉，中間遇到了非常多的坑，也走到了幾個死胡同，學到很多，而這些不親身實踐是很難想到的和體會到的。
而這兩個多月裡，整體的創意設計、架構設計、APP邏輯開發、後端開發的占用實踐比例大緻是1：1：3：1，相信如果重頭再來開發的話，APP邏輯開發的耗時占比将于後端開發差不多。
感謝跨端架構，助力我實作APP自由。
過程中如果有更多需要交流的，歡迎留言評論或者發郵件給我，我的郵箱[email protected]