电商网站建设与开发期末考试,公司部门职责与岗位职责大全范本,wordpress more分隔标签,电子商务网站的后台管理系统最近我们看到有开发者在社群里提出新的疑惑「我手头已经有一个成熟的 HTML5 项目了#xff0c;这种项目可以转为小程序在 FinClip 环境中运行吗#xff1f;」。
经过工作人员的沟通了解#xff0c;开发者其实是想将已有的 Vue 项目转为小程序#xff0c;在集成了 FinClip …
最近我们看到有开发者在社群里提出新的疑惑「我手头已经有一个成熟的 HTML5 项目了这种项目可以转为小程序在 FinClip 环境中运行吗」。
经过工作人员的沟通了解开发者其实是想将已有的 Vue 项目转为小程序在集成了 FinClip SDK 的 App 中运行小程序那这里我们就需要关注以下两个注意事项
Web 项目是适合在手机等移动设备中运行的屏幕已经兼容H5 项目的代码是前后端分离的
在本篇文章中我们选择使用了一款成熟的跨平台框架 uni-app 来处理这个问题。
第一步创建 uni-app 项目
一切都需要先从一个 uni-app 项目开始然后再一次进行。
1. 全局安装 vue-cli
npm install -g vue/cli2. 通过 CLI 创建 uni-app 项目
vue create -p dcloudio/uni-preset-vue uniapp-project注意创建 CLI 工程时会远程下载 dcloudio/uni-preset-vue拉取失败时如出现如下图所示的错误。这个时候可以通过手动下载模板来创建项目。https://github.com/dcloudio/uni-preset-vue 下载完毕后复制当前的文件路径并且通过命令行来创建项目。 进入命令行之后需要通过vue create -p 文件路径名 项目名来创建项目输入命令之后会提示选择项目模板这里我们选择默认模板。 3. 在 VS Code 中打开创建的 uni-app 项目 当我们能够打开这个 uni-app 的项目时就意味着至此一个 uni-app 项目已经创建好了接下来我们开始对代码进行一些处理优化。
第二步代码处理
在代码处理步骤中我们需要分别对项目文件标签代码js 代码和 css 代码进行针对性优化以下是对应的优化处理内容。
1. 文件处理
把之前的 vue H5 项目的前端代码复制到新项目下如果之前的文件后缀名是 .html需要改为 .vue并注意遵循 vue 单文件组件 SFC 规范比如必须一级根节点为 template、script、styletemplate 节点下必须且只能有一个根 view 节点所有内容写在这个根 view 节点下。处理页面路由 uni-app 默认是小程序的路由方式在 pages.json 里管理页面。如果你使用 vue rooter 的话一种是改造为 pages.json 方式另一种是使用三方插件比如 vue rooter for uni-app静态文件如图片挪到 static 目录 uni-app 工程目录下有个 static 目录用于存放静态文件这个目录不编译直接整体复制到发行代码里的。如果你希望自定义静态资源目录可以在 vue.config.js 中自定义。
2. 标签代码处理
相同功能的组件自动转换 uni-app 的标签组件与小程序相同比如div变成了viewspan变成了text。 但 uni-app 的编译器已经自动处理了这部分转换如果源码中写了可自动转换的组件在编译到非 H5 端时会被自动转换再编译回到 H5 端时 div 还是 div。
div 改成 viewspan、font 改成 texta 改成 navigatorimg 改成 imageselect 改成 pickeriframe 改成 web-viewul、li没有了都用 view 替代
区域滚动使用 scroll-view不再使用 div 的区域滚动处理方式左右、上下滑动切换有专门的 swiper 组件不要使用 div 模拟input 的 search原来的 type 没用了改成 confirmtype详见这里audio 组件不再推荐使用改成 api 方式详见这里之前的 v-html可以在 H5 端和 App 端需v3编译器使用不能在小程序中使用。如需要在小程序使用请使用 rich-text 组件或 uparse 扩展插件详见这里
3. js 代码处理
uni-app 的非 H5 端不管是 App 还是各种小程序都不支持 window、navigator、document 等 web 专用对象。uni-app 的 API 与小程序保持一致需要处理这些不同的 API 写法。
处理 window api
ajax 改成 uni.request。插件市场也有适配 uni-app 的 axios、flyio 等封装拦截器cookie、session.storage 没有了改用 uni.storage 吧local.storage 也改成 uni.storage。另外插件市场有一个垫片 mp-storage可使用之前的代码兼容运行在 uni-app上alert,confirm 改成 uni.showmodelwindow 的 resize 改为了 uni.onWindowResize
处理 navigator api
geolocation 的定位方式改为 uni.getLocationuseragent的设备 api 没有了改用 uni.getSystemInfo
处理 dom api
如果使用标准 vue 的数据绑定是不需要操作 dom 来修改界面内容的。如果没有使用 vue 数据绑定仍然混写了 jquery 等 dom 操作需要改为纯数据绑定有时获取 dom 并不是为了修改显示内容而是为了获取元素的长宽尺寸来做布局。此时 uni-app 提供了同小程序的另一种 apiuni.createSelectorQuery
其他 js api
web 中还有 canvas、video、audio、websocket、webgl、webbluetooth、webnfc这些在 uni-app 中都有专门的 api。
生命周期
uni-app 补充了一批类小程序的声明周期包括 App 的启动、页面的加载详见这里vue h5 一般在 created 或者 mounted 中请求数据而在 uni-app 的页面中使用 onLoad 或者 onShow 中请求数据。组件仍然是 created 或者 mounted
少量不常用的 vue 语法在非 h5 端仍不支持data 必须以 return 的方式编写注意事项详见这里 注意如果你使用了一些三方 ui 框架、js 库其中引用了包括一些使用了dom、window、navigator 的三方库除非你只做 H5 端否则需要更换。去 uni-app 的插件市场寻找替代品。如果找不到对应库必须使用 for web 的库在 App 端可以使用 renderjs 来引入这些 for web 的库。 4. css 代码处理
uni-app 发布到 App非nvue、小程序时显示页面仍然由 webview 渲染css 大部分是支持的。但需要注意以下内容
不支持 *选择器没有 body 元素选择器改用 page 元素选择器。编译到非 H5 时编译器会自动处理。所以不改也行div 等元素选择器改为 viewspan 和 font 改为 texta 改为 navigatorimg 改为 image…编译到非 H5 时编译器会自动处理。所以不改也行不同端的浏览器兼容性仍然存在避免使用太新的 css 语法否则发布为 App 时Android 低端机Android 4.4、5.x会有样式错误。
通过以上步骤基本上就能够把已有的 vue 项目转为对应的小程序代码规范了。
第三步将小程序移动至 FinClip 中
在完成以上工作任务后我们应该在 uni-app 中已经得到了一个结构完整且可以运行的非 H5 项目了。最后我们可以通过在 uni-app 中代码发布为微信小程序或者直接通过集成 FinClip 插件的形式进行处理这两种形式都比较简单。
使用 uni-app 将小程序发布为微信小程序 我们可以直接在编译器中将代码发布为“微信小程序”的相关格式随后再通过 FinClip 打开对应的小程序最后就可以直接运行了。 到这里将已有基于 Vue 格式编译的 H5页面就可以正常迁移为对应的小程序了如果如果你在使用过程中遇到了任何困难也可以加入 FinClip 开发者社群了解更多信息。
