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

  • airpods港版和国行区别(airpods港版和国行可以一起用吗)

    airpods港版和国行区别(airpods港版和国行可以一起用吗)

  • 华为荣耀20青春版是全面屏吗(华为荣耀20青春版什么时候上市的)

    华为荣耀20青春版是全面屏吗(华为荣耀20青春版什么时候上市的)

  • 微信笔记图标能换吗(微信笔记图标能删除吗)

    微信笔记图标能换吗(微信笔记图标能删除吗)

  • 华为手机阻止系统休眠怎么关掉(华为手机阻止系统休眠)

    华为手机阻止系统休眠怎么关掉(华为手机阻止系统休眠)

  • 手机号挂失后多久销号(手机号挂失后多久可以恢复)

    手机号挂失后多久销号(手机号挂失后多久可以恢复)

  • 2003word怎么横向排版(word2003如何横向显示)

    2003word怎么横向排版(word2003如何横向显示)

  • qq加好友没有显示等待验证(qq加好友没有显示等待验证,对方能看见吗)

    qq加好友没有显示等待验证(qq加好友没有显示等待验证,对方能看见吗)

  • 目前最常用的计算机机箱类型为(目前最常用的计算机信息检索技术是)

    目前最常用的计算机机箱类型为(目前最常用的计算机信息检索技术是)

  • 被对方拉黑邮箱能发送成功吗(被对方拉黑邮箱发送后显示什么)

    被对方拉黑邮箱能发送成功吗(被对方拉黑邮箱发送后显示什么)

  • 光猫如何恢复出厂设置(光猫怎么恢复出厂设置密码)

    光猫如何恢复出厂设置(光猫怎么恢复出厂设置密码)

  • 华为移动服务完整版是什么(华为移动服务是什么功能)

    华为移动服务完整版是什么(华为移动服务是什么功能)

  • 如何分享自己的抖音视频(要怎么分享)

    如何分享自己的抖音视频(要怎么分享)

  • 手机关机微信运动显示么(手机关机微信运动会显示0吗)

    手机关机微信运动显示么(手机关机微信运动会显示0吗)

  • 苹果手机骚扰电话怎么设置(苹果手机骚扰电话怎么设置打不进来)

    苹果手机骚扰电话怎么设置(苹果手机骚扰电话怎么设置打不进来)

  • 微信置顶语句怎么设置(微信置顶话语)

    微信置顶语句怎么设置(微信置顶话语)

  • 手机微信怎样重新登录(手机微信怎样重新实名认证)

    手机微信怎样重新登录(手机微信怎样重新实名认证)

  • 手机浏览器历史记录怎么看(手机浏览器历史记录怎么查看)

    手机浏览器历史记录怎么看(手机浏览器历史记录怎么查看)

  • 手机怎样发送位置(手机怎样发送位置定位)

    手机怎样发送位置(手机怎样发送位置定位)

  • 华为talkback怎么关闭(华为talkback怎么永久卸载)

    华为talkback怎么关闭(华为talkback怎么永久卸载)

  • vivo的用户体验在哪里(vivo的用户体验计划关闭了反而手机会卡)

    vivo的用户体验在哪里(vivo的用户体验计划关闭了反而手机会卡)

  • 华为荣耀畅想10plus什么时候上市(华为荣耀畅想10e配置)

    华为荣耀畅想10plus什么时候上市(华为荣耀畅想10e配置)

  • 苹果手机计算器怎么看历史记录(苹果手机计算器在哪里)

    苹果手机计算器怎么看历史记录(苹果手机计算器在哪里)

  • 火山小视频怎么搜索人(火山小视频怎么注销)

    火山小视频怎么搜索人(火山小视频怎么注销)

  • dos查看盘符(dos查看所有盘)

    dos查看盘符(dos查看所有盘)

  • Linux中控制文件权限修改的chgrp和umask命令用法(linux文件权限控制)

    Linux中控制文件权限修改的chgrp和umask命令用法(linux文件权限控制)

  • 如何去除js中的json存在的转义字符\问题(js去除属性)

    如何去除js中的json存在的转义字符\问题(js去除属性)

  • 山东省增值税发票查验平台
  • 当月红冲发票账务怎么处理
  • 票种核定表怎么填写
  • 加工企业怎么记账
  • 房地产开发企业土地增值税清算
  • 有会计从业资格证还有用吗
  • 个税计提和发放分录
  • 二手房交易税费最新规定
  • 不动产租赁发票怎么开
  • 子公司注销母公司合并报表处理
  • 延期申报预缴税款比例
  • 中小企业对应的是
  • 房租有进项发票能抵扣吗
  • 租赁的设备伤人了谁的责任
  • 仓库货物破损处理方法
  • 西安的税务局
  • 机动车强制保险新政策
  • 出差补贴费
  • 会务费税率是多少 2021
  • 什么时候计提减值
  • 增值税发票每个月什么时候可以开
  • 金融企业贷款损失准备金
  • 小规模企业增值税账务处理
  • 银行手续费和汇率的关系
  • 申报的国家资助的一个项目如何进行账务处理?
  • 建造合同收入的内容包括
  • 手机压缩包损坏怎么修复
  • 运输公司的进项必须是专票吗
  • 股权转让个税怎么缴纳
  • 公司试乘试驾车管理
  • 购入研发设备
  • win10开机启动文件夹目录说明
  • PHP:mcrypt_ecb()的用法_Mcrypt函数
  • 前端批量下载图片
  • 商品流通企业库存商品的核算方法主要有
  • php注册和登录界面
  • JS XMLHttpRequest对象详解
  • 目标检测算法有哪些
  • 其他收益在资产负债表哪点
  • php设置title
  • 交易性金融资产属于流动资产
  • 跨域问题是什么
  • 提取公益金会计怎么做账
  • db2 decoupled
  • 销售并提供安装服务怎么开票
  • 销项负数发票能作废吗
  • SQLServer2005 Output子句获取刚插入的ID值
  • 十个提高情商的方法
  • 医院能开增值发票吗
  • 缴纳增值税账务
  • 分支机构与总机构怎么纳税?
  • 权益性无形资产包括哪些?
  • 股东实收资本超额到位
  • 质量策划什么意思
  • 转让厂房如何缴纳土地增值税
  • 采用账龄分析法计提坏账准备
  • mysql的分区表
  • ubuntu zed
  • centos 安装
  • win10系统玩游戏卡
  • Win10预览版镜像
  • nerosvc.exe - nerosvc是什么进程 有什么用
  • windows8.1正版
  • linux系统磁盘管理的主要内容
  • win8一直配置更新
  • jq复制元素
  • rsync安装使用详解
  • 查找重复字符串
  • Unity3D游戏开发引擎
  • node.js怎么用
  • android tabview
  • python中运算符/和//的区别
  • javascript面向过程
  • [置顶] 安卓手机连接IP100蓝牙打印机实现打印功能
  • 农产品初加工有哪些
  • 重庆电子税务局官网登录入口
  • 企业欠税交不起怎么办
  • 小微企业印花税的税率是多少
  • 江苏徐州如何开无犯罪记录证明
  • 置换买新车划算吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设