uniapp最全面的知识总结
uni-app介紹
uni-app由dcloud 公司開發(fā)的多端融合框架，一次開發(fā)多端運行是一個使用。
通過使用Vue.js +小程序的api來開發(fā)所有前端應用的框架，開發(fā)者編寫一套代碼，來實現(xiàn)多端混合開發(fā)Hybrid：
可發(fā)布到iOS、Android、Web（響應式）、以及各種小程序（微信/支付寶/百度/頭條/QQ/釘釘/淘寶）、快應用等多個平臺
更多可了解uni-app官網(wǎng)
準備工具
使用uni開發(fā)前您需要安裝：
- Hbuilderx （開發(fā)與編譯工具）
- 微信小程序開發(fā)工具（微信小程序預覽測試）
- 安卓模擬器/真機（市面上有多種模擬機）
注意事項：
hbuilder首次運行需要下載對應的插件
運行到安卓模擬器，有視圖差別
運行可以需要一定的時間
有時需要不斷刷新頁面或重新運行
uni-app界面介紹
1.創(chuàng)建項目
2. 項目如何運行到多端
2.1 hbuilderx中的h5運行
tip：首次運行需要安裝插件
插件安裝成功后關閉內(nèi)置運行，從新打開
2.2 小程序運行
tip：首次運行需要設置，之后可直接運行
01 在微信開發(fā)工具設置-服務器端口
02 HBuilderx配置 微信開發(fā)工具的地址
03 運行設置
03.1 配置微信小程序id
04 運行(以上設置完畢就可以運行）
01 在微信開發(fā)工具設置-服務器端口
02 HBuilderx配置 微信開發(fā)工具的地址
03 運行設置
03.1 配置微信小程序id
04運行
在小程序成功運行案例
2.3 app || 模擬器運行
說明:不同的模擬器有不同的端口號：
夜神模擬器端口號：62001
海馬模擬器端口號：26944
逍遙模擬器端口號：21503
MuMu模擬器端口號：7555
天天模擬器端口號：6555
雷電模擬器端口號：5554
tip:
app運行不出數(shù)據(jù) 大部原因?qū)懙貌粔驑藴?/strong>
首次運行需配置模擬器端口號
首次運行需要安裝插件
01 打開模擬器或者手機
02 配置模擬器的端口
03 運行到模擬器
01 打開模擬器或者手機
02 配置模擬器的端口
03 運行到模擬器
03.1 第一次運行需要下載插件
03.2 插件安裝成功 開始運行
3. vue語法
3.1 模板語法
3.1.1. 文本渲染
{{表達式}} v-text=“表達式”//簡單的js運算 {{2+3}}//js方法調(diào)用 {{title.length}} {{title.split("").reverse().join("")}}//3元運算符 <view>{{title.length>15?'長度很長':'字少事大'}}</view>v-html 富文本3.1.2.條件渲染
v-if v-else-if v-else v-show 三元運算符3.1.3.列表選項
3.1.4.屬性綁定
<button v-bind:disabled=“true”> <button :disabled="true">3.1.5.表單綁定
01 默認 :value="單向綁定"02 input v-model=“雙向綁定”03 @change=“$event.detail.value” 事件，事件的值$event.detail.value3.1.6.事件
01 事件綁定
<button v-on:click="響應"></button>簡寫綁定 <button @ click="響應"> </button>02 事件行內(nèi)處理
<view @ click="num++"> </view>03事件響應函數(shù) （函數(shù)在methods定義）
<view @ click="say"> </view>04事件傳參
//$event 是一個固定寫法 代表事件對象不寫參數(shù) <view @ click="say"> </view> 等同于 <view @ click="say（）"> </view> 等同于 <view @ click="say（$event)"> </view>say(str = "你好") {// 彈出提示uni.showModal({title: str})}3.1.7. uni-app頁面
頁面配置 pages.json:
-
全局樣式 globalStyle:默認頁面的樣式會應用全局樣式
頁面寫了style 配置，那么用的配置覆蓋全局的配置 -
頁面 pages: path頁面路徑; style 頁面樣式
3.1.8. vue選項
data數(shù)據(jù)
methods方法
computed計算
watch監(jiān)聽
directive指令
filter過濾
3.1.9 uni-app 的生命周期
vue生命周期
小程序的生命周期
小程序的全局方法
app全局方法
3.1.10. 組件
4.路由
4.1 路由組件
路由組件官方文檔
導航 （navigator）
<navigator url="../options/options" open-type="reLauch"></navigator> //tip：文件名不能加后綴 .vue //url 跳轉(zhuǎn)的頁面 //open-type打開類型： //navigate跳轉(zhuǎn) //redirect重定向（當前頁面不留歷史紀錄）； //navigateBack 返回 //reLauch 重啟 //switchTab 跳轉(zhuǎn)底部欄4.2 路由傳參
語法：
傳遞： <navigator url="../options/options?count=5&title=life">選項</navigator>接收： onLoad(option) { ? //option的值this.count = option.countuni.setNavigationBarTitle({title: option.title})},案例
4.3 路由api
4.3.1 路由跳轉(zhuǎn)
methods: {goOption() {uni.navigateTo({url: "../options/options"})}, }4.3.2 重定向
uni.redirect({url: "../options/options?count=100&title=來自js跳轉(zhuǎn)"})4.3.3 返回
uni.navigateBack({ })4.3.4 底部欄切換
uni.switchTab({ })4.3.5 重啟
uni.reLunch({ })4.4 路由配置
路由配置官方文檔：
4.5 獲取當前頁面 getApp
01 在app.vue 定義globalData:{num:100}
02 要使用的頁面回去app
03 獲取globalData的值
onShow(){ this.num=app.globalData.num ?}04 更新 globalData值
addNm(){app.globalData.num++; ? this.num=app.globalData.num ?}案例
4.6 獲取頁面棧信息 getCurrentPages
5. 條件編譯
條件編譯目的：不同的平臺展示不同的特性與功能
5.1 模板條件編譯:
- APP app端
- H5 網(wǎng)頁端
- MP 小程序 : MP-WEIXIN 微信小程序
語法：
案例
5.2 css條件編譯
/* #ifdef APP */.active{color:red} /* #endif */5.3 js條件編譯
// #ifdef APP-PLUS uni.showModal({title:"你好App用戶" }) // #endifcss+js案例
5.4 條件配置頁面 pages.json
5.4.1 配置頁面導航欄樣式
“style”:{"h5":{"titleNView":{"titleText":"我是H5"}},"app-plus": {"titleNView":false //隱藏導航欄} }案例
5.4.2 配置顯示頁面路徑
// #ifdef MP-WEIXIN || APP {"path":"pages/condition/we","style":{"navigationBarTitleText": "小程序?qū)Ｓ许撁?#34;} }, // #endif案例
end。。。
總結(jié)
以上是生活随笔為你收集整理的uniapp最全面的知识总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Kubectl基础命令的使用
- 下一篇： 将GPS点导入ArcGIS并转换为shp