微信小程序框架weui的基础使用

2023-07-29 16:47:22

WeUI

你在使用小程序从零开始开发的时候，一定会想小程序有没有一个UI库，类似于前端中的Bootstrap，MD，Semantic UI这样的框架UI库，如果有的话，一定是一个完美的事情。上帝总是宠着我们，这样的好事情真的有，我的答案是weui.wxss。
WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含buttoncell、dialog、progress、toastarticle、actionsheet、icon等各式元素。
在app.wxss内或者需要的页面引入weui.wxss，代码示例如下：
/app.wxss/

@import  'weui.wxss';

根组件使用class="page”，代码示例如下：

<view class="page"> </view>

页头和主体使用class=“page__xx”(注意是两个下划线) ，代码示例如下：

<view class="page">
<view class="page__hd"></view>  <!--页头-->
<!--主体-->
<view class="page__bd"></view>
</view>

其他组件采用weui-xx，例如class = “weui-flex”，代码示例如下：

<view id="{{item.id}}" class="weui-flex" >

组件的子组件样式，
例如weui-flex还有weui-flex__item信息。
注意：子组件样式后面使用的两个下划线，"__"。

实战项目框架的制作

官方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;
}

栏目首页

.wxml文件代码示例如下：

<view class="weui-cells  weui-cells_show "> 

  <navigator url="/pages/01jichuzujian/01-article" class="weui-cell weui-cell_access">
      <view class="weui-cell__bd">article文章</view>
      <view class="weui-cell__ft weui-cell__ft_in-access"></view>
  </navigator>

  <navigator url="/pages/01jichuzujian/02-badge" class="weui-cell weui-cell_access">
      <view class="weui-cell__bd">Badge徽章</view>
      <view class="weui-cell__ft weui-cell__ft_in-access"></view>
  </navigator>

  <navigator url="/pages/01jichuzujian/03-flex" class="weui-cell weui-cell_access">
      <view class="weui-cell__bd">Flex的布局和样式</view>
      <view class="weui-cell__ft weui-cell__ft_in-access"></view>
  </navigator>

  <navigator url="/pages/01jichuzujian/04-grid" class="weui-cell weui-cell_access">
      <view class="weui-cell__bd">Grid九宫格</view>
      <view class="weui-cell__ft weui-cell__ft_in-access"></view>
  </navigator>  

  <navigator url="/pages/01jichuzujian/05-icon" class="weui-cell weui-cell_access">
      <view class="weui-cell__bd">Icon图标</view>
      <view class="weui-cell__ft weui-cell__ft_in-access"></view>
  </navigator> 

  <navigator url="/pages/01jichuzujian/06-loadmore" class="weui-cell weui-cell_access">
      <view class="weui-cell__bd">Loadmore加载更多</view>
      <view class="weui-cell__ft weui-cell__ft_in-access"></view>
  </navigator> 

  <navigator url="/pages/01jichuzujian/07-panel" class="weui-cell weui-cell_access">
      <view class="weui-cell__bd">Panel画板</view>
      <view class="weui-cell__ft weui-cell__ft_in-access"></view>
  </navigator>   

  <navigator url="/pages/01jichuzujian/08-preview" class="weui-cell weui-cell_access">
      <view class="weui-cell__bd">Preview表单预览</view>
      <view class="weui-cell__ft weui-cell__ft_in-access"></view>
  </navigator>   

  <navigator url="/pages/01jichuzujian/09-progress" class="weui-cell weui-cell_access">
      <view class="weui-cell__bd">Progress进度条</view>
      <view class="weui-cell__ft weui-cell__ft_in-access"></view>
  </navigator>     

  <navigator url="/pages/01jichuzujian/10-footer" class="weui-cell weui-cell_access">
      <view class="weui-cell__bd">Footer页脚</view>
      <view class="weui-cell__ft weui-cell__ft_in-access"></view>
  </navigator>    

</view>

.wxss文件代码示例如下：

.weui-cells{
  margin-top:0;opacity:0;
  -webkit-transform:translateY(-50%);
  transform:translateY(-50%);
  -webkit-transition:.3s;transition:.3s
}
.weui-cells:after,.weui-cells:before{
  display:none
}
.weui-cells_show{
  opacity:1;
  -webkit-transform:translateY(0);
  transform:translateY(0)
}
.weui-cell:before{
  right:15px
}

article文章

.wxml文件代码代码如下：

<view class="page"> 
    <view class="page__hd">
        <view class="page__title">Article文章的排版布局</view>
        <view class="page__desc">我是文章的描述信息，这个章节主要讲解布局要使用哪些WXSS的元素</view>
    </view>
    <view class="page__bd">
        <view class="weui-article">
            <view class="weui-article__h1">大标题</view>
            <view class="weui-article__section">
                <view class="weui-article__title">章标题</view>

                <view class="weui-article__section">
                    <view class="weui-article__h3">1.1 节标题</view>
                    <view class="weui-article__p">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                        consequat.
                    </view>
                    <view class="weui-article__p">
                        <image class="weui-article__img" src="/images/pic_article.png" mode="aspectFit" style="height: 180px" />
                        <image class="weui-article__img" src="/images/pic_article.png" mode="aspectFit" style="height: 180px" />
                    </view>
                </view>
                
                <view class="weui-article__section">
                    <view class="weui-article__h3">1.2 节标题</view>
                    <view class="weui-article__p">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </view>
                </view>

            </view>
        </view>
    </view>
</view>

【微信小程序参考资料】

（1）微信小程序学习路线 http://www.hzyaoyi.cn/

（2）Java微信小程序商城系统指导 https://ke.qq.com/course/3066521

（3）PHP微信小程序商城系统指导 https://ke.qq.com/course/3066518

（4）微信官方文档 https://developers.weixin.qq.com/miniprogram/dev/framework/

码农公寓

WeUI

实战项目框架的制作

栏目首页

article文章

相关文章