# uniapp-shops

**Repository Path**: Nsir/uniapp-shops

## Basic Information

- **Project Name**: uniapp-shops
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-08-25
- **Last Updated**: 2021-09-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


https://www.escook.cn/docs-uni-shop/mds/3.home.html#_3-2-1-%E8%AF%B7%E6%B1%82%E8%BD%AE%E6%92%AD%E5%9B%BE%E7%9A%84%E6%95%B0%E6%8D%AE

> https://www.showdoc.com.cn/128719739414963?page_id=2513235043485226 这是以前小程序的所有接口  在这里面完全可以适用  有需要的 可以用这个


## 起步

安装 scss/sass 编译

```
https://ext.dcloud.net.cn/plugin?name=compile-node-sass
```

### 目录结构

```
┌─components            uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置小程序的全局样式、生命周期函数等
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
└─pages.json            配置页面路径、页面窗口样式、tabBar、navigationBar 等页面类信息
```

### 将项目运行在 微信开发者工具

1. 填写自己的小程序id

![](/doc/weChat1.png)

2. 配置微信开发者工具的路径

![](/doc/weChat2.png)

3. 在微信开发者工具中，通过 设置 -> 安全设置 面板，开启“微信开发者工具”的服务端口.
4. 在 HBuilderX 中，点击菜单栏中的 运行 -> 运行到小程序模拟器 -> 微信开发者工具，将当前 uni-app 项目编译之后，自动运行到微信开发者工具中，从而方便查看项目效果与调试


> 注意：由于我们忽略了 unpackage 目录中仅有的 dist 目录，因此默认情况下， unpackage 目录不会被 Git 追踪

> 此时，为了让 Git 能够正常追踪 unpackage 目录，按照惯例，我们可以在 unpackage 目录下创建一个叫做 .gitkeep 的文件进行占位


### git管理

初始化git步骤省略。

新建 tabbar 分支，

```
git checkout -b tabbar
```

然后修改完成之后：

```
git add .
git commit -m "完成了 tabBar 的开发"
git push -u origin tabbar

git checkout master
git merge tabbar
```

删除本地的 tabbar分支

```
git branch -d tabbar
```

## 首页

### 配置网络请求

小程序项目中不支持 axios,原生的`wx.request`不支持拦截器等全局定制功能。这里使用 `@escook/request-miniprogram`第三方进行网络请求。

>官方文档：https://www.npmjs.com/package/@escook/request-miniprogram

在 main.js 中如下方式配置

```
import { $http } from '@escook/request-miniprogram'

uni.$http = $http
// 配置请求根路径
$http.baseUrl = 'https://www.uinav.com'

// 请求开始之前做一些事情
$http.beforeRequest = function (options) {
  uni.showLoading({
    title: '数据加载中...',
  })
}

// 请求完成之后做一些事情
$http.afterRequest = function () {
  uni.hideLoading()
}
```



### 配置小程序分包

分包可以减少小程序首次启动的加载时间。我们在项目中，把 tabBar 相关的 4 个页面放到主包中，其它页面（例如：商品详情页、商品列表页）放到分包中

1. 项目根目录下创建分包根目录： subPackages
2. `pages.json`中，和 `pages`节点平级的位置声明`subPackages`节点：

```
"subPackages":[{
		"root":"subPackages",
		"pages":[]
	}],
```
3. 在 subPackages 目录下，新建页面：

![](/doc/subpackages.png)