最近开始查看uni-app的一些项目,在pages.json里面发现app-plus。百度了下看见一些网友的解释是app跟h5端执行,小程序则不执行(只测试过微信小程序,据说其他小程序也不执行)。代码如下
{
"path": "pages/index/index",
"style": {
// #ifdef MP /* 微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序 */
"navigationBarTitleText": "Dloud商城",
// #endif
"app-plus": { /* h5端跟app端执行 */
"titleNView": {
"type": "transparent",
"searchInput": {
"backgroundColor": "rgba(231, 231, 231,.7)",
"borderRadius": "16px",
"placeholder": "请输入地址 如:大钟寺",
"disabled": true,
"placeholderColor": "#606266"
},
"buttons": [{
"fontSrc": "/static/yticon.ttf",
"text": "\ue60d",
"fontSize": "26",
"color": "#303133",
"float": "left",
"background": "rgba(0,0,0,0)"
},
{
"fontSrc": "/static/yticon.ttf",
"text": "\ue744",
"fontSize": "27",
"color": "#303133",
"background": "rgba(0,0,0,0)",
"float": "right",
"redDot": true
}
]
}
}
}
}
这时候有些就问为什么微信小程序端banner上面为什么有搜索框,h5跟app端就没有,这时候我们看下pages/index/index.vue 就会发现小程序头部兼容 #ifdef MP,这就解释出为什么会出现搜索框
<!-- #ifdef MP -->
<view class="mp-search-box">
<input class="ser-input" type="text" value="输入关键字搜索" disabled />
</view>
<!-- #endif -->
项目下载链接:https://ext.dcloud.net.cn/plugin?id=200
接下来在看下代码,看看有没有有趣的代码