Uni-app+uView实践：社区群购物中心（一）

前言

启动新框架的最佳方式是直接开始实战，所以让我们尝试建立一个社区群购物中心

准备：掌握Vue基本语法、HbuildX开发工具、uView UI框架

UView是一套专门为uni app开发的UI框架。就个人而言，它比官方模板和colorui要好得多。

创建项目

首先下载hbuildx工具：

然后下载uview-cli代码包：

下载后，直接解压缩并将文件夹拖到hbuildx中

然后单击工具栏->运行->运行到浏览器->Chrome

编译后可以看到界面

预览主页

这是一个每日的问候世界，

//页面/索引/索引.vue

<模板>

<视图>

你好，世界

就这么简单

页面路由配置都在页面中。json文件。那些做过小程序的人应该会发现这里的配置项目几乎相同，

“Pages”：[//页面数组中的第一项表示App启动页面，请参阅：https://uniapp.dcloud.io/collocation/pages

{

“路径”：“页面/索引/索引”，

“样式”：{

“navigationBarTitleText”：“uView中心”

}

},

...

],

“globalStyle”：{

“navigationBarTextStyle”：“黑色”，

“navigationBarTitleText”：“uView”，

“navigation BarBackgroundColor”：“#F8F8F8”，

“backgroundColor”（背景颜色）：“#F8F8F8”

}, ...

现在让我们找到一些底部导航材料。请注意，静态图像需要放在静态文件目录中

“选项卡栏”：{

“颜色”：“#909399”，

“selectedColor”：“#ff7410”，

“borderStyle”：“黑色”，

“backgroundColor”：“#ffffff”，

“列表”：[{

“pagePath”：“pages/index/index”，

“iconPath”：“static/tab/shouye.png”，

“selectedIconPath”：“static/tab/selected/shouye.png”，

“文本”：“主页”

}, {

“pagePath”：“页面/类别/类别”，

“iconPath”：“static/tab/quanbu.png”，

“selectedIconPath”：“static/tab/selected/quanbu.png”，

“文本”：“分类”

}, {

“pagePath”：“页面/购物车/购物车”，

“iconPath”：“static/tab/gouwuche.png”，

“selectedIconPath”：“静态/tab/selected/gouwuche.png”，

“文本”：“购物车”

}, {

“pagePath”：“pages/my/my”，

“iconPath”：“static/tab/wode.png”，

“selectedIconPath”：“static/tab/selected/wode.png”，

“文本”：“我的”

}]

}

底部导航

底部导航正常，但它是固定的，无法动态加载。如果需要动态加载，您必须使用定制的底部导航并自己处理路由跳转逻辑。uview框架附带了这个解决方案。请参阅->

这也是UI的优点，它基本上考虑了常见的问题。

此模板将暂时使用固定导航模式。

下一步是解决主题颜色的问题。我们通常做项目。UI将为我们提供几种主要颜色。这里，我们暂时使用橙色作为主要颜色。然后，除了橙色，还有常用的黑色、白色和灰色。当然，UView已经内置。我们可以打开UViewUI文件夹，找到主题。scss，并查看它定义的一些主题颜色变量，

$u-main-color:#303133；

$u-content-color:#606266；

$u-tips-color:#909399；

$u-light颜色：#c0c4cc；

$u-border-color:#e4e7ed；

$u-bg-color:#f3f4f6；

...

我们可以根据需要修改这些。Uview组件基本上有一个类型属性，比如按钮。我们删除helloworld并输入“

<；/u按钮>

输入上面的代码，按钮将显示为蓝色，

我们将所有对应的主主题颜色更改为橙色

$u-type-primary:#ff7410；

$u-type-primary-light:#ffb285；

$u-type-primary-disabled:#ffb88e；

$u-type-primary-dark:#eb6a0e；

然后页面上按钮的颜色直接改变，这样我们就可以快速改变皮肤。

接下来，我们封装一些常见的css以使页面更快。

我们在根目录中创建一个公用文件夹，并添加主Scss，