如何使用uni-app快速成型一個微信小程序（一）

前言

在很多年前，微信小程序還在內測的時候，就嘗試寫過幾個小程序，但是那個時候也是因爲剛開始做開發，後端語言還沒整明白，並且感覺小程序應該不會火，加上小程序是用它自己的一套語法，所以對我個人而言學習成本較高，遂沒有繼續研究下去。
19年的時候感覺後端在幹下去有點不符合預期路線，所以將目光轉向了前端，那時node風頭正勁，故也從Vue、React等前端框架中進行選型，看了很多之後最後也是決定上手了Vue並實現了幾個中小型項目（PHP做後端服務，Vue前端框架），也算是不違揹我的“不落地的技術是沒有價值的”技術理念，最近偶然也聽身邊多個朋友提到了 uni-app 這個框架，看了一下官網宣稱一次編程生成多端的大餅，並且底層是採用了vue進行再次封裝，使用vue的語法，心中便對這個框架多了幾分期待，故打算用這個框架去實現以下幾年前沒有上手的小程序，前後花了兩天下午將框架基本使用、小程序發佈上架等流程基本摸清，掌握了小程序的獨立開發能力。以下將梳理整合這幾個小時瞭解和學到的東西，以供和我一樣情況的同學參考。

UNI-APP

uni-app 是一個使用 Vue.js 開發所有前端應用的框架，開發者編寫一套代碼，可發佈到iOS、Android、H5、以及各種小程序（微信/支付寶/百度/頭條/QQ/釘釘）等多個平臺。
DCloud公司擁有420萬開發者，幾十萬應用案例、6.5億手機端月活用戶，數千款uni-app插件、70+微信/qq羣。阿里小程序工具官方內置uni-app（詳見），騰訊課堂官方爲uni-app錄製培訓課程（詳見），開發者可以放心選擇。
uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序開發框架（詳見）、更好的App跨平臺框架、更方便的H5開發框架。不管領導安排什麼樣的項目，你都可以快速交付，不需要轉換開發思維、不需要更改開發習慣

以上摘自 uni-app手冊 第一章，我們可以從這幾句話看到簡直我等貼心棉襖，一次開發多次成型，並且有自己的插件市場，避免了重複造輪子的成本浪費，更適合敏捷開發。

Nodejs & Vue

由於 uni-app 底層是採用了 Vue 框架，所以需要基於 Node 環境，Vue基本語法和Node 環境安裝及配置此處不再贅述，有需要的同學可以查看我另一篇博文 Vue2.0 + Vue-cli3 新手入門 裏面詳盡的介紹了 Node 環境的安裝和 Vue 的語法。

uni-app 快速上手

這裏推薦下HbuilderX 這款編輯器，之前用過它之前版本，感覺和現在用的 Jetbrains 和 Vscode 之間總是差點意思，但是uni-app 和 HX 一起使用簡直珠聯璧合，框架深度支持uni-app。

1. 從 下載地址 選擇 Download，選擇適合自己環境的版本，我選擇的是
   
   下載後安裝即可。
2. 新建項目
   
3. 目錄結構
   
   熟悉Vue 的同學應該很清楚，結構基本與 vue-cli 一致，但是目錄結構還是有一些區別

┌─components            uni-app組件目錄
│  └─comp-a.vue         可複用的a組件
├─hybrid                存放本地網頁的目錄，詳見
├─platforms             存放各平臺專用頁面的目錄，詳見
├─pages                 業務頁面文件存放的目錄
│  ├─index
│  │  └─index.vue       index頁面
│  └─list
│     └─list.vue        list頁面
├─static                存放應用引用靜態資源（如圖片、視頻等）的目錄，注意：靜態資源只能存放於此
├─wxcomponents          存放小程序組件的目錄，詳見
├─main.js               Vue初始化入口文件
├─App.vue               應用配置，用來配置App全局樣式以及監聽 應用生命週期
├─manifest.json         配置應用名稱、appid、logo、版本等打包信息，詳見
└─pages.json            配置頁面路由、導航條、選項卡等頁面類信息，詳見

page 目錄下是我們的主要的業務程序頁面，components 下可以放一些我們常用的組件，從插件市場下載的組件也是儲存在這裏。

4. 運行demo
   
   待其命令結束，會自動打開瀏覽器，頁面如下：
   
   我們見到這個頁面證明我們的框架已經跑起來了。