1.

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

2.

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

3.

Marker.wxml

viewclass"page"textclass"t1"---采收记录---/textviewclass"weui-panelweui-panel_access"viewclass"weui-panel__bd"navigatorurl""class"weui-media-boxweui-media-box_appmsg"hover-class"weui-cell_active"viewclass"weui-media-box__hdweui-media-box__hd_in-appmsg"imageclass"weui-media-box__thumb"src"/image/icon20.jpg"/image/viewviewclass"weui-media-box__bdweui-media-box__bd_in-appmsg"viewclass"weui-media-box__title"名称/viewviewclass"weui-media-box__desc"编号：日期：可采收数量：单价：/view/view/navigatornavigatorurl""class"weui-media-boxweui-media-box_appmsg"hover-class"weui-cell_active"viewclass"weui-media-box__hdweui-media-box__hd_in-appmsg"imageclass"weui-media-box__thumb"src"/image/icon20.jpg"/image/viewviewclass"weui-media-box__bdweui-media-box__bd_in-appmsg"viewclass"weui-media-box__title"名称/viewviewclass"weui-media-box__desc"编号：日期：可采收数量：单价：/view/view/navigatornavigatorurl""class"weui-media-boxweui-media-box_appmsg"hover-class"weui-cell_active"viewclass"weui-media-box__hdweui-media-box__hd_in-appmsg"imageclass"weui-media-box__thumb"src"/image/icon20.jpg"/image/viewviewclass"weui-media-box__bdweui-media-box__bd_in-appmsg"viewclass"weui-media-box__title"名称/viewviewclass"weui-media-box__desc"编号：日期：可采收数量：单价：/view/view/navigatornavigatorurl""class"weui-media-boxweui-media-box_appmsg"hover-class"weui-cell_active"viewclass"weui-media-box__hdweui-media-box__hd_in-appmsg"imageclass"weui-media-box__thumb"src"/image/icon20.jpg"/image/viewviewclass"weui-media-box__bdweui-media-box__bd_in-appmsg"viewclass"weui-media-box__title"名称/viewviewclass"weui-media-box__desc"编号：日期：可采收数量：单价：/view/view/navigatornavigatorurl""class"weui-media-boxweui-media-box_appmsg"hover-class"weui-cell_active"viewclass"weui-media-box__hdweui-media-box__hd_in-appmsg"imageclass"weui-media-box__thumb"src"/image/icon20.jpg"/image/viewviewclass"weui-media-box__bdweui-media-box__bd_in-appmsg"viewclass"weui-media-box__title"名称/viewviewclass"weui-media-box__desc"编号：日期：可采收数量：单价：/view/view/navigator/viewviewclass"weui-panel__ft"viewclass"weui-cellweui-cell_accessweui-cell_link"viewclass"weui-cell__bd"查看更多/viewviewclass"weui-cell__ftweui-cell__ft_in-access"/view/view/view/view/view