# 小程序

**Repository Path**: rainsparse/applet

## Basic Information

- **Project Name**: 小程序
- **Description**: uni-app 项目
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-05-23
- **Last Updated**: 2022-08-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: uni-app

## README

# uni-app - 小程序

> git命令
```bash
git branch # 查看分支
git checkout -b 分支名  # 创建并切换分支
git push -u origin 分支名 # 提交分支到远程
git checkout 分支名 # 切换分支
git merge 分支 # 合并分支
git branch -d 分支名 # 删除分支(需要切换到其他分支)
```

## 项目配置
### 创建项目
```bash
点击新建填写项目信息
  选中uni-app
  模板uni-ui项目
  
项目目录
  ┌─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 等页面类信息
```

### 把项目运行到开发者工具
```bash
进入manifest.json
选中微信小程序配置填写ID
点击 - 菜单栏设置 - 运行配置 - 小程序运行配置 输入微信开发者地址 
在微信开发者中 设置 - 安全 - 服务端口打开
点击 - 菜单栏运行 - 运行到小程序模拟器 - 微信开发者工具
```

## 功能 
### tabBar
```json
"tabBar": {
    // tabBar字体选中颜色
    "selectedColor": "#C00000",
    "list": [
      {
        "pagePath": "pages/home/home",
        "iconPath": "static/tab_icons/home.png",
        "selectedIconPath": "static/tab_icons/home-active.png",
        "text": "首页"
      }
    ]
  },
```
### navigationBarTitleText不显示
> 每一次新建页面,都会定义一个style, 里面设置的值是空, 删除即可
```json
{
    "path": "pages/home/home",
    "style": {
      "navigationBarTitleText": "", // 这里
      "enablePullDownRefresh": false
    }
```
### 配置网络请求
> npm install @escook/request-miniprogram
```js
import { $http } from '@escook/request-miniprogram'
// 顶级对象uni 给uni.$http赋值 每个页面都可以发起请求
uni.$http = $http
// 配置请求根路径
$http.baseUrl = 'https://www.uinav.com'

// 请求开始之前做一些事情
$http.beforeRequest = function (options) {
  // uni项目 推荐使用uni.API方法  wx的api都可以同uni访问
  
  uni.showLoading({
    title: '数据加载中...',
  })
  
  if (options.url.indexOf('/home/catitems') !== -1) {
    options.header = {
      'X-Test': 'AAA',
    }
  }
}

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

### Mock
```bash
开发者工具 - 调试器 - mock
API接口 request 
匹配规则 url  接口地址
模拟返回  success
数据生成  数据模板(可以用mock)

占位符 引用的是 Mock.Random 中的方法。
@占位符 @id
@占位符(参数 [, 参数]) @image('200x100', '#FF9900')
```

### 创建分包
```bash
创建分包文件夹 subpkg
在pages.json声明subPackages
--------------------
"subPackages": [
  {
    "root": "subpkg",
    "pages": []
  }
]
---------------------
在subpkg新建文件 分包选中subpkg
```

### 自定义组件
```bash
右键 根目录 components 
创建组件 
勾选同名目录

直接使用即可
```

### swiper 圆角
> 直接改image圆角 会导致圆角先变直角在圆角
> 修改  外层swiper 占满width
>      给swiper  设内边距
>      内存image 居中显示
```css
swiper {
  height: 330rpx;
  width: 100%;
  .swiper-item {
+    padding: 10rpx;
    image {
      width: 100%;
      height: 320rpx;
+      border-radius: 10rpx;
    }
  }
}
```

### 数据存储
```bash
# 取值
uni.getStorageSync('名')
# 存值
uni.setStorageSync('名', JSON.stringify(值))
```

### 数字徽标
```js
onShow() {
   // 在页面刚展示的时候，设置数字徽标
   this.setBadge()
},
methods: {
 setBadge() {
    // 调用 uni.setTabBarBadge() 方法，为购物车设置右上角的徽标
    uni.setTabBarBadge({
       index: 2, // 索引
       text: this.total + '' // 注意：text 的值必须是字符串，不能是数字
    })
  }
}
```

### mixins封装
```js
// 导入自己封装的 mixin 模块, , 可以包含任意组件选项
import badgeMix from '@/mixins/tabbar-badge.js'

export default {
  // 将 badgeMix 混入到当前的页面中进行使用
  mixins: [badgeMix],
  // 省略其它代码...
}
```

### 调用地址API
```js
async chooseAddress(){
  const res = await uni.chooseAddress().catch(err => err)
  console.log(res); // {null, {...}}
}
```

### 去除某个tabbar 右上角小标
```js
uni.hideTabBarRedDot({
  index: 2
})
```

### 获取用户信息弹窗
```js
uni.getUserProfile({
  desc: '登录',
  success: (res) => {
     console.log(res);
  },
  fail: (res) => {
    console.log(res)
  }
});
```