柚媚网络营销培训

柚媚网络营销培训



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


作者:虎雕 日期:2018-09-29 04:54:06

这几天网上最火的科技圈内容,非百度智能小程序莫属,但是,很多都是新闻报道类的,或者是前景展示预判类的,而源码示例的非常少,即使有,也是复制粘贴官方开发文档的,实在可恶!我们今天来点实际的公司展示这类百度智能小程序开发源码示例。

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

 



评论列表:
发表评论:

昵 称:

内 容: