uni-app分享

uni-app介绍

• uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。uni-app在底层为我们打通了多个平台间的差距，在开发的时候不用考虑太多兼容性问题。
• 适用场景

1. 跨端应用：需要同时发布多端，例如App，H5，小程序的场景
2. 小程序的开发：不需要再进行原生的小程序开发，提高开发效率
3. 需求H5 + App，而且App跟H5没有太大不同
4. 只需要支持安卓平台的App，公司内部没有安卓开发人员

• 优点

1. 学习成本低，使用跟Vue一样的语法，上手简单
2. 可以由Vue代码修改成为uni-app的代码，复用性强
3. 开发成本低，可以开发一套代码，适配多个平台，减少冗余的跨端开发任务，节省人员开支和开发时间，快速交付
4. 不需要安装环境，只需要HBuilderx

• 缺点

1. 不适合开发大型的原生应用程序，存在一定的性能问题
2. 产品尚有许多兼容性缺陷，需要开发人员注意

Vue H5代码打包成App

• yarn build生成dist文件
  1. webpack打包时 publicPath需要设置成 ./
  2. aixos需要设置baseApi，无法使用代理

• HBuildex新建5+ app项目

  
  
  image.png

5+app项目目录分析

image.png

• manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。
• unpackage 就是打包目录，在这里有各个平台的打包文件
• index.html vue打包生成dist入口文件

manifest.json配置

• 基础配置
• 图标配置

打包步骤

• 删除5+app里面的css、img、js、index.html文件
• 把生成的dist文件复制到5+app项目根目录下，index.html和manifest.json同级
• 发行 => 原生App云打包 => 打包

uni-app开发app注意事项

项目目录分析

image.png

• pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等

• manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。

• App.vue是我们的根组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。

• main.js是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。

• unpackage 就是打包目录，在这里有各个平台的打包文件

• pages 所有的页面存放目录

• static 静态资源目录，例如图片等

• components 组件存放目录

使用组件、插件

https://www.jianshu.com/p/5dcada1d8f8d?from=timeline
https://ext.dcloud.net.cn/

App真机调试

• 手机开发者模式下打开USB调试，并连入电脑，选择传输文件

  
  
  image.png
• HBuildex中运行 => 运行到手机模拟器
  
  image.png
  
  https://www.jianshu.com/p/5d8e9699e5d2

不能使用window对象

// 浏览器中顶级对象是window对象
console.log(window) // window对象
// App中,调用原生App能力有一个plus对象
console.log(window) undefined

文件上传下载

  // 上传
  uni.uploadFile({
    url: sysConfig.baseUrl + '/bs/potentialClients/uploadEntryFile', // 文件上传接口
    filePath: item.url, // 文件本地临时路径
    name: 'file',
    header: {
        Authorization: 'Bearer ' + uni.getStorageSync('token')
    },
    success: ({data}) => {})

// 下载
uni.downloadFile({
    url: 'https://www.example.com/file/test', //仅为示例，并非真实的资源
    success: (res) => {
        if (res.statusCode === 200) {
            console.log('下载成功');
        }
    }
});


// 流文件的下载
let dtask = plus.downloader.createDownload(fileUrl[item.key], {
    method: "GET",
    filename:  fileName[item.key]  // 保存文件路径仅支持以"_downloads/"、"_doc/"、"_documents/"开头的字符串。
}, function(d, status) {
    if(status == 200) {
                // 打开文件
        plus.runtime.openFile(d.filename);
    } else {
        //下载失败
        plus.downloader.clear();
    }
})
dtask.setRequestHeader('Authorization', 'Bearer ' + uni.getStorageSync('token'))
dtask.start()

公共数据

优点：轻量，便于使用
缺点：不便于维护大量公共数据，存在性能问题，大型数据推荐使用Vuex

• 公共数据定义，在App.vue下创建globalData配置项，可以在项目中任意地方访问该变量

// App.vue

• 访问，设置公共数据

// pages/index/index.vue

调用原生api

https://www.html5plus.org/doc/zh_cn/xhr.html

复用组件数据渲染失效