UniApp常见问题

date
Jul 1, 2022
slug
uniapp
status
Published
tags
UniApp
Android
summary
uniapp项目的一些问题和总结
type
Post

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
 
 
  1. 根据输入版本号查询,是否是最新版本,如果不是最新版本,则返回最新版本url(当前逻辑为:查询数据库中标记的最新版本,并与当前传回的版本号比对是否一致,存在有旧版本标记为最新,逆更新的情况)
  1. wgt上传接口,上传wgt文件和版本号 可以省略,后端可以解析wgt中的文件,并读取文件中的版本号和打包版本
 
 
 

UniApp项目中App 使用pdf.js 预览pdf

使用pdf.js做预览 目前最高支持版本`pdfjs-2.6.347`
老版本,这个打完包的体积会比较小,新版本打完包巨大
 
下载pdf插件 http://mozilla.github.io/pdf.js/getting_started/ 并解压得到build web 两个文件夹
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 分支为生产环境的代码
 

自动打包的思路

  1. 先把项目改成脚手架
  1. 将uniapp提供到Android sdk项目加入到前端代码中
  1. 服务器安装打包环境Android SDK和JDK
  1. 前端代码提交时,GitLab-CI 执行build,把打包文件放到指定位置,然后执行android打包命令
  1. 使用nodejs上传apk到minio http://docs.minio.org.cn/docs/master/javascript-client-quickstart-guide

1. 更改项目为脚手架

uniapp cli方式,实现方式,可参考官方文档https://uniapp.dcloud.net.cn/quickstart-cli
  1. 环境安装,全局安装,npm install -g @vue/cli
  1. 使用正式版,vue create -p dcloudio/uni-preset-vue my-project
  1. 把uview的项目拖入到src里面,启动即可
  1. 为了避免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

  1. 下载 Android SDK https://developer.android.google.cn/studio/#downloads
  1. 安装sdkmanager 下载linux版本,并解压 unzip xxxx.zip 放到 /opt/android-sdk 路径下
notion image
  1. 更改/opt/android-sdk/cmdline-tools/cmdline-tools/bin/sdkmanager/opt/android-sdk/cmdline-tools/latest/bin/sdkmanager
  1. 配置环境变量 vim /etc/profiles,并重启环境变量 source /etc/profiles
    1. export SDK_HOME=/data/android
      export PATH=${SDK_HOME}/cmdline-tools/latest/bin:$PATH # 配置sdkmanager环境
      export PATH=${SDK_HOME}/platform-tools:$PATH # 配置adb环境
  1. 列出列表 sdkmanager --list
  1. 安装软件 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
    1. 在根路径下添加文件local.properties
      添加如下代码。指定sdk位置
      Mac下是sdk.dir=/Users/wangjiahao/Library/Android/sdk
      Centos下是sdk.dir=/opt/android-sdk 这个就是安装sdk的位置
  1. 删除app/src/main/AndroidManifest.xml:30中的android:debuggable="false"
  1. 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压测

 
 
 
 
 
 
 
 
 

© WangJiaHao 2022

豫ICP备18022029号