在微信开发者工具中，使用WeUI前端美化框架，微信小程序

这里就是将WeUI导入到微信开发者工具中，我并没有使用多少样式，这里只是展示了一下怎么引用
网上有很多的方法，我绝大多数都没看懂，这里就是最简单的将文件导入项目中，然后引用
一、先下载WeUI
这个是下载的GitHub地址：
https://github.com/weui/weui-wxss/
下载完后解压是这个样子的

然后打开src==>style，找到weui.wxss文件

然后复制weui.wxss文件到项目的总目录下

我这里就是Test7里面

二、在app.wxss中配置
我是放在总目录下的，所以这样就行了，

/**app.wxss**/
@import "weui.wxss";

三、实验成果
先上代码

<!-- 充值信息 -->
<view class="weui-panel"><view bindtap='logout' class="weui-cell weui-cell_access" hover-class="weui-cell_active"><!-- 这里之后可以放图标 --><view class="weui-cell__bd weui-cell_primary margin-left-icon"><view class='text-size-09 init-wordspace'>充值信息</view></view><view class="weui-cell__ft weui-cell__ft_in-access"></view></view>
</view>

这个是wxml的页面
这个是没有连接上的样子，代码就写了一个充值信息的，就看看效果，别的没拷

这个是连接后的样子，可以看到在不改变wxss的情况下，仅仅是把app.wxss中加了配置，就改变了样式

因为是配置到全局内的，所以不需要在别的地方额外配一次，都是可以引用的
另外加上两个可以看样式的网址：
这个好像是微信的
https://weui.io
这个和上面那个差不多，不过感觉好看点
http://weui.shanliwawa.top

在微信开发者工具中，使用WeUI前端美化框架，微信小程序相关推荐

微信小程序引入echarts过大最佳解决方案、echarts在微信开发者工具中不跟随滑动、使用echarts控制台提示使用canvas 2d
一.微信小程序引入echarts过大最佳解决方案微信上传时代码包大小限制为2MB,但是当我们引入echarts以后,单echarts代码包已经973KB,因此再结合额外的业务代码以及其他资源很有可能 ...
微信小程序学习（三）：在微信开发者工具中，使用WeUI前端美化框架，微信小程序
微信小程序学习(三):在微信开发者工具中,使用WeUI 这里就是将WeUI导入到微信开发者工具中,我并没有使用多少样式,这里只是展示了一下怎么引用网上有很多的方法,我绝大多数都没看懂,这里就是最简单 ...
将uniAPP项目导入到微信开发者工具中保姆级教程
什么是uniAPP? uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS.Android.Web(响应式).以及各种小程序(微信/支付宝/百度/头条/ ...
在微信开发者工具中实现微信小程序之相机拍照及其相关功能的开发
微信小程序 - 相关知识技术扩展 - 微信小程序 - 相机拍照功能微信开发:前端 + 后端小程序开发 - 准备工作:JavaScript + HTML + CSS 小程序 - 面向微信框架技术开 ...
uniapp如何在真机、手机模拟器、微信开发者工具中运行调试
在之前先讲下一个uniapp的坑: 1.在HBuilderx导入项目时,直接导入项目即可,不要在项目文件夹下导入父目录,这样会识别不到项目类型,就无法用项目相应的运行方式运行了.如下:加了这层父级&q ...
微信开发者工具中导入错误提示请选择含app.json/project.config.json的目录（纪录篇）
是因为每一次 npm run dev:mp-weixin 时都在编译dist/dev下的文件所以在选择目录之前,要先找到自己创建的项目中的app.json文件,然后选择app.json文件的上级目录 ...
解决iview weapp的i-input组件在微信开发者工具中不能输入值的问题
记录下i-input组件在模拟器中不能输入值问题的原因及解决办法最近开始用mpvue框架,所以遇到了一些坑,这篇文章记录下关于input组件的一个坑.老司机请略过. 小程序里做一个登录页,输入手机号 ...
微信开发者工具中使用vant库
构建npm 很多小伙伴在学习微信小程序开发的时候是不是都遇到了构建npm时出现的错误问题,下面我就自己的错误写下我的解决方案. 可能在全局使用npm的时候,能够成功运行"npm i @van ...
微信开发者工具中的版本管理功能搭配gitee使用
前言如果在微信小程序开发过程中需要多个开发者协同开发,或者有保存项目不同版本的需要,那么微信开发者工具中的版本管理功能则是方便所有开发者的一个功能.本文章主要讲述如何使用版本管理功能,将项目文件同步 ...

在微信开发者工具中，使用WeUI前端美化框架，微信小程序

在微信开发者工具中，使用WeUI前端美化框架，微信小程序相关推荐

最新文章

热门文章