uni-App进阶

本文章围绕以下内容进行详细讲解！！

1.文件上传

1.首先建个页面

把该页面挪在首页

 2.文件上传文档

uni.uploadFile(OBJECT) | uni-app官网【只支持文件上传--文件选择看下文】

3.从本地选择文件文档【顺序是：从本地选择文件文档---再文件上传文档】

uni.chooseImage(OBJECT) | uni-app官网；线虫---方法是chooseImage()

思路：从本地选择上传的文件---点击上传

4.根据2，3点写代码文件上传

打印看chooseImage的res是啥？

运行微信开发者工具

点击上传文件---选择图片--点击确认

打印出结果---拿到了本地临时图片数据【最多只能选择六条图片数据】

我选择四张图片就打印四张数据【待上传临时本地图片路径】

验证是否可以进行上传：返回值200上传成功！！

【注意：微信小程序只支持单个文件上传，所以记得遍历】

2.图片预览

uni-app官网uni-app,uniCloud,serverless,uni.chooseImage(OBJECT),uni.previewImage(OBJECT),uni.closePreviewImage(OBJECT),uni.getImageInfo(OBJECT),uni.saveImageToPhohttps://uniapp.dcloud.net.cn/api/media/image.html#unipreviewimageobject

3.文件下载

效果：存放在本地tmp临时文件--还没有下载成功，需要下载成功返回值为200.，需要查看这个文档哦！----https://uniapp.dcloud.net.cn/api/file/file#savefile

4.拦截器

uni-app的拦截器是API级别的拦截，可以自定义配置要拦截哪些API，由此衍生出很多种拦截需求，如：路由拦截、权限控制等。

https://uniapp.dcloud.net.cn/api/interceptor.html#addinterceptor

在app.vue中

效果

实现拦截

1.拦截navigate

优化

app.vue一般不会写内容！--需要封装-》新建文件，写个js文件

导出去

新建index文件--管理routerInter文件：如果为true就调用routerInter文件的拦截器！

这样我们就不需要维护routerInter文件了

然后引入到app.vue进行调用

效果

2.拦截request请求

进行判断拦截

效果

拦截了这一串东西【这些是请求拦截】

注意！！：我们请求和响应拦截一般都是写在一块的，不会拆开来写----所以我们最好新建utils写在里面---像这样---特例：登录注册可以用addIntercepter

登录注册可以用addIntercepter

跨端兼容

虽然uniapp内置的组件和API已经处理了多平台兼容问题，但由于平台差异性问题，仍存在一些无法跨平台的情况。 uni-app 参考c语言#ifdef、#ifndef思路，提供了条件编译手段，在一个工程里优雅的完成了平台个性化实现。

• #ifdef：if defined 仅在某平台存在

• #ifndef：if not defined 除了某平台均存在

• %PLATFORM%：平台名称，取值范围：跨端兼容 | uni-app官网 (dcloud.net.cn)

9.1 初识条件编译

仅在app运行

比如：

但是在微信小程序打印出来啦！！

比如：除了。。。

没有打印出来h5字样

比如：某某平台和某某平台都支持

css写法

更多知识点查看这里：条件编译处理多端差异 | uni-app官网

1. 支持文件：.vue/.nvue/.uvue；.js/.uts；.css；pages.json及.scss、.less、.stylus、.ts、.pug等。

2. 条件编译利用注释实现，注意不同文件的注释语法。

3. 使用条件编译请保证编译前和编译后文件的语法正确性，即要保障无论条件编译是否生效都能通过语法校验。比如：json文件中不能有多余的逗号，js中不能重复导入。

打包

1.小程序打包

首先来到：微信公众平台进行注册；找到自己的AppID--复制

小程序https://mp.weixin.qq.com/wxamp/wacodepage/getcodepage?token=429034063&lang=zh_CN

点击发行--它会跳转到微信小程序---点击上传

弹出

写好备注内容---点击上传

上传后来到微信开发者工具：找到管理---版本管理--往下翻

点击提交审核

或者你不想上传---可以去真机调试

2 小程序分包

小程序限制单包体积不能超过2mb，因此在较大的小程序应用中，需要使用分包方式来部署代码。

文档：分包优化 | uni-app官网 (dcloud.net.cn)https://uniapp.dcloud.net.cn/collocation/manifest.html#%E5%85%B3%E4%BA%8E%E5%88%86%E5%8C%85%E4%BC%98%E5%8C%96%E7%9A%84%E8%AF%B4%E6%98%8E

我在小程序里面用了很多张图片---然后进行上传发行--然后就会给你报错

那么实现分包，引入 ：

"optimization": {
        "subPackages": true
    }

然后创建一个页面

连续创建三个

内容为

来到这里---敲代码

然后删除这几个页面

然后在首页敲代码

然后点击发行--跳转到微信小程序

我们分别点击三个按钮--看看发生什么

进行了跳转！！

我们看一下分包的大小对比：分包的文件与没分包的文件都有一个_FULL_,但是他们大小不一样

分包的文件会把_FULL_按照【你配置的需要分包的】文件进行拆分，把_FULL_需要分包的文件提取了出来！！----这样就不会导致_FULL_过大！

注：主包是什么：主包就是pages下面的，经过json的页面注册的，分包文件不是主包

再看分包下的pages

咱们点击上传试试

注意:一般tabbar页面不会做分包！！

啥情况使用分包呢？像是跳转的页面，或者接口？就放在分包，除非跳转的页面真的很重要！！

APP打包

点击打包

第一次打包的人---下载插件【点击打包--会给你提示要下载】

结束！！