位置: IT常识 - 正文

Vue 项目如何迁移小程序(怎么把vue项目跑起来)

编辑:rootadmin
Vue 项目如何迁移小程序

推荐整理分享Vue 项目如何迁移小程序(怎么把vue项目跑起来),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue项目迁移uniapp,vue项目如何迁移uniapp,vue怎么导入项目,vue项目转app,vue项目迁移,vue3 迁移,vue项目转app,vue项目转app,内容如对您有帮助,希望把文章链接给更多的朋友!

最近我们看到有开发者在社群里提出新的疑惑「我手头已经有一个成熟的 HTML5 项目了,这种项目可以转为小程序在 FinClip 环境中运行吗?」。

经过工作人员的沟通了解,开发者其实是想将已有的 Vue 项目转为小程序,在集成了 FinClip SDK 的 App 中运行小程序,那这里我们就需要关注以下两个注意事项:

Web 项目是适合在手机等移动设备中运行的,屏幕已经兼容;H5 项目的代码是前后端分离的;

在本篇文章中,我们选择使用了一款成熟的跨平台框架 uni-app 来处理这个问题。

第一步:创建 uni-app 项目

一切都需要先从一个 uni-app 项目开始,然后再一次进行。

1. 全局安装 vue-clinpm install -g @vue/cli2. 通过 CLI 创建 uni-app 项目vue create -p dcloudio/uni-preset-vue uniapp-projectVue 项目如何迁移小程序(怎么把vue项目跑起来)

注意:创建 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、style,template 节点下必须且只能有一个根 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>变成了<view>,<span>变成了<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 apiajax 改成 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 apigeolocation 的定位方式改为 uni.getLocationuseragent的设备 api 没有了,改用 uni.getSystemInfo处理 dom api如果使用标准 vue 的数据绑定,是不需要操作 dom 来修改界面内容的。如果没有使用 vue 数据绑定,仍然混写了 jquery 等 dom 操作,需要改为纯数据绑定有时获取 dom 并不是为了修改显示内容,而是为了获取元素的长宽尺寸来做布局。此时 uni-app 提供了同小程序的另一种 api,uni.createSelectorQuery其他 js apiweb 中还有 canvas、video、audio、websocket、webgl、webbluetooth、webnfc,这些在 uni-app 中都有专门的 api。生命周期uni-app 补充了一批类小程序的
本文链接地址:https://www.jiuchutong.com/zhishi/295261.html 转载请保留说明!

上一篇:vue引用public目录下文件(vue引入文件路径@的意思)

下一篇:Idea中运行Vue项目(idea如何运行vue项目)

  • 年终双薪究竟该怎么算
  • 一般税收协定是多少
  • 实际已缴纳所得税额不自动带出
  • 母子公司间借款利息交税吗
  • 闲置固定资产如何做账
  • 会计做账借贷怎么做
  • 结转完工产品生产成本会计科目
  • 收到电子退库的摘要怎么写
  • 赠与合同收税吗
  • 少提的税金如何做账
  • 企业股东投资
  • 库存商品进行非货币资产交换收入怎么确定
  • 中央空调 付款
  • 个人独资的企业性质是什么
  • 实行差额征税的劳务派遣公司一般纳税人认定标准
  • 商铺 公司
  • 退税差额怎么做账
  • 实际缴纳的增值税税额怎么算
  • 对外捐赠视同销售分录
  • 公户以借款形式打款给个人,对个人有影响么?
  • 工程费用包括哪几类
  • 增值税发票确认时间
  • 私人公司老板
  • win10如何查看显卡版本
  • 建筑公司分包
  • 在境外缴纳的增值税税率
  • 总账建账科目顺序
  • eml文件怎么打开方式
  • win7系统为什么没有虚拟光驱
  • bios中怎么设置显卡
  • 文件夹正在使用,操作无法完成
  • 微信小程序实现发红包
  • replace.exe进程
  • 有关预收账款的说法正确的是
  • 补缴税款怎么补
  • 法恩达尔的信
  • 可供出售交易资产
  • 动销率怎么看
  • vue的actions
  • framework3.5怎么打开
  • vue项目首屏加载过慢
  • cp命令复制系统文件/etc/profile
  • 社保基数是按基本工资还是应发工资
  • phpstudy配置php环境变量
  • python中的threading模块
  • 短期投资计提跌价准备
  • 增值税买票卖票
  • 办税人员可绑定银行卡吗
  • 增值税和个人所得税怎么算
  • c语言http请求解析表单内容
  • 长投对方亏损
  • 企业所得税弥补亏损可以弥补几年
  • 销售 返利
  • 印花税税率是多少
  • 车辆购置税的会计科目怎么写
  • 扶贫差旅费
  • 企业实收资本怎么计算
  • 汇算清缴结束后发现有错账
  • 任何单位和个人都应当()为报警
  • 固定资产卡片录入日期怎么改
  • sql server 执行语句
  • 怎么查看445端口有没有关闭
  • fdisk 分区表
  • 用注册表关闭更新
  • Windows update更新服务启动被拒绝访问
  • windows8如何添加打印机
  • 电脑没有网络连接怎么办
  • media and
  • 同一个文件夹中的文件可以同名吗
  • python根据ip获取主机名
  • Clean Empty Directories on Unity3D and Git
  • activity生命周期的方法
  • node.js的理解
  • unity3d从入门到精通
  • Android应用开发实训
  • 国家税务总局12366上海(国际)纳税服务中心
  • 高速通行费发票查验
  • 深圳营业执照办理咨询电话
  • 南通 医疗
  • 滞留票税务局会罚款多少
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设