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、接下来,可以对其进行一些代码修改,如添加图标文件,修改显示文字等
對比一下