微信Weui教程

weui-实战项目整体框架的制作教程

时间:2018/12/20 14:57:48  作者:互联网  来源:网络转载  查看:7597  评论:0
内容摘要:官方weui框架的weui.wxss放置于根目录style目录下,菜单图片位置根目录weixin里。app.json代码{  "pages":[    "pages/01jichuzujian/index&qu...

官方weui框架的weui.wxss放置于根目录style目录下,菜单图片位置根目录weixin里。

app.json代码

{

  "pages":[

    "pages/01jichuzujian/index"

  ],

  "window":{

    "backgroundTextStyle":"light",

    "navigationBarBackgroundColor": "#eee",

    "navigationBarTitleText": "WeUI-Wxss:讲师黄菊华",

    "navigationBarTextStyle":"black"

  },

  "tabBar":{

    "list":[

        {

          "pagePath": "pages/01jichuzujian/index",

          "text": "基础组件",

          "iconPath": "weixin/b-off.png",

          "selectedIconPath": "weixin/b-on.png"

        },

        {

          "pagePath":"pages/02biaodan/index",

          "text":"表单",

          "iconPath":"weixin/a-off.png",

          "selectedIconPath":"weixin/a-on.png"

        },

 

        {

          "pagePath": "pages/03caozuofankui/index",

          "text": "操作反馈",

          "iconPath": "weixin/c-off.png",

          "selectedIconPath": "weixin/c-on.png"

        }

        ,

        {

          "pagePath": "pages/04daohang/index",

          "text": "导航相关",

          "iconPath": "weixin/d-off.png",

          "selectedIconPath": "weixin/d-on.png"

        }  

        ,

        {

          "pagePath": "pages/05sousuo/index",

          "text": "搜索相关",

          "iconPath": "weixin/e-off.png",

          "selectedIconPath": "weixin/e-on.png"

        }                   

    ]

  }

}

app.wxss代码

@import 'style/weui.wxss';

page{

    background-color: #F8F8F8;

    font-size: 16px;

    font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;

}

.page__hd {

    padding: 10px;

}

.page__bd {

    padding-bottom: 40px;

}

.page__bd_spacing {

    padding-left: 15px;

    padding-right: 15px;

}

.page__ft{

    padding-bottom: 10px;

    text-align: center;

}

.page__title {

    text-align: left;

    font-size: 20px;

    font-weight: 400;

}

.page__desc {

    margin-top: 5px;

    color: #888888;

    text-align: left;

    font-size: 14px;

}

效果图如下

  weui-实战项目整体框架的制作教程



欢迎大家学习我的视频课程:微信小程序-WeUI界面布局设计入门到精通

  Weui项目的引用

相关评论
评论者:      验证码:  点击获取验证码
本类推荐
咨询QQ/微信:45157718 点击这里给我发消息 | 电话:13516821613 | 浙江杭州余杭区东港路118号雷恩科技创新园 | 网站支持:杭州摇亿网络科技 | 浙ICP备06056032号-6 |