本人有四年前端开发经验,数量掌握JavaScript、TypeScript,数量掌握vue2、vue3、react等前端框架,拥有丰富的后台管理系统、pc端、手机端H5、app内嵌webview开发经验。开发过多款微信小程序,可用原生开发,uni-app开发小程序。
APPwebview模板开发
「项目背景」:APP 中的 webview 页面非常多,很多还是临时页面,每次都需要新建项目并且做很多重复的工作,非常费时费
「项目功能」:所有 webview 项目的集合,可以单独运行某个项目或者运行所有项目,可以分别打包项目。设置一些和 APP 交互常用的方法和组件,方便所有项目调用。
「具体内容」:
1. 组件开发、路由配置、状态管理等
2. 性能优化:利用代码拆分、懒加载、图片压缩等,能够显著提升页面加载速度和用户体验,性能提升30%以上;
3. 利用前端工具和框架(如 PostCSS、Babel等)来自动处理兼容性问题,提高开发效率
4. 二次封装 jsBridge 通信工具,实现h5端与原生端的高效通信;
5. webpack 构建优化:使用 splitChunks 将代码分割成较小文件按需加载,减小包体积30%以上
测肤小程序
「「项目背景」:需要开发一个可以让用户在小程序上测肤,并且要开发一个可以在多端(小程序、Android、iOS等)展示的结果页面。
「项目功能」:用户在小程序端通过人脸识别上传可用的人脸照片。在 web 中展示测肤结果并且可以保存测肤结果简介的图像。
「遇到问题」:
1. 人脸识别需要使用 TensorFlow 加载模型,但是链接到外部网站,但小程序只可以使用白名单内的外部链接,显然该链接加入白名单中不合适。
2. 华为机型在微信小程序8.0.32版本后无法使用 TensorFlow 加载模型,需要改为 wasm 模式识别人脸,但方法太老已经无法直接从小程序下载依赖包。
「解决方案」:
1. 创新性地实现模型文件本地化,通过下载模型及 JavaScript 文件至自有服务器,并更新源码链接,确保小程序安全、高效地加载人脸识别模型,解决小程序无法直接链接外部 TensorFlow 模型的问题
2. 从 npm 官网获取 TensorFlow的 wasm 源码及依赖,手动集成至小程序包,并针对性修复源码报错,确保在受限环境下人脸识别功能依旧稳定可靠
「项目背景」:需要开发一个可以让用户在小程序上测肤,并且要开发一个可以在多端(小程序、Android、iOS等)展示的结果页面。 「项目功能」:用户在小程序端通过人脸识别上传可用的人脸照片。在 web 中展示测肤结果并且可以保存测肤结果简介的图像。 「遇到问题」: 1.
「项目背景」:APP 中的 webview 页面非常多,很多还是临时页面,每次都需要新建项目并且做很多重复的工作,非常费时费力。 「项目功能」:所有 webview 项目的集合,可以单独运行某个项目或者运行所有项目,可以分别打包项目。设置一些和 APP 交互常用的方法和组件,方