微信小程序使用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>
微信小程序使用weui设计界面相关推荐
- 企业公司微信小程序 毕业设计 课程设计 界面欣赏
- 微信小程序(WeUI框架)
因为小程序的api描述都比较简单,并没有wxml及wxss的描述,有的人可能会想小程序有没有一个UI库.类似于前端中的常见的UI库例如Bootstrap.MDUI(简称MD).Semantic UI( ...
- 26.微信小程序(WeUI框架)
微信小程序(WeUI框架) 前言 前言: 因为小程序的api描述都比较简单,并没有wxml及wxss的描述,有的人可能会想小程序有没有一个UI库.类似于前端中的常见的UI库例如Bootstrap.MD ...
- 【微信小程序】微信小程序中WeUI的使用
首先来看下WeUI的介绍: WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一. 在微信小程序的开发过程中,涉及到的前端复 ...
- 微信小程序引入WeUI
WeUI 为微信小程序量身设计的UI库 一.前言 在做微信小程序的时候就想着找一个UI库,方便我们前端开发,然后查找资料,发现了这个WeUI特别适合放在微信小程序里.下面就简单的了解一下.WeUI是一 ...
- 微信小程序:WeUI一个专为微信小程序设计的UI框架
WeUI是什么 WeUI 是一套同微信原生视觉体验一致的基础样式库.由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.它最初是为了给在微信端页面提供一致的视觉体验而开发开源 ...
- 基于微信小程序的菜谱设计毕业论文
微信小程序的菜谱设计毕业论文 随着"互联网+"的大潮兴起,平台型应用再受热捧.其中,微信小程序凭借其强大的用户基础及其应用时的便捷而深受欢迎.在此基础上,以小程序为载体的社群电商, ...
- 微信小程序使用WeUI入门教程
微信小程序使用WeUI入门教程 在学习微信小程序过程中,很多组件的样式需要自己调整,且很多不是我们想要的样子.所以找到了WeUI这样的扩展组件库,预览了组件库,真的非常nice! 但是找不到怎么去引用 ...
- 微信小程序消息模板设计及实现
本文以微信小程序内置的两个模板:购买成功和评论回复提醒为例来阐述第三方微信小程序平台的设计. 小程序端 微信用户支付成功后,微信服务通知中会收到支付成功服务提醒.见下图: 商家端 用户完成评价后,商家 ...
- 微信开发者工具 wxmi修改模版颜色_网站建设公司讲解:微信小程序的开发者工具界面...
网站建设公司深圳市博纳网络信息技术有限公司()讲解:微信小程序的开发者工具界面 创建项目后,进入到微信开发者工具界面,界面大致可以分为6个区域:①菜单栏区域,②模拟器.编辑器.调试器显示与隐藏区域,③ ...
最新文章
- python流程控制语句-Python流程控制语句详解
- android后台获取view,android – 如何获取当前显示在AdapterView中的项目?
- Quartz.Net - Lesson 1: 使用Quartz
- 利用SQL对数据进行清洗处理
- Jenkins配置Findbugs做源代码安全扫描
- 加密Spring加载的Properties文件
- Java通讯录管理系统使用线性表任务台程序
- Service Mesh服务网格:8种方式简化微服务部署
- 利用dao传值给mysql_koa+mysql+vue+socket.io全栈开发之数据访问篇
- android开发(4) 闪屏的实现
- java 坦克大战_java课程设计之坦克大战
- Bootstrap 导航栏设置
- EXPRESS语言与IFC体系
- I. 知识图谱 应用案例 --- 百度
- WPF中直接打开网页方法总结
- 新手演讲:走上演讲台的第一步
- 【ChatGPT】又一款类ChatGPT工具,讯飞星火认知,不用魔法,现在申请马上就能通过
- 致远项目管理SPM系统进度控制之进度对比分析
- 下拉菜单html菜鸟教程,Bootstrap 下拉菜单
- BGP MPLS 单域实验及排错思路