刚接触快应用，只能说，就是个大坑，好气人，不想说话了，全程都在调样式，还不知道样式为何超出预想(今日 2019-9-10)
css样式，样式无法继承
1.不支持绝对定位，相对定位
快应用中只支持fixed固定定位，不支持绝对定位
display也只支持flex和none两种布局
想要达到绝对定位的效果，可以用stack层叠组件来实现，但是，有意料之外的样式布局
关于overflow
不支持overflow属性，但是支持text-overflow
文本超出省略可以使用下面的代码
/* lines 用于控制行数，超过多少行则显示省略号 */
lines: 1;
text-overflow: ellipsis;
*background支持rgba，背景色使用16进制，必须使用全称，如#ffffff不能简写成#fff
background-color: #ffffff;
animation和transform
这两个属性都不能动态的使用，只能在css中写死，比如，animation中的动画持续时间，在style中使用变量是无法实现的，tranform也是一样
4.css不支持nth-child选择器，导致我的页面的最后的元素都没有预期的效果，最后的子元素无法去掉margin，无法去掉border，气人啊...
2.组件，标签
text组件
所有的文本节点必须使用text、span来包裹，使用div无法显示
在text中使用text-align：center无法居中
文本的样式必须设置在对应的text标签上才能生效
使用list
使用list组件实现列表渲染，同时，这个组件能达到上拉加载的效果，但是，使用list会导致在真机上布局出现高度只有一个list-item的高度
{{ item.vr_title }}
{{ item.shopname }}
没有更多了~
虽然官方文档中说最好不要开启scrollpage，但是，我这里要是不开启，list组件就只有一个list-item的高度，即使list能够滚动，可能我布局有点问题，但是没有找到原因
使用input输入框
使用输入框输入完成后，无法自动的收起输入法，要手动调用focus方法
/* inputBox为输入框id */
this.$element('inputBox').focus({focus:false});
3.接口
在快应用中，每个接口的使用都需要在manifest.json中进行声明
上传图片
这里因为官方提供的上传图片接口不会对图片进行压缩，需要自己调用接口进行压缩，而我后端中限制了图片的大小，导致拍照上传图片一直报502，这里虽然没有进入后台中自己定义的方法，应该是有点像那个路由拦截器一样，先报502，而不进入后台中的自己定义的方法
import media from '@system.media'
import request from '@system.request'
import image from '@system.image'
/* 对图片进行压缩处理 */
image.compressImage({
/* uri 图片地址，可以是数据文件或应用内的资源。如果是应用内资源，必须使用绝对路径 */
uri: filePath,
/* quality 图片的压缩质量，0-100 之间，默认是 75 */
quality: 80,
/* radio 尺寸压缩倍数，必须大于 0，尺寸会变为原图的 1/ratio 大小 */
radio: 2,
/* format 图片保存格式，支持 JPEG，PNG，WEBP 三种格式。默认使用 JPEG 格式 */
format: 'JPEG',
success: data => {
consoel.log(data);
},
fail: function(data, code) {
console.log(`handling fail, code = ${code}`)
}
})
/* 图片上传 */
request.upload({
url: '',
method: 'post',
/* 要上传的文件列表，name对应的是服务器端中form表单的名字 */
files: [
{
uri: filePath,
name: 'file'
}
],
header: {
'Content-Type': 'multipart/form-data; charset=UTF-8'
},
success: file => {
console.log(file)
},
fail: (data, code) => {
}
})
在真机调试中要进行打印，需要在manifest.json中开启
"config": {
"logLevel": "debug",
},
页面跳转
使用router进行跳转时，直接在跳转后的页面接收参数，如
router.push({
uri: 'pages/index?id=1'
})
在跳转后的页面接收参数则直接使用this.id
但是这个id字段需要是唯一的
router中跳转的路径和vue中的router是差不多的，直接使用的是router中的path，而不是和微信那样，跳转的是页面对应的路径
router还能直接跳转外部链接
锚点定位
使用list来实现，但是他是利用索引值来实现，有点坑
{{item}}
{{items.key}}
{{item.city}}
export default {
data() {
return {
sortWord: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
address: [
{
"key": "A",
"item": [{
"city": "\u5b89\u5e86",
"N": "30.31",
"E": "117.02",
"firststr": "A"
}, {
"city": "\u6fb3\u95e8\u5e02",
"N": "21.33",
"E": "115.07",
"firststr": "A"
}]
},
{
"key": "B",
"item": [{
"city": "\u868c\u57e0",
"N": "32.56",
"E": "117.21",
"firststr": "B"
}, {
"city": "\u5df4\u4e2d",
"N": "31.51",
"E": "106.43",
"firststr": "B"
}]
},
{
"key": "C",
"item": [{
"city": "\u5de2\u6e56",
"N": "31.36",
"E": "117.52",
"firststr": "C"
}, {
"city": "\u6ec1\u5dde",
"N": "32.18",
"E": "118.18",
"firststr": "C"
}]
}],
scrollToView: 'a',
showWord: false,
}
},
onInit() {
},
/* 排序字母的点击事件 */
handleScroll(item, index) {
this.scrollToView = item;
this.showWord = true;
/* 利用scrollTo来实现锚点定位 */
this.$element('list').scrollTo({ index: index })
setTimeout(() => {
this.showWord = false;
}, 2000)
},
}
.areaIndex{
padding: 15px 13px;
width: 100%;
.sortWord{
position: fixed;
display: flex;
width: 25px;
right: 6px;
top: 56px;
flex-direction: column;
.wordContainer{
display: flex;
height: 550px;
flex-direction: column;
.sortItem{
width: 100%;
height: 25px;
line-height: 25px;
text-align: center;
.wordText{
font-size: 15px;
color: #6ab3d1;
}
}
}
}
.areaList{
display: flex;
margin-top: 50px;
height: 100%;
flex-direction: column;
.cityContainer{
display: flex;
flex-direction: column;
}
.sort, .sortCityItem{
height: 30px;
line-height: 30px;
font-size: 15px;
}
}
.word{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
flex: 1;
justify-content: center;
}
.wordName{
margin-top: 200px;
width: 80px;
height: 80px;
line-height: 80px;
font-size: 40px;
text-align: center;
background-color: rgba(0, 0, 0, .4);
color: white;
border-radius: 4px;
}
.listItem{
display: flex;
flex-direction: column;
}
}
正在努力学习中，若对你的学习有帮助，留下你的印记呗(点个赞咯^_^)
3827
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
