位置: 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项目)

  • 48v20ah等于多少毫安(48v20ah等于多少度)

    48v20ah等于多少毫安(48v20ah等于多少度)

  • 健康码如何申诉(健康码如何申诉黄码变绿码)

    健康码如何申诉(健康码如何申诉黄码变绿码)

  • ipad app内购买是什么意思(ipadapp内购买项目要钱吗)

    ipad app内购买是什么意思(ipadapp内购买项目要钱吗)

  • 微信亮度怎么设置(如何设置微信亮度调节)

    微信亮度怎么设置(如何设置微信亮度调节)

  • Word怎么在字上加横线(word怎么在字上加圈)

    Word怎么在字上加横线(word怎么在字上加圈)

  • 钉钉里的ding是什么意思(钉钉里的DING是什么)

    钉钉里的ding是什么意思(钉钉里的DING是什么)

  • iphone11字体怎么换(iphone11字体怎么加粗)

    iphone11字体怎么换(iphone11字体怎么加粗)

  • 抖音搜索结果为空是什么意思(抖音搜索结果为空)

    抖音搜索结果为空是什么意思(抖音搜索结果为空)

  • 快手极速版注销后是不是会自动解绑微信(快手极速版注销账号要多久)

    快手极速版注销后是不是会自动解绑微信(快手极速版注销账号要多久)

  • 荣耀30s是双卡双待吗(荣耀30s双卡双待都是移动能不能互用流量)

    荣耀30s是双卡双待吗(荣耀30s双卡双待都是移动能不能互用流量)

  • 手机热点怎么关闭(小米手机热点怎么关)

    手机热点怎么关闭(小米手机热点怎么关)

  • 新买的iphone11要更新系统吗(刚买的苹果11需要更新系统吗)

    新买的iphone11要更新系统吗(刚买的苹果11需要更新系统吗)

  • 微信视频图片多久过期(微信视频图片多久会自动过期)

    微信视频图片多久过期(微信视频图片多久会自动过期)

  • 为什么苹果xr屏幕亮度有时候会自动暗下来(为什么苹果xr屏幕点不开)

    为什么苹果xr屏幕亮度有时候会自动暗下来(为什么苹果xr屏幕点不开)

  • 手机qq音乐桌面歌词怎么解锁(手机QQ音乐桌面歌词)

    手机qq音乐桌面歌词怎么解锁(手机QQ音乐桌面歌词)

  • 手机自动录音怎么设置(手机自动录音怎么回放)

    手机自动录音怎么设置(手机自动录音怎么回放)

  • 戴尔电脑怎么分盘(戴尔电脑怎么分屏一半一半)

    戴尔电脑怎么分盘(戴尔电脑怎么分屏一半一半)

  • 六星红旗是哪个国家(六星红旗是哪个国图片)

    六星红旗是哪个国家(六星红旗是哪个国图片)

  • 通知栏显示是什么(通知栏有什么用)

    通知栏显示是什么(通知栏有什么用)

  • 短路是什么意思(局部短路是什么意思)

    短路是什么意思(局部短路是什么意思)

  • 优聊是什么(优聊聊天平台可以赚钱吗)

    优聊是什么(优聊聊天平台可以赚钱吗)

  • 腾讯追剧日历在哪里(腾讯视频日历提醒有什么用)

    腾讯追剧日历在哪里(腾讯视频日历提醒有什么用)

  • 日线绝路航标什么意思(绝路航标指标原理及技术要点)

    日线绝路航标什么意思(绝路航标指标原理及技术要点)

  • 最新2022年Auto Cad2019专用破解版windows11-windows12-32位64位下载(附视频教程)免费下载(学生誓词最新2022年)

    最新2022年Auto Cad2019专用破解版windows11-windows12-32位64位下载(附视频教程)免费下载(学生誓词最新2022年)

  • dedecms织梦二次开发独立点赞功能(织梦可以放两个模板吗)

    dedecms织梦二次开发独立点赞功能(织梦可以放两个模板吗)

  • 工资完整的账务处理
  • 纳税申报表保留几年
  • 计提减值准备是什么凭证
  • 土地使用税在交多少
  • 开具红字增值税专用发票是什么意思
  • 小规模纳税人取的专票能抵扣吗
  • 自然人股权转让的纳税筹划
  • 资产损失原因
  • 购买方已抵扣开具红字信息表之后做账需要什么原始凭证
  • 借款利息支出账务处理
  • 国外预提税是什么
  • 什么样的企业用交税
  • 企业的商品产品包括
  • 技术转让开具什么发票
  • 发票开了款没付
  • 季度申报的小规模纳税人怎么查看销售额达到500万
  • 一般纳税人附加税费减免政策
  • 4s店贷款服务费是什么
  • 财务费用错记成管理费用
  • 3联收据
  • 王者荣耀中吕布的克星
  • 电子商务如何做账
  • 硬件设施不完备
  • npscheck.exe - npscheck是什么进程 有什么用
  • 免征的增值税需要纳税调整吗
  • 组策略阻止了这个程序0x800704ec
  • 补交上一年度的养老保险
  • 享受企业所得税优惠政策的农产品初加工范围
  • linux命令行使用鼠标
  • php 模拟post
  • 安装exclipse
  • web数据可视化(Echars版)实训
  • Vue Router4 ,prams 传参失效和报错问题
  • echarts series name
  • yii框架教程
  • java桥接模式的应用场景
  • WP Smart Preloader 为你的WordPress添加预加载动画
  • 所得税的期初资产怎么算
  • 摊销专利权的会计科目是
  • 进货退出进项税额的核算
  • 高价值配件用入固定资产吗
  • 行政事业单位福利费列支范围及标准2023
  • 外购存货的账务处理
  • 公司向个人借款合法吗
  • 一般纳税人也会被税吗
  • 固定资产资本化后续支出
  • 研发设备的折旧计入研发费用吗
  • 收到发票应如何处理
  • 跨年度发票的报表怎么填
  • 缴纳房产税如何做账务处理
  • 成本发票未到如何结转成本
  • 认缴制下实收资本可以减少吗
  • 财务报表中的存货包括哪些内容
  • 公司对公账户给我个人打款然后现金取走了个人犯罪吗
  • 行政事业单位负责人应当对本单位内部控制
  • 出口转内销进项税额怎么进附表二
  • 什么是资产减值准备计提
  • 固定资产帐怎么做
  • 凭证导致账簿错误
  • mysql报错1091
  • win10预览版21390
  • centos6.8配置网络
  • centos vim编辑器
  • 腾讯linux服务器
  • 微软警告:64位Win7系统或无法安装KB3033929补丁更新
  • Win10如何打开软键盘
  • 表单提交servlet
  • JavaScript Math.ceil() 函数使用介绍
  • Unity 相关经典博客资源总结(持续更新)
  • linux删除文件语句
  • nodejs入门教程
  • jquery return
  • android toast位置
  • js 编程
  • adb把文件拷贝到手机
  • 国家电子税务局江苏省电子税务局
  • 税友核心价值观
  • 北京纳税申报的具体流程
  • 河南助学金申请表
  • 税务局宪法宣传日
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设