VUE语法

Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统，只关注视图层，易于上手。所有东西都是响应式的。

VUE相比于传统的js的开发优势

在传统开发中，用原生的 JavaScript DOM 操作函数对 DOM 进行频繁操作的时候，浏览器要不停的渲染新的 DOM 树，导致页面看起来非常卡顿。
vue 是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和 DOM ，这样大大加快了访问速度和提升用户体验。
轻量级渐进式框架
视图、数据和结构的分离
响应式双向数据绑定
组件化
虚拟DOM
运行速度快，易于上手
便于与第三方库或既有项目整合
以前是.html文件，开发也是html，运行也是html。
现在是.vue文件，开发是vue，经过编译后，运行时已经变成了js文件。
现代前端开发，很少直接使用HTML，基本都是开发、编译、运行。所以 uni-app 有编译器、运行时的概念。

VUE常用库

{
  "dependencies": {
    "adapter": "1.0.0-beta.10",
    "axios": "0.27.2",
    "dayjs": "^1.11.3"
  }
}

持久化存储

页面跳转

与Native互通数据、通信

通信方面参考官方Demo即可，不再赘述，官方Demo已经实现了下列功能

uni调用安卓方法传参、原生回调
安卓调用uni方法传递数据、uni监听即可
UNI调起原生安卓页面，原生页面关闭携带参数返回，返回之后原生再调用uni方法传参即可。

不使用插件的方式直接打开Android原生页面

methods: {		
        scanQrCode: function() {
				var main = plus.android.runtimeMainActivity();
				var Intent = plus.android.importClass("android.content.Intent");
				var intent = new Intent(main.getIntent());
				//设置要开启的Activity包类路径  classname为要跳转的界面
				intent.setClassName(main, "com.xxx.xx.app.xxx");
				//开启新的任务栈 （跨进程）
				intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
				intent.putExtra("authCode", "123456");
				//开启新的界面
				main.startActivity(intent);
			}
		}

uni-app与Android混合开发配置注意点(坑点)

HbuilderX IDE版本号需要与下载的离线SDK的版本号保持一致
需要注册HbuilderX官方账号
创建应用并拿到AppID
需要通过sha1算法生成keystore文件，一定要注意别名、文件名。后面要使用 ask.dcloud.net.cn/article/357…
需要拿到sha1的值
通过sha1的值，和Android项目的包名，去生成App Key
需要把拿到的App Key配置在Android项目的manifest文件内

需要把生成的keystore文件放在Android项目的app目录下面并配置在build.gradle

signingConfigs {
    config {
        keyAlias 'xxxxx'
        keyPassword 'xxxx'
        storeFile file('xxxxx.keystore')
        storePassword 'xxxxx'
        v1SigningEnabled true
        v2SigningEnabled true
    }
}

buildTypes {
    debug {
        signingConfig signingConfigs.config
        minifyEnabled false
        proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
    }
    release {
        signingConfig signingConfigs.config
        minifyEnabled false
        proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
    }
}

使用HbuilderX离线打包的时候，一定要注意AppID和以及项目名称，保持和你在Hbuilder开发者后台创建的一致

一定要注意所有需要配置Android包名的地方保持一致

jar包读取问题，app的build.gradle添加依赖

implementation fileTree(dir: 'libs', include: ['*.aar', '*.jar'], exclude: [])

分包、NDK架构

multiDexEnabled true
ndk {
    abiFilters 'x86', 'armeabi-v7a', 'arm64-v8a'
}

AndroidX适配问题

注意gradle.properties下面添加

android.useAndroidX=true
android.enableJetifier=true

app的build.gradle添加依赖

implementation 'androidx.recyclerview:recyclerview:1.0.0'
implementation 'com.facebook.fresco:fresco:2.5.0'
implementation "com.facebook.fresco:animated-gif:2.5.0"
implementation 'com.github.bumptech.glide:glide:4.9.0'
implementation 'androidx.legacy:legacy-support-v4:1.0.0'
implementation 'com.alibaba:fastjson:1.1.46.android'

uni-app SDK 升级问题

SDK升级时，data下资源需要同时更新
将HBuilderX中的项目导出，将导出的资源复制到assets->apps下，如果没有assets、apps文件夹，需要手动创建，注意文件夹名字一定要完全一样
注意同步修改dcloud_control.xml文件的app_id
注意文件夹目录结构

HBuilderX Mac 升级之后，无法启动的问题

ask.dcloud.net.cn/article/357…

uni-app离线打包流程

环境

HbuilderX 3.4.7

步骤

刷新APPID

打包

打包完成

导入安卓原生项目即可
需要在assets下面创建apps文件夹并拖入使用HbuilderX生成的www包即可

uni-app与Android混合开发

VUE语法

VUE相比于传统的js的开发优势

VUE常用库

持久化存储

页面跳转

与Native互通数据、通信

推荐使用官方推荐的编写插件的方式进行通信

通信方面参考官方Demo即可，不再赘述，官方Demo已经实现了下列功能

不使用插件的方式直接打开Android原生页面

uni-app与Android混合开发配置注意点(坑点)

AndroidX适配问题

uni-app SDK 升级问题

HBuilderX Mac 升级之后，无法启动的问题

uni-app离线打包流程

环境

步骤