# wepl

**Repository Path**: yutaocangku/wepl

## Basic Information

- **Project Name**: wepl
- **Description**: uniapp框架模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-06-08
- **Last Updated**: 2023-09-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

1.uniapp框架+uview-ui 1.x H5快速开发模板
[ui地址](https://www.uviewui.com/guide/demo.html)  
2. 全局navBar的使用(如需编译成小程序,则不能使用挂载全局方式,微信小程序不支持此编译,具体见截图)
```vue
//1.在template标签中引入NavBar标签，NavBar标签的高度为90rpx
<template>
	<view class="content" url="/" type="redirectTo">
		<NavBar title="关于我们"></NavBar>
		<view class="content">
			Hello world !
		</view>
	</view>
</template>
//2.我们可以在NavBar标签中设置属性，
    2.1 title：设置标题的属性，
    2.2 url：设置返回按钮跳转的路径，如果不设置将返回上一级，但是前提需要跳转过来的页面要保留
    所以在我们跳转后需要返回上一个页面那么跳转方式需要采用uni.navigateTo而不是uni.redirectTo（默认返回上一级）
	2.3 type：跳转的方式（默认返回上一级）
	2.4 textColor：导航栏文本颜色（默认白色）
	2.5 backgroundColor：导航背景颜色（默认黑色）
//3.在NavBar里可以设置右边显示的元素，使用插槽进行添加元素(还可以根据项目需求自定义navbar)
```

2. 默认头像的使用(解决后端返回 头像为空 报错)

```vue
//处理后端返回的头像图片地址为null或为空，使用v-defaultAvatar属性，值为后端返回的头像图片地址
<img v-defaultAvatar="img" alt="">
```

2. 环境配置(全局环境配置 env.js  此配置无需重启项目即可替换api请求/方便热更新)

```javascript
//开发环境位置 /common/environment/env.dev.js
//生产环境位置 /common/environment/env.prod.js
//获取环境中配置的值：process.uniEnv.[配置的值的key]
```

4. 调用接口(调用u-view框架,封装axios请求挂载全局使用)

```js
//位置 /common/http/http.api.js
//添加接口 安装实例添加
//使用接口 在/pages/tabbar/home/index.vue 文件中有对应例子
```

5. 注意 (此配置为默认配置,无需修改)

```js
// /static/images/common/ 文件夹中的图片请勿删除修改
```
6.配置app启动vuex持久化用户信息存储,无需用户每次登录
```vue
位置   //store/index.js
```
7.为了初始化编译到小程序,tabBar需要内置两个(已配置首页和关于)
```
位置  
//pages/tabbar/about  关于页面
//pages/tabbar/home  首页
```
8.导航栏适配微信小程序平台胶囊高度(新增vuex获取方式)
```
提供多种获取方式: 具体可查看utils/getHeight.js方法,vuex获取方式在app.js中,可根据具体业务去除
具体使用方法: components/navbar/index中
在获取不到的机型情况下
h5端默认是40,微信端默认38,也可自定义修改
```
9.封装公众号h5登录和小程序登录方法(login页面)
```
h5登录方法在utils/getCode.js文件中,方便随时copy使用
登录页面具体查看login文件/对h5和小程序登录做了条件编译
```