UniApp Android 自动打包

项目简介

项目架构

项目技术选型

1. UniApp 2.0.1-33920220208001

2. uView 1.8.4

代码管理

• GitLab

• GitLab-Runner

自动打Apk

自动打包的思路

1. 先把项目改成脚手架

2. 将uniapp提供到Android sdk项目加入到前端代码中

3. 服务器安装打包环境Android SDK和JDK

4. 前端代码提交时，GitLab-CI 执行build，把打包文件放到指定位置，然后执行android打包命令

5. 使用nodejs上传apk到minio http://docs.minio.org.cn/docs/master/javascript-client-quickstart-guide

1. 更改项目为脚手架

1. 环境安装，全局安装，npm install -g @vue/cli

2. 使用正式版，vue create -p dcloudio/uni-preset-vue my-project

3. 把uview的项目拖入到src里面，启动即可

4. 为了避免sass和less报错，package.json中添加以下代码

"less": "^4.1.2",
"sass": "^1.49.8",
"node-sass": "^4.0.0",
"less-loader": "^5.0.0",
"sass-loader": "^10.0.2",

module.exports = {
	.....
	css: {
		loaderOptions: {
			// 给 less-loader 传递 Less.js 相关选项
			less: {}
		}
	},
	.....
}

CentOS安装Android SDK

1. 下载 Android SDK https://developer.android.google.cn/studio/#downloads

2. 安装sdkmanager 下载linux版本，并解压 unzip xxxx.zip 放到 /opt/android-sdk 路径下

1. 更改/opt/android-sdk/cmdline-tools/cmdline-tools/bin/sdkmanager为/opt/android-sdk/cmdline-tools/latest/bin/sdkmanager

2. 配置环境变量 vim /etc/profiles，并重启环境变量 source /etc/profiles

export SDK_HOME=/data/android
export PATH=${SDK_HOME}/cmdline-tools/latest/bin:$PATH # 配置sdkmanager环境
export PATH=${SDK_HOME}/platform-tools:$PATH # 配置adb环境

3. 列出列表 sdkmanager --list

4. 安装软件 sdkmanager "platform-tools" "platforms;android-30" "build-tools;30.0.2" （这三个安装包可以分开安装，这边是偷懒的写法，即一次性安装了三个）

安装JDK

1. 安装jdk yum install -y java-1.8.0-openjdk*

配置uniapp提供的sdk

1. 报错找不到sdk
在根路径下添加文件local.properties
添加如下代码。指定sdk位置
Mac下是sdk.dir=/Users/wangjiahao/Library/Android/sdk
Centos下是sdk.dir=/opt/android-sdk 这个就是安装sdk的位置

2. 删除app/src/main/AndroidManifest.xml:30中的android:debuggable="false"

3. app打包命令，查看打包位置 app/build/outputs/apk/release

chmod +x  gradlew
./gradlew :app:assembleRelease

js使用minio上传

var Minio = require('minio')

// Instantiate the minio client with the endpoint
// and access keys as shown below.
var minioClient = new Minio.Client({
    endPoint: 'play.min.io',
    port: 9000,
    useSSL: true,
    accessKey: 'Q3AM3UQ867SPQQA43P2F',
    secretKey: 'zuf+tfteSlswRu7BJ86wekitnifILbZam1KYY3TG'
});

// File that needs to be uploaded.
var file = '/tmp/photos-europe.tar'

// Make a bucket called europetrip.
minioClient.makeBucket('europetrip', 'us-east-1', function(err) {
    if (err) return console.log(err)

    console.log('Bucket created successfully in "us-east-1".')

    var metaData = {
        'Content-Type': 'application/octet-stream',
        'X-Amz-Meta-Testing': 1234,
        'example': 5678
    }
    // Using fPutObject API upload your file to the bucket europetrip.
    minioClient.fPutObject('europetrip', 'photos-europe.tar', file, metaData, function(err, etag) {
      if (err) return console.log(err)
      console.log('File uploaded successfully.')
    });
});

let Minio = require('minio')
const yargs = require('yargs/yargs')
const { hideBin } = require('yargs/helpers')
const argv = yargs(hideBin(process.argv)).argv

let filepath = argv['filepath'] //filepath
let filename = argv['filename'] //filename
let endPoint = argv['endPoint'] //endPoint
let port = argv['port'] //port
let useSSL = argv['useSSL'] == "true" ? true : false //useSSL
let accessKey = argv['accessKey'] //accessKey
let secretKey = argv['secretKey'] //secretKey
let bucket = argv['bucket'] //secretKey

console.log("filepath", filepath, typeof filepath)
console.log("filename", filename, typeof filename)
console.log("endPoint", endPoint, typeof endPoint)
console.log("port", port, typeof port)
console.log("useSSL", useSSL, typeof useSSL)
console.log("accessKey", accessKey, typeof accessKey)
console.log("secretKey", secretKey, typeof secretKey)
console.log("bucket", bucket, typeof bucket)


let s3Client = new Minio.Client({
	endPoint: endPoint,
	port: port,
	useSSL: useSSL,
	accessKey: accessKey,
	secretKey: secretKey
})

let metaData = {
	'Content-Type': 'application/octet-stream',
	'X-Amz-Meta-Testing': 1234,
	'example': 5678
}

s3Client.fPutObject(bucket, filename, filepath, metaData, function(e) {
	if (e) {
		return console.log(e)
	}
	console.log("Success")
})

uniapp热更

1. 根据输入版本号查询，是否是最新版本，如果不是最新版本，则返回最新版本url

2. wgt上传接口，上传wgt文件和版本号 可以省略，后端可以解析wgt中的文件，并读取文件中的版本号和打包版本

yarn install    # 打包    
yarn run build:app-plus    
# 压缩 & cp & 上传    
cd dist/build/app-plus    
zip -r app.wgt *    
rm -rf /data/app/app.wgt    
cp app.wgt /data/app    
# 上传文件到后台路径    
curl -F "file=@/data/app/app.wgt" http://localhost:8000/api/appVersion/addwgt

Jemter压测

App 预览pdf

//    if (fileOrigin !== viewerOrigin) {
//      throw new Error('file origin does not match viewer\'s');
//    }

<template>
  <view class="content">
    <web-view :src="url"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // pdf.js的viewer.htm所在路径
      // 注意：静态的html文件需要放在根路径下的 hybrid/html 文件夹中
      viewerUrl: '/hybrid/html/pdf/web/viewer.html',
      // 要访问的pdf的路径
      fileUrl: '',
      // 最终显示在web-view中的路径
      url: '',
    };
  },
  onLoad(options) {
    // const link = decodeURIComponent(options.link);
    const link = decodeURIComponent('https://oss.bj-gly-zgdx-bzx-icp.caiicloudoss.com/smeapp/b8b18e7e-2623-4ffd-b102-59ec914ac44f.pdf');
    // h5，使用h5访问的时候记得跨域
    // #ifdef H5
    this.url = `${this.viewerUrl}?file=${encodeURIComponent(link)}`;
    // #endif

    // 在安卓和ios手机上
    // 判断是手机系统：安卓，使用pdf.js
    // #ifdef APP-PLUS
    if (plus.os.name === 'Android') {
      this.url = `${this.viewerUrl}?file=${encodeURIComponent(link)}`;
    }
    // ios，直接访问pdf所在路径
    else {
      // 直接用在iOS15.4.1不生效
      // this.url = encodeURIComponent(link);
      this.url = `${this.viewerUrl}?file=${encodeURIComponent(link)}`;
    }
    // #endif
  },
  methods: {},
};
</script>

<style>
</style>

const _link = encodeURIComponent('https://oss.bj-gly-zgdx-bzx-icp.caiicloudoss.com/smeapp/b8b18e7e-2623-4ffd-b102-59ec914ac44f.pdf');
this.$u.route({
  url: 'pages/home/pdf/preview-pdf.vue',
  params: {
    link: _link,
  },
});