快应用的用法和常见问题解答（下）

本期作者：执着的烙印

上篇作者为大家讲了什么是快应用以及快应用的开发流程，这期作者分享了快应用开发中遇到的问题和解决办法，一起来看看吧！

说起快应用，不得不说快应用踩过的坑。

 

快应用还处于不断优化阶段，在开发过程中，也会遇到一些不完善的地方，由于我们对于新技术的掌握还不透彻，也会使得开发中遇到很多的困难。

 

我将在快应用开发中遇到的问题罗列到下面，希望对大家的开发有所帮助。

 

1. stack模式注意事项

 

stack模式下，父级内放入image，将事件作用于stack和div事件触发均有难问题，所以，需要将事件设置到image上。设置于子级本身。

 

 

2. tabs切换

 

如果是自定义组件形式。tab-bar可以设置为div形式。当点击每个tab-bar，可以切换图片和更换颜色。

 

 

在data中设置数据进行切换。

 

 

3. 缺少依赖

 

Can’t  resolve ‘less-loader’,证明缺少less-loader依赖，直接重新安装依赖即可，即 npm install less-loader，其他依赖同理。

 

4. 返回数据作二次处理再渲染

 

如果数据返回的是数字类型，比如返1和2，需要将1和2在渲染的过程中转换为name和state，则返回的数据需要处理后重新返回新数据即

 

 

5. 父子组件传参（父组件向子组件传参）

 

子组件设置props

 

 

props中的属性作为子组件，遍历data的值，遍历到每一个是$item ，代表data1中每一个对象。获取每个对象，拿到对应属性，将其放入页面中。

 

 

父组件的数据形式

 

 

在父组件中使用子组件

 

 

6. 通过openssl命令等工具生成签名文件private.pem、certificate.pem

 

如果只是单独vscode生成证书必须使用openssl，使用命令是直接用不了的。必须安装openssl。

 

操作步骤是：

 

复制华为openssl到项目的同级D盘的D:\Program Files，复制OpenSSL-Win64文件到D:\Program Files此位置

 

然后设置全局环境变量

 

我的电脑-右键-属性-高级-环境变量-path双击-在最后加分号加openssl路径。;D:\Program Files\OpenSSL-Win64\bin

 

然后执行命令

 

openssl req -newkey rsa:2048 -nodes -keyout private.pem -x509 -days 3650 -out certificate.pem复制代码

最后在工程的sign目录下创建release目录，将私钥文件private.pem和证书文件certificate.pem拷贝进去。

 

7. 没有tab-bar，列表无法加载底部问题

 

快应用，在隐藏tab-bar的状态，列表加载一直是加载中，无法加载到底部。 所以要设置一个padding值，>=2px，否则无法加载到底部。

 

8. 路由传参

 

路由传参：（使用时注意引入import router from '@system.router';）

 

路由传img（参数时），接受时是字符串类型，需做处理才能使用。

 

this.detailList = JSON.parse(this.detailList); 使用此方法将\\解析。

 

可得正常结果例

如:https://blog.csdn.net/shi_yi_fei/article/details/51202209

 

9. 路由跳转传参

 

路由跳转传参（routePagePushWithParams）

 

格式

routePagePushWithParams () {	
// 跳转到应用内的某个页面	
router.push({	
uri: '/heroDetail',	
params: {	
detaiId: this.$item.hero_id	
}	
})	
}

该路径跳转为heroDetail下的index.ux的文件，

 

子组件在接收时注意定义属性最好不为null（否则会出现未知错误）

 

例

protected: {	
detaiId: ""（正确）	
detaiId: null（错误）	
}

 

10. list瀑布流(不理想)

 

布局:

 

方案1: list中嵌套两个list-item，list-item中用block循环对应数组中数据。

缺点:

list不支持justify-content样式。

页面出现卡顿。

 

方案2: div中嵌套两个list，block循环list-item来展示数据。

缺点:

div不能实现页面滚动。

左右list会独立滚动。

 

方案3: list中设置属性columns:2，list-item显示数据信息。

缺点:

无法区分两侧数据。

每个list-item高度相同。

 

方案4: list中嵌套一个list-item，list-item中用div分为左右两列列表，div中block循环对应数组中数据。

缺点:

页面卡顿。

第一页内容显示正常，但之后的内容显示不全。

js: 先定义两个数组，遍历数据根据后台返回的高度来判断添加到哪个数组中。

 

总结:

list内子元素只能单方向滚动，不能换行。

list、list-item中不可再次嵌套list。

暂不支持瀑布流

list-item的type属性是优化list的关键。

block会被当做透明标签处理，调试时不显示。

 

11. swiper中多个图片加载

 

如果很长很长图片加载时出现图片模糊、被放大（初次加载时出现）

部分机型(小米)出现一些图片被切割现象。（不可恢复）

部分机型（华为、oppo）滑动过快，出现图片被切割现象，重新加载可以还原页面。有可能是手机渲染的问题。

 

12. 图片编辑

文档中图形图像目录下，对图片的操作不能操作网络上的图片。

否则会报202（参数错误）

uri格式为uri:'internal://tmp/abc.jpg'

 

13. 页面调试

 

最初调试时注意版本号以及是否在同一网段。如果手机电脑都使用一个wifi。但是电脑安装了360wifi等，则会改变网段。请注意必须在同一网段。调试时会出现页面突然崩掉，重新加载即可。

 

当你npm run watch页面不更新时，重新npm run build的会显示你的错误。出现安装失败，确定代码没问题，就清理一下测试机。

 

14. 变量

 

问题1：在block循环中直接使用".length",可显示length前内容的长度。 例: {{$item.thumb_img.length}}

 

问题2：当点击图片跳转该图片详情页时，routePagePushWithParams中可直接打印出当前点击图片下的详情信息

 

html：

<block	
for="{{imgListMsg}}" @click="routePagePushWithParams">	
<text class="text-title">{{$item.title}}</text>	
</block>

js:

routePagePushWithParams () {	
console.log(this.$item.title)	
// 跳转到应用内的某个页面	
router.push({	
uri: '/cosImgDetail',	
params: {	
detailName: this.$item.title,	
}	
})	
}

 

15. css样式问题

 

html

<text for="value in	
$item.reply_list">	
<span>用户名称</span>	
用户内容	
</text>

当给span添加样式时，会覆盖text的样式

解决办法：给span添加class，不是直接span标签。

 

16. richtext 样式不可被覆盖

 

<richtext type="html" class="skillCon" >	
{{description}}	
</richtext>

richtext解析返回的html数据。样式不可被覆盖更改。需要单独给html更改新的颜色等，不可实现。

 

17. if使用和判断

 

<div	
class="topPic" if="{{$item.iconList !='' &&	
$item.iconList != null }}" 	
@click="routewebdetail" >	
<div class="smallPic"	
for="{{$item.iconList}}">	
<!-- 图片 -->	
<image	
src="{{$item.icon}}"  class="imgImg"	
></image>	
</div>	
</div>

出现报错

 

 

原因是，列表中尽量少使用if判断，如果使用了。必须保证type值相同的结构type唯一，如果列表中可能出现不同的type则可能报错。最好的解决办法是，使type值不唯一。

 

解决办法：type="product-{{ listItem.iconList.length }}-{{ listItem.coverList.length }}"

 

18. 分享问题

 

分享问题请注意，申请回来的key。注意将value值放入到manifext.json。模式是

 

 

如果platform只有一个，比如只有微信。点击分享的时候，会直接分享到微信页面，不会调起弹框。如果需要有其他额外的操作在分享页，可以制作假的点击按钮，逐个分享。

 

19. swiper中暂时不支持list组件

 

处理办法，如果需要滑动操作，则使用tabs中放入list组件。

swiper 1040+已新增纵向滑动，如果需要纵向布局，可以考虑。

 

20. list中图片不能占满全屏处理

 

list作为最大的外层容器，内部的background-image或者image如果不设置高，height：100%；撑不开元素。

 

处理办法：给image设置固定的px高度，如果要图片占满全屏，则device.getInfo可以获取设备的高，将获取的高给到list-item内的image设置高度。可以占满全屏。目前不确定是否有兼容性问题。

 

如果只有一张固定背景图，而不是list渲染图片，则可以给最大的节点设置背景图，可以占满全屏。

 

21. div下image设置问题

 

如果div下直接有一个image。div设置宽60px高60px，image同样设置宽高60，最后渲染的结果可能是60*60，60*61，61*60,59*59，会有1像素的问题。目前还是待解决。

 

感谢大家阅读这边文章。希望大家能提出宝贵的意见，希望我们能共同见证快应用的成长，享受快应用所带来的极致体验。

写在最后

在去年的开发者大赛征文中，我们通过多个社区联合活动收集了很多优质文章，有入坑指南、开源项目、开发模板、常见问题总结等多个方面，这些内容为很多开发者提供了参考，感谢大家的支持和参与，今年的我们的征文活动还在继续，感兴趣的开发者可以点阅读原文查看详情哦！

 

快应用生态平台

赋能开发者 

拓展场景未来

快来关注我们吧