2023.12.05 加入,已入驻 184 天。
2023.12.05 加入,已入驻 184 天。
项目职责:项目背景: 工作中有时需要使用手机来查看或者编写 Markdown 文档,调研发现在安卓端应用市场 中 Markdown 编 辑器很少,且渲染模式不够丰富.于是便利用移动端应用框架 uniapp 搭 建一款所见即所得 Markdown 编辑器; 项目技术栈: Vue / Uview-UI / Vditor.js / Revea.js / axios / HTML5+API 技术难点: 1.移动端整合 Vditor.js 2.递归组件模拟文件目录 3.Markdown 转为 PPT 4.webview 与第三方网页通信 5. 热更新 6.跳转链接时文档放丢失 解决方案: 1.使用 webview 组件包含 vditor.js 的网页嵌入应用中,为 vditor.js 提供浏览器环境; 2.将历史文件记录通过 setStorage 存储在本地,在递归组件中获取记录,组件调用自身进行递归渲染,通过 具名插槽将文件和目录渲染在不同的组件中,通过判断文件数组的长度来结束递归; 3.使用 reveal.js 实现将 Markdown 文档转换为 PPT; 4. 提前在第三网页引入环境文件,在 webview 组件的 message 事件中监听第三方网页的 uni.postMessage 事件的触发并获取参数,实现第三方网页与组件的通信.通过 H5+api 中 webview 的 eavlJS 向第三方网页注入 JS 的方式进行组件与第三方 网页的通信 ; 5.在应用生命周期 onLaunch 中配合 axios 在每次打开应用时请求服务器是否更新, 若更新则返回安装 包 url,进行更新; 6.在侦听器中监听 url 变化,通过 wv.overrideUrlLoadingfan 方法根据 url 的新值设 置 webview 跳 转拦截配置为全部拦截,并提醒用户保存内容; 项目收获: 在这个项目中,实现了 webview 与第三方网页的相互通信,文件存储以及前后端交互,了 解到 H5+的 IO 模块和 webview 模块以及 uniapp 应用框架的使用,很大的锻炼了自 己解决问题的能力;