當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Uni-App从入门到实战

發(fā)布時(shí)間：2024/3/12 编程问答 34 豆豆

生活随笔收集整理的這篇文章主要介紹了 Uni-App从入门到实战小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

uinapp總結(jié)

文章目錄

uinapp總結(jié)
前言
一、創(chuàng)建項(xiàng)目
二、項(xiàng)目結(jié)構(gòu)
三、在pages.json中配置文件
- 1.全局配置globalstyle
- 2.page常用
- 3.tab常用
- 4.啟動(dòng)模式condition
四、組件
- 1.內(nèi)置組件
- - uniapp組件
  - - 視圖容器
    - - view ===> div
      - scroll-view 滾動(dòng)標(biāo)簽必須給該標(biāo)簽設(shè)置寬或高
      - swiper swiper-item 輪播圖標(biāo)簽
    - 基礎(chǔ)內(nèi)容
    - - text ===> span
      - icon ==> 圖標(biāo)
      - progress ==> 進(jìn)度條
      - rich-text==> 富文本(類似v-html)
    - 表單組件
    - - button
      - checkbox 多選框
      - radio 單選框
      - input 輸入框 switch 開關(guān)
    - 媒體組件
    - - image ==> img
    - 地圖(只支持h5和微信小程序)
    - 導(dǎo)航
    - - 編程式路由導(dǎo)航
      - navigator(是塊元素) ==> a
      - 聲明式路由導(dǎo)航
      - 路由傳參
五、uniapp中的生命周期
- - - 應(yīng)用的生命周期函數(shù)：
    - 頁面的生命周期函數(shù)：
    - 頁面刷新的生命周期鉤子：onPullDownRefresh
    - 頁面觸底的生命周期鉤子：onReachBottom
六、發(fā)送網(wǎng)絡(luò)請(qǐng)求
七、數(shù)據(jù)緩存
八、API
- - - 媒體
    - - 上傳圖片：
      - 預(yù)覽圖片：
    - 設(shè)備
九、條件編譯跨端兼容(希望不同平臺(tái)顯示不同內(nèi)容)
十、組件
十一、內(nèi)置組件庫和擴(kuò)展組件庫
- - 內(nèi)置組件庫
  - - - 界面交互反饋：
  - 擴(kuò)展組件庫
  - - - 商品導(dǎo)航：
十二、uni中樣式的使用和字體圖標(biāo)
HbuildX的使用
- 1.插件安裝：
- 2.常用快捷鍵

前言

根據(jù) Uni-App從入門到實(shí)戰(zhàn)-黑馬程序員杭州小區(qū)出品視頻所總結(jié)的筆記。
視頻地址：https://b23.tv/MercjWo

一、創(chuàng)建項(xiàng)目

使用工具：HbuildX 微信開發(fā)者工具
1.創(chuàng)建項(xiàng)目，選擇uniapp

2.填寫項(xiàng)目名稱和選擇路徑。

3.啟動(dòng)項(xiàng)目：

注意：微信小程序需要設(shè)置如下

二、項(xiàng)目結(jié)構(gòu)

三、在pages.json中配置文件

層級(jí)分配：

1.全局配置globalstyle

https://uniapp.dcloud.net.cn/collocation/pages.html#globalstyle

1.配置全局樣式。
2.常用的配置屬性：

"globalStyle": {"navigationBarTextStyle": "black", //導(dǎo)航欄字體顏色,只有black/white"navigationBarTitleText": "小程序app",//導(dǎo)航默認(rèn)標(biāo)題"navigationBarBackgroundColor": "#f1c40f", //導(dǎo)航欄背景顏色"backgroundColor": "#F8F8F8" ,//下拉出來的背景顏色//"navigationStyle":"custom", //去除默認(rèn)導(dǎo)航欄"enablePullDownRefresh":true, //開啟下拉刷新"backgroundTextStyle":"light" //下拉刷新樣式 }

2.page常用

https://uniapp.dcloud.net.cn/collocation/pages.html#style
配置頁面讀取路徑(相當(dāng)于vue中的路由)。
h5(搜索)：配置編譯到 H5 平臺(tái)時(shí)的特定樣式

"pages": [ {"path": "pages/message/message", //路徑"style": {"navigationBarTitleText": "信息頁", //導(dǎo)航標(biāo)題"navigationBarBackgroundColor": "#007AFF", //導(dǎo)航顏"onReachBottomDistance":200, //配合頁面處理事件，默認(rèn)50"h5": {"pullToRefresh": { // 下拉刷新配置"color": "#5352ed" //下拉刷新樣式顏色}}}} ,{"path": "pages/contact/contact","style": { //頁面中配置項(xiàng)會(huì)覆蓋 globalStyle 中相同的配置項(xiàng)"navigationBarTitleText":"內(nèi)容頁面"}} ],

3.tab常用

https://uniapp.dcloud.net.cn/collocation/pages.html#tabbar

"tabBar": { //最少兩個(gè)最多5個(gè)"color": "#eccc68", //tab上文字顏色"selectedColor": "#2f3542", //選中時(shí)的文字顏色"borderStyle": "white", //上邊框的顏色，可選值 black/white"backgroundColor": "#ced6e0", //tab背景顏色//"position":"top", //tab位置 (bottom、top) 僅支持微信小程序"list": [ //list列表，最少兩個(gè)最多5個(gè){ "text": "信息頁", //圖標(biāo)下文字"pagePath": "pages/message/message", //路徑"iconPath": "static/tabs/message.png", //未選中時(shí)的圖標(biāo)(不支持網(wǎng)絡(luò)圖片，不支持字體圖標(biāo))"selectedIconPath": "static/tabs/message-active.png" //選中時(shí)的圖標(biāo)}, {...},{...}] }

4.啟動(dòng)模式condition

https://uniapp.dcloud.net.cn/collocation/pages.html#condition

"condition": { //啟動(dòng)模式配置，僅開發(fā)期間生效，用于模擬直達(dá)頁面的場(chǎng)景"current": 0, //激活的list索引"list": [ //啟動(dòng)模式列表{"name": "詳情頁", //啟動(dòng)模式名稱"path": "pages/detail/datail", //路徑"query": "id=80" //(選配)啟動(dòng)參數(shù)，可在頁面的 onLoad 函數(shù)里獲得}] }

四、組件

1.內(nèi)置組件

uniapp組件

視圖容器

https://uniapp.dcloud.net.cn/component/view.html

view ===> div

<view class="box" hover-class="boxHover" hover-stay-time="50"> //點(diǎn)擊時(shí)添加的類該類多久移除<view class="item" hover-class="itemHover" hover-stop-propagation="true">111</view> //是否取消冒泡</view>

scroll-view 滾動(dòng)標(biāo)簽必須給該標(biāo)簽設(shè)置寬或高

<scroll-view scroll-x scroll-left="150"> //開啟x軸滾動(dòng)，滾動(dòng)條初始距離為150px<view class="scrOut"><view class="scrBox">111</view><view class="scrBox">222</view><view class="scrBox">333</view><view class="scrBox">444</view></view> </scroll-view>  <scroll-view class="scoll2" scroll-y scroll-top="150"> //開啟y軸滾動(dòng)，滾動(dòng)條初始距離為150px<view><view class="scrBox2">111</view><view class="scrBox2">222</view><view class="scrBox2">333</view><view class="scrBox2">444</view></view> </scroll-view>

swiper swiper-item 輪播圖標(biāo)簽

https://uniapp.dcloud.net.cn/component/swiper.html

<swiper class="banner" indicator-dots //是否顯示面板指示點(diǎn) indicator-color="#00000090" //指示點(diǎn)顏色 indicator-active-color="#fff" //當(dāng)前選中的指示點(diǎn)顏色 autoplay //是否自動(dòng)切換 interval="1000" //自動(dòng)切換時(shí)間間隔，默認(rèn)5000 circular //是否采用銜接滑動(dòng) previous-margin="20" //前邊距 next-margin="20" //后邊距 ><swiper-item><image src="/images/banner1.jpg"></image></swiper-item><swiper-item><image src="/images/banner2.jpg"></image></swiper-item><swiper-item><image src="/images/banner3.jpg"></image></swiper-item> </swiper>

基礎(chǔ)內(nèi)容

https://uniapp.dcloud.net.cn/component/icon.html

text ===> span

<text selectable space="ensp" decode>你 \n 好</text>
selectable ：是否可選;
space：編碼格式;
decode：識(shí)別轉(zhuǎn)義字符

icon ==> 圖標(biāo)

<view style="padding: 50px; text-align: center;"><icon type="success" size="100"></icon><view>提交成功，感謝你的配合！</view> </view>

progress ==> 進(jìn)度條

rich-text==> 富文本(類似v-html)

https://uniapp.dcloud.io/component/rich-text.html

<rich-text :nodes="datail.content"></rich-text>

表單組件

https://uniapp.dcloud.net.cn/component/button.html

button

<view class="mybox1"><button type="primary" plain>登入</button> //按鈕樣式按鈕是否鏤空，背景色透明<button>退出登入</button><button type="warn" size="mini" disabled>支付</button> //按鈕大小禁用按鈕<button loading>加載中</button> //出現(xiàn)加載中圖標(biāo)<button open-type="contact">聯(lián)系客服</button> //跳轉(zhuǎn)到聯(lián)系客服功能 </view>

checkbox 多選框

<checkbox value="0" checked="true" disabled />選中 <checkbox value="1" color="blue" />未選中

radio 單選框

<radio-group><radio></radio>男<radio></radio>女 </radio-group>

input 輸入框 switch 開關(guān)

<form catchsubmit="formSubmit"><input class="ipt" placeholder="請(qǐng)輸入用戶名" type="text" focus cursor-spacing="100" /><button form-type="submit">提交</button><switch checked></switch> </form> .ipt {border: 1px solid #ddd;height: 70rpx;padding: 0 10px;box-sizing: border-box; }

媒體組件

https://uniapp.dcloud.net.cn/component/image.html

image ==> img

<image class="img1" src="/images/bg2.jpg"></image> <image src="/images/blog.jpg" mode="widthFix" show-menu-by-longpress></image> //等比縮放，寬度完全顯示 //長(zhǎng)按可發(fā)送好友<image src="/images/blog.jpg" mode="center"></image> //不縮放，取中間一塊

mode=“heightFix” 縮放模式，高度不變，寬度自動(dòng)變化，保持原圖寬高比不變
?? ? ? ? ? “widthFix” 縮放模式，寬度不變，高度自動(dòng)變化，保持原圖寬高比不變

地圖(只支持h5和微信小程序)

https://uniapp.dcloud.net.cn/component/map.html

<map class="map" :longitude="longitude" :latitude="latitude" :markers="markers"></map>data() {return {longitude: 116.4693, //經(jīng)度latitude: 39.927666, //緯度scale: 11, //放大比例markers: [{longitude: 116.4693, //圖片的經(jīng)度latitude: 39.927666, //圖標(biāo)的緯度iconPath: '../../static/hmlogo.png', //圖標(biāo)路徑width: 30, //圖標(biāo)寬度height: 30 //圖標(biāo)高度}]} },

導(dǎo)航

編程式路由導(dǎo)航

https://uniapp.dcloud.net.cn/component/navigator.html

navigator(是塊元素) ==> a

<view><navigator class="link" url="/pages/logs/logs">跳轉(zhuǎn)到日志</navigator>//關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面。但是不允許跳轉(zhuǎn)到 tabbar 頁面。<navigator class="link" url="/pages/logs/logs" open-type="redirect">關(guān)閉當(dāng)前頁面跳轉(zhuǎn)到日志</navigator> //跳轉(zhuǎn)到 tabBar 頁面，并關(guān)閉其他所有非 tabBar 頁面<navigator url="/pages/demo/demo" open-type="switchTab" >跳轉(zhuǎn)到demo2</navigator> //不能傳參//關(guān)閉所有頁面，打開到應(yīng)用內(nèi)的某個(gè)頁面<navigator class="link" url="/pages/logs/logs" open-type="reLaunch">關(guān)閉所有頁面跳轉(zhuǎn)到日志</navigator> </view>

聲明式路由導(dǎo)航

https://uniapp.dcloud.net.cn/api/router.html#navigateto
uni.navigateTo(Object object)
//保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面，使用uni.navigateBack可以返回到原頁面。。但是不允許跳轉(zhuǎn)到 tabbar 頁面，路徑后可以帶參數(shù)。

uni.redirectTo(Object object)
//關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面。
//跳轉(zhuǎn)的應(yīng)用內(nèi)非 tabBar 的頁面的路徑，路徑后可以帶參數(shù)

uni.switchTab(Object object)
//跳轉(zhuǎn)到 tabBar 頁面，并關(guān)閉其他所有非 tabBar 頁面。不能傳參

uni.reLaunch(Object object)
//關(guān)閉所有頁面，打開到應(yīng)用內(nèi)的某個(gè)頁面

uni.navigateBack(Object object)
//返回上一級(jí)頁面

<button type="primary" @click="goDetail">跳轉(zhuǎn)到詳情頁</button> <button type="primary" @click="goMessage">跳轉(zhuǎn)到tabBar頁</button>goDetail(){uni.navigateTo({url:'/pages/detail/datail?id=1'}) }, goMessage(){uni.switchTab({url:'/pages/message/message'}) } //返回上一級(jí) uni.navigateBack({delta:1,//返回層數(shù)，2則上上頁 })

路由傳參

// 傳遞： <navigator url="/pages/detail/datail?id=80&name=yrh">跳轉(zhuǎn)到詳情頁</navigator> // 接收： onLoad(options) { //監(jiān)聽頁面加載console.log('路由參數(shù)',options) //{"id":"80","name":"yrh"} },

五、uniapp中的生命周期

教程—>頁面—>生命周期

應(yīng)用的生命周期函數(shù)：

https://uniapp.dcloud.net.cn/collocation/App.html#applifecycle

頁面的生命周期函數(shù)：

https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle

頁面刷新的生命周期鉤子：onPullDownRefresh

onPullDownRefresh() {console.log("頁面刷新了")// 初始化數(shù)據(jù)this.pageindex = 1this.goods = [],this.flag = falsesetTimeout(() => {this.getGoodsList(); // 再次發(fā)送請(qǐng)求uni.stopPullDownRefresh(); //關(guān)閉刷新動(dòng)畫}, 500); }, 開啟下拉刷新：uni.startPullDownRefresh() 關(guān)閉下拉刷新：uni.stopPullDownRefresh();

頁面觸底的生命周期鉤子：onReachBottom

onReachBottom(){if(this.goods.length<this.pageindex*10){console.log('頁面觸底了')return this.flag = true //顯示觸底提示，停止發(fā)送請(qǐng)求}this.pageindex++this.getGoodsList() //重新獲取數(shù)據(jù) //追加：this.goods = [...this.goods,...res.data.message] }, 通過給pages.json文件配置："onReachBottomDistance": 200 //定義觸發(fā)時(shí)刻

六、發(fā)送網(wǎng)絡(luò)請(qǐng)求

API->網(wǎng)絡(luò)->發(fā)起請(qǐng)求： https://uniapp.dcloud.net.cn/api/request/request.html

get(){uni.request({url:'http://localhost:8082/api/getlunbo',success(res){console.log(res)}}) }

七、數(shù)據(jù)緩存

API->數(shù)據(jù)緩存：https://uniapp.dcloud.net.cn/api/storage/storage.html#setstorage

<button type="primary" @click="setStorage">存儲(chǔ)數(shù)據(jù)</button> <button type="primary" @click="getStorage">獲取數(shù)據(jù)</button> <button type="primary" @click="removeId">移除id</button>setStorage(){// 異步存儲(chǔ)// uni.setStorage({// key:'id',// data:80,// success(){// console.log('存儲(chǔ)成功')// }// })// 同步存儲(chǔ)uni.setStorageSync('id',100) }, getStorage(){// 異步獲取// uni.getStorage({// key:'id',// success(res){// console.log('獲取成功：',res) // //{"data":100,"errMsg":"getStorage:ok"}// }// })//同步獲取const res = uni.getStorageSync('id')console.log(res) //100 }, removeId(){// 異步刪除// uni.removeStorage({// key:'id',// success(){// console.log('刪除成功')// }// })// 同步刪除uni.removeStorageSync('id') }

八、API

媒體

上傳圖片：

https://uniapp.dcloud.net.cn/api/media/image.html#unipreviewimageobject

<button type="primary" @click="chooseImg">上傳圖片</button>chooseImg(){uni.chooseImage({count:5,success:res=>{this.imgArr = res.tempFilePathsconsole.log(this.imgArr)}}) },

預(yù)覽圖片：

https://uniapp.dcloud.net.cn/api/media/image.html#unipreviewimageobject

<image v-for="(item,index) in imgArr" :key="index" :src="item" @click="@click="previewImg(item.img_url)""></image>previewImg(current){// 獲取圖片路徑列表const urls = this.secondDate.map(item=>{return item.imgUrl})uni.previewImage({ // 開啟預(yù)覽//current為當(dāng)前顯示圖片的鏈接/索引值，//不填或填寫的值無效則為urls的第一張current, urls:this.imgArr ,//需要預(yù)覽的圖片鏈接列表indicator:"number", //底部圓點(diǎn)顯示（只支持app）loop:true, //循環(huán)模式（只支持app）}) }

設(shè)備

https://uniapp.dcloud.net.cn/api/system/phone.html

撥打電話：uni.makePhoneCall({phoneNumber:'10086'})

九、條件編譯跨端兼容(希望不同平臺(tái)顯示不同內(nèi)容)

教程->編譯器->條件編譯處理多端差異
https://uniapp.dcloud.net.cn/tutorial/platform.html#%E8%B7%A8%E7%AB%AF%E5%85%BC%E5%AE%B9

<view>我希望只在h5頁面中看見</view>   <view>我希望只在微信小程序中看見</view>

十、組件

components->test.vue

組件的使用：
https://uniapp.dcloud.net.cn/tutorial/page-component.html

<test></test>import test from '../../components/test.vue'components:{test},
組件的生命周期： [https://uniapp.dcloud.net.cn/tutorial/page.html#componentlifecycle](https://uniapp.dcloud.net.cn/tutorial/page.html#componentlifecycle)

組件的傳參：
父?jìng)髯?#xff1a;props
子傳父：

子組件中： <button @click="sendNum">給父組件傳值</button> sendNum(){this.$emit('myEven',this.num) }父組件中： <son @myEvent="getNum"></son> getNum(num){console.log(num) }

兄弟組件之間的傳參：b組件給a組件傳參
(全局事件總線)

在a組件中: created(){uni.$on('updateNum',num=>{this.num += num;}) } 在b組件中： <button @click="addNum">修改b組件數(shù)據(jù)</button> addNum(){uni.$emit('updateNum',10) }

十一、內(nèi)置組件庫和擴(kuò)展組件庫

內(nèi)置組件庫

界面交互反饋：

https://uniapp.dcloud.net.cn/api/ui/prompt.html
uni.showToast(OBJECT)

擴(kuò)展組件庫

https://uniapp.dcloud.net.cn/component/uniui/quickstart.html

1.找到對(duì)應(yīng)組件庫，使用HBuilderX導(dǎo)入。(需要登錄HBuilderX)

2.找到官方文檔直接使用。

商品導(dǎo)航：

https://uniapp.dcloud.io/component/uniui/uni-goods-nav.html

<uni-goods-nav :fill="true" //按鈕是否平鋪 :options="options" //左側(cè)樣式 :buttonGroup="buttonGroup" //右側(cè)按鈕樣式@click="onClick" //點(diǎn)擊左側(cè)三個(gè)按鈕觸發(fā)(客服，店鋪，購物車)// 通過e.index區(qū)分。@buttonClick="buttonClick" //點(diǎn)擊右側(cè)兩個(gè)按鈕觸發(fā)(加入購物車，立即購買)/>

十二、uni中樣式的使用和字體圖標(biāo)

rpx：響應(yīng)式px，以750寬的屏幕為基準(zhǔn)，750rpx恰好為屏幕寬度，屏幕變寬，rpx會(huì)等比放大。
style中導(dǎo)入外部樣式：

字體文件的引入：
1.修改下載好的iconfont.css文件

2.在App.vue中全局引入

3.在任意.vue文件中使用
<view class="iconfont icon-shipin"></view>

注意：
1.在uni-app中不能使用 * 選擇器。
2.page相當(dāng)于body節(jié)點(diǎn)。
3.style中默認(rèn)使用了scoped，App.vue除外。
4.字體文件不能大于或等于40kb，否則不生效。

HbuildX的使用

1.插件安裝：

2.常用快捷鍵

格式化代碼：alt + shift + F

總結(jié)

以上是生活随笔為你收集整理的Uni-App从入门到实战的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： BO Session Kill
下一篇： python生成二维码的库——qrcod