> For the complete documentation index, see [llms.txt](https://1425816423.gitbook.io/my-knowledge-base/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://1425816423.gitbook.io/my-knowledge-base/jing-yan-ji-lu/jing-yan-zong-jie/kua-duan-xiao-cheng-xu.md).

# 跨端小程序

## 微信小程序

整个小程序框架系统分为两部分：[**逻辑层**](https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/)（App Service）和 [**视图层**](https://developers.weixin.qq.com/miniprogram/dev/framework/view/)（View）。小程序提供了自己的视图层描述语言 `WXML`和 `WXSS`，以及基于 `JavaScript`的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

原生微信小程序的语法和vue非常相似：

```jsx
Page({
  data: { },
  onLoad: function (options) { },
  onReady: function () {},
  onShow: function () { },
  onHide: function () {},
  onUnload: function () {},
  onPullDownRefresh: function () { },
  onReachBottom: function () { },
  onShareAppMessage: function () { }
})
```

```jsx
<view>
	<view>123</view>
	<button bindtap="{{a}}">click</button>
</view>
```

```css
.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
}
.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
}
.text-area {
		display: flex;
		justify-content: center;
}
.title {
		font-size: 36rpx;
		color: #8f8f94;
}
```

## 跨端小程序

uniapp是一款基于vue的跨端小程序开发框架，支持微信小程序、QQ小程序、支付宝小程序和APP。

`uni-app`简单来说是 **vue + 小程序api + 小程序组件 + 条件编译(跨端)**。

### 页面管理

微信小程序页面需要在`app.json`中注册，并且可以设置一些样式。

```jsx
{
	"pages": [{
		"path": "pages/component/index",
		"style": {
			"navigationBarTitleText": "组件"
		}
	}, {
		"path": "pages/API/index",
		"style": {
			"navigationBarTitleText": "接口"
		}
	}, {
		"path": "pages/component/view/index",
		"style": {
			"navigationBarTitleText": "view"
		}
	}],
	"condition": { //模式配置，仅开发期间生效
		"current": 0, //当前激活的模式（list 的索引项）
		"list": [{
			"name": "test", //模式名称
			"path": "pages/component/view/index" //启动页面，必选
		}]
	},
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "演示",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"usingComponents":{
			"collapse-tree-item":"/components/collapse-tree-item"
		},
		"renderingMode": "seperated", // 仅微信小程序，webrtc 无法正常时尝试强制关闭同层渲染
		"pageOrientation": "portrait", //横屏配置，全局屏幕旋转设置(仅 APP/微信/QQ小程序)，支持 auto / portrait / landscape
		"rpxCalcMaxDeviceWidth": 960,
		"rpxCalcBaseDeviceWidth": 375,
		"rpxCalcIncludeWidth": 750
	},
	"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#3cc51f",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"height": "50px",
		"fontSize": "10px",
		"iconWidth": "24px",
		"spacing": "3px",
    "iconfontSrc":"static/iconfont.ttf", // app tabbar 字体.ttf文件路径 app 3.4.4+
		"list": [{
			"pagePath": "pages/component/index",
			"iconPath": "static/image/icon_component.png",
			"selectedIconPath": "static/image/icon_component_HL.png",
			"text": "组件",
      "iconfont": { // 优先级高于 iconPath，该属性依赖 tabbar 根节点的 iconfontSrc
        "text": "\ue102",
        "selectedText": "\ue103",
        "fontSize": "17px",
        "color": "#000000",
        "selectedColor": "#0000ff"
      }
		}, {
			"pagePath": "pages/API/index",
			"iconPath": "static/image/icon_API.png",
			"selectedIconPath": "static/image/icon_API_HL.png",
			"text": "接口"
		}],
		"midButton": {
			"width": "80px",
			"height": "50px",
			"text": "文字",
			"iconPath": "static/image/midButton_iconPath.png",
			"iconWidth": "24px",
			"backgroundImage": "static/image/midButton_backgroundImage.png"
		}
	},
}
```

[pages.json](https://uniapp.dcloud.io/collocation/pages.html)

微信小程序自身维护了一个页面栈，并提供一些API来供开发者调用页面栈。

对于路由的触发方式以及页面生命周期函数如下：

Untitled Database

### 生命周期

#### 页面生命周期

#### 小程序生命周期

挂起阶段需要注意

* 大部分小程序API在挂起阶段会失效
* websocket连接在挂起阶段会被强制中断
* …

**避免挂起**

* onShow/onHide
* 一些特定的小程序API

应用级生命周期

### 微信小程序开发者工具

* 模拟器
* 编辑器
* 调试器
  * 元素
  * 控制台
  * 源码
  * 网络
  * 性能
  * 内存（内存泄漏）
  * AppData （页面的变量）
  * Storage（类似浏览器的Storage）
  * Mock
  * 体验评分（类似LightHouse）
* 编译模式
* 预览
* 真机调试
* 项目设置

### 实现多端

uniapp实现多端的方法： **封装API + 条件编译**。

uni-app 已将常用的组件、JS API 封装到框架中，开发者按照 uni-app 规范开发即可保证多平台兼容，大部分业务均可直接满足。

但每个平台有自己的一些特性，因此会存在一些无法跨平台的情况。

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

* \*写法：\*\*以 #ifdef 或 #ifndef 加 **%PLATFORM%** 开头，以 #endif 结尾。
* \#ifdef：if defined 仅在某平台存在
* \#ifndef：if not defined 除了某平台均存在
* **%PLATFORM%**：平台名称

Untitled Database

**%PLATFORM%** **可取值如下：**

Untitled Database

**支持的文件**

* .vue
* .js
* .css
* pages.json
* 各预编译语言文件，如：.scss、.less、.stylus、.ts、.pug

### 页面通讯

**监听器**

* **uni.$emit(eventName,OBJECT)**
* **uni.$on(eventName,callback)**
* **uni.$once(eventName,callback)**
* **uni.$off(\[eventName, callback])**

**URL queryString**

```tsx
details(id) {
    uni.navigateTo({
        url: "details?id="+id,
    });
},

onLoad(option) {
    console.log(option.id)
},
```

[uni-app官网 (dcloud.io)](https://uniapp.dcloud.io/api/window/communication.html)

### 内置组件

[uni-app官网 (dcloud.io)](https://uniapp.dcloud.io/component/view.html)

[视图容器 | 微信开放文档 (qq.com)](https://developers.weixin.qq.com/miniprogram/dev/component/)

### API

[基础 | 微信开放文档 (qq.com)](https://developers.weixin.qq.com/miniprogram/dev/api/)

[uni-app官网 (dcloud.io)](https://uniapp.dcloud.io/api/)

### 注意

* uniapp 异步API通常的回调风格，但是只要你不传入 success、fail、complete 等 callback 参数，那么API返回值就会转换成Promise。

```tsx
 // 正常使用
 const task = uni.connectSocket(
  success(res){
   console.log(res)
  }
 )

 // Promise 化
 uni.connectSocket().then(res => {
   // 此处即为正常使用时 success 回调的 res
   // uni.connectSocket() 正常使用时是会返回 task 对象的，如果想获取 task ，则不要使用 Promise 化
   console.log(res)
 })
```

* uni.$on是全局级别的，跨页面跨组件，尽量减少使用，并且页面销毁时(onUnload)记得销毁事件监听器(uni.$off)
* uni.request() Post请求默认的编码格式是`application/json`，可以通过改变请求头`'content-type’` 字段来改变。

```tsx
uni.request({
    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});
```