uniapp[1]是Dcloud公司的產品，是一個跨端開發框架，基於vue.js技術棧。開發者編寫一套代碼，可發佈到iOS、Android、Web（響應式）、以及各類小程序（微信/支付寶/百度/頭條/QQ/釘釘/淘寶）、快應用等多個平臺。這是它的功能架構圖，能夠看下，瞭解下它的架構。css
簡單總結下，uniapp底層集成了native技術，就是h5+引擎，能調用手機原生api，因此uniapp能開發app，這是js引擎部分；它是雙引擎，渲染又是獨立一個獨立引擎。這個渲染引擎又分爲nvue渲染和webview渲染，nvue其實就是集成的weex，webview這個有了解的應該知道它的內核是webkit，能夠看這篇文章[2]瞭解。html
生態環境
uniapp官方的qq羣目前已經有35個了，都是2000人的大羣。還有各類基於uniapp的開源組件庫，好比uViewUI、colorui、ThorUI、uCharts，最完整最出名的目前是uViewUI，官方文檔也是比較完備了，https://uviewui.com/。他們的官方qq羣如今有4個，能夠加羣找開發者解答疑問。uniapp官方說有600萬開發者，總體上看，生態還算不錯。vue
正確姿式
一、閱讀官方文檔
官方文檔[3]從入門介紹到學習方法再到用法說明、注意事項等等，包羅萬象。若是文檔看不下去，能夠看看社區帖子，或者從插件市場找些現成的用起來。webpack
二、活用插件市場
插件上包含了各類組件、SDK、項目模板等各類資源，甚至還有uniCloud、HbuilderX的相關插件。若是官方的基礎組件、官方的uni-ui擴展組件庫不能知足你的需求，均可以到插件市場找找看。官方是很重視這個插件市場的，好比uni-ui有一篇官方文檔介紹說明https://uniapp.dcloud.io/component/README?id=uniui，點擊下面的組件就會跳轉到插件市場，uniui所有散落在這個插件市場裏。web
看這個插件市場排名，也能大概瞭解目前的插件市場現狀，總體上仍是比較活躍的：vuex
除了上面提到的比較綜合的組件庫，其實還有不少優秀的插件做者，他們是專一在特定領域，下面推薦幾個：vue-cli
-
多是uniapp生態最好的路由插件 [4] -
應該是最強大富文本插件 [5](已經被uviewui集成) -
我的以爲目前最好table組件 [6] -
挺不錯的日期時間選擇器 [7]
三、經過社區、qq羣、插件留言向開發者提問
若是你嚴格按照文檔進行開發，仍然遇到了問題，這時可能須要向他人求助了。若是是uniapp官方問題，能夠在社區[8]]查找相關資料，這裏的案例至關多，基本能找到大部分問題；npm
插件問題最好就是直接在插件市場對應插件下留言，若是你的問題描述清楚明確，都會有人回答，有的時候，在線就能等到回覆。也能夠加相應的qq羣，裏面的熱心人仍是很多的。json
實戰教程
前面介紹了uniapp官方資源的正確食用方式，下面介紹一下uniapp如何進行開發、調試、發佈，這裏涉及到app、h5及小程序(微信小程序)。小程序
1、環境搭建
一、安裝hbuilderX
hbuilderx也是dcloud公司出品的ide產品。用uniapp開發跨多端產品，實現一次開發，多端發佈就必須用hbuilderx這個神器IDE。這裏是官網下載地址https://www.dcloud.io/hbuilderx.html，找到app開發版本下載，開箱即用，不用安裝。uniapp對安卓和蘋果的系統版本有要求：Android最低要4.四、IOS最低要9。
二、安裝夜神模擬器
既然是開發app，就少不了連機調試，你能夠鏈接手機，也能夠安裝一個模擬器，這裏推薦夜神模擬器，下載地址：https://www.yeshen.com/。
三、配置環境
hbuilderx鏈接到模擬器，選擇工具--設置，打開配置界面,選擇運行配置，如圖。
adb路徑選擇模擬器安裝包的adb.exe地址，模擬器端口，夜神模擬器默認是62001，填上就能夠了。若是你不肯定它的端口，能夠在adb.exe的同級目錄下找到文件，雙擊運行，能夠看到這個結果，如圖:
這個就是夜神模擬器的監聽端口。
四、svn源碼管理
選擇工具--插件安裝，能夠打開一個插件管理面板，如圖。安裝插件，它這裏分爲核心插件和其餘插件兩類，核心插件能跟隨ide一塊兒升級，其餘插件就要到插件市場找本身須要的了。像svn這種插件，默認是沒有的，能夠到安裝新插件這裏安裝svn插件。
安裝過程比較簡單，直接點擊就好了。安裝好了也能夠卸載。
五、插件市場插件安裝
插件市場的插件安裝通常是這種方式：
點擊這個按鈕就能夠安裝到本地。這也分幾種，我瞭解的就是組件類、編譯類。像組件類，點擊安裝後會直接安裝到當前打開的uniapp項目中，並且是指定的文件夾components中；像編譯類，這種其實相似於webpack的loader，這個是放在hbx的安裝包裏。
2、uniapp手把手實戰
一、新建uniapp空模板項目
cli模式
用hbx建立項目在官方教程上講得比較細緻了，我這裏只介紹下用vue-cli建立項目過程。建立步驟在官網上也有，相比用hbx的可視化搭建，用cli搭起來慢了很多。
//安裝vue/cli全局依賴
npm install -g @vue/cli
//建立項目模板
vue create -p dcloudio/uni-preset-vue my-project
若是在執行腳本時有這樣的錯誤提示：vue: 沒法加載文件 C:....vue.ps1。說明你的腳本運行被禁止了，解決辦法就是打開當前項目地址的資源管理器，點擊文件，彈出對話框，如圖點擊所示位置
會有彈出框，在裏面執行這個段代碼：
set-ExecutionPolicy RemoteSigned
執行以後，按提示輸入Y或者A就能夠了，再按上面進行項目建立，就正常了：
最後，它會提示你選擇項目模板：
通常建議選擇hello uni-app的模板。若是一切順利，建立完成的項目，看起來是這樣的，以下圖
咱們能夠觀察下它的package.json文件，能夠看到有不少的打包、運行命令，uniapp確實幫咱們作了不少事！
cd my-project進入到項目中，運行一下npm run dev:h5，試下效果。
能夠看到確實成功了，打開啓動頁，按f12將頁面切換到手機模式，就能看到效果了。
這種cli模式下沒法鏈接到模擬器調試，要實時調試app版本，只能用hbx這個ide。cli模式除了能調試h5版本，還能夠調試小程序，以微信小程序爲例，這須要先準備好開發工具。
hbuilderx模式
考慮到app是咱們最主要的產品輸出，最好仍是切換到hbuilderx編譯器上，其實用習慣以後，感受仍是挺好用的。cli模式適合開發h5或者小程序。具體的步驟看官網就能夠了，比較簡單，可視化操做，一步步走就沒問題。其實前面用cli模式建立的項目，也能夠用hbx開發，在hbx編譯器上打開文件夾，選擇cli項目的src文件夾，就是一個標準的hbuilderx建立項目了。
這時選擇運行--運行到模擬器就能夠了
二、目錄結構
咱們來觀察下這個項目結構，這是官方的一個介紹，我copy過來了
┌─cloudfunctions 雲函數目錄（阿里云爲aliyun，騰訊云爲tcb，詳見uniCloud）
│─components 符合vue組件規範的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 配置頁面路由、導航條、選項卡等頁面類信息，詳見
重點是pages、static、main.js、App.vue、manifest.json、pages.json這幾個目錄或者文件。
三、必學內容
我這裏不必把官方文檔從頭講一遍，這裏能夠告訴你重點內容，你學習時重點關注，重點消化就能夠了。
第一個就是框架介紹這裏，你要把框架簡介的內容通讀並熟悉。
第二個就是上手開發了，這時框架這塊要知道怎麼用了，如何配置pages.json文件很是重要！具體的其實我也記不住，可是經過配置調試你就能知道是怎麼回事了，這個熟悉就好了。
四、uniapp路由頁面配置(pages.json)
打開pages.json文件，這是一個uniapp項目配置文件，是json格式。若是內容較多，能夠右鍵--顯示文檔結構圖，能夠看到這個文件的基本結構是這樣：
pages是項目中用到的全部的頁面配置，第一項是登陸app的啓動頁，通常放登陸頁或者首頁，其餘的能夠參官方文檔[9]看看說明並手動設置下參數，看下效果就明白了。subPackages是分包加載配置，這個是爲小程序準備的，小程序在發佈上傳代碼時對總包大小(目前是16M)有要求，還要對總包進行分包，每一個小分包不能超過2M，這個就要求在這裏進行配置分包加載。globalStyle這個是設置全局樣式的，通常都會有一個統一風格的樣式，能夠在這裏設置，包括導航欄、標題、窗口背景色這些。tabBar這個也很是重要，這是app的標配，至關因而一級導航欄，拿咱們這個hello uniapp的項目舉例來講，框住部分就是tabBar的內容。
tabBar各組內容最多隻能有5項，最少要有2項，都在list項進行配置
看下list項具體內容
五、生命週期
這裏按照粒度從粗到細分爲應用生命週期、頁面生命週期及組件生命週期，具體的能夠看下文檔[10]。其中組件生命週期是跟vue組件的生命週期相同。具體用法要結合業務場景配合來使用用。
六、狀態管理
狀態管理這塊有幾種方式，
-
vuex
vuex用法與vue項目上是同樣的。惟一要注意的就是import store from './store/store.js'這句只能寫在main.js裏，在別處引用都會報錯？！
-
uni.storage
這塊看下對應api的具體用法，這個狀態數據是持久化的，除非你調用它的清除接口，這個數據會一直緩存在本地。
-
globalData
這個用的比較少，這是在app.vue頁面定義全局變量，具體用法[11]以下：
<script>
export default {
globalData: {
text: 'text'
}
}
</script>
//在其餘頁面調用/修改全局變量
getApp().globalData.text = 'test'
七、全局事件
uniapp的API文檔很是詳細，甚至封裝了全局事件，咱們能夠直接用了
八、接口請求封裝
這一塊內容在API模塊的網絡[12]欄，通常的接口請求就用uni.request(object)就能夠了。普通的接口調用用這個就已經夠了，若是須要用到請求攔截，須要到插件市場找合適的插件。這裏推薦luch-request[13],文檔很清楚，功能比較全。
九、路由跳轉
路由跳轉對應的API[14]可能看下官方文檔，基本上都是經常使用的。這裏有個前提就是，當前頁面必須在pages.json中配置好，才能調用這些跳轉的api。還有個要注意的就是tabbar頁面只能用uni.switchTab來跳轉。咱們知道vue有vueRouter來支持路由跳轉、路由守衛，可是uniapp不支持這個插件，若是要在uniapp上實現，這裏推薦uni-simple-router[15]
十、全局樣式
樣式這一塊要注意的地方比較多，我總結了一下特別要注意是這些地方：
-
尺寸單位
uniapp目前通用的尺寸單位是px、rpx，px即咱們一般理解的像素單位；rpx是一個響應式單位，它會根據屏幕寬度按給定值佔比來計算出像素值。
前面提到的pages.json頁面的globalStyle[16]配置節點，能夠經過配置來控制rpx的計算參數
-
css變量及固定值
這幾個參數主要是在跨端樣式控制時要注意，常常會遇到app佈局弄得差很少了，而後到h5端，樣式就不對了，或者到小程序上也是異常。看上面這個表，主要就是要注意這三個變量在不一樣環境下，它的值是不一樣的，要特別注意。下面這個表，是對上面的一個補充，若是在h5端，不存在原生頂部導航欄與tabBar，就是自定義的div，咱們在設置樣式時就要參照這些變量的固定值。
-
字體圖標 -
通用的支持格式包括base64格式、網絡路徑即在線字體(須https開頭) -
小程序不支持在css中引用本地文件，包括圖片或者字體 -
uniapp會自動把小於40kb的字體文件轉換爲base64，uniapp不會編譯static文件夾下的內容
其餘的像樣式導入、內聯樣式等與web端應用開發差很少。還有一個要注意的就是若是要設置全局樣式，能夠在App.vue中設置或者用@import導入外聯樣式就能夠了。
十一、組件及組件庫
組件這塊是很是重要的，對uniapp來講包括框架設計、底層原理這些都是靈魂是骨架；前面講到的各類規則及配置都是行爲習慣、準則；還有前面提到的狀態管理、路由、事件、樣式、接口請求等，這些就像是血管、淋巴同樣不可缺乏；組件就是內臟、肌肉了，具體做用就看它的定位了。
官方文檔這塊將組件[17]專門列爲一個欄目，能夠大概看下有哪些組件。平時開發基本功能用官方提供的組件基本上就知足了。開源的組件庫也是基於官方組件進行的二次封裝，通常原則是優先參考官方組件，若是官方組件不支持的，或者用起來不方便的，再到開源市場尋找開源插件。
十二、登陸跳轉到首頁
接下來，咱們開發一個登陸跳轉的功能。前面咱們用vuecli建立了一個項目，那個是hellouni的，內容有點多，如今咱們從新搭建一個空的項目模板，這樣清楚一點。步驟跟前面同樣，就是選擇模板時選默認模板就好了。
開發登陸功能
在空模板項目上嘗試開發一個登陸功能，通常須要這幾步：
-
新建一個登陸頁面，配置pages頁面路由參數
"pages": [ //pages數組中第一項表示應用啓動頁，參考：https://uniapp.dcloud.io/collocation/pages
{
"path" : "pages/login/login",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
},{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
]
-
準備一個可用的登陸接口，進行封裝
uni.request({
// #ifdef H5
url: '/data-receive/v1/login',
// #endif
// #ifndef H5
url: 'http://##.##.##.##:##/data-receive/v1/login',
// #endif
method: 'POST',
data: {
username: this.name,
password: this.password
},
dataType: 'json',
success(res) {
if (res.statusCode == 200 && res.data.code == 200) {
//跳轉到首頁
uni.navigateTo({
url: '../index/index'
})
}
}
})
-
新建登陸頁面，完成佈局、樣式，登陸邏輯
<template>
<view class="content">
<view class="logo">
<image src="../../static/logo.png" mode=""></image>
</view>
<view class="list">
<view class="title">
用戶名
</view>
<view class="input">
<input type="text" placeholder="請輸入用戶名" v-model="name" />
</view>
</view>
<view class="list">
<view class="title">
密碼
</view>
<view class="input">
<input type="text" placeholder="請輸入密碼" v-model="password" />
</view>
</view>
<button type="default" @tap="dologin">登陸</button>
</view>
</template>
-
將登陸接口請求分兩種狀況：h5環境、非h5環境
// #ifdef H5
url: '/data-receive/v1/login',
// #endif
// #ifndef H5
url: 'http://##.##.##.##:##/data-receive/v1/login',
// #endif
-
h5環境用代理解決跨域
"h5" : {
"router" : {
"base" : "./"
},
"devServer" : {
"proxy" : {
"/data-receive" : {
"target" : "http://##.##.##.##:##/data-receive",
"pathRewrite" : {
"^/data-receive" : ""
}
}
}
}
}
-
頁面跳轉
uni.navigateTo({
url: '../index/index'
})
更多跳轉請參考路由與頁面跳轉[18]
1三、開發調試
app開發調試
app調試在hbuilderx右下角點擊bug標識就會彈出調試框，以下圖所示，不過這個比較簡，監測不到網絡請求，不過打斷點調試仍是很是方便的。
h5開發調試
h5其實就是網頁，這個調試就比較簡單了，跟開發web項目同樣的。
-
在hbx上運行到瀏覽器(內置或者其餘瀏覽器) -
f12並開啓手機調試模式
小程序開發調試
首先要明白uniapp小程序版本的開發方式：開發仍是在hbx上開發，只不過要運行到小程序開發工具上，而後在hbx上開發會實時更新到小程序上。也就是說小程序開發工具只是個模擬器，看效果的，上面的代碼都是從uniapp版本編譯過來的，對開發不太友好，不建議在小程序開發工具上修改。如下是微信小程序開發步驟：
-
到微信公衆平臺註冊一個小程序，並填寫相關信息 -
在開發設置完成小程序開發者綁定，生成小程序以後會有一個小程序appid，這個要保存 -
下載安裝小程序開發工具
若是項目是第一次運行到小程序，須要在小程序開發工具上綁定前面註冊保存的appid，小程序代碼地址(此例是在newproject\src\unpackage\dist\dev\mp-weixin)，綁定好了就能看到小程序的開發狀態了，就像這樣：
前面講太小程序的開發仍是在hbx上，小程序工具是看效果的，可是調試找bug仍是得在小程序開發工具上，調試模塊就在右下角，相似於谷歌瀏覽器的調試窗，若是以爲窗口過小，點擊這個浮動窗口按鈕就能彈出調試窗口。
已經彈出的調試窗口
1四、打包發佈
app打包發佈
app打包流程比較簡單，分爲安卓和蘋果兩大平臺。通常app上線都應該走雲打包流程，選擇發行-->原生App雲打包，彈出這個對話框。
這個是安卓包，若是不須要上市場上的應用平臺，就能夠選擇公共測試證書的打包方式。
這是蘋果版本的打包，蘋果打包後要上線，只有上線appstore一條路，證書相關的三個文件都不能少。
點擊打包以後，進入雲打包隊列排隊等待，成功以後會給出下載地址：
安卓版本是能夠直接安裝使用的，你能夠放在生產環境服務器上供用戶下載。若是是蘋果版本，打包後的ipa文件不能直接使用，還要提交到appstore審覈經過，最後才能發佈，這個週期大概在一週左右。
app熱更新
在app上線以後，後面的版本升級就能夠用熱更新方式更新了，不用每次都發佈一個新的完整包。選擇發行-->原生App-製做應用wgt包，彈出更新包對話框：
生成wgt後，將wgt文件放在服務器，用戶在app上檢測到有更新時就會下載更新包在本地熱更新。
-
發行wgt時，manifest.json配置頁面的應用版本名稱與應用版本號都必須高於上一次設置的值；
-
檢測版本是否更新，若是有更新就下載更新包、安裝並重啓應用，這裏有個完整教程[19]
h5打包發佈
h5版本的打包應該是最簡單的，發佈也能夠按網頁部署方式來，若是想用微信打開網頁，最好將h5部署在外網域名所在的服務器上。
小程序打包發佈
-
分包
小程序打包對包的大小有限制，以前是16M如今升級到了20M。具體的分包方法參考官方文檔說明[20]，咱們分包是要在uniapp上進行分包，注意uniapp分包要求[21]。我寫了關於uniapp適配微信小程序[22]的文章，對分包上傳有說明，能夠參考。
-
上傳代碼 代碼上傳直接在開發工具上操做，步驟簡單，這裏不細說了，若是分包正常就不會有問題 -
提交審覈 這步按官方要求來就行，不是必填的就不用填
未完待續。。。。
備註：
一、https://uniapp.dcloud.io/README
二、https://mp.weixin.qq.com/s/vxbVz_gHJd_rxK0bgUWBfg
三、https://uniapp.dcloud.io/README
四、https://ext.dcloud.net.cn/plugin?id=578
五、https://ext.dcloud.net.cn/plugin?id=805
六、https://ext.dcloud.net.cn/plugin?id=491
七、https://ext.dcloud.net.cn/plugin?id=112
八、https://ask.dcloud.net.cn/explore/
九、https://uniapp.dcloud.io/collocation/pages?id=pages
10https://uniapp.dcloud.io/collocation/frame/lifecycle?id=%E5%BA%94%E7%94%A8%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F
十一、https://uniapp.dcloud.io/collocation/App?id=globaldata
十二、https://uniapp.dcloud.io/api/request/request?id=request
1三、https://www.quanzhan.co/luch-request/
1四、https://uniapp.dcloud.io/api/router?id=navigateto
1五、http://hhyang.cn/src/router/start/quickstart.html
1六、https://uniapp.dcloud.io/collocation/pages?id=globalstyle
1七、https://uniapp.dcloud.io/component/view
1八、https://uniapp.dcloud.io/api/router?id=navigateto
1九、https://ask.dcloud.net.cn/article/35667
20https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html
21https://uniapp.dcloud.io/collocation/manifest?id=%E5%85%B3%E4%BA%8E%E5%88%86%E5%8C%85%E4%BC%98%E5%8C%96%E7%9A%84%E8%AF%B4%E6%98%8E
2二、https://juejin.cn/post/6895310727544832013
本文分享自微信公衆號 - 字節逆旅（wvivw_007）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。