uniapp问题归类

2024-04-26 08:04
文章标签 uniapp 问题 归类

本文主要是介绍uniapp问题归类,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

最近使用uniapp中,遇到了一些问题,这边mark下。

1. 启动页变形

设置启动页的时候发现在部分android手机上启动页被拉伸了,最后看了下官方建议使用9.png图

生成9.png地址,推荐图片大小为1080x2340

uniapp推荐官方地址传送门

我用的是这个地址传送门
在这里插入图片描述

2.android定制自定义基座

1. 点击HBuilderX工具栏上的发行-原生App-云打包

在这里插入图片描述

2. 点开之后看到下面这个界面,接下来以android为例,先生成自有证书

在这里插入图片描述

可以参考这个链接传送门
使用keytool -genkey命令生成证书:

keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore test.keystore
  • testalias是证书别名,可修改为自己想设置的字符,建议使用英文字母和数字
  • test.keystore是证书文件名称,可修改为自己想设置的文件名称,也可以指定完整文件路径
  • 36500是证书的有效期,表示100年有效期,单位天,建议时间设置长一点,避免证书过期

生成后通过以下查看证书详细信息

keytool -list -v -keystore test.keystore  
Enter keystore password: //输入密码,回车

输出格式如下

Keystore type: PKCS12    
Keystore provider: SUN    Your keystore contains 1 entry    Alias name: test    
Creation date: 2019-10-28    
Entry type: PrivateKeyEntry    
Certificate chain length: 1    
Certificate[1]:    
Owner: CN=Tester, OU=Test, O=Test, L=HD, ST=BJ, C=CN    
Issuer: CN=Tester, OU=Test, O=Test, L=HD, ST=BJ, C=CN    
Serial number: 7dd12840    
Valid from: Fri Jul 26 20:52:56 CST 2019 until: Sun Jul 02 20:52:56 CST 2119    
Certificate fingerprints:    MD5:  F9:F6:C8:1F:DB:AB:50:14:7D:6F:2C:4F:CE:E6:0A:A5    SHA1: BB:AC:E2:2F:97:3B:18:02:E7:D6:69:A3:7A:28:EF:D2:3F:A3:68:E7    SHA256: 24:11:7D:E7:36:12:BC:FE:AF:2A:6A:24:BD:04:4F:2E:33:E5:2D:41:96:5F:50:4D:74:17:7F:4F:E2:55:EB:26    
Signature algorithm name: SHA256withRSA    
Subject Public Key Algorithm: 2048-bit RSA key    
Version: 3

然后如下图配置到app打包中,点击提交后,等待云打包自有证书。
等打包好后就可以调试就可以在自定义基座上运行。
在这里插入图片描述

3.uniapp配置本地代理解决跨域

在manifest.json 的源码视图配置如下,代码中的baseUrl配置为对应的/h5api,配置完后需要重启服务。

	"h5": {"devServer": {"disableHostCheck": true,"proxy": {"/h5api": {// 需要被代理的后台地址"target": "https://www.baidu.com/api","changeOrigin": true,"secure": false,"pathRewrite": {"^/h5api": "/"}}}}}

4.uniapp引入iconfont字体

  1. 常规的页面(非nvue页面)可以通过全局引入,首先访问iconfont下载字体文件,放入到static目录下,结构如下
    在这里插入图片描述

  2. 然后通过uniapp的app.vue文件引入,代码如下

<style lang="scss">/* #ifndef APP-PLUS-NVUE */@import '@/static/fonts/iconfont.css';/* #endif */
</style>
  1. 使用字体库
<i class="iconfont icon-xxx"></i>
  1. 如果为nvue页面,则需要通过uni.addRule添加,官方传送门,核心代码如下
export default{beforeCreate() {const domModule = uni.requireNativePlugin('dom')domModule.addRule('fontFace', {'fontFamily': "myIconfont",'src': "url('http://at.alicdn.com/t/font_2234252_v3hj1klw6k9.ttf')"});}}

5.uniapp引入lottie动画(vue页面)

5.1. 第一种安装lottie-web

  1. 下载安装lottie-web
cnpm install lottie-web --save
  1. 引入lottie-web和lottie json
 import lottie from 'lottie-web'import animationData from 'xx/xx/xx.json'lottie.loadAnimation({animationData,loop: true,autoplay: true,renderer: 'svg',container: document.querySelector('container')})
  • animationData: 包含导出的动画数据的 Object。
  • path: 动画对象的相对路径。(animationData 和 path 互斥)
  • loop: 动画循环次数,可选值 true/false/number
  • autoplay: 准备就绪后自动开始播放,可选值 true/false
  • name: 动画名称,供将来参考
  • renderer: 设置渲染器,可选值 svg/canvas/html
  • container: 用于渲染动画的 DOM 元素

5.2 使用lottie-web安装在APP-PLUS环境下出不来,nvue下也不可以使用,我这边后面采用的是插件库中的c-lottie和x-lottie两个插件来实现的

x-lottie插件地址传送门

c-lottie插件地址传送门

 <!-- #ifdef H5 --><c-lottieclass="play"src='@/static/json/play.json'width="24rpx" height='24rpx':loop="true"></c-lottie><!-- #endif --><!-- #ifdef APP-PLUS --><x-lottieclass="play":option="{path:require('@/static/json/play.json')}"/><!-- #endif -->

这篇关于uniapp问题归类的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/937024

相关文章

使用雪花算法产生id导致前端精度缺失问题解决方案

《使用雪花算法产生id导致前端精度缺失问题解决方案》雪花算法由Twitter提出,设计目的是生成唯一的、递增的ID,下面:本文主要介绍使用雪花算法产生id导致前端精度缺失问题的解决方案,文中通过代... 目录一、问题根源二、解决方案1. 全局配置Jackson序列化规则2. 实体类必须使用Long封装类3.

Idea插件MybatisX失效的问题解决

《Idea插件MybatisX失效的问题解决》:本文主要介绍Idea插件MybatisX失效的问题解决,详细的介绍了4种问题的解决方法,具有一定的参考价值,感兴趣的可以了解一下... 目录一、重启idea或者卸载重装MyBATis插件(无需多言)二、检查.XML文件与.Java(该文件后缀Idea可能会隐藏

Nginx 访问 /root/下 403 Forbidden问题解决

《Nginx访问/root/下403Forbidden问题解决》在使用Nginx作为Web服务器时,可能会遇到403Forbidden错误,文中通过示例代码介绍的非常详细,对大家的学习或者工作... 目录解决 Nginx 访问 /root/test/1.html 403 Forbidden 问题问题复现Ng

Python的pip在命令行无法使用问题的解决方法

《Python的pip在命令行无法使用问题的解决方法》PIP是通用的Python包管理工具,提供了对Python包的查找、下载、安装、卸载、更新等功能,安装诸如Pygame、Pymysql等Pyt... 目录前言一. pip是什么?二. 为什么无法使用?1. 当我们在命令行输入指令并回车时,一般主要是出现以

Nginx部署React项目时重定向循环问题的解决方案

《Nginx部署React项目时重定向循环问题的解决方案》Nginx在处理React项目请求时出现重定向循环,通常是由于`try_files`配置错误或`root`路径配置不当导致的,本文给大家详细介... 目录问题原因1. try_files 配置错误2. root 路径错误解决方法1. 检查 try_f

Python解决雅努斯问题实例方案详解

《Python解决雅努斯问题实例方案详解》:本文主要介绍Python解决雅努斯问题实例方案,雅努斯问题是指AI生成的3D对象在不同视角下出现不一致性的问题,即从不同角度看物体时,物体的形状会出现不... 目录一、雅努斯简介二、雅努斯问题三、示例代码四、解决方案五、完整解决方案一、雅努斯简介雅努斯(Janu

MySQL索引失效问题及解决方案

《MySQL索引失效问题及解决方案》:本文主要介绍MySQL索引失效问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录mysql索引失效一、概要二、常见的导致MpythonySQL索引失效的原因三、如何诊断MySQL索引失效四、如何解决MySQL索引失

一文教你如何解决Python开发总是import出错的问题

《一文教你如何解决Python开发总是import出错的问题》经常朋友碰到Python开发的过程中import包报错的问题,所以本文将和大家介绍一下可编辑安装(EditableInstall)模式,可... 目录摘要1. 可编辑安装(Editable Install)模式到底在解决什么问题?2. 原理3.

Redis中的数据一致性问题以及解决方案

《Redis中的数据一致性问题以及解决方案》:本文主要介绍Redis中的数据一致性问题以及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、Redis 数据一致性问题的产生1. 单节点环境的一致性问题2. 网络分区和宕机3. 并发写入导致的脏数据4. 持

vscode不能打开终端问题的解决办法

《vscode不能打开终端问题的解决办法》:本文主要介绍vscode不能打开终端问题的解决办法,问题的根源是Windows的安全软件限制了PowerShell的运行,而VSCode默认使用Powe... 遇到vscode不能打开终端问题,一直以为是安全软件限制问题,也没搜到解决方案,因为影响也不大,就没有管