# uniapp_template

**Repository Path**: yonggecode/uniapp_template

## Basic Information

- **Project Name**: uniapp_template
- **Description**: uniapp 基于uview和colorUI的移动版本的个人初始化模板，包含了常用的组件和工具函数，即开即用快速初始化项目。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 3
- **Created**: 2020-10-08
- **Last Updated**: 2021-12-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#### 目录结构

    ├─api               封装的接口入口 api           
    ├─colorui           高颜值的 css 组件库
    ├─components        公共组件
    ├─mixin             全局混入
    ├─mock              本地mock文件
    ├─pages             页面文件
    ├─static            静态文件
    │  └─images         图片目录
    ├─store             VueX 根据需求选用
    │  ├─index.js       VueX 入口文件
    │  └─modules        VueX 分模块目录
    ├─utils             工具目录  
    │  ├─http.js        封装的请求
    │  └─paymoney       封装的微信支付
    ├─uview-ui          高性能多平台快速开发的UI框架
    ├─.eslintignore     eslint配置忽略文件
    ├─App.vue
    ├─main.js           主入口
    ├─pages.json        页面配置 
    ├─template.h5.html  h5 模板文件（不要修改）
    ├─uni.scss           
    └─vue.config.js     vue 配置文件

#### 使用说明

**pages.json**

本模板自定义了顶部导航和底部导航。在性能上可能不及原生，但是扩展性和可塑性更强。可根据需要自行选用

``` json
{
    // 全局挂载uView 组件
	"easycom": {
		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
	},
    //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
	"pages": [
		{
			"path": "pages/home/home",
			"style": {
                // navigationBarTitleText 本模板没有用原生的navBar 写不写都行
                // "navigationBarTitleText": "",
                "enablePullDownRefresh": false
			}
		}
    ],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uView",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
        // 设置配置自定义 tabBar
		"navigationStyle": "custom"
	},
	"condition": { //模式配置，仅开发期间生效
		"current": 0, //当前激活的模式(list 的索引项)
		"list": [{
			"name": "", //模式名称
			"path": "", //启动页面，必选
			"query": "" //启动参数，在页面的onLoad函数里面得到
		}]
	}
}

```

**/pages/home/home**

home 页面是入口页面，入口页面做成了单页。底部导航栏的切换通过动态显示组件的形式来展现。

``` html
<template>
	<view class="container">
		<loadingCat v-if="!readyed"></loadingCat>
		<u-navbar v-if="readyed" :is-back="false" :title="title" :background="background" title-color="#ffffff"></u-navbar>
		<view class="main" v-if="readyed" >
			<dog v-show="current === 0"></dog>
			<cat v-show="current === 1"></cat>
			<petFood v-show="current === 2"></petFood>
			<handmade v-show="current === 3"></handmade>
			<center v-show="current === 4"></center>
		</view>
		<u-tabbar 
		v-if="readyed" 
		v-model="current" 
		:list="tabBarList" 
		active-color="#3399CC" 
		inactive-color="#333333" 
		@change="changeTab" 
		height="128"
		icon-size="60"></u-tabbar>
	</view>
</template>

<script>
	import dog from "@v/home/tabBar/dog/dog";
	import cat from "@v/home/tabBar/cat/cat";
	import petFood from "@v/home/tabBar/petFood/petFood";
	import handmade from "@v/home/tabBar/handmade/handmade";
	import center from "@v/home/tabBar/center/center";
    // 加载中动画，根据需求自行更改或者不用
	import loadingCat from "@c/loading_cat";
	export default {
		components: {
			dog,
			cat,
			petFood,
			handmade,
			center,
			loadingCat
		},
		data() {
			return {
				title: '傻狗',
				current: 0,
				readyed:false,
				background: {
					backgroundColor: '#6DABDE',
					// 导航栏背景图
					// background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
					// 还可以设置背景图size属性
					// backgroundSize: 'cover',
					// 渐变色
					// backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				tabBarList: [{
						iconPath: "/static/images/dog.png",
						selectedIconPath: "/static/images/dog.png",
						text: '傻狗',
						count: 2,
						isDot: true,
						customIcon: false,
					},
					{
						iconPath: "/static/images/cat.png",
						selectedIconPath: "/static/images/cat.png",
						text: '懒猫',
						customIcon: false,
					},
					{
						iconPath: "/static/images/petFood.png",
						selectedIconPath: "/static/images/petFood.png",
						text: '宠物粮',
						customIcon: false,
					},
					{
						iconPath: "/static/images/handmade.png",
						selectedIconPath: "/static/images/handmade.png",
						text: '手工制品',
						count: 23,
						isDot: false,
						customIcon: false,
					},
					{
						iconPath: "/static/images/center.png",
						selectedIconPath: "/static/images/center.png",
						text: '我的',
						count: 23,
						isDot: false,
						customIcon: false,
					}
				]
			}
		},
		created() {
            // 模拟资源加载
			setTimeout(()=>{
				this.readyed = true;
			},1500)
		},
		methods: {
            // 切换地板导航栏
			changeTab(index) {
				console.log(index)
				this.current = index;
				this.title = this.tabBarList[index].text;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.main {
		width: 100%;
		padding: 0 30rpx;
	}

	@font-face {
        /* 字体加载 微信小程序上可以全局加载，uni上需要每个页面都引入一次，特别消耗性能。尽可能减少字体包的下载 */
		font-family: "zkklt";
		src: url('https://sungd.github.io/Pacifico.ttf');
	}

	.test {
		font-family: 'zkklt';
		font-size: 60rpx;
	}
</style>
```

**main.js**

``` js
import Vue from 'vue';
import App from './App';
import store from './store';
Vue.config.productionTip = false

App.mpType = 'app'

// 引入全局uView
import uView from 'uview-ui'
Vue.use(uView);

// 全局混入分享
import mixinShare from './mixin/share.js';
Vue.mixin(mixinShare)

const app = new Vue({
    ...App,
    // 挂载vuex
	store
})
app.$mount()
```

**manifest.json**

uni的配置文件，通过 HBuilder 编辑器可使用可视化界面进行配置。