uni-app开发 常见异常和解决办法

CuterCorley 等级 912 0 0

前言

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

此时是因为微信开发者工具未打开服务端口,根据提示,打开微信开发者工具 -> 设置 -> 安全设置 -> 开启服务端口即可,如下: uni-app开发 常见异常和解决办法

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>

此时便不会出现警告信息。

本文原文首发来自博客专栏移动应用开发,由本人转发至https://www.helloworld.net/p/RR47tYrfzaF5Y,其他平台均属侵权,可点击https://blog.csdn.net/CUFEECR/article/details/111086113查看原文,也可点击https://blog.csdn.net/CUFEECR浏览更多优质原创内容。

收藏
评论区

相关推荐

Java编程 经验技巧汇总
1.JSONArray数组如何循环遍历 java package xxx; import net.sf.json.JSONArray; import net.sf.json.JSONObject; public class Test { public static void main(String args) { /author:命运的信徒 da
爬虫入门经典(一) | 一文教你用Spider制作简易的翻译工具
大家好,我是不温卜火,是一名计算机学院大数据专业大三的学生,昵称来源于成语—不温不火,本意是希望自己性情温和。作为一名互联网行业的小白,博主写博客一方面是为了记录自己的学习过程,另一方面是总结自己所犯的错误希望能够帮助到很多和自己一样处于起步阶段的萌新。但由于水平有限,博客中难免会有一些错误出现,有纰漏之处恳请各位大佬不吝赐教!暂时只在csdn这一个平台进行
爬虫入门经典(三) | 模拟登录?一文为你排忧解惑!
大家好,我是不温卜火,是一名计算机学院大数据专业大三的学生,昵称来源于成语—不温不火,本意是希望自己性情温和。作为一名互联网行业的小白,博主写博客一方面是为了记录自己的学习过程,另一方面是总结自己所犯的错误希望能够帮助到很多和自己一样处于起步阶段的萌新。但由于水平有限,博客中难免会有一些错误出现,有纰漏之处恳请各位大佬不吝赐教!暂时只在csdn这一个平台进行
爬虫入门经典(四) | 如何爬取豆瓣电影Top250
大家好,我是不温卜火,是一名计算机学院大数据专业大三的学生,昵称来源于成语—不温不火,本意是希望自己性情温和。作为一名互联网行业的小白,博主写博客一方面是为了记录自己的学习过程,另一方面是总结自己所犯的错误希望能够帮助到很多和自己一样处于起步阶段的萌新。但由于水平有限,博客中难免会有一些错误出现,有纰漏之处恳请各位大佬不吝赐教!暂时只在csdn这一个平台进行
爬虫入门经典(七) | 一文带你爬取淘宝电场
大家好,我是不温卜火,是一名计算机学院大数据专业大三的学生,昵称来源于成语—不温不火,本意是希望自己性情温和。作为一名互联网行业的小白,博主写博客一方面是为了记录自己的学习过程,另一方面是总结自己所犯的错误希望能够帮助到很多和自己一样处于起步阶段的萌新。但由于水平有限,博客中难免会有一些错误出现,有纰漏之处恳请各位大佬不吝赐教!暂时只在csdn这一个平台进行
爬虫入门经典(八) | 一文带你快速爬取股吧
大家好,我是不温卜火,是一名计算机学院大数据专业大三的学生,昵称来源于成语—不温不火,本意是希望自己性情温和。作为一名互联网行业的小白,博主写博客一方面是为了记录自己的学习过程,另一方面是总结自己所犯的错误希望能够帮助到很多和自己一样处于起步阶段的萌新。但由于水平有限,博客中难免会有一些错误出现,有纰漏之处恳请各位大佬不吝赐教!暂时只在csdn这一个平台进行
爬虫入门经典(十三) | 一文教你简单爬取腾讯招聘
大家好,我是不温卜火,是一名计算机学院大数据专业大三的学生,昵称来源于成语—不温不火,本意是希望自己性情温和。作为一名互联网行业的小白,博主写博客一方面是为了记录自己的学习过程,另一方面是总结自己所犯的错误希望能够帮助到很多和自己一样处于起步阶段的萌新。但由于水平有限,博客中难免会有一些错误出现,有纰漏之处恳请各位大佬不吝赐教!暂时只在csdn这一个平台进行
一文搞懂什么是HTTP与HTTPS
(https://blog.csdn.net/petterp/article/details/102779257)Http与Https的区别。 在最近的开发中,深感网络相关基础知识薄弱,于是趁周末好好总结一
20 张图彻底弄懂 HTTPS 的原理
前言 近年来各大公司对信息安全传输越来越重视,也逐步把网站升级到 HTTPS 了,那么大家知道 HTTPS 的原理是怎样的吗,到底是它是如何确保信息安全传输的?网上挺多介绍 HTTPS,但我发现总是或多或少有些点有些遗漏,没有讲全,今天试图由浅入深地把 HTTPS 讲明白,相信大家看完一定能掌握 HTTPS 的原理,本文大纲如下: HTTP 为什么不安全
python算法
640?wx_fmtjpeg(https://imghelloworld.osscnbeijing.aliyuncs.com/c8238ed70f9664b61ce91f80786ca26f.png) 来源 | CSDN(ID:CSDNnews ) 本文是一些机器人算法(特别是自动导航算法)的Python代码合集。 其主要特点有以下
Flask开发 经验技巧总结
Flask作为一个主流的Python Web框架之一,有比较广泛的应用,但是有经验的小伙伴可能知道,这里边其实也有很多坑,让你不得不防,在使用的过程中可以积累一些经验。 1.Flask中的Referer不是referer 做过爬虫的小伙伴都知道,referer是指页面的跳转,即从哪一个页面跳转到当前页,很多网站也通过该属性对爬虫采取了一定的限制。在Flas
C语言基础习题50例(五)21-25
你不得不学的职场高效表达训练,需要的朋友自取哟。 习题21 猴子吃桃问题: 猴子第一天摘下若干个桃子,当即吃了一半,还不过瘾,又多吃了一个;第二天早上又将剩下的桃子吃掉一半,又多吃了一个;以后每天早上都吃了前一天剩下的一半零一个。到第 10 天早上想再吃时,见只剩下一个桃子了,求第一天共摘了多少。实现思路:采用逆向思维进行反推。代码如下:c
关于根据颜色刷选图像内容的问题
在CSDN本人博文《OpenCVPython图像处理:用inRange刷选图像中指定颜色对象案例》(请点击文章底部最下方的“阅读原文”跳转CSDN阅读原文)中介绍了根据颜色刷选图像内容相关的概念及实现,介绍了通过使用inRange在HSV颜色空间中识别制定颜色的图像内容,文中概要介绍了HSV颜色空间中进行制定颜色对象识别的要点,使用的inRange函数的语法
https://cloud.tencent.com/developer/article/write/1830331
一、目标今天的目标是这个sign和appcode 二、步骤 Jadx没法上了app加了某梆的企业版,Jadx表示无能为力了。 FRIDADEXDumpDexDump出来,木有找到有效的信息。 Wallbreaker葫芦娃的Wallbreaker可以做些带壳分析,不过这个样本,用Frida的Spawn模式可以载入,Attach模式会失败。而直接用Objecti
“CSDN首页”视觉升级背后的故事
“首页”,是用户直观感受产品的第一步,这次我们兼顾用户需求和产品运营诉进行全新的整体规划,人性化的运用首屏空间,来保证用户的使用效率,同时本次迭代也采纳了些用户对网站所述心声和建议进行了本次规划迭代。用户心声a.精简界面,给界面视觉做减法,这次设计应用了重新栅格体系对页面进行内容划分,去掉旧版用灰色背景区分模块设计,应用信息模块大的间距留白作为区分,让页面透