百度小程序 / 快应用使用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、文本分为textspan,其中text相当于h5的<P>span相当于h5的<span>
div中关于文字的样式如font-sizecolor等,需要写在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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值