uni-app v3版本更新常见问题排查

组件不显示或者功能异常

原因：组件内使用了 onReady，onReady 是页面的生命周期，不应在组件中直接使用，组件中应该使用 mounted 生命周期

解决方法：onReady 改为 mounted

更新组件状态，视图不更新

原因：使用了 vue 无法观测的数组更新方式（如：this.array[0]=object），相关文档

解决方法：改为可以观测的数组更新方式（如：this.array.splice(0,1,object)）或者使用 $forceUpdate 强制更新视图（只支持当前组件的数据变更）

使用 setData 报错

原因：vue 不支持 setData 方法

解决方法：直接给数据赋值即可，如：this.setData({a:'a'})改为this.a='a'、page.setData({a:'a'})改为page.$vm.a='a'

js 报错：TypeError: null is not an object (evaluating '_vm.xxx.xxx')、TypeError: undefined is not an object (evaluating '_vm.xxx.xxx')

原因：模板内访问了未定义数据（null、undefined）的属性

解决方法：数据初始化为对象，或者模板内先判断对象是否存在（如：<test :data="object&&object.data"></test>），或者使用 v-if 判断（如：<test v-if="object" :data="object.data"></test>，不是：<test v-if="object.data" :data="object.data"></test>）

js 报错：cid unmatched at view.umd.min.js

原因、解决办法 同上，一般出现这个错误之前会出现上一条错误提示。如果这一哥报错之前没有上一条错误提示，就排查下显示异常的组件，其导入方式是否错误（如：import { test } from './test.vue'）

js 报错：Failed to mount component: template or render function not defined.

原因：删除了 main.js 文件内的 App.mpType = 'app'

解决办法：在 main.js 文件内补充上 App.mpType = 'app'

js 报错：undefined is not an object (evaluating 'this.$refs.xxx.xxx')

原因：在错误的时机（如：created 生命周期）获取子组件实例，且不加判断直接调用组件方法

解决办法：在正确的时机（如：mounted 生命周期）获取子组件示例，或者判断组件或者方法是否存在后再调用

js 报错：TypeError: page.onLoad is not a function

原因：获取页面对象后主动调用 onLoad 生命周期

解决方法：调用 vm 实例上的方法，如：page.$vm.xxx

js 报错：undefined is not an object (evaluating 'e.parentNode')

原因：main.js 文件内的 app.$mount 方法内填入了参数（如：app.$mount('#app')）

解决方法：去除 app.$mount 方法参数，改回：app.$mount()

js 报错 uni.getUpdateManager is not a function

原因：非小程序端不支持 uni.getUpdateManager 方法

解决方法：使用条件编译包裹相关代码

js 报错 page.$vm.onLoad is not a function

原因：methods 内不能使用和内置生命周期相同的方法名，也不能直接获取到生命周期对应的方法

解决方法：在 methods 内将与内置生命周期同名的方法定义为其他名称

onShow 生命周期获取不到页面传入参数

原因：onShow 生命周期无参数传入

解决方法：改在 onLoad 生命周期获取

使用 uni.createSelectorQuery 报错：page is not ready

原因：在错误的时机（如：onShwo、onLoad）调用 uni.createSelectorQuery

解决方法：改在 onReady 生命周期后获取

图像不显示

原因：使用了 img 标签加载本地图像，img 不再自动转为 image 组件，在 App 目前不支持加载本地文件（后续会优化）

解决方法：将 img 标签改为 image 标签。

img、div 等标签样式异常

原因：template 中标签使用的 img、div 等，style 中写的是 image、view 等

解决方法：标签改为一致的，比如将 template 中的 img 标签改为 image 标签，div 改为 view 标签，或者 style 中统一使用 img、div 等。

横竖屏动态切换后组件或文字比预期显示的大或小

原因：r/upx 根据屏幕宽度计算，切换屏幕方向前后计算的大小不一致

解决方法：固定屏幕方向（相关文档），或者使用其他单位：百分比、rem、vw 等（相关文档）

小程序组件库报样式错误

原因：小程序组件内部分压缩后的样式解析错误

解决方法：格式化报错的样式文件

小程序组件库不显示

问题：小程序组件内使用了 <import/>、<template/>

解决方法：手动修改对应的小程序组件去除 <import/>、<template/> 使用

组件内监听页面生命周期不生效

问题：组件内不支持直接监听页面生命周期（如：onPageScroll）

解决方法：使用js监听，参考

cover-view、cover-image 被原生组件覆盖

问题：App端 cover-view、cover-image 需要放到原生组件（video、map）内

解决方法： cover-view、cover-image 嵌套在原生组件（video、map）内：<map><cover-view></cover-view><map>

在 js 中导入 css 报错

原因：目前 App 端不支持在 js 中导入 css（后续会优化）

解决方法：改为在对应组件（或页面）的 style 中

使用 instanceof 判断 uni-app 接口返回的数据类型与预期不符

原因：uni-app 接口（如：uni.base64ToArrayBuffer）返回的数据不支持使用 instanceof 判断类型

解决方法：改用其他方式判断类型，如：arrayBuffer instanceof ArrayBuffer改为Object.prototype.toString.call(arrayBuffer)==='[object ArrayBuffer]'

估计很多的开发者都会遇到在安卓、ios的app中去集成一些图片处理的功能，那么这篇文章就说明了如何在uniapp中去调用配置了opencv相关依赖的安卓原生方法，并且实现全能扫描王的基本操作，如自动扫描文件边框、剪切纠偏和二值化等处理。

一、目前实现以下功能：
1、在uniapp小程序中写页面，调用安卓原生的方法，将图片路径传递给安卓原生方法；
2、安卓方法取到图片路径后，结合opencv实现对图片的处理操作；
3、处理完成后将输出的图片路径返回给uniapp。

二、实现以上功能的步骤：
1、首先要学会如何在uniapp中调用安卓的原生方法：
这里我是参考的文章：https://ask.dcloud.net.cn/article/36065，仔细研究他的文章应该是能够解决问题的，感谢。
值得注意的是，可能有的开发者会和我一样在uniapp中本地打包后会发现没有pages这个文件夹

那是因为uniapp中需要有一个.nvue结尾的页面

2、然后需要解决在安卓项目中如何去配置opencv的相关依赖：
这里是我实现这个步骤参考的文章：https://blog.csdn.net/sakurakider/article/details/80470358，
好好研究这篇文章，基本也是能够解决问题的，感谢。

这其中可能你会遇到一个问题，那就是下载opencv相关的东西的时候，如果你没翻墙，真的是巨慢，
考虑到这些，我将百度网盘的资料也贴在这里：https://blog.csdn.net/oMoDao1/article/details/80276834，

3、如果现在你已经能够成功在uniapp中调用安卓原生的方法，并且将在你的安卓项目中配置好了opencv
的相关依赖，那么恭喜你，你可以来到第三步了。
这一步要做的工作是将图片处理的逻辑写入到你的安卓项目中，当然这个逻辑也不是很简单，所以还是老
办法，在这个贴子中：https://blog.csdn.net/rwzhang/article/details/85386428，已经实现了对图片的处理实现。

这个作者是用eclipse创建的maven项目实现的，不过没有关系，你可以直接将他的逻辑拷贝到你的安卓项目中，
至于怎么拷贝，那我想这是所有程序员应该都具备的技能了吧。

三、结尾
如果你有这方面需求，但是又觉得文章没有写清楚的可以直接在下面留言，看到了都会回的。
文章全部内容为亲自实现的经验，希望要采用的开发者们，一旦尝试就不要轻易的怀疑，因为实现过程肯定会遇到各种各样的问题的，稍微坚持一下可能问题就解决了，一旦怀疑就离绕路不远了。

app界面：

被处理图片：

处理后效果：

性别：男

目前已经搞了半年多flutter和UNI-app开发
目前正准备找一家主做app和网站开发的公司，个人偏向于移动端，兼职也行毕竟疫情期间
前端开发，有兴趣的可以加我1963534590

搜索能不能搜索插件的文件夹名称
中文名称不记得了插件就搜索不到了

简书链接：
https://www.jianshu.com/p/38b6c798d2fd

希望能帮到大家

如果里面有什么问题欢迎提醒

群已经失效

想用一下 文件下载和读取,看文档真是太费劲了!!!

这里分享一下 file.slice 的用法,社区好多提问也没人回答,今天正好用了!!!

plus.io.requestFileSystem( plus.io.PUBLIC_DOWNLOADS, function( fs ) {  
                fs.root.getFile('log.txt',{create:false}, function(entry) {   
                    entry.file( function(file){  
                        var str = file.slice(0,80)  
                        var fileReader = new plus.io.FileReader();  
                        fileReader.onloadend = function(evt) {  
                            console.log(evt.target.result);   
                        }  
                        fileReader.readAsText(str, 'utf-8'); // 注意这里 readAsTest(**分割后返回的变量**,编码)  
                    } );  
                })  
            });

现在在做一款功能相对比较齐全，后期可快速满足新零售业务的产品。
完成度70%左右，由于人员因素，进展没达到预期。
需求寻求广州地区的uni-app开发者参与团队产品方案的开发工作，可付费~
具体可私信。
vx：abckongzhizhen

使用uni-app开发的H5页面，为了根据屏幕宽度自适应，我们一般都采用官方推荐的动态单位rpx，但是在PC端展现的时候可能出现文字等相关元素太大，导致页面错乱或不美观。

解决方案很简单，在自定义的h5 template文件head中，修改<script></script>中的代码：

<script>  
    document.addEventListener('DOMContentLoaded', function() {  
        window.innerWidth = Math.min(window.innerWidth, 750)  
        document.documentElement.style.fontSize = window.innerWidth / 20 + 'px'  
    })  
</script>

具体也可以查看这篇文章：uni-app H5 平台在 PC 端实现适配

目前的插件市场生态良好，也诞生了不少优秀插件。不过目前导入插件还是采用直接把文件下载到项目目录，而不是采用导入npm包的模式。

对于项目模板，直接下载是比较合适的。但对于插件，如果直接下载会导致后续的升级出问题。即便是插件本身有问题也应该是fork一份修改完后再导入。

插件的更新如果比较频繁就会导致要反复导入，管理起来较为不便，因此建议插件的规范向npm靠拢。

建议官方推出新的插件规范，鼓励开发者使用npm包的模式来发布插件

有感于不少网友对AndroidStudio不熟悉，所以在简书投了两篇文章，分别是5+app和uni-app的打包方式，网址如下：

https://www.jianshu.com/u/1a19b212883d

希望DCloud越来越好~

先介绍下iOS证书的类型和作用

1、iOS开发证书

iOS开发证书是用于测试APP，在开发过程中安装到苹果手机真机测试APP的运行情况。

2、iOS发布证书

当APP开发测试好后上线就需要用到iOS发布证书，用iOS发布证书打包的ipa才能上传到App Store审核。

3、iOS推送证书

iOS推送证书是用于推送通知的，平时我们在手机的系统栏下拉看到的那些消息就是推送通知，如果要做这个功能就需要配置推送证书。

4、iOS企业证书

iOS企业证书需要企业开发者账号才能申请，用于无法上架App Store的苹果APP打包签名使用。

常用的就是以上这4种iOS证书，当你需要什么功能的时候就知道用哪个类型的iOS证书。

iOS证书的构成和有效性

iOS证书由两个文件构成。p12文件和.mobileprovision文件

p12文件相当于公钥，.mobileprovision文件相当于私钥。

开发证书p12文件苹果规定只能申请2个，发布证书p12文件只能申请3个！iOS证书配置.mobileprovision文件是没有任何数量限制的！

p12可以共用，一个p12可以对应无数个.mobileprovision文件！所以就算p12申请一个也够用了，可以对应创建无数套iOS证书！

所以对于证书数量的担忧是没有意义的！不会限制你上架多少个APP！

ios证书的有效期是一年，在我们软件的和开发者后台都能看到到期时间。

iOS证书可以删除吗，到期怎么更新

iOS证书是可以随意删除的（不管有没有到期），不会影响已经上架的APP。

如果你还在测试APP。删除了测试用的开发证书，APP将打不开，当然这个也没什么关系，测试APP是要不停打包的，重新申请证书打包重新安装就可以了。

iOS证书到期了需不需要重新申请呢，具体看需要，如果你要更新已经上架的APP，更新版本，删除到期的证书重新申请打包上传更新。

如果不更新APP，到期了不管他也没什么关系，不会影响上架了的APP。

下面是申请一套iOS开发证书的详细流程

一、下载安装iOS上架辅助软件Appuploader

Appuploader可以辅助在Windows电脑直接申请iOS证书

Appuploader下载链接

下载软件包后解压直接使用，无需安装。

二、登录Appuploader申请iOS证书文件p12

2.1打开Appuploader，用苹果开发者账号登录进去。

2.2、选择证书项目进入

2.3、点击右下角+ADD选择

类型：选择开发证书（开发证书打包的才能安装到手机）

输入证书名称：不要中文、随意设置

邮箱：（随意）

密码：证书的密码，不是开发者账号密码，如123这样不用很复杂，记好、打包时要用、很重要。

应用id：这里不用选！

点击ok创建。

2.4、创建成功后，找到刚创建的iOS开发证书（iOS Development这个类型的就是开发证书，如果之前创建过看过期时间就知道哪个是新创建的了），点击p12 文件,下载保存.p12证书文件到电脑。

三、登录Appuploader申请iOS开发证书描述文件mobileprovision

iOS证书文件有两个，刚申请了p12文件，接下来申请mobileprovision描述文件

3.1、点击右下角BACK、返回Appuploader首页，选择描述文件进去。

3.2、配置相关信息

Type:下拉框选择开发版profile

应用id：下拉框选择添加的对应的应用id（又称套装id，appid，BundleID，包名）

如果已经加过了应用id直接选择，添加新应用id请看下面教程！

点击查看应用id添加教程（添加后返回本教程，继续申请流程）

Devices（测试设备）:勾选需要测试苹果手机，如果要加新设备，先添加再勾选

测试设备udid添加教程（添加后返回本教程，继续申请流程）

名称：数字或者字母，随意输入，注意不要重复。

点击ok创建

3.6、选择刚创建的iOS开发版描述文件（iOS Developer这个类型的就是开发描述文件，找到刚创建的输入的名字），点击Download下载，保存到电脑

申请得到了两个iOS证书文件p12和.mobileprovision就可以去打包ipa了。