uni-app + uView 实战练习：社区团购商城（一）

前言

入门一个新框架最好是直接上手实战，那么我们就尝试开始做一个社区团购商城吧
准备：掌握Vue基础语法，HbuildX开发工具，uView UI 框架
uView 是专门为uni-app开发的一套ui框架,个人觉得比官方模板，colorui都要好用太多了。

创建项目

首先下载hbuildx工具：hbuildx官网
然后下载uview-cli代码包：下载地址
下载后直接解压，把文件夹拖入到hbuildx中即可
然后点击工具栏->运行->运行到浏览器->Chrome
等待编译完成就可以看到界面了

预览首页

// pages/index/index.vue

<template>
    <view>
        hello, world
    </view>
</template>

就是这么简单
页面路由配置全部在pages.json文件中，做过小程序的应该发现这里的配置项几乎一模一样，

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uView-center"
            }
        },
         ... 
],
"globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uView",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
}, ...

下面我们来找几个底部导航素材，注意静态图片需要放到static文件目录中

"tabBar": {
        "color": "#909399",
        "selectedColor": "#ff7410",
        "borderStyle": "black",
        "backgroundColor": "#ffffff",
        "list": [{
            "pagePath": "pages/index/index",
            "iconPath": "static/tab/shouye.png",
            "selectedIconPath": "static/tab/selected/shouye.png",
            "text": "首页"
        }, {
            "pagePath": "pages/category/category",
            "iconPath": "static/tab/quanbu.png",
            "selectedIconPath": "static/tab/selected/quanbu.png",
            "text": "分类"
        }, {
            "pagePath": "pages/cart/cart",
            "iconPath": "static/tab/gouwuche.png",
            "selectedIconPath": "static/tab/selected/gouwuche.png",
            "text": "购物车"
        }, {
            "pagePath": "pages/my/my",
            "iconPath": "static/tab/wode.png",
            "selectedIconPath": "static/tab/selected/wode.png",
            "text": "我的"
        }]
    }

底部导航

接下来是解决主题颜色的问题，我们一般做项目，ui一般会给我们几个主颜色，这里暂且用橙色作为主色调，那么除了橙色，还有常用的黑白灰，当然，uview已经内置好了，我们可以打开uview-ui文件夹，找到theme.scss，可以看到它定义的一些主题色变量，

$u-main-color: #303133;
$u-content-color: #606266;
$u-tips-color: #909399;
$u-light-color: #c0c4cc;
$u-border-color: #e4e7ed;
$u-bg-color: #f3f4f6;
...

这些我们都可以根据需要进行修改，uview的组件基本上都会有一个type属性，比如 button，我们删掉helloworld，然后输入'<u-' 就会发现列出来一些智能提示，选择button, 这也是uview用起来最舒服的地方，所有组件都直接有提示，简单高效。

<u-button type="primary"></u-button>

输入上面代码，按钮就会显示出来，并且显示的蓝色，
我们把对应的primary主题色全部改掉，换成橙色系

$u-type-primary: #ff7410;
$u-type-primary-light: #ffb285;
$u-type-primary-disabled: #ffb88e;
$u-type-primary-dark: #eb6a0e;

然后页面上的按钮颜色就直接变了，这样一来，我们可以快速的进行换肤操作。
接下来，我们封装一些常用的css，让我们页面写起来更加快速。
我们在根目录创建一个common文件夹，添加main.scss, 并且在App.vue中全局引入，

<style lang="scss">
    @import "uview-ui/index.scss";
    @import "common/main.scss";  // 照着上面这样的形式
</style>

我们把常用的边框，边距，文字颜色，背景色，阴影，圆角，flex布局等等全部写到样式中去，按语义化命名或者按你自己喜欢, 为了各个项目通用，也可以定义为css，不用uview的主题，用css的变量来定义主题色， 可以参考-> uniapp常用样式表

然后我把变量改成跟uview保持一致

body{
    --primary:$u-type-primary;
    --secondary: $u-bg-color;
    --success: $u-type-success;
    --danger: $u-type-error;
    --warning: $u-type-warning;
    --info: $u-type-info;
    --light: $u-light-color;
    --dark: $u-main-color;
    --muted: $u-content-color;
    --white: #fff;
    --borderColor:$u-border-color;
    --lightmuted:$u-tips-color;
}

我不太喜欢在一个页面的标签中，定义多个classname, 然后在style代码块中写样式，往往我们要上下翻好久，特别是页面复杂一点的时候，太麻烦了，有了这个css表，基本上不需要style了，比如

<view class="d-flex j-sa a-center">
        <view class="">
            <u-button type="primary"></u-button>
        </view>
        <view class="">
            <u-button type="primary"></u-button>
        </view>
</view>

一个flex布局很简单，你也可以自定义更方便的，就跟写行内样式差不多，但是更好维护，也不存在优先级冲突。

好了，前期准备工作就这要差不多结束了，下一篇开始写业务组件。