當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Uni-App从入门到实战

發布時間：2024/3/12 编程问答 48 豆豆

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

uinapp總結

文章目錄

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

前言

根據 Uni-App從入門到實戰-黑馬程序員杭州小區出品視頻所總結的筆記。
視頻地址：https://b23.tv/MercjWo

一、創建項目

使用工具：HbuildX 微信開發者工具
1.創建項目，選擇uniapp

2.填寫項目名稱和選擇路徑。

3.啟動項目：

注意：微信小程序需要設置如下

二、項目結構

三、在pages.json中配置文件

層級分配：

1.全局配置globalstyle

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

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

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

2.page常用

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

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

3.tab常用

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

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

4.啟動模式condition

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

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

四、組件

1.內置組件

uniapp組件

視圖容器

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

view ===> div

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

scroll-view 滾動標簽必須給該標簽設置寬或高

<scroll-view scroll-x scroll-left="150"> //開啟x軸滾動，滾動條初始距離為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軸滾動，滾動條初始距離為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 輪播圖標簽

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

<swiper class="banner" indicator-dots //是否顯示面板指示點 indicator-color="#00000090" //指示點顏色 indicator-active-color="#fff" //當前選中的指示點顏色 autoplay //是否自動切換 interval="1000" //自動切換時間間隔，默認5000 circular //是否采用銜接滑動 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>

基礎內容

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

text ===> span

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

icon ==> 圖標

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

progress ==> 進度條

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> //出現加載中圖標<button open-type="contact">聯系客服</button> //跳轉到聯系客服功能 </view>

checkbox 多選框

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

radio 單選框

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

input 輸入框 switch 開關

<form catchsubmit="formSubmit"><input class="ipt" placeholder="請輸入用戶名" 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> //等比縮放，寬度完全顯示 //長按可發送好友<image src="/images/blog.jpg" mode="center"></image> //不縮放，取中間一塊

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

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

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

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

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

聲明式路由導航

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

uni.redirectTo(Object object)
//關閉當前頁面，跳轉到應用內的某個頁面。
//跳轉的應用內非 tabBar 的頁面的路徑，路徑后可以帶參數

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

uni.reLaunch(Object object)
//關閉所有頁面，打開到應用內的某個頁面

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

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

路由傳參

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

五、uniapp中的生命周期

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

應用的生命周期函數：

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

頁面的生命周期函數：

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

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

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

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

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

六、發送網絡請求

API->網絡->發起請求： https://uniapp.dcloud.net.cn/api/request/request.html

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

七、數據緩存

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

<button type="primary" @click="setStorage">存儲數據</button> <button type="primary" @click="getStorage">獲取數據</button> <button type="primary" @click="removeId">移除id</button>setStorage(){// 異步存儲// uni.setStorage({// key:'id',// data:80,// success(){// console.log('存儲成功')// }// })// 同步存儲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)}}) },

預覽圖片：

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({ // 開啟預覽//current為當前顯示圖片的鏈接/索引值，//不填或填寫的值無效則為urls的第一張current, urls:this.imgArr ,//需要預覽的圖片鏈接列表indicator:"number", //底部圓點顯示（只支持app）loop:true, //循環模式（只支持app）}) }

設備

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

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

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

教程->編譯器->條件編譯處理多端差異
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)

組件的傳參：
父傳子：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組件數據</button> addNum(){uni.$emit('updateNum',10) }

十一、內置組件庫和擴展組件庫

內置組件庫

界面交互反饋：

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

擴展組件庫

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

1.找到對應組件庫，使用HBuilderX導入。(需要登錄HBuilderX)

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

商品導航：

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

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

十二、uni中樣式的使用和字體圖標

rpx：響應式px，以750寬的屏幕為基準，750rpx恰好為屏幕寬度，屏幕變寬，rpx會等比放大。
style中導入外部樣式：

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

2.在App.vue中全局引入

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

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

HbuildX的使用

1.插件安裝：

2.常用快捷鍵

格式化代碼：alt + shift + F

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： BO Session Kill
下一篇： pci配置基地址_PCI配置空间简介