uniapp引入uview的ui库
一. 项目的创建
1.使用hbuilder创建项目
在新建中选择项目的选项
2.创建uniapp的项目
建议 选择默认模板
3.创建完成后的项目结构
二 . uview的代码导入到项目
1.找到uview的官网—找到安装[hbuild安装方式]
可以使用下方的网址
https://www.uviewui.com/components/install.html
2.进入下载地址
3.导入uview的UI库
4.选择要导入的项目
5.导入后的项目结构变化
三 . 项目中注册uview的功能
1.点击安装配置
在uview 官网的安装中选择 hbuild方式
点击在注意中的 安装配置
2.scss的配置
2.在main.js中引入 js库
//项目中的 main.js 文件
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)
3.引入scss的变量
//项目中的 uni.scss文件 添加 [在最后的文件]
@import '@/uni_modules/uview-ui/theme.scss';
4.引入uview的样式库
//在 项目的app.vue 文件 添加
<style lang="scss">
/*每个页面公共css */
@import "@/uni_modules/uview-ui/index.scss";
</style>
5.可忽略的配置
可以不做这一步
四 .项目中使用
1.在uview 找到所需的组件代码
3.把组件代码添加到项目
4.运行项目
可以选择 运行--->运行浏览器---->选择过个浏览器[如果没有需要配置]
5.查看uview组件效果
此时 你就可以使用uview的库进行开发了
希望你看到这篇文章
不要觉得很长 –大都是图片
_
看完 你就会加深了解了
五 .小功能介绍
1.按下键盘 F12–找到console
2.粘贴下面的代码到控制台
var a=document.createElement("p")
a.style.position="fixed"
a.style.top="0"
a.style.left="0"
a.style.zIndex="99999999999"
a.style.width="100%"
a.style.height="14px"
a.style.backgroundColor= '#4158D0';
a.style.backgroundImage='linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%)';
var sp=document.createElement("span")
a.appendChild(sp)
sp.style.float="right"
sp.style.width="50px"
sp.style.height="14px"
sp.style.color="#fff"
sp.style.fontSize="10px"
sp.style.lineHeight="14px"
sp.style.borderRadius="2px"
sp.style.backgroundImage='linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)';
document.body.appendChild(a)
window.onscroll=function(en){
var cur=document.documentElement.scrollTop/(document.documentElement.scrollHeight-document.documentElement.clientHeight)
a.style.width=(cur*100).toFixed(2)+"%"
sp.innerText=(cur*100).toFixed(2)+"%"
}
3.再按下键盘 F12 推出
4.滚动鼠标 –surprised
版权声明:本文为preserveXing原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。