uni-app 踩坑

开头：最近做一个平板app，比较简单，为了快速开发上手，所以用uniapp，踩了一些坑

 

相关链接：uni-app官网

一、开发工具+基础模板

1. 使用HBuilder X编辑器进行开发

DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架

2. 新建项目，选择uni-app默认模板，其他的配置（store、router、api等）自己加上去

3. ui库（uni-ui）

npm i @dcloudio/uni-ui

  界面使用

<uni-easyinput></uni-easyinput>

import { uniEasyinput } from '@dcloudio/uni-ui'

components: { uniEasyinput },

二、相关配置

1. 路由：page.json

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
            "path" : "pages/login/login",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        },
		{
			"path": "pages/index/index",
			"style": {
				"app-plus": { "titleNView": false } // 去掉返回按钮
			}
		}
    ],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}

uni.navigateTo({ // 跳转
	url: '../../pages/login/login'
})

三、组件

1. uni-indexed-list + pinyin 识别

使用pinyin依赖对每个汉字进行识别拼音首字母

import pinyin from 'js-pinyin'

pinyin.setOptions({ checkPolyphone: false, charCase: 0 })
const opt = '语文'
const char = pinyin.getCamelChars(opt).substring(0, 1) // YW

2. 内嵌网页

<web-view src="https://blog.csdn.net/weixin_44794123?spm=1001.2101.3001.5343"></web-view>

3. 插件生成二维码

tki-qrcode插件二维码的生成_偷吃零食的小猫咪的博客-CSDN博客_tki-qrcode 

4. APP表单验证

username: { 
     rules: [
	    { required: true, errorMessage: '必填' },
	    {
		    validateFunction:function(rule,value,data,callback){
			    const res = /^\d/
			    if (res.test(value)) {
				    callback('首位不能是数字')
			    }
			    return true
		    }
	    }
] },

四、踩的坑
1. 组件没有生命周期，没有onLoad，onShow，onReady。但是可以使用created和mounted是生效的

2.APP跳转慢，考虑分包
在manifest配置以下节点，可以在App端启动分包

"app-plus": {
  "optimization": {
    "subPackages": true
  },
  "runmode" : "liberate" // 开启分包优化后，必须配置资源释放模式
}