uni-app的官方文檔，功能簡要查詢查找

標語：即使深陷泥潭，也不要忘記仰望星空

文檔閱讀注意

本文檔為博主使用uni-app總結的一些常用功能的使用方法，不喜勿噴，僅供快速查找常用的功能。

uni-app中部分有的平臺可能不兼容，請查詢官方文檔

本文檔只顯示基礎功能，具體屬性請查詢官方文檔

微信小程序的版本問題眾多，本文檔在2.14.1版本中可正常運行，如果不能正常運行，請切換版本，如依然無效，請查官方文檔或者百度

1、加載動畫

自帶api功能

https://uniapp.dcloud.io/api/ui/prompt?id=showloading

uni.showLoading({ //開啟動畫title: '加載中' //動畫提示文字 });setTimeout( () =>{uni.hideLoading(); //動畫關閉 }, 2000);

2、宮格布局

組件宮格布局

https://uniapp.dcloud.io/component/uniui/uni-grid

修改shadow內的item即可修改宮格每一項的樣式

.uni-grid-item { //修改該樣式的高度可設置宮格內部的樣式height: 80px !important;}

3、頁面下拉加載和上拉刷新

來自頁面周期函數

用戶上拉到頂部以上，執行周期函數，進行刷新操作 需要在 pages.json 里，找到的需要下拉刷新頁面的pages節點，并在 style 選項中開啟 enablePullDownRefreshstyle中添加 "enablePullDownRefresh":true 在頁面中添加周期函數onPullDownRefresh(){代碼塊}---------------------------------------------------------------------------------------------------------------用戶下拉到底部，執行周期函數，加載操作 在頁面中添加周期函數onReachBottom(){代碼塊}

4、點擊彈出模態確認框

來自uni.showModal方法

https://uniapp.dcloud.io/api/ui/prompt?id=showmodal

方法一：

直接在點擊事件中添加

? uni.showModal({
? title: ‘是否確認清空所有收藏’, //模態框標題
? content: ‘清空收藏后無法恢復’, //提示文字
? success: (res) => {
? if (res.confirm) {
? console.log(‘用戶點擊確認’);
? } else if (res.cancel) {
? console.log(‘用戶點擊取消’);
? }
? }
? });

方法二：

來自uni-popup彈出層組件,需要下載插件

https://uniapp.dcloud.io/component/uniui/uni-popup

//在html中添加標簽，自帶彈出輸入框，可設置 文本格式框 mode='base'（提示對話框）/ 輸入框 mode='input'（可輸入對話框）

?
? <button @click=“open”>打開彈窗
?
? <uni-popup-dialog mode=“input” message=“成功消息” :duration=“2000” :before-close=“true” @close=“close” @confirm=“confirm”>
?

?
? //在js中添加標簽

?
? close() {
? // TODO 做一些其他的事情，before-close 為true的情況下，手動執行 close 才會關閉對話框
? // …
? this.KaTeX parse error: Expected 'EOF', got '}' at position 46: …周期函數 ? }?, ? confirm(va…refs.popup.close()
? }

5、小程序下方導航欄

框架組件tabBar

https://uniapp.dcloud.io/collocation/pages?id=tabbar

//在pages.json中添加 至少為2個項，不然會發送報錯"tabBar": {"color": "#7A7E83", //文字顏色"selectedColor": "#3cc51f", //選中文字顏色"borderStyle": "black", //邊框顏色"backgroundColor": "#ffffff", //背景顏色"list": [{"pagePath": "pages/component/index", //跳轉頁面的路徑"iconPath": "static/image/icon_component.png", //默認圖片"selectedIconPath": "static/image/icon_component_HL.png", //激活切換的圖片"text": "組件" //跳轉頁面標題}, {"pagePath": "pages/API/index","iconPath": "static/image/icon_API.png","selectedIconPath": "static/image/icon_API_HL.png","text": "接口"}] }

6、輪播圖/走馬燈/swiper

https://uniapp.dcloud.io/component/swiper?id=swiper

html中<view class="uni-padding-wrap"><view class="page-section swiper"><view class="page-section-spacing"><swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"><swiper-item><view class="swiper-item uni-bg-red">A</view></swiper-item><swiper-item><view class="swiper-item uni-bg-green">B</view></swiper-item><swiper-item><view class="swiper-item uni-bg-blue">C</view></swiper-item></swiper></view></view></view>data中添加background: ['color1', 'color2', 'color3'],indicatorDots: true,autoplay: true,interval: 2000,duration: 500

7、撥打電話

https://uniapp.dcloud.io/api/system/phone?id=makephonecall

直接在js中添加電話 uni.makePhoneCall({phoneNumber: '114' //撥打電話號碼功能 });

8、掃碼功能

來自uni.scanCode功能
https://uniapp.dcloud.io/api/system/barcode?id=scancode

//添加到js中 // 允許從相機和相冊掃碼 uni.scanCode({success: (res) =>{console.log('條碼類型：' + res.scanType);console.log('條碼內容：' + res.result);} });// 只允許通過相機掃碼 uni.scanCode({onlyFromCamera: true,success: (res)=> {console.log('條碼類型：' + res.scanType);console.log('條碼內容：' + res.result);} });// 調起條碼掃描 uni.scanCode({scanType: ['barCode'],success: (res) =>{console.log('條碼類型：' + res.scanType);console.log('條碼內容：' + res.result);} });

9、按鈕

https://uniapp.dcloud.io/component/button?id=button

uni-app封裝了button type的值有3個 primary(綠色)/default(白色)/warn(紅色)

<navigator url="/pages/about/about"><button type="default">通過navigator組件跳轉到about頁面</button></navigator>

1、button獲取授權登陸信息

<button type="primary" open-type="getUserInfo" @getuserinfo="info" >授權登陸</button>//參數的e獲取登陸權限獲得的信息info(e) {console.log(e.detail.userInfo.nickName) //獲取用戶名}

10、路由跳轉

1、uni.navigateTo( )

保留當前頁面，跳轉到應用內的某個頁面，使用uni.navigateBack可以返回到原頁面。

https://uniapp.dcloud.io/api/router?id=navigateto

//在起始頁面跳轉到test.vue頁面并傳遞參數 uni.navigateTo({url: 'test?id=1&name=uniapp' }); // 在test.vue頁面接受參數 export default {onLoad: function (option) { //option為object類型，會序列化上個頁面傳遞的參數console.log(option.id); //打印出上個頁面傳遞的參數。console.log(option.name); //打印出上個頁面傳遞的參數。} }

2、uni.redirectTo()

關閉當前頁面，跳轉到應用內的某個頁面

https://uniapp.dcloud.io/api/router?id=redirectto

uni.redirectTo({url: 'test?id=1' });

3、uni.switchTab()

跳轉到 tabBar 頁面，并關閉其他所有非 tabBar 頁面。

注意： 如果調用了 uni.preloadPage(OBJECT) 不會關閉，僅觸發生命周期 onHide

https://uniapp.dcloud.io/api/router?id=switchtab

uni.switchTab({url: '/pages/index/index' });

4、uni.navigateBack()

https://uniapp.dcloud.io/api/router?id=navigateback

關閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages() 獲取當前的頁面棧，決定需要返回幾層。

// 注意：調用 navigateTo 跳轉時，調用該方法的頁面會被加入堆棧，而 redirectTo 方法則不會。見下方示例代碼// 此處是A頁面 uni.navigateTo({url: 'B?id=1' });// 此處是B頁面 uni.navigateTo({url: 'C?id=1' });// 在C頁面內 navigateBack，將返回A頁面 uni.navigateBack({delta: 2 });

5、標簽跳轉

在標簽外面嵌套

作用類似于a標簽 url表示跳轉的地址

https://uniapp.dcloud.io/component/navigator?id=navigator

<navigator url="/pages/about/about"> //url表示跳轉地址，注意地址前面比pages.json中多一個”/“內容 </navigator >

11、本地存儲

1、數據儲存到本地

注意1：異步存取和讀取不會阻斷代碼執行，可能會導致頁面白屏

注意2：同步存取和讀取會阻斷代碼執行，不會導致白屏，但是可能會導致后面的代碼無法執行

一、存數據

1、uni.setStorage()

https://uniapp.dcloud.io/api/storage/storage?id=setstorage

將數據存儲在本地緩存中指定的 key 中，會覆蓋掉原來該 key 對應的內容，這是一個異步接口。

uni.setStorage({key: 'storage_key',data: 'hello',success: function () {console.log('success');} });

2、uni.setStorageSync()

https://uniapp.dcloud.io/api/storage/storage?id=setstoragesync

將 data 存儲在本地緩存中指定的 key 中，會覆蓋掉原來該 key 對應的內容，這是一個同步接口。

try {uni.setStorageSync('storage_key', 'hello'); } catch (e) {// error }

二、取數據

1、uni.getStorage()

https://uniapp.dcloud.io/api/storage/storage?id=getstorage

從本地緩存中異步獲取指定 key 對應的內容。

uni.getStorage({key: 'storage_key',success: function (res) {console.log(res.data);} });

2、uni.getStorageSync()

https://uniapp.dcloud.io/api/storage/storage?id=getstoragesync

從本地緩存中同步獲取指定 key 對應的內容。

try {const value = uni.getStorageSync('storage_key');//獲取數據if (value) {console.log(value);} } catch (e) {// error }

三、刪除數據

1、uni.removeStorage()

https://uniapp.dcloud.io/api/storage/storage?id=removestorage

從本地緩存中異步移除指定 key。

uni.removeStorage({key: 'storage_key', success: function (res) {console.log('success');} });

2、uni.removeStorageSync()

https://uniapp.dcloud.io/api/storage/storage?id=removestoragesync

從本地緩存中同步移除指定 key。

try {uni.removeStorageSync('storage_key'); } catch (e) {// error }

四、清空數據

https://uniapp.dcloud.io/api/storage/storage?id=clearstorage

異步清除本地緩存

1、uni.clearStorage()

uni.clearStorage();

2、uni.clearStorageSync()

try {uni.clearStorageSync(); } catch (e) {// error }

12、自定義分享

自帶api方法

小程序中用戶點擊分享后，在 js 中定義 onShareAppMessage 處理函數（和 onLoad 等生命周期函數同級），設置該頁面的分享信息。

注意：不能在app.vue中配置，只能在當前頁面配置

onShareAppMessage()

https://uniapp.dcloud.io/api/plugins/share?id=onshareappmessage

onShareAppMessage(res) {if (res.from === 'button') {// 如果頁面中有分享按鈕 配置該項 來自頁面內分享按鈕console.log(res.target)}return {title: '自定義分享標題', //分享頁面的標題path: '/pages/test/test?id=123' //完整的pages.json的地址 /+地址 參數按需傳遞}}

13、上傳圖片

uni.chooseImage 上傳圖片
上傳圖片思路

微信小程序會把圖片編譯成微信小程序的臨時地址

然后將圖片上傳到服務器上去，服務器會返回服務器處理過后的圖片地址

https://uniapp.dcloud.io/api/media/image?id=chooseimage

uni.chooseImage({count: 6, //默認9，最多上傳的數量sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖，默認二者都有sourceType: ['album'], //從相冊選擇 success: function (res) { //注意箭頭函數console.log(JSON.stringify(res.tempFilePaths)); //res.tempFilePaths 該參數為圖片的微信虛擬路徑數組uni.uploadFile({url: 'https://www.example.com/upload', //圖片上傳服務器地址filePath: tempFilePaths[0], //上傳的圖片路徑name: 'file',success: (uploadFileRes) => {console.log(uploadFileRes.data); //返回的數據}});} });

14、表單控件

https://uniapp.dcloud.io/component/button

此處請參考官方文檔

15、下載功能

下載文件，需要后端提供接口

https://uniapp.dcloud.io/api/request/network-file?id=downloadfile

uni.downloadFile({url: 'https://www.example.com/file/test', //僅為示例，并非真實的資源success: (res) => {if (res.statusCode === 200) {console.log('下載成功');}} });

16、微信支付

https://uniapp.dcloud.io/api/plugins/payment?id=requestpayment

實現邏輯：

前端+后端+微信官方

前端做的事： 前端向微信官方獲取用戶的信息==》 獲得用戶信息傳輸給后端 ==》拿到后端返回的用戶唯一標識id，發送商品信息和唯一標識id給后端 ==》

拿到后端返回的訂單信息 ==》發送請求給后端拿到訂單處理信息

//一般在授權登陸時做這個操作！！！ 記得勾選uni-app中的Payment功能 //獲取用戶的codeID uni.login({succes:function(loginRes){console.log(loginRes.code) //獲取用戶的codeID//調后臺接口，將codeID傳遞過去，后端會返回一個openIDuni.request({url: 'https://www.example.com/request', //獲取openID的地址data: {code: 'uni.request'},success: (res) => {const openid=res.data.openidconsole.log(res.data.openid); //拿到數據中的openIDuni.setStorage({ //將openID存在本地存儲中key: 'openid',data: openid,success: function () {uni.switchTab({ //跳轉到首頁url: '/pages/index/index'})}});}});} })//在需要請求支付的頁面的代碼uni.request({url: 'https://www.example.com/request', //后端商品接口地址data: {數據 //后端接口需要傳遞的數據，參考后端文檔},success: (res) => {//一般返回的res中包含timeStamp:時間戳,nonceStr:隨機字符串,package:'prepay_id='+預支付id,signType:簽名算法paySign:簽名uni.requestPayment({ //傳入5個關鍵參數timeStamp:時間戳,nonceStr:隨機字符串,package:'prepay_id='+預支付id,signType:簽名算法,paySign:簽名,success:(res)=>{ //返回支付成功后的結果和提示console.log(res)},fail:(err)=>{ //返回支付失敗的結果和提示console.log(err)}})} });

17、實現二級聯動

scroll-view

https://uniapp.dcloud.io/component/scroll-view

詳細配置查詢官方文檔

來自官方的注意點

• APP-vue和小程序中，請勿在 scroll-view 中使用 map、video 等原生組件。小程序中 scroll-view 中也不要使用 canvas、textarea 原生組件。更新：微信基礎庫2.4.4起支持了原生組件在 scroll-view、swiper、movable-view 中的使用。app-nvue無此限制。
• scroll-view 不適合放長列表，有性能問題。長列表滾動和下拉刷新，應該使用原生導航欄搭配頁面級的滾動和下拉刷新實現。包括在app-nvue頁面，長列表應該使用list而不是scroll-view。
• scroll-into-view 的優先級高于 scroll-top。
• scroll-view是區域滾動，不會觸發頁面滾動，無法觸發pages.json配置的下拉刷新、頁面觸底onReachBottomDistance、titleNView的transparent透明漸變。
• 若要使用下拉刷新，建議使用頁面的滾動，而不是 scroll-view 。插件市場有前端模擬的基于scroll-view的下拉刷新，但性能不佳。如必需使用前端下拉刷新，推薦使用基于wxs的下拉刷新，性能會比基于js監聽方式更高。
• 如果遇到scroll-top、scroll-left、refresher-triggered屬性設置不生效的問題參考：組件屬性設置不生效解決辦法
• scroll-view的滾動條設置，可通過css的-webkit-scrollbar自定義，包括隱藏滾動條。（app-nvue無此css）

//原生uni-app不支持左右聯動//僅 發送請求修改數據列表和渲染的數據就可實現效果，格式請自行編寫<template><view class="list_box"><!-- 菜單左邊 --><view class="left"><scroll-view scroll-y="true" :style="{ 'height':scrollHeight }"><view class="item" v-for="(item,index) in leftArray" :key="index" :class="{ 'active':index==leftIndex }":data-index="index" @tap="leftTap">{{item.id}}</view></scroll-view></view><view class="main"><scroll-view scroll-y="true" :style="{ 'height':scrollHeight }" @scroll="mainScroll" :scroll-into-view="scrollInto"scroll-with-animation="true" @touchstart="mainTouch" id="scroll-el"><block v-for="(item,index) in mainArray" :key="index"><view class="item" :id="'item-'+index"><view class="title"><view>{{item.title}}</view></view><view class="goods" v-for="(item2,index2) in item.list" :key="index2"><image src="/static/logo.png" mode=""></image><view><view>第{{index2+1}}個商品標題</view><view class="describe">第{{index2+1}}個商品的描述內容</view><view class="money">第{{index2+1}}個商品的價格</view></view></view></view></block></scroll-view></view></view> </template><script>export default {data() {return {scrollHeight: '500px',leftArray: [{id: 1},{id: 2},{id: 3},{id: 4},{id: 5},{id: 6},{id: 7},{id: 8}],mainArray: [],topArr: [],leftIndex: 0,isMainScroll: false,scrollInto: '',tipsTop: '0px'}},onLoad() {uni.getSystemInfo({success: (res) => {/* 設置當前滾動容器的高，若非窗口的告訴，請自行修改 */this.scrollHeight = `${res.windowHeight}px`;console.log('gaodu', res.windowHeight)}});},computed: {},mounted() {this.getListData();},methods: {/* 獲取列表數據 */getListData() {/* 因無真實數據，當前方法模擬數據 */let [left, main] = [[],[]];for (let i = 0; i < 8; i++) {left.push(`${i+1}類商品`);let list = [];for (let j = 0; j < (i + 1); j++) {list.push(j);}main.push({title: `第${i+1}類商品標題`,list})}this.mainArray = main;this.$nextTick(() => {this.getElementTop();});},//獲取距離頂部的高度getScrollTop(selector) {return new Promise((resolve, reject) => {let query = uni.createSelectorQuery().in(this);query.select(selector + '').boundingClientRect(data => {resolve(data.top)}).exec();})},/* 獲取元素頂部信息 */async getElementTop() {/* Promise 對象數組 */let p_arr = [];/* 遍歷數據，創建相應的 Promise 數組數據 */for (let i = 0; i < this.mainArray.length; i++) {const resu = await this.getScrollTop(`#item-${i}`)p_arr.push(resu)}// console.log('p_arr', p_arr)/* 主區域滾動容器的頂部距離 */this.getScrollTop("#scroll-el").then((res) => {let top = res;// #ifdef H5top += 43; //因固定提示塊的需求，H5的默認標題欄是44px// #endif/* 所有節點信息返回后調用該方法 */Promise.all(p_arr).then((data) => {console.log('滾動', data)this.tipsTop = `${data}px`;this.topArr = data;});})},/* 主區域滾動監聽 */mainScroll(e) {if (!this.isMainScroll) {return;}let top = e.detail.scrollTop;let index = -1;if (top >= this.topArr[this.topArr.length - 1]) {index = this.topArr.length - 1;} else {index = this.topArr.findIndex((item, index) => {return this.topArr[index + 1] >= top;});}this.leftIndex = (index < 0 ? 0 : index);},/* 主區域觸摸 */mainTouch() {this.isMainScroll = true;},/* 左側導航點擊 */leftTap(e) {let index = e.currentTarget.dataset.index;this.isMainScroll = false;this.leftIndex = Number(index);this.scrollInto = `item-${index}`;}}} </script><style lang="scss">.list_box {display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: flex-start;align-items: flex-start;align-content: flex-start;font-size: 28rpx;.left {width: 200rpx;background-color: #f6f6f6;line-height: 80rpx;box-sizing: border-box;font-size: 32rpx;.item {padding-left: 20rpx;position: relative;&:not(:first-child) {margin-top: 1px;&::after {content: '';display: block;height: 0;border-top: #d6d6d6 solid 1px;width: 620upx;position: absolute;top: -1px;right: 0;transform: scaleY(0.5);/* 1px像素 */}}&.active,&:active {color: #42b983;background-color: #fff;}}}.main {background-color: #fff;padding-left: 20rpx;width: 0;flex-grow: 1;box-sizing: border-box;.tips {line-height: 64rpx;font-size: 24rpx;font-weight: bold;color: #666;height: 64rpx;position: fixed;top: 44px;right: 0;width: 530rpx;z-index: 10;background-color: #fff;padding-left: 10rpx;}.title {line-height: 64rpx;position: relative;font-size: 24rpx;font-weight: bold;color: #666;height: 64rpx;}.item {margin-bottom: 20rpx;}.goods {display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: flex-start;align-items: center;align-content: center;margin-bottom: 10rpx;&>image {width: 120rpx;height: 120rpx;margin-right: 16rpx;}.describe {font-size: 24rpx;color: #999;}.money {font-size: 24rpx;color: #efba21;}}}} </style>主要屬性 //scroll-into-view <String> : 值應為某子元素id（id不能以數字開頭）。設置哪個方向可滾動，則在哪個方向滾動到該元素 //scroll-with-animation <Boolean> : 在設置滾動條位置時使用動畫過渡

18、獲取節點

//在函數中封裝方法const query = uni.createSelectorQuery().in(this);query.select('#id').boundingClientRect(data => { //選擇一個標簽，類似于document.queryselector()方法console.log("得到布局位置信息" + JSON.stringify(data));console.log("節點離頁面頂部的距離為" + data.top); }).exec(); query.selectAll('.')

尾聲、測試上傳小程序

一、上傳到微信小程序官方

點擊微信開發者工具右上角的上傳按鈕 或者 直接使用HBuilder X 點擊發行 =》小程序 微信=》配置名字和上傳

二、小程序官方平臺網址：

https://mp.weixin.qq.com/wxamp/wacodepage/getcodepage?token=1181193733&lang=zh_CN

三、前往小程序官方平臺提交審核

總結

以上是生活随笔為你收集整理的uni-app的常用功能查询，uni-app入门级使用指南。的全部內容，希望文章能夠幫你解決所遇到的問題。

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