uni-app的官方文檔，功能簡(jiǎn)要查詢查找

標(biāo)語(yǔ)：即使深陷泥潭，也不要忘記仰望星空

文檔閱讀注意

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

uni-app中部分有的平臺(tái)可能不兼容，請(qǐng)查詢官方文檔

本文檔只顯示基礎(chǔ)功能，具體屬性請(qǐng)查詢官方文檔

微信小程序的版本問(wèn)題眾多，本文檔在2.14.1版本中可正常運(yùn)行，如果不能正常運(yùn)行，請(qǐng)切換版本，如依然無(wú)效，請(qǐng)查官方文檔或者百度

1、加載動(dòng)畫

自帶api功能

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

uni.showLoading({ //開(kāi)啟動(dòng)畫title: '加載中' //動(dòng)畫提示文字 });setTimeout( () =>{uni.hideLoading(); //動(dòng)畫關(guān)閉 }, 2000);

2、宮格布局

組件宮格布局

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

修改shadow內(nèi)的item即可修改宮格每一項(xiàng)的樣式

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

3、頁(yè)面下拉加載和上拉刷新

來(lái)自頁(yè)面周期函數(shù)

用戶上拉到頂部以上，執(zhí)行周期函數(shù)，進(jìn)行刷新操作 需要在 pages.json 里，找到的需要下拉刷新頁(yè)面的pages節(jié)點(diǎn)，并在 style 選項(xiàng)中開(kāi)啟 enablePullDownRefreshstyle中添加 "enablePullDownRefresh":true 在頁(yè)面中添加周期函數(shù)onPullDownRefresh(){代碼塊}---------------------------------------------------------------------------------------------------------------用戶下拉到底部，執(zhí)行周期函數(shù)，加載操作 在頁(yè)面中添加周期函數(shù)onReachBottom(){代碼塊}

4、點(diǎn)擊彈出模態(tài)確認(rèn)框

來(lái)自u(píng)ni.showModal方法

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

方法一：

直接在點(diǎn)擊事件中添加

? uni.showModal({
? title: ‘是否確認(rèn)清空所有收藏’, //模態(tài)框標(biāo)題
? content: ‘清空收藏后無(wú)法恢復(fù)’, //提示文字
? success: (res) => {
? if (res.confirm) {
? console.log(‘用戶點(diǎn)擊確認(rèn)’);
? } else if (res.cancel) {
? console.log(‘用戶點(diǎn)擊取消’);
? }
? }
? });

方法二：

來(lái)自u(píng)ni-popup彈出層組件,需要下載插件

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

//在html中添加標(biāo)簽，自帶彈出輸入框，可設(shè)置 文本格式框 mode='base'（提示對(duì)話框）/ 輸入框 mode='input'（可輸入對(duì)話框）

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

?
? //在js中添加標(biāo)簽

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

5、小程序下方導(dǎo)航欄

框架組件tabBar

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

//在pages.json中添加 至少為2個(gè)項(xiàng)，不然會(huì)發(fā)送報(bào)錯(cuò)"tabBar": {"color": "#7A7E83", //文字顏色"selectedColor": "#3cc51f", //選中文字顏色"borderStyle": "black", //邊框顏色"backgroundColor": "#ffffff", //背景顏色"list": [{"pagePath": "pages/component/index", //跳轉(zhuǎn)頁(yè)面的路徑"iconPath": "static/image/icon_component.png", //默認(rèn)圖片"selectedIconPath": "static/image/icon_component_HL.png", //激活切換的圖片"text": "組件" //跳轉(zhuǎn)頁(yè)面標(biāo)題}, {"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' //撥打電話號(hào)碼功能 });

8、掃碼功能

來(lái)自u(píng)ni.scanCode功能
https://uniapp.dcloud.io/api/system/barcode?id=scancode

//添加到j(luò)s中 // 允許從相機(jī)和相冊(cè)掃碼 uni.scanCode({success: (res) =>{console.log('條碼類型：' + res.scanType);console.log('條碼內(nèi)容：' + res.result);} });// 只允許通過(guò)相機(jī)掃碼 uni.scanCode({onlyFromCamera: true,success: (res)=> {console.log('條碼類型：' + res.scanType);console.log('條碼內(nèi)容：' + res.result);} });// 調(diào)起條碼掃描 uni.scanCode({scanType: ['barCode'],success: (res) =>{console.log('條碼類型：' + res.scanType);console.log('條碼內(nèi)容：' + res.result);} });

9、按鈕

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

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

<navigator url="/pages/about/about"><button type="default">通過(guò)navigator組件跳轉(zhuǎn)到about頁(yè)面</button></navigator>

1、button獲取授權(quán)登陸信息

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

10、路由跳轉(zhuǎn)

1、uni.navigateTo( )

保留當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面，使用uni.navigateBack可以返回到原頁(yè)面。

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

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

2、uni.redirectTo()

關(guān)閉當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面

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

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

3、uni.switchTab()

跳轉(zhuǎn)到 tabBar 頁(yè)面，并關(guān)閉其他所有非 tabBar 頁(yè)面。

注意： 如果調(diào)用了 uni.preloadPage(OBJECT) 不會(huì)關(guān)閉，僅觸發(fā)生命周期 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

關(guān)閉當(dāng)前頁(yè)面，返回上一頁(yè)面或多級(jí)頁(yè)面。可通過(guò) getCurrentPages() 獲取當(dāng)前的頁(yè)面棧，決定需要返回幾層。

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

5、標(biāo)簽跳轉(zhuǎn)

在標(biāo)簽外面嵌套

作用類似于a標(biāo)簽 url表示跳轉(zhuǎn)的地址

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

<navigator url="/pages/about/about"> //url表示跳轉(zhuǎn)地址，注意地址前面比pages.json中多一個(gè)”/“內(nèi)容 </navigator >

11、本地存儲(chǔ)

1、數(shù)據(jù)儲(chǔ)存到本地

注意1：異步存取和讀取不會(huì)阻斷代碼執(zhí)行，可能會(huì)導(dǎo)致頁(yè)面白屏

注意2：同步存取和讀取會(huì)阻斷代碼執(zhí)行，不會(huì)導(dǎo)致白屏，但是可能會(huì)導(dǎo)致后面的代碼無(wú)法執(zhí)行

一、存數(shù)據(jù)

1、uni.setStorage()

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

將數(shù)據(jù)存儲(chǔ)在本地緩存中指定的 key 中，會(huì)覆蓋掉原來(lái)該 key 對(duì)應(yīng)的內(nèi)容，這是一個(gè)異步接口。

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 存儲(chǔ)在本地緩存中指定的 key 中，會(huì)覆蓋掉原來(lái)該 key 對(duì)應(yīng)的內(nèi)容，這是一個(gè)同步接口。

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

二、取數(shù)據(jù)

1、uni.getStorage()

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

從本地緩存中異步獲取指定 key 對(duì)應(yīng)的內(nèi)容。

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 對(duì)應(yīng)的內(nèi)容。

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

三、刪除數(shù)據(jù)

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 }

四、清空數(shù)據(jù)

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方法

小程序中用戶點(diǎn)擊分享后，在 js 中定義 onShareAppMessage 處理函數(shù)（和 onLoad 等生命周期函數(shù)同級(jí)），設(shè)置該頁(yè)面的分享信息。

注意：不能在app.vue中配置，只能在當(dāng)前頁(yè)面配置

onShareAppMessage()

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

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

13、上傳圖片

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

微信小程序會(huì)把圖片編譯成微信小程序的臨時(shí)地址

然后將圖片上傳到服務(wù)器上去，服務(wù)器會(huì)返回服務(wù)器處理過(guò)后的圖片地址

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

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

14、表單控件

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

此處請(qǐng)參考官方文檔

15、下載功能

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

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

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

16、微信支付

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

實(shí)現(xiàn)邏輯：

前端+后端+微信官方

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

拿到后端返回的訂單信息 ==》發(fā)送請(qǐng)求給后端拿到訂單處理信息

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

17、實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)

scroll-view

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

詳細(xì)配置查詢官方文檔

來(lái)自官方的注意點(diǎn)

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

//原生uni-app不支持左右聯(lián)動(dòng)//僅 發(fā)送請(qǐng)求修改數(shù)據(jù)列表和渲染的數(shù)據(jù)就可實(shí)現(xiàn)效果，格式請(qǐng)自行編寫<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}}個(gè)商品標(biāo)題</view><view class="describe">第{{index2+1}}個(gè)商品的描述內(nèi)容</view><view class="money">第{{index2+1}}個(gè)商品的價(jià)格</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) => {/* 設(shè)置當(dāng)前滾動(dòng)容器的高，若非窗口的告訴，請(qǐng)自行修改 */this.scrollHeight = `${res.windowHeight}px`;console.log('gaodu', res.windowHeight)}});},computed: {},mounted() {this.getListData();},methods: {/* 獲取列表數(shù)據(jù) */getListData() {/* 因無(wú)真實(shí)數(shù)據(jù)，當(dāng)前方法模擬數(shù)據(jù) */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}類商品標(biāo)題`,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 對(duì)象數(shù)組 */let p_arr = [];/* 遍歷數(shù)據(jù)，創(chuàng)建相應(yīng)的 Promise 數(shù)組數(shù)據(jù) */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)/* 主區(qū)域滾動(dòng)容器的頂部距離 */this.getScrollTop("#scroll-el").then((res) => {let top = res;// #ifdef H5top += 43; //因固定提示塊的需求，H5的默認(rèn)標(biāo)題欄是44px// #endif/* 所有節(jié)點(diǎn)信息返回后調(diào)用該方法 */Promise.all(p_arr).then((data) => {console.log('滾動(dòng)', data)this.tipsTop = `${data}px`;this.topArr = data;});})},/* 主區(qū)域滾動(dòng)監(jiān)聽(tīng) */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);},/* 主區(qū)域觸摸 */mainTouch() {this.isMainScroll = true;},/* 左側(cè)導(dǎo)航點(diǎn)擊 */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> : 值應(yīng)為某子元素id（id不能以數(shù)字開(kāi)頭）。設(shè)置哪個(gè)方向可滾動(dòng)，則在哪個(gè)方向滾動(dòng)到該元素 //scroll-with-animation <Boolean> : 在設(shè)置滾動(dòng)條位置時(shí)使用動(dòng)畫過(guò)渡

18、獲取節(jié)點(diǎn)

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

尾聲、測(cè)試上傳小程序

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

點(diǎn)擊微信開(kāi)發(fā)者工具右上角的上傳按鈕 或者 直接使用HBuilder X 點(diǎn)擊發(fā)行 =》小程序 微信=》配置名字和上傳

二、小程序官方平臺(tái)網(wǎng)址：

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

三、前往小程序官方平臺(tái)提交審核

總結(jié)

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

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