Packaging and release process

Author：Chuan Chen 阅读数：44846人阅读分类： uni-app

Packaging and Release Process

The packaging and release process for uni-app involves multiple steps, from code compilation to final submission to various platform app stores. Developers need to adjust configurations based on the target platform, handle security mechanisms such as signatures and certificates, and comply with each store's review guidelines.

Development Environment Preparation

Before starting the packaging process, ensure the development environment is correctly configured. Install HBuilderX globally or set up the CLI environment:

# Install vue-cli globally via npm  
npm install -g @vue/cli  

# Install the uni-app compiler  
npm install -g @dcloudio/vue-cli-plugin-uni

The project must include the necessary dependencies locally:

{  
  "dependencies": {  
    "@dcloudio/uni-app": "^3.0.0",  
    "@dcloudio/uni-ui": "^1.4.20"  
  },  
  "devDependencies": {  
    "@dcloudio/types": "^3.0.0"  
  }  
}

General Packaging Configuration

Configure basic information in the manifest.json file in the project root directory:

{  
  "name": "MyApp",  
  "appid": "__UNI__XXXXXX",  
  "versionName": "1.0.0",  
  "versionCode": 100,  
  "description": "App description",  
  "icons": {  
    "72": "./static/logo-72x72.png",  
    "144": "./static/logo-144x144.png"  
  }  
}

WeChat Mini Program Packaging

Add WeChat-specific configurations in manifest.json:

"mp-weixin": {  
  "appid": "wx1234567890abcdef",  
  "setting": {  
    "urlCheck": false,  
    "es6": true  
  },  
  "usingComponents": true  
}

Execute the build command:

npm run dev:mp-weixin  # Development environment  
npm run build:mp-weixin # Production environment

Import the generated dist/dev/mp-weixin directory into the WeChat Developer Tools, then upload the code and submit it for review.

Android App Packaging

Certificate Generation

Use JDK's keytool to generate a signing certificate:

keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore test.keystore

Signature Configuration

Configure in manifest.json:

"android": {  
  "packagename": "com.example.myapp",  
  "keystore": "test.keystore",  
  "aliasname": "testalias",  
  "schemes": ["myapp"]  
}

Native Plugin Handling

If using native plugins, configure them in HBuilderX as local or cloud plugins:

"plugins": {  
  "myPlugin": {  
    "version": "1.0.0",  
    "provider": "Plugin ID"  
  }  
}

iOS App Packaging

Certificate Preparation

Create an App ID in Apple Developer.
Generate a Distribution certificate and Provisioning Profile.

Xcode Project Configuration

After generating the Xcode project via HBuilderX:

Modify the Bundle Identifier to match the App ID.
Import the mobileprovision file.
Configure automatic signing or manually manage certificates.

Special Permission Configuration

Add iOS permission declarations in manifest.json:

"ios": {  
  "UIRequiresFullScreen": true,  
  "privacyDescription": {  
    "NSPhotoLibraryUsageDescription": "Photo library access is required"  
  }  
}

Multi-Platform Difference Handling

Conditional Compilation Example

Handle platform-specific code:

// #ifdef MP-WEIXIN  
wx.login({  
  success(res) {  
    console.log(res.code)  
  }  
})  
// #endif  

// #ifdef APP-PLUS  
uni.login({  
  provider: 'weixin',  
  success(res) {  
    console.log(res.authResult)  
  }  
})  
// #endif

Style Adaptation Solution

Use uni-app-specific style units:

.header {  
  /* rpx is automatically converted in WeChat Mini Programs */  
  height: 80rpx;  
  /* upx is converted to rem in H5 */  
  font-size: 32upx;  
}

Automated Build

CI/CD Integration Example

GitLab CI configuration example:

stages:  
  - build  

build_weixin:  
  stage: build  
  script:  
    - npm install  
    - npm run build:mp-weixin  
  artifacts:  
    paths:  
      - dist/build/mp-weixin

Version Number Auto-Increment

Automatically update the version number via script:

const fs = require('fs')  
const manifest = JSON.parse(fs.readFileSync('manifest.json'))  
manifest.versionCode += 1  
fs.writeFileSync('manifest.json', JSON.stringify(manifest, null, 2))

Store Submission Notes

App Screenshot Specifications

Requirements vary by platform:

iOS requires 5.5-inch and 6.5-inch screenshots.
Huawei AppGallery requires 16:9 screenshots.
Xiaomi requires at least 3 landscape screenshots.

Privacy Policy Configuration

Configure the privacy policy link in manifest.json:

"app-plus": {  
  "privacy": {  
    "prompt": "template",  
    "template": {  
      "title": "Terms of Service and Privacy Policy",  
      "message": "Please read the agreement carefully",  
      "buttonAccept": "Agree",  
      "buttonRefuse": "Disagree"  
    }  
  }  
}

Hot Update Solution

WGT Package Update Process

Generate the WGT package:

uni publish --platform app --project myproject

Client-side update detection:

uni.getUpdateManager().onCheckForUpdate(res => {  
  if (res.hasUpdate) {  
    uni.downloadFile({  
      url: 'https://example.com/update.wgt',  
      success: (downloadResult) => {  
        uni.applyUpdate(downloadResult.tempFilePath)  
      }  
    })  
  }  
})

Update Strategy Control

Control the update scope via API:

// Check for version updates  
function checkUpdate() {  
  uni.request({  
    url: 'https://api.example.com/version',  
    success(res) {  
      if (res.data.forceUpdate) {  
        showForceUpdateDialog(res.data.url)  
      }  
    }  
  })  
}