uni-app项目非自定义组件模式升级到自定义组件模式问题总结

系统管理员 2021-08-19 15:32 389阅读 0赞

# uni-app项目非自定义组件模式升级到自定义组件模式问题总结 #

最近更新了HBuiderX，发现原来的正常显示的页面和文件路径发生了异常，仔细一看原来是新更新的HX默认编译模式为自定义组件模式，和项目之前的非自定义组件模式产生了冲突和不兼容。正好也趁着这个机会将整个项目升级到自定义组件模式。

### 非自定义组件模式升级到自定义组件模式，影响最直接的是组件内部的文件路径异常 ###

非自定义组件模式升级到自定义组件模式，影响最直接的是页面布局和文件路径。  
例如：在之前非自定义组件模式中tonggu通过.`../../../static/bg.png`就能访问到对应的背景图片，然而更新后需要`../../../../../static/bg.png`才能访问到相应的背景图片。【备注：上面文件路径异常仅是指在页面引入的外部组件内访问文件时才存在，正在页面路径无此异常】

### 使用v-for渲染uni-list和uni-list-item时uni-list样式丢失 ###

在非自定义模式下要想使用官方的列表组件uni-list和uni-list-item,则只能像下面代码片段这样 操作

只能讲uni-list-item的父级样式设置为uni-list(组件uni-list内部的样式),而不能把其父级像官方案列设置为uni-list组件，具体见我另外一篇blog[添加链接描述][Link 1]  
现在将项目更新为自定义组件模式发现uni-list样式丢失了。具体应该是uni-app自定义组件模式实现了v-for循环渲染自定义组件。那么这里有两种解决办法，一种时将uni-list组件下的uni-list样式拷贝到使用到class = uni-list的文件目录下，如果多个页面使用到uni-list建议将uni-list设置为全局样式。第二种解决办法是直接将uni-list-item的父级设置为uni-list组件【备注：这种方法我没有尝试，我项目中使用的是第一种方法，这样代码改动较小】

### 支持v-for渲染自定义组件 ###

这个应该是改动最大或者最有意义的了，在之前的非自定义组件模式下使用v-for渲染外部组件时，尤其是带插槽的组件，在组件插槽内无法访问当前页面的作用域（vue官方也有说明）在非自定义组件模式下要想在组件插槽内使用父级页面数据（通常是循环）通常需要像下面这样操作：通过props将值传递到组件内部，然后再在插槽内使用

<view class="swipBox" v-for="index in ZYUserListsLength" :key = "index">
    	<uni-swipe-action :options="options"  :gmyUser="ZYUserList[index].ZYUser" :gmyTime = "ZYUserList[index].ADate" >
    		<view class='swipItem'>{
       {gmyUser}} --{
       {gmyTime}}</view>
    	</uni-swipe-action>
    </view>

现在使用自定义组件模式则可以直接在内使用循环的元素，像这样：

<view class="swipBox" v-for="(value,index) in ZYUserList" :key = "index" >
    	<uni-swipe-action :options="options" >
    		 <view class='swipItem'>领用人:{
       {value.ZYUser}}    {
       {value.ADate}}</view>
    	</uni-swipe-action>
    </view>

而在自定义模式下前面那种用法将显示undefined。

### 一些接口变更 ###

这个主要就参考官网说明，比如说canvas接口需要额外传递环境this变量等。

本次项目升级遇到的主要就是这些问题，后续有新的错误再更新。

[Link 1]: https://blog.csdn.net/weixin_44670973/article/details/91501376