一. 项目的创建

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