You are here

Drupal8+微信小程序:7,使用weUI改进样式

作者:老葛 亚艾元软件

开始的样式比较丑,丑到家了。我仅仅实现了功能,这是最初的样式:

8-2-7-1.png 

8-2-7-1

8-2-7-2.png 

8-2-7-2

   经过搜索查找,微信官方团队提供的weui,作为一个UI框架,效果不错。经过对比,我决定,采用weui提供的CSS代码,作为一个起点。

我用的是weui针对小程序的版本,项目地址:https://github.com/Tencent/weui-wxss/

可以在https://weui.io/在线的查看效果。我先是看了一下weui提供的所有示例,然后对照我自己的小程序,看可以用到哪个效果。有点使用bootstrap这类框架的意思。找好了以后,套上去,个别地方加上自己的CSS调整。

引入weui.wxss,将下载下来的weui-wxss里面的weui.wxss文件复制到我们的项目的根目录下面:

8-2-7-3.png 

8-2-7-3

    修改app.wxss文件,在头部增加以下代码:

@import 'weui.wxss';

 

page{

    background-color: #F8F8F8;

    font-size: 16px;

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

}

 

.page__hd {

    padding: 5px;

text-align:center;

}

.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: center;

    font-size: 20px;

    font-weight: 400;

}

 

.page__desc {

    margin-top: 5px;

    color: #888888;

    text-align: left;

    font-size: 14px;

}

.weui-cells{

  margin-top:0px;

}

 

.container {

  height: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: space-between;

  padding: 200rpx 0;

  box-sizing: border-box;

}

我把示例里面的wxss代码部分也都拷贝了进来。

参考微信UI的示例代码,改造。Wxml文件。

 

news.wxml为例:

原来:

<view>

  <view wx:for="{{items}}">

            <navigator url="/pages/news/newsitem?nid={{item.nid}}" >

                <view>{{item.title}}</view>

            </navigator>

</view>

</view>

改进后:

<view>

    <view>

        <view>{{title}}</view>

    </view>

    <view>

        <view class="weui-cells weui-cells_after-title">

    <view wx:for="{{items}}" class="weui-cell weui-cell_access" hover-class="weui-cell_active">

            <navigator url="/pages/news/newsitem?nid={{item.nid}}" >

                <view>{{item.title}}</view>

            </navigator>

</view>

        </view>

    </view>

</view>

这是改进后的效果:

8-2-7-4.png 

8-2-7-4

样式满意了,可能不完美,但是对于我这样的程序员,来说,够用就好。

 

将其它页面,也都改为weui提供的结构,比如新闻详细页面:

newsitem.wxml:

<view>

    <view>

        <view>{{node.title}}</view>

 

    </view>

    <view>

        <view>

  <import src="../../wxParse/wxParse.wxml"/>

 

          <template is="wxParse" data="{{wxParseData:article.nodes}}"/>

        </view>

    </view>

</view>

 


Drupal版本: