文章目錄

• • 前言
  • 1.調(diào)用微信開(kāi)發(fā)者工具報(bào)錯(cuò)IDE service port disabled
  • 2.@import導(dǎo)入外部樣式失效
  • 3.v-for列表渲染指定`:key`屬性報(bào)錯(cuò)Duplicate keys detected

前言

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

1.調(diào)用微信開(kāi)發(fā)者工具報(bào)錯(cuò)IDE service port disabled

在HBuilderX下開(kāi)發(fā)好項(xiàng)目后，要使用小程序模擬器進(jìn)行運(yùn)行調(diào)試時(shí)，控制臺(tái)報(bào)錯(cuò)如下：

21:48:18.851 [微信小程序開(kāi)發(fā)者工具] [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 [微信小程序開(kāi)發(fā)者工具] For more details see: https://developers.weixin.qq.com/miniprogram/en/dev/devtools/cli.html 21:48:18.859 [微信小程序開(kāi)發(fā)者工具] [error] 工具的服務(wù)端口已關(guān)閉。要使用命令行調(diào)用工具，請(qǐng)?jiān)谙路捷斎?y 以確認(rèn)開(kāi)啟，或手動(dòng)打開(kāi)工具 -> 設(shè)置 -> 安全設(shè)置，將服務(wù)端口開(kāi)啟。 21:48:18.866 [微信小程序開(kāi)發(fā)者工具] 詳細(xì)信息: https://developers.weixin.qq.com/miniprogram/dev/devtools/cli.html

此時(shí)是因?yàn)槲⑿砰_(kāi)發(fā)者工具未打開(kāi)服務(wù)端口，根據(jù)提示，打開(kāi)微信開(kāi)發(fā)者工具 -> 設(shè)置 -> 安全設(shè)置 -> 開(kāi)啟服務(wù)端口即可，如下：

2.@import導(dǎo)入外部樣式失效

有時(shí)候在進(jìn)行uni-app開(kāi)發(fā)時(shí)，需要在App.vue或者某個(gè)頁(yè)面的style塊中導(dǎo)入外部已寫(xiě)好的樣式，但是導(dǎo)入后可能會(huì)發(fā)現(xiàn)樣式無(wú)效，如下：

<style>/*每個(gè)頁(yè)面公共css */.red {color: #ff0000;}/* 引入自定義圖標(biāo)庫(kù) */@import './static/font/iconfont.css'; </style>

這是因?yàn)橥ㄟ^(guò)@import導(dǎo)入外部樣式需要將其放于style塊的最前面，而不能放到中間或后面位置，這樣會(huì)失效，同時(shí)應(yīng)該在導(dǎo)入語(yǔ)句后加上分號(hào);，這樣才會(huì)生效。

3.v-for列表渲染指定:key屬性報(bào)錯(cuò)Duplicate keys detected

uni-app提倡在進(jìn)行列表渲染，即v-for循環(huán)遍歷列表時(shí)添加:key屬性來(lái)指定列表中項(xiàng)目的唯一的標(biāo)識(shí)符，以確保使組件保持自身的狀態(tài)、并提高列表渲染效率。
但是有時(shí)候會(huì)出現(xiàn)警告，例如：

<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><!-- 標(biāo)簽欄 --><view class="flex align-center py-2"><view class="flex-1 font-lg font-weight-bold text-main flex align-center justify-center">默認(rèn)</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)

這是因?yàn)橐粋€(gè)template中有兩個(gè)或多個(gè)v-for，它們的:key值都為index、出現(xiàn)沖突，此時(shí)只需給不同循環(huán)的: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><!-- 標(biāo)簽欄 --><view class="flex align-center py-2"><view class="flex-1 font-lg font-weight-bold text-main flex align-center justify-center">默認(rèn)</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>

此時(shí)便不會(huì)出現(xiàn)警告信息。

總結(jié)

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

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