UniApp常见问题

UniApp开发App使用热更

前端代码实现ci/cd，自动打包apk和wgt文件，上传到数据库中做记录,App启动获取当前平台(platform)、版本号(versionName)、打包号(versionCode)，携带参数向后台发送接口，后台来判断是否是最新版本，是否需要更新

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

版本号
打包号
更新描述
是否为最新
更新资源为何种类型： apk/wgt
更新资源url
是否必须更新
逻辑删除

1. 根据输入版本号查询，是否是最新版本，如果不是最新版本，则返回最新版本url(当前逻辑为：查询数据库中标记的最新版本，并与当前传回的版本号比对是否一致，存在有旧版本标记为最新，逆更新的情况)

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

UniApp项目中App 使用pdf.js 预览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,
  },
});

Android 自动打包思路

自动打包的思路

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: {}
		}
	},
	.....
}

2. 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" （这三个安装包可以分开安装，这边是偷懒的写法，即一次性安装了三个）

3. 安装JDK

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

4. 配置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

5. 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")
})

Jemter压测