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

本期作者：执着的烙印

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

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

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

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

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像素的问题。目前还是待解决。

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

写在最后

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

快应用生态平台

赋能开发者

拓展场景未来

快来关注我们吧

快应用的用法和常见问题解答（下）相关推荐

快应用的用法和常见问题解答（上）
写在前面在去年的开发者大赛征文中,我们通过多个社区联合活动收集了很多优质文章,有入坑指南.开源项目.开发模板.常见问题总结等多个方面,这些内容为很多开发者提供了参考,感谢大家的支持和参与,今年的我们 ...
服务器常见的安装系统,12G/13G/14G服务器操作系统安装常见问题解答（上）
目录: 1. 系统安装完成之后安装驱动常见问题 2. 13G服务器为什么在UEFI 模式下安装Windows Server2008R2SP1后,显示黑屏或空白屏幕 ? (13G only) 3. 13 ...
Microsoft .NET Compact Framework 开发常见问题解答 - 专注.NET技术及其相关应用开发！ - 博客园...
Microsoft .NET Compact Framework 开发常见问题解答发布日期: 3/30/2005 | 更新日期: 3/30/2005 Microsoft .NET Compact F ...
Internet Explorer 8 Beta2 常见问题解答
Internet Explorer 8 Beta2 常见问题解答<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:o ...
linux常见问题解答
linux常见问题解答 1．什么是LINUX? LINUX是一个可独立运作的POSIX兼容操作系统,它也包含了SYS V和BSD的功能.它完全是独之发展的,所以其中没有任何有版权问题的代码.LINU ...
ab的plc跟西门子哪个好些_周报61期 | 西门子全系列及博图软件常见问题解答
技成周报:61期 1.通过编程能改变输入或输出端子的功能不? 答:不能,如果该端子功能可以修改,需要在组态里改. 2.两个路由器桥接可以实现PLC无线通信吗? 答:通过路由器及相关设置,可以实现无线通 ...
Unix编程常见问题解答(精华）
Unix编程常见问题解答原帖:http://www.newsmth.net/bbsanc.php?path=%2Fgroups%2Fcomp.faq%2FUnix%2F3%2Ffaq%2FUnixP ...
Unix编程常见问题解答
关于这篇"常见问题解答" ************************ 这篇"常见问题解答" 由Patrick Horgan自一九九六年五月开始起草:因其历 ...
colab常见问题解答
目录 Colaboratory 常见问题解答基础知识 Colaboratory 是什么? 它真的可以免费使用吗? 这有点好得令人难以置信.有什么限制吗? Jupyter 和 Colab 有什么区别? ...

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

快应用的用法和常见问题解答（下）相关推荐

最新文章

热门文章