【vue】首次uniapp搭建跨端应用全过程

一、需求

创建工单（增删改查）

生成工单里的细则项

为这些细则项添加图片（可以拍照上传图片、预览）

图片的修改和删除

PS：感觉功能相对简单，放弃一直用的web+cordova，试一下uniapp跨端开发

平台：h5和android

二、构建项目

创建 vue3 项目，vue-cli形式失败，npm镜像里404uniapp依赖

还是mark下代码

//vue 3
npx degit dcloudio/uni-preset-vue#vite my-vue3-project

//vue 2
npm install -g @vue/cli
vue create -p dcloudio/uni-preset-vue my-project

/*****
注：如命令行创建失败，请直接访问 gitee 下载模板
虽然官网上写的不限ide，但是没有成功
依赖安装需要权限，似乎只有hbuilder可以顺滑下载
*****/

于是视图模式，构建了一个uni-ui的项目

如果选了默认的基础项目，可以在编译模式下安装uni-ui组件库

npm install @dcloudio/uni-ui

引入

import Vue from 'vue'

import uniUi from '@dcloudio/uni-ui' 

Vue.use(uniUi)

因为直接构建了个uni-ui的项目，这个没有试~

@dcloudio基本上npm的镜像库上都404，淘宝上下会报权限问题~

视图模式下创建项目成功~

三、安装JS组件库

因为需要一些其他的组件库，还是装了个终端

第一个问题出现，uniapp项目默认是没有package.json文件的~ 当然也没有vue.config.js

背书：如何管理uniapp项目的依赖和脚本？

1. ‌集成开发环境(IDE)管理‌：在uniapp中，项目的依赖和脚本通常是通过集成开发环境（如HBuilderX）来管理的。开发者无需手动创建package.json文件，而是可以按照uniapp提供的开发规范进行编码。
2. ‌uni_modules目录‌：uniapp内置了一个uni_modules的目录，里面包含了大量的平台相关组件和插件，开发者可以直接在项目中引用这些组件和插件，以满足跨平台开发的需求。
3. ‌uni-app-plus插件市场‌：为了扩展特定功能，uniapp还提供了uni-app-plus插件市场，开发者可以在这里获取所需的插件，并将其集成到自己的项目中。

综上所述，虽然uniapp没有package.json文件，但它通过其他方式（如manifest.json文件、IDE管理、uni_modules目录和uni-app-plus插件市场）来管理项目的配置、依赖和脚本。这种开发方式使得uniapp能够满足多个平台的开发需求，并为开发者提供了更广阔的应用场景和更多的开发可能性。

虽然没有package.json但是有package.lock, 也可以npm install组件库

不习惯还是要把package装上

输入npm init命令并按回车。这个命令会启动npm的初始化流程，引导你填写项目的相关信息，如项目名称、版本号、描述等。（注意，如果用了这个，之前安装的依赖就没了，需要重新装）

你也可以使用npm init -y来快速生成一个带有默认值的package.json文件。

安装 js 依赖~

四、编译npm run dev:h5运行

node.js习惯，还是想弄个编译环境 实现npm run dev

于是写了个script

 "scripts": {
    "dev": "vue-cli-service serve",
  },

Error: Cannot find module 'vue-template-compiler'

For：npm run dev:h5

"scripts": {
    "dev:h5": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve",
    "dev:h5": "uni-build-webpack --watch --platform h5 --port 8084",
    
  }

uni-server是装不上的~

至此编译模式下运行探索失败！因为视图模式下可以运行，没有深究~

五、路由

和之前vue.router的路由不同，uniapp的路由在根目录下的page.json里

视图直接新建页面会连同目录一起自动生成到page.json

携带一个header，自定义的话

"pages": [{
		"path": "pages/index/index",
		"style": {
			"navigationBarTitleText": "", //标题
            "navigationStyle": "custom" //自定义
		}
	}]

"navigationStyle": "custom" 页面不会自动生成header了可以用uni-nav-bar自己写

六、h5测试环境

第一想到的就是接口的反向代理设置

uniapp没有vue.config.js

生成了一个，但是没有用，在manifest.json文件里配置了各平台的信息

"h5" : {
  "devServer" : {
    "port" : 8084,
    "proxy" : {
      "/prefix/api/user/list": {
        "target": "https://api-remote.xxxx.com",
        "changeOrigin": true,
        "pathRewrite": {
          "^/prefix": ""
        }
      }
    }
  }
}

基于vue 的开发经验~ h5（PC浏览器模拟）运行的功能顺利开发完成~

期间只有一些uni-ui使用不熟练的问题~略过

七、app-plus 跨端调试

暴露了首次用hbuilder的菜鸟心态，还一直担心app的接口跨域设置问题——不存在的——呵呵~

app-plus不需要配的，url直接用真实的ip即可！

但是需要区分下不同的运行平台，自动选择使用哪种url

起初选择使用

let url1 = ""
// #ifdef APP-PLUS
url1="ip/api"
// #endif
// #ifndef APP-PLUS
url1="/api"
// #endif

报错，[plugin:uni:pre] Unbalanced delimiter found in string

AI问题分析

• #ifdef 和 #endif 之间的代码中存在未转义的特殊字符，干扰了条件编译的解析。
• #ifdef 和 #endif 没有正确配对，例如多写了一个 #ifdef 或者少写了一个 #endif。

不存在的……

绕行，根据systemInfo里的uniPlatform是app 还是 web判断~

成功！

八、安卓app测试的各种问题

1、接口貌似通了，但是，测试通，正式的还是不通（执行卡住了），也没有报错信息

按部就班的showToast，title标记运行到哪步的hack~

原来是app不识别 对象深层属性访问的 ?. 

改成普通的 . 取属性~

向下一步，依然没有顺利访问接口

项目接口身份验证需要在请求头里携带

navigator.userAgent、navigator.platform、navigator.vender

navigator——app里没有，卡住

用getSystemInfo获取一部分，userAgent在manifest.json里自定义

或者——直接写死也可以！

搞不懂之前设计接口时为什么要判断这些东西！

2、拍照权限

使用uni.chooseImage 调用拍照

还需要manifest的安卓/ios模块配置里选个相机权限（camera&Gallery相机相册）才能正常使用设备。

3、上传文件

开发是就出现问题，用uni.requset 传formData格式的文件

uni.request设置

config['Content-Type'] = "multipart/form-data";

无效

上传文件需要用uni.uploadFile

而且formData的格式也和以往的append方法不同，file单独存成filePath，其余参数formData用json存。

FileAPI({

name: 'file',

filePath: res.tempFilePaths[0],

formData: {

"preId": this.activeStep.id

}

})

上传成功了！疑惑如果有多个文件咋办？

本次开发只涉及单独一个文件上传（拍照），不需要考虑多个文件的问题~

3、预览图片

下载文件其实也有uni单独的函数，但是还是用了request

config["responseType"] = "blob"; 无效，和上传不同responseType可以改但是下载后格式没有变。

于是采取——强转！

var blob = new Blob([res.data]);

又成功了~

其实uni.downloadFile应该顺利一些吧

这里还没有意识到“真正的”问题！

手机测试——预览图片还是不显示！

AI：app没有URL.createObjectURL(blob)，需要判断平台单独处理

#h5用
URL.createObjectURL(blob)
#app用
const tempFileUrl = plus.io.generateTempFileURL();
const convertedUrl = plus.io.convertLocalFileSystemURL(tempFileUrl);
plus.io.resolveLocalFileSystemURL(convertedUrl, (fileEntry) => {
    fileEntry.createWriter((fileWriter) => {
        fileWriter.write(blob);
        fileWriter.onwriteend = () => {
          if(tempFileUrl){
            callback(tempFileUrl);
          }
        };
    }, (error) => {
        console.error('创建文件写入器失败', error);
    });
}, (error) => {
    console.error('解析文件系统URL失败', error);
});
#白写，没有用的

打了showToast发现，生成blob数据和blob生成图片的函数在app上根本没有调用~

没有blob格式？

config["responseType"] 只有text和arrayBuffer

于是放弃blob转向arrayBuffer和base64

#接口
config["responseType"] = "arraybuffer";
#页面上
const arrayBuffer = new Uint8Array(resp.data);
const base64 = "data:image;base64,"+uni.arrayBufferToBase64(arrayBuffer);
file.src = base64;
#

成功了！至此功能完成！

需求的功能基本上都完成了，开始一些优化~

九、滑动返回控制

app向右滑动返回功能的问题，可能会从登录页滑动后又返回到首页或其他页~

理想效果：首页和登录页右滑——退出or最小化app

onBackPress(options) {
      options.preventDefault();
      if(uni.getAppBaseInfo().uniPlatform === 'app'){
        uni.showModal({
          title: '退出提示',
          content: '你确定退出App吗？',
          success: (res) => {
            if (res.confirm) {
              plus.runtime.quit();
            } 
          }
        });
      }
    },

不行~

滑动返回并没有调用这个方法~

注意力来到了跳转页面的栈队列上，开始用的都是uni.navigateTo

uni.navigateTo

#保留当前页面，可以返回

uni.redirectTo

#关闭当前页面，跳转到应用内的某个页面。

uni.reLaunch

#关闭所有页面，打开到应用内的某个页面。

所以要实现滑动退出，把到首页和登录的入口都改成了reLaunch就行了~

暂时~完成

总结

由于是头一次写uniapp，磕绊比较多，应该还有很多可以优化的地方。

计划之后系统的重新构建一套app，再写一个比较详细的开发过程~