# 小程序-2208

**Repository Path**: connerljlx_admin/mini-program-2208

## Basic Information

- **Project Name**: 小程序-2208
- **Description**: 2208班原生小程序

- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-05-22
- **Last Updated**: 2023-05-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 小程序上线流程

项目成员：

​	开发一个小程序，登录开发者工具 微信号， 要么就是该小程序管理员，要么你必须是该小程序的项目成员， 否则 你开发中， 开发微信一键登录时没有权限



开发 第一件事，成为小程序的项目成员

# 小程序代码组成

页面：

​	wxml   结构

​	wxss   样式 相当于css

​	js   业务

​	json  小程序配置

全局  根目录下 三个 文件  以app开头

​	app.wxss  全局样式 （影响全局所有的页面）

​	app.js  创建小程序应用程序的 js

​	app.json 全局配置







面试题：

​	小程序开发和 h5开发区别？





b/s   browser

c/s   client 客户端

# 小程序宿主环境

小程序也是 b/s应用





# app分类

+ 原生app  native app

  安卓 IOS技术开发的

  优点：

  ​	性能高（带缓存）、应用权限特别高 （访问 手机硬件api）

  缺点：

  ​	成本太高 （开发成本、维护成本、用户使用成本、 运营成本）

  ​	结构不灵活 （组件有功能和样式 无法实现动画）、 上线后 app结构无法变化

+ webapp  m站 

移动端网页

​	优点：

​		1 成本低

​		2 代码灵活

​		3 免安装， 服务器中 代码重新部署，  打开结构自动变化

​	缺点：	

​		1 性能低  

​		2 权限低

+ hybrid app 混合app 

  原理：

  ​	app有一个组件， webview(理解为这是浏览器窗口)， 定义 标签宽高，定义src(指向一个 网址)， webview组件范围内，渲染 h5网页 （jsCore解析js）

  

  ​	jsbrige （原生app 封装 函数 给 webview 中的 网页调用 挂载window,  h5也可以封装方法 传递 给 原生调用）

  优点：

  ​	既保留了原生 性能优势， 也可以通过jsbrige 让h5网页 调用 硬件api

  ​	让 app 有了 不重新发版，就可以在活动日 自动改变页面的布局


# 小程序资源路径

资源路径 支持两种 （非js） import 路径不支持

相对路径  '../static/xx/a.png'

绝对路径 '/static/xxx.a.png'  /写在路径最前面 代表 小程序根目录



# 小程序自定义导航栏

原理：去除 默认导航栏，保留右上角胶囊按钮， 自定义组件 放到 页面头部 充当导航



难点：

​	不同记性，状态栏，胶囊位置不同， 动态计算 导航栏高度  才可以适配

去除 默认导航

```json
"navigationStyle": "custom"
```





#  小程序请求

+ 普通 http请求  类似于 ajax (wx.request)
+ 连接  websocket  
+ 上传文件
+ 下载文件

# 小程序分包

[小程序分包文档](https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html)

小程序上线 也会生成一个代码包， 上传到 微信服务器中， 在微信客户端打开小程序时，下载 这个代码包， 运行小程序代码



默认一个小程序，只会 打包成一个 代码包，在服务器中，且 微信要求 每个小程序代码包体积不能超过 2m,

源码体积打包后 超过 2m， 在开发者工具 点击 上传是上传不了的





某些情况下，开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。

在构建小程序分包项目时，构建会输出一个或多个分包。每个使用分包小程序必定含有一个**主包**。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而**分包**则是根据开发者的配置进行划分。

在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。

目前小程序分包大小有以下限制：

- 整个小程序所有分包大小不超过 20M
- 单个分包/主包大小不能超过 2M

```
├── app.js
├── app.json
├── app.wxss
├── pages
│   ├── index
│   └── logs
	     cat
	     dog
	     apple 
	     banana
└── utils
```

目录改造如下

```
├── app.js
├── app.json
├── app.wxss
├── packageA
│   └── pages
│       ├── cat
│       └── dog
├── packageB
│   └── pages
│       ├── apple
│       └── banana
├── pages
│   ├── index
│   └── logs
└── utils
```

开发者通过在 app.json `subpackages` 字段声明项目分包结构：

```json
{
  "pages":[
    "pages/index",
    "pages/logs"
  ],
    // 定义分包
  "subpackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/cat",
        "pages/dog"
      ]
    }, {
      "root": "packageB",
      "name": "pack2",
      "pages": [
        "pages/apple",
        "pages/banana"
      ]
    }
  ]
}
```

# 小程序架构

## 全局对象  全局应用对象  小程序对象

注册小程序。接受一个 `Object` 参数，其指定小程序的生命周期回调等。

**App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果**

```js
App({
  // 全局对象  生命周期钩子
  onLaunch(){
    // 监听小程序初始化。小程序实例 初始化完成
    console.log('onLaunch');
    
  },
  onShow(){
    // 初始化 开始显示小程序 小程序 切回前台
    console.log('onShow');
    
  },
  onHide(){
    // 监听小程序切后台
    console.log('onHide');
    
  },
  onPageNotFound(){
    // 错误路由跳转
  },
  baseURL: '这是我自定义的属性',
  request(){
    console.log(this.baseURL);
    
  },
  // globalData 简单实现 页面 公共数据管理
  globalData: {
    a: 10,
    b: 20
  }
})
```



小程序提供 全局方法 getApp() 在 小程序任意一处js 调用，返回 全局应用实例对象

```js
const app = getApp();
app.request()
console.log(app.globalData.a);
app.globalData.a = 400
console.log(app.globalData.a);
```

## 页面实例