文章目錄

• • 前言
  • 1.調用微信開發者工具報錯IDE service port disabled
  • 2.@import導入外部樣式失效
  • 3.v-for列表渲染指定`:key`屬性報錯Duplicate keys detected

前言

uni-app 是一個基于 Vue.js 開發所有前端應用的框架，開發者編寫一套代碼，可發布到iOS、Android、Web（響應式）、以及各種小程序（微信/支付寶/百度/頭條/QQ/釘釘/淘寶）、快應用等多個平臺。
在開發過程中可能會遇到一些異常，這些異常及其解決辦法總結如下。

1.調用微信開發者工具報錯IDE service port disabled

在HBuilderX下開發好項目后，要使用小程序模擬器進行運行調試時，控制臺報錯如下：

21:48:18.851 [微信小程序開發者工具] [error] IDE service port disabled. To use CLI Call, please enter y to confirm enabling CLI capability, or manually open IDE -> Settings -> Security Settings, and set Service Port On. 21:48:18.859 [微信小程序開發者工具] For more details see: https://developers.weixin.qq.com/miniprogram/en/dev/devtools/cli.html 21:48:18.859 [微信小程序開發者工具] [error] 工具的服務端口已關閉。要使用命令行調用工具，請在下方輸入 y 以確認開啟，或手動打開工具 -> 設置 -> 安全設置，將服務端口開啟。 21:48:18.866 [微信小程序開發者工具] 詳細信息: https://developers.weixin.qq.com/miniprogram/dev/devtools/cli.html

此時是因為微信開發者工具未打開服務端口，根據提示，打開微信開發者工具 -> 設置 -> 安全設置 -> 開啟服務端口即可，如下：

2.@import導入外部樣式失效

有時候在進行uni-app開發時，需要在App.vue或者某個頁面的style塊中導入外部已寫好的樣式，但是導入后可能會發現樣式無效，如下：

<style>/*每個頁面公共css */.red {color: #ff0000;}/* 引入自定義圖標庫 */@import './static/font/iconfont.css'; </style>

這是因為通過@import導入外部樣式需要將其放于style塊的最前面，而不能放到中間或后面位置，這樣會失效，同時應該在導入語句后加上分號;，這樣才會生效。

3.v-for列表渲染指定:key屬性報錯Duplicate keys detected

uni-app提倡在進行列表渲染，即v-for循環遍歷列表時添加:key屬性來指定列表中項目的唯一的標識符，以確保使組件保持自身的狀態、并提高列表渲染效率。
但是有時候會出現警告，例如：

<template><view><!-- 話題信息 --><topic-info :info="info"></topic-info><divider></divider><!-- 精華帖 --><block v-for="(item, index) in hotList" :key="index"><view class="p-2 flex align-center border-bottom" hover-class="bg-light"><text class="iconfont icon-zhiding text-main"></text><text class="font text-dark text-ellipsis">{{item.title}}</text></view></block><divider></divider><!-- 標簽欄 --><view class="flex align-center py-2"><view class="flex-1 font-lg font-weight-bold text-main flex align-center justify-center">默認</view><view class="flex-1 font-md flex align-center justify-center">最新</view></view><!-- 列表 --><block v-for="(item, index) in list1" :key="index"><common-list :item="item" :index="index"></common-list></block></view> </template>

警告信息如下：

16:42:29.421 [Vue warn]: Duplicate keys detected: '0_0'. This may cause an update error. 16:42:29.463 (found at pages/topic-detail/topic-detail.vue:1) 16:42:29.484 [Vue warn]: Duplicate keys detected: '1_0'. This may cause an update error. 16:42:29.524 (found at pages/topic-detail/topic-detail.vue:1)

這是因為一個template中有兩個或多個v-for，它們的:key值都為index、出現沖突，此時只需給不同循環的:key值拼接不同的前綴或者后綴即可。
修改如下即可：

<template><view><!-- 話題信息 --><topic-info :info="info"></topic-info><divider></divider><!-- 精華帖 --><block v-for="(item, index) in hotList" :key="'hot'+index"><view class="p-2 flex align-center border-bottom" hover-class="bg-light"><text class="iconfont icon-zhiding text-main"></text><text class="font text-dark text-ellipsis">{{item.title}}</text></view></block><divider></divider><!-- 標簽欄 --><view class="flex align-center py-2"><view class="flex-1 font-lg font-weight-bold text-main flex align-center justify-center">默認</view><view class="flex-1 font-md flex align-center justify-center">最新</view></view><!-- 列表 --><block v-for="(item, index) in list1" :key="index"><common-list :item="item" :index="index"></common-list></block></view> </template>

此時便不會出現警告信息。

總結

以上是生活随笔為你收集整理的uni-app开发 常见异常和解决办法的全部內容，希望文章能夠幫你解決所遇到的問題。

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