npm package: @jump-mp/uni-mp-jump
Description: > 将 uniapp 工程编译为 jump 小程序
Latest version: 1.3.14

# 多端编译 @jump-mp/uni-mp-jump 转换CLI

> 将 uniapp 工程编译为 jump 小程序

## 安装和快速上手

uniapp工程可以基于 `@jump-mp/cli` 和 `vue-cli` 创建uni-app项目，推荐使用 `@jump-mp/cli`！！

- 使用 `@jump-mp/cli` 创建uniapp项目如下:

1. 全局安装 `@jump-mp/cli`

  ```javascript
  npm install -g @jump-mp/cli
  ```

2. 创建uniapp项目

  ```javascript
  jump create-uniapp projectName
  ```

3. 启动项目，打开文件夹所在目录，安装依赖完成后可直接执行uniapp转换jump命令进行构建

  ```javascript
  cd 目录(/xxx/projectName)
  npm install
  //dev 模式
  npm run dev:mp-jump

  //build 模式，发行打包
  npm run build:mp-jump
  ```
或

  ```javascript
  cd 目录(/xxx/projectName)
  yarn
  //dev 模式
  yarn dev:mp-jump

  //build 模式，发行打包
  yarn build:mp-jump
  ```
  4. 使用IDE打开dev模式生成的路径`/dist/build/mp-jump`目录或者build模式生成的路径`/dist/dev/mp-jump`，IDE会自动安装依赖以及真机调试。

- 使用 `vue-cli` 创建项目见[网址](https://uniapp.dcloud.io/quickstart-cli)。

1. 使用`yarn`安装项目依赖，可以使用taobao源，安装依赖快。
若项目中使用到了scss，请安装依赖`yarn add sass -D` 
2. 安装转换依赖 `yarn add @jump-mp/uni-mp-jump -D`。
3. 转换依赖@jump-mp/uni-mp-jump配置了 postinstall，安装完成后会自动将打包命令 `build:mp-jump和dev:mp-jump` 添加到 package.json scripts 中。
4. 构建
  ```javascript
  //dev 模式
  yarn dev:mp-jump
  //build 模式，发行打包
  yarn build:mp-jump
  ```
🚀 可以使用dev模式，支持热更新，可以将构建后的文件直接在ide中打开查看效果。🚀 

5. 使用IDE打开dev模式生成的路径`/dist/build/mp-jump`目录或者build模式生成的路径`/dist/dev/mp-jump`，IDE会自动安装依赖以及真机调试。

## 使用说明

### 扩展API实现
1. 在src目录下新建jump-config.js，在jump-config.js文件中实现扩展API。

### vue
1. 若使用生命周期函数，因逻辑层和渲染层通信会消耗时间，请尽量使用mounted，尽量不使用created；尽量避免使用$nextTick，可以使用setTimeout宏任务。

### css
1. css背景图片（background-image）请使用网络图片或者图片base64化。小程序不支持在css中使用本地文件，包括本地的背景图和字体文件。[网址](https://uniapp.dcloud.io/frame?id=%e8%83%8c%e6%99%af%e5%9b%be%e7%89%87)
2. body上设置样式不生效，请使用class样式。
3. 请使用flex布局。[网址](https://uniapp.dcloud.io/frame?id=%e5%bc%80%e5%8f%91%e8%a7%84%e8%8c%83)
4. 图片或字体使用cdn时，请使用全路径（http或者https协议开头）。[网址](https://uniapp.dcloud.io/frame?id=%e5%ad%97%e4%bd%93%e5%9b%be%e6%a0%87)
5. 尺寸单位：早期 uni-app 提供了 upx ，目前已经推荐统一改为 rpx [网址](https://uniapp.dcloud.io/frame?id=%e5%b0%ba%e5%af%b8%e5%8d%95%e4%bd%8d)。
6. 不支持*选择器 [网址](https://uniapp.dcloud.io/matter?id=h5%e6%ad%a3%e5%b8%b8%e4%bd%86app%e5%bc%82%e5%b8%b8%e7%9a%84%e5%8f%af%e8%83%bd%e6%80%a7)
7. 非H5端默认并未启用 scoped，如需要隔离组件样式可以在 style 标签增加 scoped 属性。[网址](https://uniapp.dcloud.io/matter?id=h5%e6%ad%a3%e5%b8%b8%e4%bd%86app%e5%bc%82%e5%b8%b8%e7%9a%84%e5%8f%af%e8%83%bd%e6%80%a7)
8. 不要在引用组件的地方在组件属性上直接写 style="xx"，要在组件内部写样式。[网址](https://uniapp.dcloud.io/matter?id=h5%e6%ad%a3%e5%b8%b8%e4%bd%86app%e5%bc%82%e5%b8%b8%e7%9a%84%e5%8f%af%e8%83%bd%e6%80%a7)
9. 多使用css的动画，而不是通过使用js定时器操作界面做动画。

### @jump-mp/uni-jump-ui
[@jump-mp/uni-jump-ui](https://www.npmjs.com/package/@jump-mp/uni-jump-ui)
- 请使用@jump-mp/uni-jump-ui代替@dcloudio/uni-ui。
- @jump-mp/uni-jump-ui使用方式与@dcloudio/uni-ui类似，使用方法请参考[网址](https://www.npmjs.com/package/@jump-mp/uni-jump-ui)


### vendor.js 过大的处理方式
1. 可以在package.json中添加参数--minimize，示例："dev:mp-jump": "cross-env NODE_ENV=development UNI_PLATFORM=mp-jump vue-cli-service uni-build --watch --minimize" [网址](https://uniapp.dcloud.io/matter?id=vendorjs-%e8%bf%87%e5%a4%a7%e7%9a%84%e5%a4%84%e7%90%86%e6%96%b9%e5%bc%8f)


### 常见问题

**npm ERROR: Cannot read property ’forEach' of undefined**
- 删除工程根目录的lock文件
- 使用cnpm安装重新依赖！

**缺少平台 mp-jump 插件**
- 若项目已经安装转换依赖@jump-mp/uni-mp-jump，之后又安装了新的其他依赖（如dayjs），此时报“缺少平台 mp-jump 插件”错。解决方法：请使用cnpm重新安装@jump-mp/uni-mp-jump和新的其他依赖（如dayjs）！