柚媚网络营销培训

柚媚网络营销培训



百度智能小程序开发第3课:详解app.js和app.css文件的编写


作者:虎雕 日期:2018-09-26 16:51:44

这个文件是逻辑实现页面,根目录这个比较简单,用app()注册一个小程序,在里面写上七个生命周期元素的全部或者部分即可。七个属性见下图。


来一个例子:

App({

  onLaunch: function () { },

  onShow: function () { },

  onHide: function () { },

  globalData: {

    hasLogin: false

  }

})

 

根目录的js文件最简单的就是上面这种,在app()里面写三个函数,至少要有一个onLaunch,最后用globalData把数据公有化。这个js文件还可以是授权、是否登录检测,以及自定义的全局函数等,但是,我们建议大家在这个文件少写点,因为这个时候小程序还没有生成,如果执行了页面的onload会获取不到相应的值。

最简单的app.js

App({

    onLaunch: function () { }

});

 

App.css的文件同我们平时写CSS样式表一样,可以把通用的容器container、页面page、输入框input、按钮btn等等写在这里。

复制一个列支来大家参考。

.container {

  height: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: space-between;

  padding: 200rpx 0;

  box-sizing: border-box;

}

 

.page{

  box-sizing: border-box;

  margin: 0;

  padding: 0;

  font-family:'Microsoft YaHei', Helvetica, STHeiTi, sans-seri;

  font-size: 28rpx;

  color: #333;

}

 

.view-cell{

    padding: 25rpx 30rpx;

    position: relative;

    display: flex;

    align-items: center;

    background: #fff;

    font-size: 30rpx;

}

.view-cell-line::before{

    content: " ";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 1px;

    border-bottom: 1rpx solid #D9D9D9;

    color: #D9D9D9;

    -webkit-transform-origin: 0 0;

    -ms-transform-origin: 0 0;

    transform-origin: 0 0;

    -webkit-transform: scaleY(0.5);

    -ms-transform: scaleY(0.5);

    transform: scaleY(0.5);

}

.view-cell-primary{

    flex: 1;

}

 

.view-cell-ft{

   text-align: right;

   color: #888;

}

.view-img{

  width: 45rpx;

  height: 45rpx;

  margin-right: 20rpx;

  vertical-align: middle;

}

.view-name{

  vertical-align: middle;

}

 

.view-cell-arrow{

  text-align: right;

  color: #888;

}

.view-cell-arrow::after {

    content: " ";

    display: inline-block;

    -webkit-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

    transform: rotate(45deg);

    height:25rpx;

    width:25rpx;

    border-width: 1px 1px 0 0;

    border-color: #888;

    border-style: solid;

    position: relative;

    top: -2px;

    top: -1px;

    margin-left:30rpx;

}

 

更多相关知识,我们将在 JavaScript教程 CSS教程 给大家讲解,这里就不做过多说明了。



评论列表:
发表评论:

昵 称:

内 容: