小程序

位置:IT落伍者 >> 小程序 >> 浏览文章

百度智能小程序公司展示类源码示例:根文件


发布日期:2018年12月23日
 
百度智能小程序公司展示类源码示例:根文件

百度智能小程序有排名优势,通过建立大量的百度小程序能够快速占据排名。在开发方面百度智能小程序和微信小程序除了文件命名不同,其他方面几乎相同。遇到问题时,完全可以参考微信小程序的开发文档。

百度智能小程序公司展示类源码示例:

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引用。


上一篇:没有了

下一篇:百度智能小程序页面传值类似url值的get方式