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

  • 华为荣耀20和v20一样吗(华为荣耀20和v20哪个好)

    华为荣耀20和v20一样吗(华为荣耀20和v20哪个好)

  • 电话卡服务密码忘了怎么办(中国移动电话卡服务密码)

    电话卡服务密码忘了怎么办(中国移动电话卡服务密码)

  • 手机屏幕比例有哪些?(手机屏幕比列)

    手机屏幕比例有哪些?(手机屏幕比列)

  • 拼多多违规关店保证金和货款能退回来吗(拼多多违规关店,什么时候可以再开店)

    拼多多违规关店保证金和货款能退回来吗(拼多多违规关店,什么时候可以再开店)

  • 魅族17有红外线吗(魅族17有红外线功能吗)

    魅族17有红外线吗(魅族17有红外线功能吗)

  • vivo手机上的hd怎么关闭(vivo手机上的hd怎么去掉)

    vivo手机上的hd怎么关闭(vivo手机上的hd怎么去掉)

  • h110主板配什么内存(h110主板配什么显卡)

    h110主板配什么内存(h110主板配什么显卡)

  • 微信步数不同步了怎么办(微信步数不同步怎么操作)

    微信步数不同步了怎么办(微信步数不同步怎么操作)

  • 抖音注销不了怎么回事(抖音注销不了怎么回事儿)

    抖音注销不了怎么回事(抖音注销不了怎么回事儿)

  • 域名停靠什么意思(什么叫域名停靠)

    域名停靠什么意思(什么叫域名停靠)

  • 苹果6声音小怎么修复(苹果6声音小怎么调大声)

    苹果6声音小怎么修复(苹果6声音小怎么调大声)

  • 手机演示机模式怎么关闭(手机演示机质量好吗)

    手机演示机模式怎么关闭(手机演示机质量好吗)

  • 电脑待机动画怎么弄(电脑待机动图怎么设置)

    电脑待机动画怎么弄(电脑待机动图怎么设置)

  • 苹果手机edge怎么关闭(苹果手机edge怎么变4G)

    苹果手机edge怎么关闭(苹果手机edge怎么变4G)

  • 苹果十一是单卡还是双卡(苹果十一是单卡单待吗)

    苹果十一是单卡还是双卡(苹果十一是单卡单待吗)

  • 苹果闪付功能怎么设置(苹果手机的闪付)

    苹果闪付功能怎么设置(苹果手机的闪付)

  • 如何查找本地打印机(怎么查找本地手机号)

    如何查找本地打印机(怎么查找本地手机号)

  • 微信动态视频怎么会在群里显示(微信动态视频怎么拍)

    微信动态视频怎么会在群里显示(微信动态视频怎么拍)

  • iphone未接来电红色怎么消掉(苹果电话未接来电始终红)

    iphone未接来电红色怎么消掉(苹果电话未接来电始终红)

  • 怎么把美团闪付卡取消(怎么把美团闪付关掉)

    怎么把美团闪付卡取消(怎么把美团闪付关掉)

  • 计算机系统的开机顺序是(计算机系统开机顺序)

    计算机系统的开机顺序是(计算机系统开机顺序)

  • 小米8相当于苹果几(小米8对比iphone)

    小米8相当于苹果几(小米8对比iphone)

  • 小米手环可以显示具体信息吗(小米手环可以显示在微信运动上吗)

    小米手环可以显示具体信息吗(小米手环可以显示在微信运动上吗)

  • 抖音照片切换速度怎么调(抖音照片切换速率怎么调)

    抖音照片切换速度怎么调(抖音照片切换速率怎么调)

  • 出5g手机需要换手机没(5g手机需要换5)

    出5g手机需要换手机没(5g手机需要换5)

  • 怎么把手机文件传到内存卡(怎么把手机文件上传到百度网盘)

    怎么把手机文件传到内存卡(怎么把手机文件上传到百度网盘)

  • 小度1c可以下载微信吗(小度1c可以下载钉钉吗)

    小度1c可以下载微信吗(小度1c可以下载钉钉吗)

  • 二手房交易需缴纳哪些费用
  • 23年车辆购置税税率
  • 用友会计报表
  • 员工买东西自己垫付的钱怎么做账
  • 车辆补贴的钱最快多久到账
  • 小规模纳税人建筑工程增值税税率
  • 税票抵扣是用进项票还是销项票
  • 没有土地使用证的房子拆迁怎么办
  • 收到投资款怎么做记账凭证
  • 股权转让需要缴纳企业所得税吗
  • 会计凭证传递的终点是
  • 制造费用包括哪三类
  • 开给天猫的服务费分录如何做
  • 去年的库存
  • 成本票最多开多少
  • 医疗器械技术服务合同
  • 绿化企业所得税税率是多少
  • 机动车类专用发票
  • 关于抄税的详细介绍
  • 小规模销项负数怎么报税
  • 递延资产和长期负债区别
  • 销售劳务的税率是多少
  • 物业公司收取电费加价依据
  • 应收账款平均余额怎么理解
  • 旅游开发公司税率
  • u启动pe装机工具如何重装系统win10
  • 代垫费用的进项怎么抵扣
  • 给客户赠送的礼物叫什么
  • 补充医疗保险是六险吗
  • 企业注销时实收资本需要交税吗
  • 债务重组是什么工作
  • 无法ping通ip地址
  • 材料暂估入库如何处理
  • 印花税需要交钱吗
  • php获取字符串位置
  • 购税盘分录
  • 以前年度损益调整
  • 2019年4月1日降低城镇职工什么单位缴费比例
  • 端午节发现金怎么说
  • 企业财务报表有附注吗
  • 财政补助结转的会计科目
  • 三栏式明细账需要每笔结余额吗
  • 帝国cms功能
  • access数据库干嘛的
  • About BitRock
  • 什么是代缴代扣
  • 国家企业信用公示信息公示
  • 公司吸收合并是利好吗
  • 合同资产和合同履约成本的区别
  • 电子税务局实名核验失败
  • 民办幼儿园账务月末结转
  • 预提费用没有收到发票也没有付款
  • 注销的企业
  • 工程安装人工费怎么开票
  • 收到社保局的生育津贴并付给职工如何入账
  • 运输费用增值税税率9%
  • 存货报废的会计分录怎么做
  • 固定资产多少金额必须招标
  • sql server怎么创建表语句
  • sql常用的语句大全
  • mysql 模型
  • xp系统电脑开机密码忘记了
  • 虚拟网络无网络访问权限
  • win10系统无法开机怎么修复
  • linux安装atop
  • centos named
  • mac视频预览图不显示
  • 3.0vray安装教程
  • 打开win七
  • 游戏引擎的重要性
  • oracle sql mysql
  • 数据库并发操作主要解决哪三个问题,基本方法是什么
  • js引用传递
  • javascript数组的本质
  • 文章标题的作用有哪些?
  • 告诉你什么是无限的恐怖日语
  • 所得税季度报表收入成本怎么填
  • 山西国家税务总局官网
  • 深圳税务局实名注册
  • 企业所得税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设