百度小程序 / 快应用使用nanachi开发注意事项
百度小程序
页面相关:
⚠️ 不要设置全局的margin/padding样式,如:
*{margin: 0; padding: 0}
会导致视频的播放按钮错位
1、scroll-view中不能使用video
解决办法:页面的最外层父级使用div,不使用scroll-view,也可以实现页面滑动的效果
截图自百度小程序开发官网:https://smartprogram.baidu.com/docs/develop/fuctionlist/list/
2、image默认是固定高度,不是按原图宽高比显示
解决办法:官网提供多种模式选择,本次开发中选用mode="widthFix"
宽度固定/高度自适应
https://smartprogram.baidu.com/docs/develop/component/media/#image/
3、渐变写法:
style={{
'background': `linear-gradient( to right, ${this.state.linearConfig[this.state.type][0]}, ${this.state.linearConfig[this.state.type][1]});`
}}
4、横滑组件:
<scroll-view scroll-x={true} scroll-y={false}>
render相关:
1、render中不能调用split等函数
解决办法:在接收到数据后处理好,存入state,render中直接调用
2、render中不能提取出一部分页面到函数中然后调用函数
数据相关:
1、view中不支持0a回车符的显示,会显示成空格
解决办法:里面包一层text(解决办法百度提供)
视频相关:
2、ios上视频错位(暂时未解决)
3、iphone xs max上视频播放不了
解决办法:更新到最新版手百(解决办法百度提供)
快应用
页面相关:
⚠️什么组件使用什么样式请在开发中对照官网查看
https://doc.quickapp.cn/
1、上来先flex-direction: column;
2、最外层父节点是scroll-view
,它的子节点只能是list-item
3、文本分为text
和span
,其中text
相当于h5的
,span
相当于h5的,
div中关于文字的样式如font-size
和color
等,需要写在text子组件css中
4、居中、局下等思路使用flex布局
5、tags的只显示一行实现使用父组件的height / overflow控制(较方便)
6、ellipsis
line-height: 22px;
text-overflow:ellipsis;
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
flex-direction: column;
overflow: hidden;
max-height: 74px;
7、层叠
父组件使用stack,子组件绝对定位
8、span没有background-color
9、view 不能同时设置background-image和background-color。
解决办法,再外面再包一层,添加background-color
10、渐变
style={{
background: JSON.stringify({
'values':[{
'type':'linearGradient',
'directions':['to','right'],
'values':[
`${this.state.linearConfig[this.state.type][0]}`,
`${this.state.linearConfig[this.state.type][1]}`
]
}]
})
}}
11、横向滚动:
<list class="list">
{this.state.infoCards.map((card,index) =>
<list-item>...</list-item>
}
</list>
数据相关:
1、A-B页面中文传参,A页面直接传递变量,B页面获取参数时需要decode