個(gè)人首次使用UniAPP使用注意事項(xiàng)以及踩坑

這篇具有很好參考價(jià)值的文章主要介紹了個(gè)人首次使用UniAPP使用注意事項(xiàng)以及踩坑。希望對大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

1.vscode 插件

uni-create-view 快速nui-app頁面的

uni-helper uni-app代碼提示的

uniapp小程序擴(kuò)展鼠標(biāo)懸停查文檔

TypeScript Vue Plugin (Volar)

Vue Language Features (Volar)

Eslint

Prettier 禁用

Error Lens 行內(nèi)提示報(bào)錯(cuò)

Turbo Console Log 打log插件

Code Spell Checker 檢查拼寫插件

"types": ["@dcloudio/types", "miniprogram-api-typings", "@uni-helper/uni-app-types","@uni-helper/uni-ui-types"]

miniprogram-api-typings  是一種增強(qiáng)小程序開發(fā)體驗(yàn)的工具，特別適用于使用 TypeScript 進(jìn)行小程序開發(fā)的開發(fā)者。
@uni-helper/uni-app-types 是一個(gè)用于增強(qiáng) uni-app 開發(fā)體驗(yàn)的 TypeScript 類型聲明庫，它可以幫助你在編寫跨平臺應(yīng)用時(shí)獲得更準(zhǔn)確的代碼提示和類型檢查，提高代碼質(zhì)量和開發(fā)效率。
@uni-helper/uni-ui-types 是一個(gè)為 uni-ui 組件庫提供的 TypeScript 類型聲明庫。

1.1 uni-create-view 插件設(shè)置

個(gè)人首次使用UniAPP使用注意事項(xiàng)以及踩坑,uni-app

1.2 VsCode對于json格式文件允許添加注釋設(shè)置

files.associations
個(gè)人首次使用UniAPP使用注意事項(xiàng)以及踩坑,uni-app

1.3 TS托管配置

官網(wǎng)解釋:
https://cn.vuejs.org/guide/typescript/overview.html#takeover-mode
個(gè)人首次使用UniAPP使用注意事項(xiàng)以及踩坑,uni-app

2.統(tǒng)一代碼風(fēng)格

安裝 eslint + prettier

pnpm i -D eslint prettier eslint-plugin-vue @vue/eslint-config-prettier @vue/eslint-config-typescript @rushstack/eslint-patch @vue/tsconfig

新建 .eslintrc.cjs 文件，添加以下 eslint 配置

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution') // 加載模塊解析的修復(fù)補(bǔ)丁。
// 導(dǎo)出一個(gè)對象，該對象包含ESLint的配置信息。
module.exports = { 
  root: true, // 指定該配置文件為根配置文件。
  extends: [ // 指定擴(kuò)展的規(guī)則集，這里包括了一些規(guī)則的插件和擴(kuò)展。
    'plugin:vue/vue3-essential', // Vue.js 3.x項(xiàng)目的基本規(guī)則。
    'eslint:recommended', // ESLint官方推薦的規(guī)則。
    '@vue/eslint-config-typescript', // Vue.js項(xiàng)目中使用TypeScript的規(guī)則。
    '@vue/eslint-config-prettier',// 與Prettier代碼格式化工具一起使用的規(guī)則。
  ],
  // 小程序全局變量
  globals: { //指定全局變量，這些變量可以在代碼中直接使用而不需要聲明。
    uni: true,
    wx: true,
    WechatMiniprogram: true,
    getCurrentPages: true,
    getApp: true,
    UniApp: true,
    UniHelper: true,
    App: true,
    Page: true,
    Component: true,
    AnyObject: true,
  },
  parserOptions: { //指定解析器選項(xiàng)，這里將ECMAScript版本設(shè)置為最新。
    ecmaVersion: 'latest',
  },
  rules: { //指定自定義的規(guī)則，這里列出了一些自定義規(guī)則的配置。
    'prettier/prettier': [ //使用Prettier的規(guī)則進(jìn)行代碼格式化，包括使用單引號、省略分號、限制一行的最大字符數(shù)、使用逗號結(jié)尾等。
      'warn',// 表示如果代碼與這些配置不符合，ESLint將發(fā)出警告。具體的配置包括：
      {
        singleQuote: true, // 使用單引號而不是雙引號。
        semi: false, //不使用分號結(jié)尾。
        printWidth: 100, // 限制一行的字符數(shù)為100。
        trailingComma: 'all', // 使用逗號結(jié)尾的方式。
        endOfLine: 'auto', // 自動(dòng)識別換行符。
      },
    ],
    'vue/multi-word-component-names': ['off'], // 禁用在Vue組件名中使用多個(gè)單詞的規(guī)則。
    'vue/no-setup-props-destructure': ['off'], // 禁用在Vue組件props中使用解構(gòu)賦值的規(guī)則。
    'vue/no-deprecated-html-element-is': ['off'], // 禁用使用已廢棄的`is`屬性的規(guī)則。
    '@typescript-eslint/no-unused-vars': ['off'], // 禁用未使用的TypeScript變量的規(guī)則。
  },
}

package.json 中添加

{
  "script": {
    // ... 省略 ...
    "lint": "eslint . --ext .vue,.js,.ts --fix --ignore-path .gitignore"
  }
}
然后 運(yùn)行 pnpm lint 自動(dòng)修復(fù)了

https://prettier.io/docs/en/options.html 常見規(guī)則

vscode 開啟 eslint 自動(dòng)修復(fù)

json

"editor.codeActionsOnSave": {
        "source.fixAll": true,
    },

3.使用uCharts

組件方式 快速上手

npm i @qiun/ucharts

3.1 或者使用uniapp對應(yīng)插件圖表

https://limeui.qcoon.cn/#/echart
https://ext.dcloud.net.cn/plugin?id=4899

4.報(bào)錯(cuò)相關(guān)

Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors.

不能用標(biāo)簽選擇器如 button text 這樣的應(yīng)該加類名

5.獲取屏幕邊界到安全區(qū)域的距離

// 獲取屏幕邊界到安全區(qū)域距離
const { safeAreaInsets } = uni.getSystemInfoSync()

6.分享

onShareAppMessage

// 分享的信息
onShareAppMessage((res) => {
  // 分享事件來源：menu（右上角分享按鈕）
  return {
    title: '請來填寫一下個(gè)人信息！',
    path: '/pages/addInfo/index',
  }
})

7.內(nèi)置組件picker的踩坑

    <view class="uni-title uni-common-pl">地區(qū)選擇器</view>
    <view class="uni-list">
      <view class="uni-list-cell">
        <view class="uni-list-cell-left"> 當(dāng)前地區(qū)為: </view>
        <view class="uni-list-cell-db">
          <picker
            mode="region"
            :value="regionList"
            @change="onRegionChange"
            @cancel="onRangeCancel"
            level="city"
          >
            <view class="" v-if="regionList.length">{{ regionList[0] }} - {{ regionList[1] }}</view>
            <view v-else>{{ '請選擇城市' }}</view>
          </picker>
        </view>
      </view>
    </view>

源碼里面是有選擇器層級的 province 省級 city 市級 region 區(qū)級 sub-district 街道級

但是官網(wǎng)文檔沒有顯示然后微信開發(fā)者工具也不好使,一度以為廢棄了,偶然間發(fā)現(xiàn)*****mmp的手機(jī)預(yù)覽就可以

8.安全區(qū)域問題預(yù)覽與真機(jī)調(diào)試

const { safeAreaInsets } = uni.getSystemInfoSync()
console.log(safeAreaInsets, 'safeAreaInsets')
:style="{ bottom: safeAreaInsets?.bottom + 'px' }"

但是如果是 空標(biāo)簽 加上<view :style="{ height: safeAreaInsets?.bottom + 'px' }" style="width: 100%" />
就可以 我也沒搞清楚兩個(gè)組件寫法是一樣的 只不過一個(gè)是一上來就加載 一個(gè)通過boolean 去顯示之后就可以使用了 我懷疑是聲明周期的問題
但是如果給獲取這段代碼 放在生命周期里面 頁面加載就會閃,我看網(wǎng)上一般都是直接放在setup語法糖里面就很奇怪
后來不好使的這個(gè)頁面 我就用css變量替換了
  bottom: 0;
  bottom: constant(safe-area-inset-bottom); // 修復(fù) 真機(jī)調(diào)試情況下 css動(dòng)態(tài)設(shè)置失效問題 采用變量控制
  bottom: env(safe-area-inset-bottom);
or 上面的 蘋果手機(jī)彈性 會看到透明區(qū)域
  bottom: 0;
  // bottom: constant(safe-area-inset-bottom); // 修復(fù) 真機(jī)調(diào)試情況下 css動(dòng)態(tài)設(shè)置失效問題 采用變量控制
  // bottom: env(safe-area-inset-bottom);
  left: 0;
  height: calc(110rpx + env(safe-area-inset-bottom));
  background-color: #fff;

在預(yù)覽模式下可以使用在真機(jī)模式下 safeAreaInsets為undefined

具體為什么我也不知道!!!

文檔:https://ask.dcloud.net.cn/article/35564

9.鍵盤彈出高度

//  監(jiān)聽鍵盤高度變化
  uni.onKeyboardHeightChange((obj) => {
    // 獲取系統(tǒng)信息
    let _sysInfo = uni.getSystemInfoSync()
    let _heightDiff = _sysInfo.screenHeight - _sysInfo.windowHeight
    let _diff = obj.height - _heightDiff
    // 鍵盤高度
    let height = (_diff > 0 ? _diff : 0) - 2 + 'px'
    console.log(height, 'heightheight')
  })

10.樣式覆蓋

::v-deep

      uni-data-select {
        flex: 1;

        ::v-deep.uni-select {
          border: none;
          padding: 0;
        }
      }

11.全局組件自動(dòng)導(dǎo)入問題

(1).src\components\hbcy-icon-title.vue
(2).src\types\components.d.ts

// src/types/components.d.ts 全局組件類型聲明
import HbcyIconTitle from '@/components/hbcy-icon-title.vue'
declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    HbcyIconTitle: typeof HbcyIconTitle
  }
}

(3).src\pages.json 與 "pages"同級

// 組件自動(dòng)導(dǎo)入
	"easycom": {
		// 是否開啟自動(dòng)掃描 @/components/$1/$1.vue 組件
		"autoscan": true,
		"custom": {
			// uni-ui 規(guī)則如下配置
			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
			// 以 hbcy- 開頭的組件，在 components 目錄中查找
			"^hbcy-(.*)": "@/components/hbcy-$1.vue"
		}
	}

(4).使用

    <hbcy-icon-title />

12.input 樣式自定義

placeholder的樣式自定義可以用
placeholder-style or placeholder-class

 <input
   class="item-input"
   placeholder="請輸入繳費(fèi)基數(shù)"
   placeholder-style="font-size:28rpx"
   type="digit"
   focus
 />

  ::v-deep.input-placeholder {
    font-size: 28rpx;
  }

https://uniapp.dcloud.net.cn/component/input.html#屬性說明

個(gè)人首次使用UniAPP使用注意事項(xiàng)以及踩坑,uni-app

13.表單回顯小知識

需求: A頁面填完信息跳轉(zhuǎn)到B頁面,當(dāng)B頁面返回的時(shí)候,A頁面需要保留剛剛沒跳轉(zhuǎn)B之前的信息

正常來說利用本地存儲,跳轉(zhuǎn)之前存一下,跳轉(zhuǎn)之后回顯
但是小程序orUniapp有一個(gè)回調(diào)上一頁功能uni.navigateBack() 如果使用它,那么沒有變化的數(shù)據(jù)就不需要去再次存儲以及回顯
(左上角返回和 uni.navigateBack() 是一樣的功能)
因?yàn)榉祷氐倪@個(gè)操作類似于瀏覽器回退（不刷新數(shù)據(jù)）需要刷新的時(shí)候可以寫 onShow!

const onClickSend = () => {
  // TODO
  uni.navigateBack()
  // uni.navigateTo({
  //   url: '/pages/addInfo/index',
  // })
  setTimeout(() => {
    uni.showToast({
      title: '保存成功',
      icon: 'none',
      mask: true,
    })
  }, 500)
}

擴(kuò)展

setTimeout(() => uni.navigateBack({
   delta: 1
   // success() {
   //   let pages = getCurrentPages() // 獲取當(dāng)前掛載的路由數(shù)組
   //   let prePage = pages[pages.length - 2] as any // 獲取 上一個(gè)頁面
   //   if (prePage.route === 'enterpriseZone/enterpriseZoneSubmitOrder/enterpriseZoneSubmitOrder') {
   //     prePage.orderDetails() // 當(dāng)返回成功的時(shí)候調(diào)用上一級頁面的回調(diào)
   //   }
   // }
 }), 1000)

13.元素節(jié)點(diǎn)操作-uni.createSelectorQuery()

注意：想要拿到元素實(shí)例，需要在實(shí)例已經(jīng)掛載到頁面上才可以

 //1、首先導(dǎo)入當(dāng)前組件的實(shí)例
import {getCurrentInstance} from "vue";
var currentInstance = getCurrentInstance();
//2、添加上in方法
const inputQuery =  uni.createSelectorQuery().in(currentInstance)
  // 獲取輸入框
inputQuery.select('#input').boundingClientRect((rect) => {
     console.log("得到節(jié)點(diǎn)信息" , rect);
    })
    .exec()

示例圖:
個(gè)人首次使用UniAPP使用注意事項(xiàng)以及踩坑,uni-app

14. uni.createInnerAudioContext()音頻組件控制API

官方地址:https://uniapp.dcloud.net.cn/api/media/audio-context.html#

14.1 踩坑1 獲取音頻時(shí)長NAN/undefined/0的問題

增加定時(shí)器||延時(shí)器才能獲取到

innerAudioContext.onCanplay(() => {
  let intervalId = setInterval(() => {
    if (innerAudioContext.duration !== 0) {
      clearInterval(intervalId)
      isDurationInitialized = true
      console.log('音頻時(shí)長', innerAudioContext.duration)
      audioDuration.value = Math.round(innerAudioContext.duration)
    }
  }, 500)
})

14.2 踩坑2 Ios端獲取兩次音頻時(shí)長問題

增加判斷

let isDurationInitialized = false
innerAudioContext.onCanplay(() => {
  let intervalId = setInterval(() => {
    if (innerAudioContext.duration !== 0) {
      clearInterval(intervalId)
      if (!isDurationInitialized) {
        isDurationInitialized = true
        console.log('音頻時(shí)長', innerAudioContext.duration)
        audioDuration.value = Math.round(innerAudioContext.duration)
      }
    }
  }, 500)
})

15. 微信第三方插件 OCR支持

https://mp.weixin.qq.com/wxopen/pluginbasicprofile?action=intro&appid=wx4418e3e031e551be&token=&lang=zh_CN
個(gè)人首次使用UniAPP使用注意事項(xiàng)以及踩坑,uni-app
其實(shí)就是在manifest.json配置

 /* 小程序特有相關(guān) */
    "mp-weixin": {
        "appid": "xxxxxx",
        "setting": {
            "urlCheck": false
        },
        "plugins": {
            "WechatSI": {
                "version": "0.3.5",
                "provider": "wx069ba97219f66d99"
            },
 +           "ocr-plugin": {
 +              "version": "3.1.3",
 +               "provider": "wx4418e3e031e551be"
 +          }
        },
        "usingComponents": true
    },

在pages.json中

	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
+		"usingComponents": {
+			"ocr-navigator": "plugin://ocr-plugin/ocr-navigator"
+		}
	},

進(jìn)行配置,官網(wǎng)說的比較模棱兩可

使用 身份證類型示例

<script setup lang="ts">
// 掃描
const onScanning = (e: any) => {
  const {
    id: { text: idCard },
    name: { text: name },
  } = e.detail
  // TODO
  console.log(e, 'onScanning')
  console.log(idCard, name)
}
</script>
<template>
	<ocr-navigator @onSuccess="onScanning" :opposite="false">
	  <view class="title-r">
	    <text>證件掃描</text>
	    <view class="title-img">
	      <image src="@/static/images/ewm.png" mode="aspectFill" />
	    </view>
	  </view>
	</ocr-navigator>
</template>

16.小程序內(nèi)識別二維碼跳轉(zhuǎn)

  uni.scanCode({
    success: function (res) {
      console.log(res, 'res')
      console.log('條碼類型：' + res.scanType)
      console.log('條碼內(nèi)容：' + res.result)
    },
  })

掃碼識別只能掃自己小程序的碼,第三方以及他人的碼只能拿到如下這種,并不能直接跳轉(zhuǎn)
個(gè)人首次使用UniAPP使用注意事項(xiàng)以及踩坑,uni-app
第二種方式長按識別二維碼跳轉(zhuǎn)
只能識別小程序碼參考鏈接:

https://developers.weixin.qq.com/community/develop/article/doc/00008e4f3bc538998bfb344ec56413
個(gè)人首次使用UniAPP使用注意事項(xiàng)以及踩坑,uni-app

17.自定義底部彈窗及文字

uni.showActionSheet(options):https://uniapp.dcloud.net.cn/uni-app-x/api/prompt.html#showactionsheet

  uni.showActionSheet({
    title: '標(biāo)題',
    itemList: ['預(yù)覽文件', '轉(zhuǎn)發(fā)郵箱'],
    success: (e) => {
      console.log(e.tapIndex)
      uni.showToast({
        title: '點(diǎn)擊了第' + e.tapIndex + '個(gè)選項(xiàng)',
        icon: 'none',
      })
    },
    fail: (e) => {
      console.log(e)
    },
  })

個(gè)人首次使用UniAPP使用注意事項(xiàng)以及踩坑,uni-app

18.預(yù)覽文件xlsx等

uni.openDocument(OBJECT):https://uniapp.dcloud.net.cn/api/file/file.html#opendocument
注意:需要在小程序后臺-開發(fā)-開發(fā)管理-開發(fā)設(shè)置-服務(wù)器域名-downloadFile合法域名配置域名

uni.downloadFile({
  url: 'https://example.com/somefile.pdf', // 文件路徑 一般為OSS的
  success: function (res) {
    var filePath = res.tempFilePath;
    uni.openDocument({
      filePath: filePath,
      showMenu: true,
      success: function (res) {
        console.log('打開文檔成功');
      }
    });
  }
});

19.button的默認(rèn)樣式

個(gè)人頭像的業(yè)務(wù)時(shí)發(fā)現(xiàn)有4個(gè)黑點(diǎn)其實(shí)就是 after樣式

// 用戶頭像
const avatarUrl = ref('')
const onChooseavatar: UniHelper.ButtonOnChooseavatar = (e) => {
  avatarUrl.value = e.detail.avatarUrl
}
<button class="AvatarView" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
   <view>
     <open-data v-if="!avatarUrl" type="userAvatarUrl"></open-data>
     <image class="Avatarimgae" v-else :src="avatarUrl" mode="scaleToFill" />
   </view>
 </button>

<style lang="scss" scoped>
.AvatarView {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  padding: 0;
}
.Avatarimgae {
  width: 200rpx;
  height: 200rpx;
}
</style>

在全局加上樣式

button::after {
  border: none;
}

問題: 個(gè)人首次使用UniAPP使用注意事項(xiàng)以及踩坑,uni-app
解決:

20.動(dòng)態(tài)組件的使用

目前不支持
https://ask.dcloud.net.cn/question/138772?item_id=255123&rf=false
在網(wǎng)上有看到vue3+uniapp使用動(dòng)態(tài)組件的但是我測試還是不行!
jb51.net/javascript/300333nib.htm#_label2

21.重新加載當(dāng)前頁面組件生命周期

場景:當(dāng)前頁面有多個(gè)tab，但是tab下有一個(gè)共用的組件，和不同列表，vue3+ts的寫法的時(shí)候，公用的組件只有初始的時(shí)候拿到了props的傳參因?yàn)槲以诮M件里面調(diào)用全局方法二次加工了，所以想到了重新加載組件生命周期

const enterpriseSelectMonth = ref(false)
// 切換組件重新加載生命周期
const onToggle = () => {
  enterpriseSelectMonth.value = false
  nextTick(() => {
    enterpriseSelectMonth.value = true
  })
}

 <!-- 日期選擇區(qū)域 -->
 <enterprise-select-month
   v-if="enterpriseSelectMonth"
   :data="selectMonth"
   @confirm-popup="onChangePopup"
 />

22.文字中間空格一個(gè)文字的距離實(shí)現(xiàn)左右兩端對齊

一開始想到了中間文字透明，感覺low；然后又想到了用flex布局，但是也low
最后通過css的偽元素實(shí)現(xiàn)::first-letter
UI效果圖：
個(gè)人首次使用UniAPP使用注意事項(xiàng)以及踩坑,uni-app

        <view class="bottom-item">
          <text class="lable">個(gè)<text style="opacity: 0">人</text>稅：</text>
          <text class="value">1,234,567.89</text>
        </view>
        
        <!-- 需要lable 去掉 display: inline-block; -->
        <view class="bottom-item flex_row_flex-start_center">
          <view class="lable flex_row_space-between_center"><text>個(gè)</text><text>稅：</text></view>
          <text class="value">1,234,567.89</text>
        </view>
        <-- 最完美 -->
        <view class="bottom-item">
          <text class="lable1">個(gè)稅：</text>
          <text class="value">1,234,567.89</text>
        </view>

        .lable {
          width: 112rpx;
          display: inline-block;
        }
        .lable1 {
          width: 112rpx;
          display: inline-block;
          &::first-letter {
            margin-right: 1em; /* 負(fù)的字體大小 */
            font-size: 28rpx; /* 可以調(diào)整首字母的大小 */
          }
        }

23.實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制功能 setClipboardData

uni.setClipboardData

設(shè)置系統(tǒng)剪貼板的內(nèi)容。
https://uniapp.dcloud.net.cn/api/system/clipboard.html#setclipboarddata

<script setup lang="ts">
const copy = (val: string) => {
  uni.setClipboardData({
    data: val, //	這里是個(gè)坑接受字符串類型 value轉(zhuǎn)化為字符串
    success: function () {
      //調(diào)用方法成功
      console.log('success')
    },
  })
}
</script>
<image
  class="image"
  :src="`${IMAGE_BASEURl}copy_icon.png`"
  mode="aspectFill"
  @tap="copy('測試文案')"
/>

24.scss 動(dòng)態(tài)減去屏幕上+下安全區(qū)域失效問題

24.1 獲取獲取窗口信息 uni.getWindowInfo()

uni.getWindowInfo()
https://uniapp.dcloud.net.cn/api/system/getWindowInfo.html#getwindowinfo

const { screenHeight, screenWidth, windowHeight, windowWidth } = uni.getWindowInfo()
console.log(screenHeight, '屏幕高度') //屏幕高度
console.log(screenWidth, '屏幕寬度') //屏幕寬度
console.log(windowHeight, '可操作頁面高度') //可操作頁面高度
console.log(windowWidth, '可操作頁面寬度') //可操作頁面寬度
console.log('獲取窗口信息')

24.2 獲取系統(tǒng)信息 uni.getSystemInfoSync & uni.getSystemInfo

1.同步獲取標(biāo)題 5 演示過
https://uniapp.dcloud.net.cn/uni-app-x/api/get-system-info.html#getsysteminfosync

const { safeAreaInsets } = uni.getSystemInfoSync()

2.異步獲取
https://uniapp.dcloud.net.cn/api/system/info.html#getsysteminfo

// 系統(tǒng)信息的概念
uni.getSystemInfo({
  success: (res) => {
    console.log(res)
    console.log(res.screenHeight) //屏幕高度
    console.log(res.screenWidth) //屏幕寬度
    console.log(res.windowHeight) //可操作頁面高度
    console.log(res.windowWidth) //可操作頁面寬度
  },
})
uni.getSystemInfo({
  success: (res) => {
    console.log(res)
    console.log(res.screenHeight) //屏幕高度
    console.log(res.screenWidth) //屏幕寬度
    console.log(res.windowHeight) //可操作頁面高度
    console.log(res.windowWidth) //可操作頁面寬度
  },
})

24.3 獲取膠囊相關(guān) getMenuButtonBoundingClientRect()

https://uniapp.dcloud.net.cn/api/ui/menuButton.html#getmenubuttonboundingclientrect

let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
console.log(menuButtonInfo.width)  //寬度，單位：px
console.log(menuButtonInfo.height) //高度，單位：px
console.log(menuButtonInfo.top)    //上邊界坐標(biāo)，單位：px
console.log(menuButtonInfo.right)  //右邊界坐標(biāo)，單位：px
console.log(menuButtonInfo.bottom) //下邊界坐標(biāo)，單位：px
console.log(menuButtonInfo.left)   //左邊界坐標(biāo)，單位：px

24.4 遇到的問題css動(dòng)態(tài)計(jì)算失效以及擴(kuò)展新知識 vue3.2中css引用v-bind使用變量

// 最終解決方案
  .enterprise-scroll-view {
    // height: calc(100% - 774rpx - env(safe-area-inset-top) - env(safe-area-inset-bottom)); // 失效
    height: v-bind(dynamicHeight); // 擴(kuò)展知識
    width: 100%;
    background-color: #dd2520;
  }

不知道為什么在scc里同時(shí) - 頭部 - 底部安全區(qū)域就只能減一個(gè) (因?yàn)樽远x導(dǎo)航所以要-top-bottom)

onMounted(() => {
  // 計(jì)算元素的動(dòng)態(tài)高度
  const fixedValue = 774 // 固定值
  dynamicHeight.value = `calc(100% - ${fixedValue}rpx - ${safeAreaInsets?.bottom!}px - ${safeAreaInsets?.top!}px)`
})

// 解決方案一
  <scroll-view scroll-y class="enterprise-scroll-view" :style="{ height: dynamicHeight }">
    <view v-for="i in 50" :key="i">{{ i }}</view>
  </scroll-view>
// 解決方案二
 <scroll-view
   scroll-y
   class="enterprise-scroll-view"
   :style="{
     height: `calc(100% - 774rpx - ${safeAreaInsets?.bottom!}px - ${safeAreaInsets?.top!}px)`,
   }"
 >
   <view v-for="i in 50" :key="i">{{ i }}</view>
 </scroll-view>

25.復(fù)制API uni.setClipboardData

const onClone = () => {
  uni.setClipboardData({
    data: code.value,
    success: () => {
      uni.showToast({
        title: '復(fù)制成功',
      })
    },
  })
}

26.H5跳轉(zhuǎn)小程序相關(guān)

目前我了解到 外部瀏覽器 h5跳轉(zhuǎn)微信小程序就兩個(gè)辦法:
1.進(jìn)行小程序短鏈跳轉(zhuǎn),這個(gè)需要后臺返回短鏈
鏈接如下兩個(gè)：
(1)：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html
(2)：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-link.html
2.需要云函數(shù)靜態(tài)網(wǎng)頁支持,咱們項(xiàng)目沒用云函數(shù)
鏈接：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/staticstorage/jump-miniprogram.html
微信內(nèi)分為網(wǎng)頁、微信公眾號、小程序跳轉(zhuǎn)
1.可以使用微信開放標(biāo)簽，鏈接：
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html 跳轉(zhuǎn)小程序：wx-open-launch-weapp文章來源地址http://www.zghlxwxcb.cn/news/detail-673815.html

到了這里，關(guān)于個(gè)人首次使用UniAPP使用注意事項(xiàng)以及踩坑的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！