首页 > 其他分享 >WeUI的使用

WeUI的使用

时间:2022-11-04 09:01:46浏览次数:86  
标签:样式 代码 weui WeUI 导入 使用 wxss

1)预览WeUI样式

1、下载完成后解压缩后应该是如图界面

2、打开微信开发者工具–>导入项目–>选择类似目录–>点击测试号–>导入

3、等待完全加载完成后,

4、到此为止,我们可以从左边模拟器中选择,我们需要的样式,然后从代码中找到对应代码,然后用粘贴复制法,复制到我们自己项目的相应位置即可。当然还没完,我们自己的项目里还需要把WeUI导入。

2)将WeUI导入自己的项目

1、将如下目录下的weui.wxss,复制到我们的项目根目录下

2、在app.wxss中加入 @import “weui.wxss”;

3、至此我们的项目就可以引用腾讯官方提供的weui样式了。

三、举个栗子

要求:我们想做个如下图这界面怎么办,接下来我们一步步分析

1、去weui哪个预览界面找到差不多的样式,在表单的list界面找到了差不多的样式

2、取代码页面找到该布局,找到了,如下图,复制代码到自己项目相应位置

3、复制完编译后,如下图所示

4、接下来,可以对其进行一些代码修改,如添加图标文件,修改显示文字等

對比一下

标签:样式,代码,weui,WeUI,导入,使用,wxss
From: https://www.cnblogs.com/Sultan-ST/p/16856536.html

相关文章

  • 在 uniapp 项目上使用 uView UI框架
    下载uView插件官方下载地址......
  • springboot如何正确使用tomcat连接池
    原文地址:http://blog.champbay.com/2019/03/29/springboot%E5%A6%82%E4%BD%95%E6%AD%A3%E7%A1%AE%E4%BD%BF%E7%94%A8tomcat%E8%BF%9E%E6%8E%A5%E6%B1%A0/ 在springboot......
  • ipython 的感叹号、问号的使用
    目录使用感叹号!运行Shell命令使用一个感叹号!运行赋值编码使用两个感叹号!!运行编码赋值注意使用问号?获取帮助使用一个问号?使用两个问号??使用*做模糊查询......
  • less编译工具koala(考拉)和rem的使用
    1.使用rem的前提是要提前设置好页面的根节点的大小:(两种选择任意一种即可)(1).在body中设置font-size:16px(2).<script>(function(){varhtml=......
  • 电脑网页版使用方法
    1.先打开美国官方网站:https://www.raz-plus.com/2.点击右侧绿色按钮(KIDSLOGIN)  3.输入教师码(旺上发您),进入班级  4.进入班级后,按照学生名(旺上发您)选择指定的......
  • iPhone/iPad使用方法
    1.先下载KidsA-ZappiPhone/iPad-直接在AppStore下载安卓-请联系店主下载 2.打开app,在这里填入教师码(旺上发您),再按右边的绿色箭头,进入班级  3.进入班级......
  • 对于 emlog pro 目前 avatar 头像不显示的问题,暂时使用这个方法解决
    avatar头像cdn不稳定,目前emlog官方还没有放出更新包。因此,现在使用JS的方式暂时解决。代码如下<script>constavaUrl='https://cravatar.cn/avatar/'functio......
  • 《会计学》的会计分录使用逻辑(2020年12月写)
    《会计学》的会计分录使用逻辑前言参考《​​会计分录的记忆​​​》、《​​会计分录大全​​》以及我之前写的《​​《会计学》的简单了解​​》、《​​《会计学》期中总......
  • bootstrap-select的使用
    引入css<linkrel="stylesheet"href="{%static'plugin/bootstrap-select/css/bootstrap-select.min.css'%}">引入js<scriptsrc="{%static'plugin/bootstrap-sel......
  • Vivado使用指南之:三、如何设置VIVADO压缩BIT文件
      在调试VIVADO 过程中,由于生成的BIT文件过大,而我使用的FLASH又是32MBIT的,出现了FLASH过小,无法烧录的情况。网上搜索到的方法都是说“generateprogammingfile下会有......