1.0.1 • Published 2 years ago

@jump-mp-test/uni-mp-jump v1.0.1

Weekly downloads
-
License
Apache
Repository
-
Last release
2 years ago

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

将 uniapp 工程编译为 jump 小程序

安装和快速上手

uniapp工程可以基于 @jump-mp/clivue-cli 创建uni-app项目,推荐使用 @jump-mp/cli

  • 使用 @jump-mp/cli 创建uniapp项目如下:
  1. 全局安装 @jump-mp/cli

    npm install -g @jump-mp/cli
  2. 创建uniapp项目

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

    cd 目录(/xxx/projectName)
    npm install
    //dev 模式
    npm run dev:mp-jump
    cd /dist/dev/mp-jump
    npm run build 
    
    //build 模式,发行打包
    npm run build:mp-jump
    cd /dist/build/mp-jump
    npm run build

    cd 目录(/xxx/projectName)
    yarn
    //dev 模式
    yarn dev:mp-jump
    cd /dist/dev/mp-jump
    yarn build 
    
    //build 模式,发行打包
    yarn build:mp-jump
    cd /dist/build/mp-jump
    yarn build
  • 使用 vue-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. 构建

    //dev 模式
    yarn dev:mp-jump
    cd /dist/dev/mp-jump
    yarn build
    
    //build 模式,发行打包
    yarn build:mp-jump
    cd /dist/build/mp-jump
    yarn build

    🚀 可以使用dev模式,支持热更新,可以将构建后的文件直接在ide中打开查看效果。🚀

  5. 使用IDE打开/dist/build/mp-jump目录或者/dist/dev/mp-jump,IDE会自动安装依赖以及真机调试。

使用说明

扩展API

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

vue

  1. 若使用生命周期函数,因逻辑层和渲染层通信时机,请尽量使用mounted,尽量不使用created;尽量避免使用$nextTick,可以使用setTimeout宏任务。

css

  1. css背景图片请使用网络图片或者图片base64化。小程序不支持在css中使用本地文件,包括本地的背景图和字体文件。网址
  2. body上设置样式不生效,请使用class样式。
  3. 请使用flex布局。网址
  4. 图片或字体使用cdn时,请使用全路径(http或者https协议开头)。网址
  5. 尺寸单位:早期 uni-app 提供了 upx ,目前已经推荐统一改为 rpx 网址
  6. 不支持*选择器 网址
  7. 非H5端默认并未启用 scoped,如需要隔离组件样式可以在 style 标签增加 scoped 属性。网址
  8. 不要在引用组件的地方在组件属性上直接写 style="xx",要在组件内部写样式。网址
  9. 多使用css的动画,而不是通过使用js定时器操作界面做动画。

uni-ui

uni-ui

  • 请使用1.4.6版uni-ui,并按照 npm + easycom方式使用uni-ui。
  • uni-calendar、uni-data-picker、uni-datetime-picker、uni-notice-bar 和uni-table组件有bug,请自行实现。

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" 网址

常见问题

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)!