微信小程序使用weui设计界面

微信小程序使用weui设计界面

刚入门微信小程序开发，使用微信web开发者工具，对界面的设计有时会有按钮等的位置大小不好设置，但是微信web开发者工具有一个很好的工具是weui，WeUI 是一套同微信原生视觉体验一致的基础样式库，为微信 Web 开发量身设计，可以令用户的使用感知更加统一，包含button、cell、dialog、toast、article、icon等各式元素。weui 我们只需要他的样式，引入微信UI库即可，对weui的内容可以在官网上看到很详细的介绍，在使用时需要对其中的代码进行修改，下面是我的小程序中对基础组建panel中图文组合列表的使用：

Marker.wxml

<view class="page">

    <text class="t1">---采收记录---</text>

    <view class="weui-panel weui-panel_access">

        <view class="weui-panel__bd">

                <navigator url="" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">

                    <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">

                        <image class="weui-media-box__thumb" src="/image/icon20.jpg"></image>

                    </view>

                    <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">

                        <view class="weui-media-box__title">名称</view>

                        <view class="weui-media-box__desc">编号： 日期： 可采收数量： 单价： </view>

                    </view>

                </navigator>

                <navigator url="" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">

                    <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">

                        <image class="weui-media-box__thumb" src="/image/icon20.jpg"></image>

                    </view>

                    <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">

                        <view class="weui-media-box__title">名称</view>

                        <view class="weui-media-box__desc">编号： 日期： 可采收数量： 单价： </view>

                    </view>

                </navigator>

                <navigator url="" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">

                    <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">

                        <image class="weui-media-box__thumb" src="/image/icon20.jpg"></image>

                    </view>

                    <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">

                        <view class="weui-media-box__title">名称</view>

                        <view class="weui-media-box__desc">编号： 日期： 可采收数量： 单价： </view>

                    </view>

                </navigator>

            <navigator url="" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">

                    <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">

                        <image class="weui-media-box__thumb" src="/image/icon20.jpg"></image>

                    </view>

                    <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">

                        <view class="weui-media-box__title">名称</view>

                        <view class="weui-media-box__desc">编号： 日期： 可采收数量： 单价： </view>

                    </view>

                </navigator>

            <navigator url="" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">

                    <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">

                        <image class="weui-media-box__thumb" src="/image/icon20.jpg"></image>

                    </view>

                    <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">

                        <view class="weui-media-box__title">名称</view>

                        <view class="weui-media-box__desc">编号： 日期： 可采收数量： 单价： </view>

                    </view>

                </navigator>

        </view>

        <view class="weui-panel__ft">

            <view class="weui-cell weui-cell_access weui-cell_link">

            <view class="weui-cell__bd">查看更多</view>

            <view class="weui-cell__ft weui-cell__ft_in-access"></view>

            </view>

        </view>

    </view>

</view>