我付出了这么多，你怎么超越我啊👨‍🔧

前言（为什么要使用uni-app）

一套代码可以发布到小程序,app,h5等。目前支持几乎所有平台的小程序😏
只需掌握Vue语法即可，上手极快🤔
不需要app原生开发程序员了，减少成本。

前期准备工作

创建项目和打包尽量使用HbuilderX开发工具 HubilderX自带了uni-app的运行环境🌮，包括后续如果uni-app升级了你只需要更新编辑器就可以了始终保持编辑器是最新的✨。然后代码逻辑的编写建议还是使用自己熟悉的编辑器🍤。
创建项目，熟悉目录结构🍵。
详细了解 manifest.json文件中每一个参数的意义🍐

组件/插件引入以及使用

早期组件的引用方式

这种的引用方式其实已经足够清晰了🎏，但是总有小伙伴觉得麻烦🎍。

import导入组件
components里注册组件
template中使用组件

现在的引用方式

只要组件安装在项目的components目录下或uni_modules目录下，并符合components/组件名称/组件名称.vue目录结构✨。就可以不用引用、注册，直接在页面中使用(easycom组件规范HBuilderX 2.5.5起支持)

UI组件

uview👓

安装方式有两种选择!

插件市场进行安装 (提供了丰富的插件)

通过npm进行安装(尽量使用插件市场进行安装插件包，有可能有一些npm提供的包，uni-app支持的不是很好)

原生组件原生组件也提供很多好用的组件👓

开发中遇到的问题

路由跳转

页面之间跳转 : uni.navigateTo

tabBar之间跳转: uni.switchTab 由A页面填写表单跳转到B页面，再由B页面跳转到A页面填写的表单消失了原因是使用了uni.navigateTo应该使用uni.navigateBack 路由跳转建议使用uview中提供的路由跳转

任意组件通信

uni.$emit('事件名',{params}) // 发起事件
uni.$on('事件名',(params)=>{}) // 监听事件
uni.$once('事件名',(params)=>{}) // 只监听事件一次 
uni.$off('移除事件') // 移除事件

版本兼容问题

app打包之后或者在编辑器上运行时可能遇到上图中的问题，有两种解决办法`🎐。

升级HubilderX的版本🎊(保证本地环境的版本与线上打包的版本一致)
使用版本忽略🎃（不推荐,因为毕竟是版本不统一，可能会造成异常）在manifest.json文件的源码视图中配置忽略这个提醒，在“app-plus”->"compatible" 节点下添加配置

{
  "app-plus": {  
      "compatible": {  
          "ignoreVersion": true //true表示忽略版本检查提示框，HBuilderX1.9.0及以上版本支持  
      },  
  //....  
  }
}

移动端的启动动画，如何兼容各种手机分辨率的适配。

使用.9png里面有具体制作方法也可以让设计部帮咱们出.9png的图片。

`plus is not defined`

plus是5+Runtime的内部对象。只有在手机端才能使用·进行调用解决办法: 在系统中判断版本 uni.getSystemInfoSync().platform如果不用考虑网页端不加该判断也可以

为什么要使用本地打包?

包名规范 (打包的作用就是帮助我们生成APK、IPA文件)

包名必须包含至少两个段，由一个或多个点隔开。例如：com.abc，tencent.qq.mm；

每个段的字符必须是小写字母、数字或下划线[a-z0-9_]组成；每个段必须以字母开头

Android证书

1.	安装JRE环境
2.	keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore test.keystore
3.	testalias是证书别名，可修改为自己想设置的字符，建议使用英文字母和数字
4.	test.keystore是证书文件名称，可修改为自己想设置的文件名称，也可以指定完整文件路径
5.	36500是证书的有效期，表示100年有效期，单位天，建议时间设置长一点，避免证书过期
6.	keytool -list -v -keystore test.keystore   //查看证书信息
7.	Enter keystore password: //输入密码，回车

为什么要使用本地打包？如果某一天你需要对接一个第三方的sdk 比如说一个NFC扫描身份证的功能🧵，对方提供的sdk是jar包的这种形式在uni-app中是无法进行实现的（当然也可能是因为我水平不够🤦‍♂️），只能通过本地打包的形式在原生android中进行实现。其余情况使用云打包是非常方便的🛒。

uni-app和jar包之间的通信如何实现？

在离线打包的项目中新建一个实现类
在实现类中调用第三方的jar包提供的sdk
在uni-app中调用实现类的方法实现通信

安卓端：
package com.hji.test;  
public class AddCount {  
public int androidAdd(int a, int b) {  
    // 这块就是安卓调用第三方sdk的方法
        return a + b;  
    }  
}  
Uni-app端:
 addUniApp(){  
     var AddCount = plus.android.importClass('com.hji.test.AddCount');  
     var addCount = new AddCount();  
     this.result1 = androidAdd.add(1,2);  
}

Native.js

如果跟原生安卓有交互是一定要用到native.js的就像官网说的一样🎯;如果说Node.js把js扩展到服务器世界🚘，那么Native.js则把js扩展到手机App的原生世界,所以想要精通uni-app Native.js还是要有一定的了解的🍣。

获取中文的地理位置信息（使用高德地图）高德地图开放平台，app手机通知uniPush，后台常驻。

以上东西用起来还是有很多坑的，一一描述起来还是很困难的🎃，如果有小伙伴感兴趣，可以留言我们一起进步🙆‍♂️

总结

其实uni-app提供的是一种框架实际上内部大多是都是vue的语法所以大家学习uni-app的前提一定要有vue的基础🍗，听说现在已经支持vue3.0了大佬们都在努力，我们有什么资格不努力呀🎨。加油！🍝

对uni-app的小擒拿