UniApp常见问题
date
Jul 1, 2022
slug
uniapp
status
Published
tags
UniApp
Android
summary
uniapp项目的一些问题和总结
type
Post
UniApp开发App使用热更UniApp项目中App 使用pdf.js 预览pdfAndroid 自动打包思路自动打包的思路1. 更改项目为脚手架2. CentOS安装Android SDK3. 安装JDK4. 配置uniapp提供的sdk5. js使用minio上传Jemter压测
UniApp开发App使用热更
前端代码实现ci/cd,自动打包apk和wgt文件,上传到数据库中做记录,App启动获取当前平台(platform)、版本号(versionName)、打包号(versionCode),携带参数向后台发送接口,后台来判断是否是最新版本,是否需要更新
前端代码ci/cd:
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
数据库设计表 //todo
版本号
打包号
更新描述
是否为最新
更新资源为何种类型: apk/wgt
更新资源url
是否必须更新
逻辑删除
服务接口 //todo
- 根据输入版本号查询,是否是最新版本,如果不是最新版本,则返回最新版本url(当前逻辑为:查询数据库中标记的最新版本,并与当前传回的版本号比对是否一致,存在有旧版本标记为最新,逆更新的情况)
- wgt上传接口,
上传wgt文件和版本号可以省略,后端可以解析wgt中的文件,并读取文件中的版本号和打包版本
UniApp项目中App 使用pdf.js
预览pdf
使用
pdf.js
做预览 目前最高支持版本
`
pdfjs-2.6.347
`
老版本,这个打完包的体积会比较小,新版本打完包巨大
在
uniapp
的src下创建路径 hybrid/html/pdf
,并放入 build
web
两个文件夹file origin does not match viewer’s,
注释
viewer.js
的代码:// if (fileOrigin !== viewerOrigin) {
// throw new Error('file origin does not match viewer\'s');
// }
创建
preview-pdf.vue
,参考https://github.com/Eveveen/uni-app-pdf<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 自动打包思路
版本选择
UniApp
2.0.1-33920220208001
uView
1.8.4
通过git分支的概念 把不同的环境切出不同的分支,进行代码的隔离
需定义好每个分支的环境,并在每次升级版本(合并分支代码)的时候增加分支对应的版本
tag
记录代码管理
dev
分支为开发环境的代码test
分支为测试环境的代码main
分支为生产环境的代码自动打包的思路
- 先把项目改成脚手架
- 将uniapp提供到Android sdk项目加入到前端代码中
- 服务器安装打包环境Android SDK和JDK
- 前端代码提交时,GitLab-CI 执行build,把打包文件放到指定位置,然后执行android打包命令
- 使用nodejs上传apk到minio http://docs.minio.org.cn/docs/master/javascript-client-quickstart-guide
1. 更改项目为脚手架
uniapp cli方式,实现方式,可参考官方文档https://uniapp.dcloud.net.cn/quickstart-cli
- 环境安装,全局安装,
npm install -g @vue/cli
- 使用正式版,
vue create -p dcloudio/uni-preset-vue my-project
- 把uview的项目拖入到src里面,启动即可
- 为了避免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",
在
vue.config.js
只增加module.exports = {
.....
css: {
loaderOptions: {
// 给 less-loader 传递 Less.js 相关选项
less: {}
}
},
.....
}
2. CentOS安装Android SDK
- 下载 Android SDK https://developer.android.google.cn/studio/#downloads
- 安装
sdkmanager
下载linux版本,并解压unzip xxxx.zip
放到/opt/android-sdk
路径下

- 更改
/opt/android-sdk/cmdline-tools/cmdline-tools/bin/sdkmanager
为/opt/android-sdk/cmdline-tools/latest/bin/sdkmanager
- 配置环境变量
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环境
- 列出列表
sdkmanager --list
- 安装软件
sdkmanager "platform-tools" "platforms;android-30" "build-tools;30.0.2"
(这三个安装包可以分开安装,这边是偷懒的写法,即一次性安装了三个)
3. 安装JDK
- 安装jdk
yum install -y java-1.8.0-openjdk*
4. 配置uniapp提供的sdk
- 报错找不到sdk
在根路径下添加文件
local.properties
添加如下代码。指定sdk位置
Mac下是
sdk.dir=/Users/wangjiahao/Library/Android/sdk
Centos下是
sdk.dir=/opt/android-sdk
这个就是安装sdk的位置- 删除
app/src/main/AndroidManifest.xml:30
中的android:debuggable="false"
- app打包命令,查看打包位置
app/build/outputs/apk/release
chmod +x gradlew
./gradlew :app:assembleRelease
5. js使用minio上传
npm install -g minio
touch file-uploader.js
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.')
});
});
执行命令
node file-uploader.js
nodejs
yargs
minimist
\
经过反复测试,发现yargs也无法解析换行,目前还未找到解决方案
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压测
see Jemter压测