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
1

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

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

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

输出格式如下

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

然后如下图配置到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": "/"
  			    }
        }
      }
    }
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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
2
3
4
5

3. 使用字体库

<i class="iconfont icon-xxx"></i>
1

4. 如果为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')"
 			});
 		}
 	}
1
2
3
4
5
6
7
8
9

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

5.1. 第一种安装lottie-web

1. 下载安装lottie-web

cnpm install lottie-web --save
1

2. 引入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')
 })

1
2
3
4
5
6
7
8
9
10
11

• 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 -->
1
2
3
4
5
6
7
8
9
10
11
12