# uniapp2303

**Repository Path**: connerljlx_admin/uniapp2303

## Basic Information

- **Project Name**: uniapp2303
- **Description**: 2303班uniapp
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-11-14
- **Last Updated**: 2023-11-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 项目目录分析

```
pages // 存储 页面  遵循 vue单文件组件
static 存储开发静态资源  tabbar icons
unpackage  解压包 （存储的是 源码打包后的代码）
App.vue 根目录  
main.js  入口文件
mainfest.json app配置文件 
pages.json  项目开发配置
```

# easycom规范

uniapp 自动引入组件的规范  符合这个规范 组件就可以免引入 直接使用

1 自定义组件  路径 components/组件/组件.vue   components/common-head/common-head.vue

2 安装第三方组件  uni_modules

# 多端 兼容问题

uniapp 一套代码 开发多个平台，  不同平台 代码存在兼容问题， 页面交互方式，可以调用api等等都不一样

在一个项目或者某个 页面， 写多个代码，判断平台 让执行不同代码



条件编译：

​	判断代码所处环境，条件符合 则代码运行 否则不运行

本质作为注释存在 （条件符合 代码运行，条件不符合变成注释）



+ 判断符合某个条件

```
# ifdef 条件
	代码
# endif
```



+ 判断不符合某个条件

```
# ifndef 条件
	代码
# endif
```

<table><thead><tr><th style="text-align: left;">值</th> <th style="text-align: left;">生效条件</th> <th style="text-align: left;">版本支持</th></tr></thead> <tbody><tr><td style="text-align: left;">VUE3</td> <td style="text-align: left;">uni-app js引擎版用于区分vue2和3，<a href="https://ask.dcloud.net.cn/article/37834" target="_blank" rel="noopener noreferrer">详情<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></td> <td style="text-align: left;">HBuilderX 3.2.0+</td></tr> <tr><td style="text-align: left;">UNI-APP-X</td> <td style="text-align: left;">用于区分是否是uni-app x项目 <a href="#UNI-APP-X">详情</a></td> <td style="text-align: left;">HBuilderX 3.9.0+</td></tr> <tr><td style="text-align: left;">uniVersion</td> <td style="text-align: left;">用于区分编译器的版本 <a href="#uniVersion">详情</a></td> <td style="text-align: left;">HBuilderX 3.9.0+</td></tr> <tr><td style="text-align: left;">APP</td> <td style="text-align: left;">App</td> <td style="text-align: left;"></td></tr> <tr><td style="text-align: left;">APP-PLUS</td> <td style="text-align: left;">uni-app js引擎版编译为App时</td> <td style="text-align: left;"></td></tr> <tr><td style="text-align: left;">APP-PLUS-NVUE或APP-NVUE</td> <td style="text-align: left;">App nvue 页面</td> <td style="text-align: left;"></td></tr> <tr><td style="text-align: left;">APP-ANDROID</td> <td style="text-align: left;">App Android 平台 <a href="#UTS">详情</a></td> <td style="text-align: left;"></td></tr> <tr><td style="text-align: left;">APP-IOS</td> <td style="text-align: left;">App iOS 平台 <a href="#UTS">详情</a></td> <td style="text-align: left;"></td></tr> <tr><td style="text-align: left;">H5</td> <td style="text-align: left;">H5（推荐使用 <code>WEB</code>）</td> <td style="text-align: left;"></td></tr> <tr><td style="text-align: left;">WEB</td> <td style="text-align: left;">web（同<code>H5</code>）</td> <td style="text-align: left;">HBuilderX 3.6.3+</td></tr> <tr><td style="text-align: left;">MP-WEIXIN</td> <td style="text-align: left;">微信小程序</td> <td style="text-align: left;"></td></tr> <tr><td style="text-align: left;">MP-ALIPAY</td> <td style="text-align: left;">支付宝小程序</td> <td style="text-align: left;"></td></tr> <tr><td style="text-align: left;">MP-BAIDU</td> <td style="text-align: left;">百度小程序</td> <td style="text-align: left;"></td></tr> <tr><td style="text-align: left;">MP-TOUTIAO</td> <td style="text-align: left;">抖音小程序</td> <td style="text-align: left;"></td></tr> <tr><td style="text-align: left;">MP-LARK</td> <td style="text-align: left;">飞书小程序</td> <td style="text-align: left;"></td></tr> <tr><td style="text-align: left;">MP-QQ</td> <td style="text-align: left;">QQ小程序</td> <td style="text-align: left;"></td></tr> <tr><td style="text-align: left;">MP-KUAISHOU</td> <td style="text-align: left;">快手小程序</td> <td style="text-align: left;"></td></tr> <tr><td style="text-align: left;">MP-JD</td> <td style="text-align: left;">京东小程序</td> <td style="text-align: left;"></td></tr> <tr><td style="text-align: left;">MP-360</td> <td style="text-align: left;">360小程序</td> <td style="text-align: left;"></td></tr> <tr><td style="text-align: left;">MP</td> <td style="text-align: left;">微信小程序/支付宝小程序/百度小程序/抖音小程序/飞书小程序/QQ小程序/360小程序</td> <td style="text-align: left;"></td></tr> <tr><td style="text-align: left;">QUICKAPP-WEBVIEW</td> <td style="text-align: left;">快应用通用(包含联盟、华为)</td> <td style="text-align: left;"></td></tr> <tr><td style="text-align: left;">QUICKAPP-WEBVIEW-UNION</td> <td style="text-align: left;">快应用联盟</td> <td style="text-align: left;"></td></tr> <tr><td style="text-align: left;">QUICKAPP-WEBVIEW-HUAWEI</td> <td style="text-align: left;">快应用华为</td> <td style="text-align: left;"></td></tr></tbody></table>
1 在template写条件编译

```html
<!--#ifdef H5-->
代码
<!--#endif-->
```

2 js中

```js
                                // #ifdef H5
				代码
				// #endif
```

3 css中

```css
    /*#ifdef MP-WEIXIN*/
	.box{
		width: 200px;
		height: 200px;
		background-color: #aa0000;
	}
	/*#endif*/
```

# 封装请求函数

问题？

​	使用uniapp 开发 多个平台 比如 小程序 app 和 h5，app和小程序 都是直接跨域请求，  而 h5同源策略限制，配置反向代理

baseURL: app和小程序 直接 加源， 而h5  需要是/api

# uniapp登录

app

登录方案：

​	1 普通登录 用户名密码 短信验证码

​	2 联合登录  微信联合登录 qq联合登录 微博联合登录   一键登录

​	过程：

​		需要去登录开放平台注册账号 登录app 包 各种信息

​		https://uniapp.dcloud.net.cn/tutorial/app-oauth.html#

​	问题：

​		在真机预览时，使用默认基座预览，默认基座 包名 安全码 sha1 和开放平台注册 包信息不一致 （导致 报错）， （只要用到第三方，注册账号登录包 信息），都需要 自定义一个基座 进行真机预览





app 账号密码登录

微信 一键授权登录