# xcx-91

**Repository Path**: ifercarly/xcx-91

## Basic Information

- **Project Name**: xcx-91
- **Description**: 小程序学习~~~~~~~~~
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-06-26
- **Last Updated**: 2023-06-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 01. 小程序和网页的区别是什么？

宿主环境不一样，网页是浏览器，小程序是微信软件（小程序中不能操作 DOM）；

支持能力不一样，小程序中能直接使用支付、直播、蓝牙、定位等功能...

开发方式不一样，小程序要使用自己的微信开发者工具，有自己的一套上线的流程...

## 02. 公司开发小程序第一步要干嘛？

把自己的微信号给老大，让自己的老大把你添加为开发者。

你再次扫码登录的时候，能直接登录公司主体的小程序的后台，获取到 AppID，开发小程序。

## 03. 小程序当中的组件？

view、text、`swiper/swiper-item`、image、navigator...

## 04. 小程序中的注意点？

- 字体图标和背景图片只支持线上的或 base64，不支持本地的。
- 事件传参：通过 data-* 去传递，通过 e.target.dataset.* 去接收。
- 小程序中修改数据必须通过 setData 才是响应式的。
- 小程序把宽度划分了 750rpx，如果设计师给你提供的设计稿是 750，只需要量多少就写多少 rpx。
- 属性绑定注意和 Vue 的区别，例如 `<input value="{{msg}}"/>`，双向绑定 `<input model:value="{{msg}}"/>`。

## 05. 小程序页面的组成部分？

wxml、wxss、js、json...

配置文件：app.json（全局的）、页面.json（局部的）

## 06. 上线流程？

提交开发版本 => 选为体验版本（可以把相关人员设置为体验成员） => 提交审核版本 => 审核通过会出现**发布按钮** => 点击按钮发布。

## 07. 你和后端是怎么对接的？后端是怎么给你提供接口文档的?

`SwaggerUI`：后端生成接口文档的一个框架。

`Apifox`

## 08. 说一下小程序中的生命周期？

有三大分类，分别是应用级别的、页面级别的、组件级别的。

应用级别的：onLaunch（小程序启动，只触发一次）、onShow（后台进前台，可以通过参数获取场景值）、onHide...

页面级别的：onLoad（页面开始加载就会触发，只触发一次，一般获取参数）、onShow（看见页面就会触发）、onReady（渲染完毕触发）、onHide、onUnload（navigateTo 并不会触发卸载，redirectTo 才会触发）

[组件级别的](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html)：created（这里面不能调用 setData，一般通过 this 挂载数据）、attached（组件已经挂载好了，可以调用 setData，发请求...）

## 09. 内置 API？

`wx.request()`，发请求，域名要在小程序的后台配置好。

`wx.uploadFile()`，上传文件的，域名要在小程序的后台配置好。

`wx.showLoading()/wx.hideLoading()`

`wx.showToast()`

`wx.setStorageSync()、wx.getStorageSync()、wx.removeStorageSync()、wx.clearStorageSync()`

## 10. 头像和昵称的获取？

==注意：调试基础库的版本必须在 2.21.2 之上==

获取头像。

```bash
1. 把 button 的 open-type 属性值置为 chooseAvatar
2. 监听 button 的 chooseavatar 事件
```

```html
<button open-type="chooseAvatar" bind:chooseavatar="回调函数"></button>
```

获取昵称。

```bash
1. 设置 input 的 type 属性值为 nickname
2. 监听 input 的 change 事件，在 change 回调里面就可以拿到用户信息。
```

```html
 <input type="nickname" bind:change="getUserNickName" />
```

## 11. 页面跳转？

两个分类：编程式（通过写 JS 代码）和声明式（标签）。

**1\. **`wx.navigateTo()`，会形成历史记录，类似 vue-router 的 $router.push()。

```html
<!-- open-type 的默认值就是 navigate -->
<navigator open-type="navigate"></navigator>
```

2\. `wx.redirectTo()`，会替换当前页面，不会形成历史记录，类似 vue-router 的 $router.replace()。

```html
<navigator open-type="redirect"></navigator>
```

3\. `wx.navigateBack()`，返回，通过 navigateTo 过来的才能返回。

```html
<navigator open-type="navigateBack"></navigator>
```

**4\. **`wx.switchTab()`，跳转到 tabBar 页面。

```html
<navigator open-type="switchTab"></navigator>
```

5\. `wx.reLaunch()`，干掉所有的历史记录。

```html
<navigator open-type="reLaunch"></navigator>
```

## 12. 自定义构建？

`project.config.js`

```json
{
    "setting": {
        ...
        // #2 开启手动构建
        "packNpmManually": true,
        "packNpmRelationList": [{
            // #3 找 package.json
            "packageJsonPath": "./package.json",
            // #4 构建的结果放到哪
            "miniprogramNpmDistDir": "./miniprogram"
        }],
        ...
    },
    "libVersion": "2.19.4",
    // #1 自定义小程序的根目录
    "miniprogramRoot": "miniprogram/",
    "appid": "wx3eb80995b7e84924",
    "projectname": "mpdemo",
}
```

## 13. 自定义组件？

第一步：创建组件。

第二步：注册组件。

局部，页面.json。

```
{
  "usingComponents": {
    "authorization": "/components/authorization/authorization"
  }
}
```

全局，`app.json`。

```json
{
  "usingComponents": {
    "authorization": "/components/authorization/authorization"
  }
}
```