uni-app介紹
-
uni-app是一個使用 Vue.js 開發(fā)所有前端應(yīng)用的框架，開發(fā)者編寫一套代碼，可發(fā)布到iOS、Android、Web（響應(yīng)式）、以及各種小程序（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶）、快應(yīng)用等多個平臺。uni-app在底層為我們打通了多個平臺間的差距，在開發(fā)的時候不用考慮太多兼容性問題。 - 適用場景
- 跨端應(yīng)用：需要同時發(fā)布多端，例如App，H5，小程序的場景
- 小程序的開發(fā)：不需要再進行原生的小程序開發(fā)，提高開發(fā)效率
- 需求H5 + App，而且App跟H5沒有太大不同
- 只需要支持安卓平臺的App，公司內(nèi)部沒有安卓開發(fā)人員
- 優(yōu)點
- 學(xué)習(xí)成本低，使用跟Vue一樣的語法，上手簡單
- 可以由Vue代碼修改成為uni-app的代碼，復(fù)用性強
- 開發(fā)成本低，可以開發(fā)一套代碼，適配多個平臺，減少冗余的跨端開發(fā)任務(wù)，節(jié)省人員開支和開發(fā)時間，快速交付
- 不需要安裝環(huán)境，只需要HBuilderx
- 缺點
- 不適合開發(fā)大型的原生應(yīng)用程序，存在一定的性能問題
- 產(chǎn)品尚有許多兼容性缺陷，需要開發(fā)人員注意
Vue H5代碼打包成App
- yarn build生成dist文件
- webpack打包時 publicPath需要設(shè)置成 ./
- aixos需要設(shè)置baseApi，無法使用代理
-
HBuildex新建5+ app項目
image.png
5+app項目目錄分析
image.png
- manifest.json 文件是應(yīng)用的配置文件，用于指定應(yīng)用的名稱、圖標(biāo)、權(quán)限等。
- unpackage 就是打包目錄，在這里有各個平臺的打包文件
- index.html vue打包生成dist入口文件
manifest.json配置
- 基礎(chǔ)配置
- 圖標(biāo)配置
打包步驟
- 刪除5+app里面的css、img、js、index.html文件
- 把生成的dist文件復(fù)制到5+app項目根目錄下，index.html和manifest.json同級
- 發(fā)行 => 原生App云打包 => 打包
uni-app開發(fā)app注意事項
項目目錄分析
image.png
pages.json 文件用來對 uni-app 進行全局配置，決定頁面文件的路徑、窗口樣式、原生的導(dǎo)航欄、底部的原生tabbar 等
manifest.json 文件是應(yīng)用的配置文件，用于指定應(yīng)用的名稱、圖標(biāo)、權(quán)限等。
App.vue是我們的根組件，所有頁面都是在App.vue下進行切換的，是頁面入口文件，可以調(diào)用應(yīng)用的生命周期函數(shù)。
main.js是我們的項目入口文件，主要作用是初始化vue實例并使用需要的插件。
unpackage 就是打包目錄，在這里有各個平臺的打包文件
pages 所有的頁面存放目錄
static 靜態(tài)資源目錄，例如圖片等
components 組件存放目錄
使用組件、插件
http://www.itdecent.cn/p/5dcada1d8f8d?from=timeline
https://ext.dcloud.net.cn/
App真機調(diào)試
-
手機開發(fā)者模式下打開USB調(diào)試，并連入電腦，選擇傳輸文件
image.png - HBuildex中運行 => 運行到手機模擬器
image.png
http://www.itdecent.cn/p/5d8e9699e5d2
不能使用window對象
// 瀏覽器中頂級對象是window對象
console.log(window) // window對象
// App中,調(diào)用原生App能力有一個plus對象
console.log(window) undefined
文件上傳下載
// 上傳
uni.uploadFile({
url: sysConfig.baseUrl + '/bs/potentialClients/uploadEntryFile', // 文件上傳接口
filePath: item.url, // 文件本地臨時路徑
name: 'file',
header: {
Authorization: 'Bearer ' + uni.getStorageSync('token')
},
success: ({data}) => {})
// 下載
uni.downloadFile({
url: 'https://www.example.com/file/test', //僅為示例，并非真實的資源
success: (res) => {
if (res.statusCode === 200) {
console.log('下載成功');
}
}
});
// 流文件的下載
let dtask = plus.downloader.createDownload(fileUrl[item.key], {
method: "GET",
filename: fileName[item.key] // 保存文件路徑僅支持以"_downloads/"、"_doc/"、"_documents/"開頭的字符串。
}, function(d, status) {
if(status == 200) {
// 打開文件
plus.runtime.openFile(d.filename);
} else {
//下載失敗
plus.downloader.clear();
}
})
dtask.setRequestHeader('Authorization', 'Bearer ' + uni.getStorageSync('token'))
dtask.start()
公共數(shù)據(jù)
優(yōu)點：輕量，便于使用
缺點：不便于維護大量公共數(shù)據(jù)，存在性能問題，大型數(shù)據(jù)推薦使用Vuex
- 公共數(shù)據(jù)定義，在App.vue下創(chuàng)建globalData配置項，可以在項目中任意地方訪問該變量
// App.vue
<script>
export default {
// 定義公共數(shù)據(jù)
globalData: {
userInfo: null
}
</script>
- 訪問，設(shè)置公共數(shù)據(jù)
// pages/index/index.vue
<script>
export default {
...
// 訪問公共數(shù)據(jù)
onLoad () {
this.data = getApp().globalData.userInfo
}
methods: {
setGlobalData () {
getApp().globalData.userInfo = {username: 'xxxx'}
}
}
...
</script>
調(diào)用原生api
https://www.html5plus.org/doc/zh_cn/xhr.html
復(fù)用組件數(shù)據(jù)渲染失效
<template>
<view>
// 渲染一個hong-order-info組件，動態(tài)傳入option，在H5端展示良好，在App端會出現(xiàn)父級數(shù)據(jù)已經(jīng)修改但子組件數(shù)據(jù)沒被修改
<hong-form :value="form" :option="formOption"></hong-form>
// 解決方案：在數(shù)據(jù)發(fā)生變化的時候?qū)M件進行卸載，再重新渲染組件
<hong-form v-if="formShow" :value="form" :option="formOption"></hong-form>
</view>
</template>
