uniapp使用uview搭建小程序脚手架_uniapp uview 脚手架

接下来将介绍uview如何配置到uniapp项目中
如果你想了解到更详细的文档，进入uview官网查看：http://uviewui.com/components/install.html

首先要去官网下载最新的包 下载地址 http://uviewui.com/components/install.html

官网提供了三种包

第一种方式只有uview源码，这是uview的核心。
第二种方式类似于一个uview项目的脚手架，这是个空项目，但它已经帮我们配置好uview了，所以如果你是一个新的uniapp项目，可以选择下载这个。
方式三是整个uView演示项目，里面有uView核心，组件演示，模板等。此项目运行用于查看UI演示效果，复制模板案例，通过里面的示例，可以快速掌握某一个组件的用法。（可以下载一个，体验uview项目的所有组件与模版）
因为我们是教大家怎么配置一个uview，所以我们下载第一个包。

接下来我们使用HBuilderX创建一个uniapp的项目

创建完成之后，我们将刚刚下载的包(几百k 的那个)，直接复制到项目的根目录下。

因为uview的使用的是scss，所以我们需要使用HBuilderX安装scss的插件。

点击工具，插件安装，找到 scss/sass编译 点击右方的安装

再点击下图红框内的

我的已经安装过，显示下面这个

对HBuilderX的配置就结束了，接下来要对项目进行设置。（分为4步）

一、引入uView主JS库
在项目根目录中的main.js中，引入并使用uView的JS库， 注意这两行要放在import Vue之后。

// main.js
import uView from "uview-ui";
Vue.use(uView);
1
2
3

二、在引入uView的全局SCSS主题文件
在项目根目录的uni.scss中引入此文件。

/* uni.scss */
@import 'uview-ui/theme.scss';
1
2

三、引入uView基础样式
在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性

<style lang="scss">
    /* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
    @import "uview-ui/index.scss";
</style>
1
2
3
4

四、配置easycom组件模式
此配置需要在项目根目录的pages.json中进行。

uni-app为了调试性能的原因，修改easycom规则不会实时生效，
配置完后，您需要重启HX或者重新编译项目才能正常使用uView的功能。 
1
2

// pages.json
{
    "easycom": {
        "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
    },
    
    // 此为本身已有的内容
    "pages": [
        // ......
    ]
}
1
2
3
4
5
6
7
8
9
10
11

到此处，我们已经将uview配置好了，接下来写个示例验证一下

我新建了三个组件，正常下面会自动生成对应的路径，如果没有就手动添加。注意，如果新建后又删除或多建了一层文件夹之类的又删掉的话，注意修改下路径。按下 alt 键把鼠标悬浮在路径上面，路径显示深色即路径正确。

在static文件夹下添加图片，作为程序底部导航栏按钮，

在同级下添加 tabBar

"tabBar":{
		"color":"#808080",
		"selectedColor":"#007AFF",
		"borderStyle":"black",
		"backgroundColor":"#F8F8F8",
		"list":[
			{
				"pagePath":"pages/index/index",
				"iconPath":"static/component.png",
				"selectedIconPath":"static/componentHL.png",
				"text":"首页"
			},{
				"pagePath":"pages/home/home",
				"iconPath":"static/extui.png",
				"selectedIconPath":"static/extuiHL.png",
				"text":"我的"
			},{
				"pagePath":"pages/showpets/showpets",
				"iconPath":"static/extui.png",
				"selectedIconPath":"static/extuiHL.png",
				"text":"展示宠物"
			}
			// ,{
			// 	"pagePath":"pages/appointment/appointment",
			// 	"iconPath":"static/extui.png",
			// 	"selectedIconPath":"static/extuiHL.png",
			// 	"text":"萌宠约会"
			// }
		]
	},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

在运行前先把hbuilder和小程序开发者工具关联起来，忘了，后期百度吧。

成功如图：

把之前下载的demo用hbuilder打开

打开任何一个组件，在里面随意点击下，

点击 运行 … Chrome
稍等会，就自动在浏览器打开了。
按F12

看看喜欢的组件，然后根据名字在hbuilder的demo中找到。我找了表单form的demo，然后点击打开，把里面内容全都拷贝到我的项目里。

点击保存，到小程序开发者工具里即可查看效果。

备注：uniapp小程序没有alert(),直接使用uni.showToast({})和uni.showModal({})

uni.showToast({
	title: '成功跳转...',
	duration: 2000
});

// uni.showModal({
// 	title: '提示',
// 	content: '这是一个模态弹窗',
// 	success: function(res) {
// 		if (res.confirm) {
// 			console.log('用户点击确定');

// 		} else if (res.cancel) {
// 			console.log('用户点击取消');
// 		}
// 	}
// });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

如果想跳转到一个 非 底部导航页面，使用

uni.navigateTo({
  url: '/pages/appointment/appointment?id=1&name=uniapp' 
});
1
2
3

非 底部导航页面不能在 pages.json 的tabBar 里注册

注意pages前面有一个斜杠，后面可以传参数，在即将要跳转到的页面接收即可，

如果想跳转到一个 是 底部导航页面，使用uni.switchTab

uni.switchTab({
 url: '/pages/showpets/showpets?id=1&name=uniapp' 
});
1
2
3

这个不能传参，如果想传参，参考这篇https://blog.csdn.net/ly2983068126/article/details/79931409