uniapp问题归类

本文主要讲述了在使用Uniapp开发过程中遇到的问题,如启动页在Android手机上的显示问题、如何定制Android应用的自定义基座、生成和配置证书、解决跨域、引入iconfont字体以及在不同环境下的Lottie动画集成。
摘要由CSDN通过智能技术生成

最近使用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-lottie
      class="play"
      src='@/static/json/play.json'
      width="24rpx" height='24rpx'
      :loop="true"></c-lottie>
  <!-- #endif -->
  <!-- #ifdef APP-PLUS -->
  <x-lottie
    class="play"
    :option="{path:require('@/static/json/play.json')}"/>
  <!-- #endif -->
  • 8
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值