百度小程序 / 快应用使用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的<P>，span相当于h5的<span>，
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