百度智能小程序有排名优势,通过建立大量的百度小程序能够快速占据排名。在开发方面百度智能小程序和微信小程序除了文件命名不同,其他方面几乎相同。遇到问题时,完全可以参考微信小程序的开发文档。
百度智能小程序公司展示类源码示例:
app.json文件
{
"pages": [
"page/index", //百度智能小程序首页
"page/aboutus/aboutus" //关于我们
"page/contactus/contactus", //联系我们
"page/list/list", //文章列表页,行业动态、公司新闻、案例展示、主要业务等的列表页面
"page/details/details", //文章详情页,行业动态、公司新闻、案例展示、主要业务等的单篇图文展示页面
],
"window": {
"navigationBarTextStyle": "white", //导航栏标题颜色,目前仅支持 黑色black和白色white两种颜色
"navigationBarTitleText": "柚媚网络营销培训", //导航栏标题文字内容,这里一般是公司名称,以后的页面可以改为栏目名称
"navigationBarBackgroundColor": "#000", //导航栏背景颜色,注意不要与标题颜色一样或者太接近
"backgroundColor": "#fbf9fe", //背景颜色,注意与导航栏背景颜色、导航栏标题颜色要具有差异却要保持协调
"enablePullDownRefresh": true //是否开启下拉刷新,true为开启,false为不开启
},
"tabBar": {
"color": "#b7b7b7", //tab 上文字的默认颜色
"selectedColor": "#00beaf", //tab 上的文字选中时的颜色
"borderStyle": "white", //tabBar 边框颜色,仅支持 黑色black和白色white 两种,默认值为 black
"backgroundColor": "#f2f2f2", //tab 的背景色
"list": [{ //tab 的列表,列表个数2~5个
"pagePath": "page/index/index", //已在 pages 中定义的页面路径;类型:String;必填项
"iconPath": "image/12.png", //图片路径,icon 大小限制为40kb,建议尺寸为 78px*78px,不支持网络图片;类型:String;可以没有
"selectedIconPath": "image/11.png", //选中时的图片路径,icon 规格同上;类型:String;非必填项。当 position 为 top 时,不显示 icon
"text": "首页" //tab上显示的文字信息;类型:String;必填项
}, {
"pagePath": "page/aboutus/aboutus",
"iconPath": "image/22.png",
"selectedIconPath": "image/21.png",
"text": "关于"
}, {
"pagePath": "page/list/list",
"iconPath": "image/42.png",
"selectedIconPath": "image/41.png",
"text": "资讯"
}, {
"pagePath": "page/contactus/contactus",
"iconPath": "image/32.png",
"selectedIconPath": "image/31.png",
"text": "联系"
}]
},
"networkTimeout": { //网络超时设置,可以没有
"request": 10000,
"connectSocket": 10000,
"uploadFile": 10000,
"downloadFile": 10000
},
"debug": false //调试模式,上线时为false,调试时为true
}
app.js文件
App({
onLaunch: function () { //监听小程序是否启动
console.log('App Launch') //上线时去掉,调试时查看的,不去掉好像也没什么大碍
},
onShow: function () { //监听小程序是否显示
console.log('App Show') //上线时去掉
},
onHide: function () { //监听小程序是否隐藏
console.log('App Hide') //上线时去掉
},
globalData: { //公有化数据,设置为全局变量,可以跨页面调用,在其它页面用的js文件里用var app=getApp()
hasLogin: false //默认是没有登录
}
})
app.css
根文件下可以没有这个文件,但是为了工程化和代码复用减少重复劳动,可以在这里写上通用的样式文件,然后在其它页面的css文件中用 @import 语句导入这个 CSS 文件,对需要改动的地方重新设置覆盖就可以了。
//页面
page {
background-color: #fbf9fe;
height: 100%;
}
//容器
.container {
display: flex;
flex-direction: column;
min-height: 100%;
justify-content: space-between;
}
//页面头部
.page-header {
display: flex;
font-size: 32rpx;
color: #aaa;
justify-content: center;
margin-top: 50rpx;
}
.page-header-text {
padding: 20rpx 40rpx;
border-bottom: 1px solid #ccc;
}
//页面主体
.page-body {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
flex-grow: 1;
overflow-x: hidden;
}
.page-body-wrapper {
margin-top: 100rpx;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.page-body-wrapper form {
width: 100%;
}
.page-body-wording {
text-align: center;
padding: 200rpx 100rpx;
}
.page-body-info {
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
margin-bottom: 50rpx;
width: 100%;
padding: 50rpx 0 150rpx 0;
}
.page-body-title {
margin-bottom: 100rpx;
font-size: 32rpx;
}
.page-body-text {
font-size: 30rpx;
line-height: 26px;
color: #ccc;
}
.page-body-text-small {
font-size: 24rpx;
color: #000;
margin-bottom: 100rpx;
}
.page-body-form {
width: 100%;
background-color: #fff;
display: flex;
flex-direction: column;
width: 100%;
border: 1px solid #eee;
}
.page-body-form-item {
display: flex;
align-items: center;
margin-left: 10rpx;
border-bottom: 1px solid #eee;
height: 80rpx;
}
.page-body-form-key {
width: 180rpx;
}
.page-body-form-value {
flex-grow: 1;
}
.page-body-form-picker {
display: flex;
justify-content: space-between;
height: 100rpx;
align-items: center;
font-size: 36rpx;
margin-left: 20rpx;
padding-right: 20rpx;
border-bottom: 1px solid #eee;
}
.page-body-form-picker-value {
color: #ccc;
}
.page-body-buttons {
width: 100%;
}
.page-body-button {
margin: 25rpx;
}
.page-body-button image {
width: 150rpx;
height: 150rpx;
}
//页面底部
.page-footer {
text-align: center;
color: #1aad19;
font-size: 24rpx;
margin: 20rpx 0;
}
//颜色
.green{
color: #09BB07;
}
.red{
color: #F76260;
}
.blue{
color: #10AEFF;
}
.yellow{
color: #FFBE00;
}
.gray{
color: #C9C9C9;
}
.strong{
font-weight: bold;
}
.bc_green{
background-color: #09BB07;
}
.bc_red{
background-color: #F76260;
}
.bc_blue{
background-color: #10AEFF;
}
.bc_yellow{
background-color: #FFBE00;
}
.bc_gray{
background-color: #C9C9C9;
}
//文字对齐
.tc{
text-align: center;
}
//输入框
.page input{
padding: 10px 15px;
background-color: #fff;
}
//选择
checkbox, radio{
margin-right: 5px;
}
//按钮
.btn-area{
padding: 0 15px;
}
.btn-area button{
margin-top: 10px;
margin-bottom: 10px;
}
//页面其它细节
.page {
min-height: 100%;
flex: 1;
background-color: #FBF9FE;
font-size: 16px;
font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
overflow: hidden;
}
.page__hd{
padding: 40px;
}
.page__title{
display: block;
font-size: 20px;
}
.page__desc{
margin-top: 5px;
font-size: 14px;
color: #888888;
}
//区块
.section{
margin-bottom: 40px;
}
.section_gap{
padding: 0 15px;
}
.section__title{
margin-bottom: 8px;
padding-left: 15px;
padding-right: 15px;
}
.section_gap .section__title{
padding-left: 0;
padding-right: 0;
}
.section__ctn{
}
百度智能小程序根目录下面没有swan文件,如果有通用的模版,可以jianl 一个template文件夹,把通用模版放在这里,用import或者include引用。