在公司做的一个项目是微信小程序，因为小程序的ui图样式很简单，所以一开始是打算自己写的，但是后面发现有一些功能实现起来很冗杂，所以最终选择了使用微信小程序的ui组件库。
一开始是使用的是VantUi，但是不知道为什么在我的小程序里面跑不起来，所以后来选择使用uView2.x来进行小程序的开发。
具体步骤记录一下！
一、在HBuilder里面新建一个项目
选好存放的位置以及文件命名即可，也可以自己在下面选择vue的的版本，我是用的是vue2
二、配置tabBar和简单的全局样式
打开page.json文件，在里面配置tabBar，底部导航栏
"tabBar": {
"color": "black",//tab上文字默认的颜色
"selectedColor": "#1191ab",//选中后的文字颜色
"borderStyle": "black",//tabBar边框的颜色，仅支持black和white
"backgroundColor": "#ffffff",//tabBar的背景颜色
"list": [{//tabBar的列表
"pagePath": "pages/index/index",//跳转页面的路径
"iconPath": "",//图标路径
"selectedIconPath": "",//选中后的图标路径
"text": "首页"//文字
}]
}
配置一个简单的全局样式
"globalStyle": {
"navigationBarTextStyle": "black",//导航栏标题颜色
"navigationBarTitleText": "uni-app",//导航栏标题文字内容
"navigationBarBackgroundColor": "#F8F8F8",//导航栏背景颜色
"backgroundColor": "#F8F8F8"//导航栏背景颜色
}
三、引入组件库（uViewUI为示例）
介绍 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架
在HBuilder里直接下载uView 2.0X的插件，方便快捷
下载地址：uView2.0重磅发布，利剑出鞘，一统江湖 - DCloud 插件市场
安装好了以后，你的项目目录里面会有一个uni_modules的文件，里面就是下载好的所有的组件
然后根据官网文档进行配置
1.安装sass
uView依赖SCSS，您必须要安装此插件，否则无法正常运行。
如果您的项目是由HBuilder X创建的，相信已经安装scss插件，如果没有，请在HX菜单的 工具->插件安装中找到"scss/sass编译"插件进行安装， 如不生效，重启HX即可如果您的项目是由vue-cli创建的，请通过以下命令安装对sass(scss)的支持，如果已安装，请略过。
// 安装sass
npm i sass -D
// 安装sass-loader
npm i sass-loader -D
2.引入uView主JS库
在项目根目录中的main.js中，引入并使用uView的JS库。
3.在引入uView的全局SCSS主题文件
在项目根目录的uni.scss中引入此文件。
4.引入uView基础样式
在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性
配置完成！
但是官方说明还有最后一步，就是配置easycom组件模式
我们是uni_modules模式引入的组件库，所以不用去配置这一条。
四、具体使用
直接复制官网的代码就好啦！
好文推荐
您阅读本篇文章共花了：
发表评论