vue2 h5项目转uniapp

已于 2024-09-23 16:49:30 修改
阅读量3k 收藏 25
点赞数 21
文章标签： uni-app vue 前端
于 2024-09-23 16:41:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yibeiningmeng/article/details/142457476
版权

 由于公司项目需要，将原H5网页，转为uniapp开发的微信小程序，本人第一次接触uniapp,有些写的不好的地方请多多谅解。

这是我修改完后，项目的一个目录方便大家参考。

1.首先，我换了开发工具，原先用的是vscode，开发uniapp项目改用了hbuilderx。输入项目名称，选择默认模板，vue版本选择看你自己的vue版本使用即可。

 2.当我们创建完项目后，看你vue代码直接复制进去，还是一点一点边改边复制过去咯。首先需要改的是路由配置。不愿意改的同学可以去插件市场下载vue-router-uni，不过我没有使用过哈哈。

这是原先vue2项目的路由配置

import App from '@/App';

export const IndexRoute = '/index';

// 是否开启登录验证
const isLogin = true;

// 基础路由
const baseRoute = [
  {
    path: '/login',
    name: 'Login',
    meta: { title: '登录页', path: '/login' },
    component: () => import('@/pages/login/login'),
  },
  {
    path: '/index',
    name: 'Index',
    meta: { title: '首页', path: '/index', isTabbar: true, PagePass: isLogin },
    component: () => import('@/pages/index/index'),
  },
  {
    path: '/forecast',
    name: 'Forecast',
    meta: { title: '商品预报', path: '/forecast', isTabbar: true, PagePass: isLogin },
    component: () => import('@/pages/forecast/forecast'),
  },
  {
    path: '/returnList',
    name: 'ReturnList',
    meta: { title: '退货申请', path: '/returnList', isTabbar: true, PagePass: isLogin },
    component: () => import('@/pages/return/returnList'),
  },
  {
    path: '/my',
    name: 'My',
    meta: { title: '个人中心', path: '/my', wxEnv: true, isTabbar: true, PagePass: isLogin },
    component: () => import('@/pages/my/my'),
  },
  {
    path: '/userSetting',
    name: 'UserSetting',
    meta: { title: '个人设置', path: '/userSetting', wxEnv: true, isTabbar: false, PagePass: isLogin },
    component: () => import('@/pages/settings/userSetting'),
  },
  {
    path: '/changePass',
    name: 'ChangePass',
    meta: { title: '个人设置', path: '/changePass', wxEnv: true, isTabbar: false, PagePass: isLogin },
    component: () => import('@/pages/settings/changePass'),
  },
];

 这是在pages.json修改后的路由配置,这里我使用了subpackages分包，因为微信开发者工具上传代码时，主包不能太大了，首次加载也不会太卡。不熟悉分包的同学可以去pages.json 页面路由 | uni-app官网瞅瞅。

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/login/login",
			"style": {
				"navigationBarTitleText": "登录"
			}
		},
		{
			"path": "pages/tabBar/index/index",
			"style": {
				"navigationBarTitleText": "首页"
			}
		},
		{
			"path": "pages/tabBar/forecast/forecast",
			"style": {
				"navigationBarTitleText": "商品预报"
			}
		},
		{
			"path": "pages/tabBar/quotation/offer",
			"style": {
				"navigationBarTitleText": "业务下单"
			}
		},
		{
			"path": "pages/tabBar/return/returnList",
			"style": {
				"navigationBarTitleText": "退货申请"
			}
		},
		{
			"path": "pages/tabBar/my/my",
			"style": {
				"navigationBarTitleText": "个人中心"
			}
		}
	],
	"subpackages": [

		{
			"root": "returnGoods",
			"pages": [{
					"path": "return/returnDetail",
					"style": {
						"navigationBarTitleText": "退货详情"
					}
				},
				{
					"path": "return/returnWell",
					"style": {
						"navigationBarTitleText": "提交成功"
					}
				},
				{
					"path": "return/reOrder",
					"style": {
						"navigationBarTitleText": "订单列表"
					}
				},
				{
					"path": "return/reInfo",
					"style": {
						"navigationBarTitleText": "退货信息"
					}
				}
			]
		}
	],
	"easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {},

	"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#007AFF",
		"borderStyle": "black",
		"backgroundColor": "#F8F8F8",
		"list": [{
				"pagePath": "pages/tabBar/index/index",
				"iconPath": "static/tabbar/icon-kb.png",
				"selectedIconPath": "static/tabbar/icon-kb-ac.png",
				"text": "首页"
			},
			{
				"pagePath": "pages/tabBar/forecast/forecast",
				"iconPath": "static/tabbar/icon-fo.png",
				"selectedIconPath": "static/tabbar/icon-fo-ac.png",
				"text": "商品预报"
			},
			{
				"pagePath": "pages/tabBar/quotation/offer",
				"iconPath": "static/tabbar/icon-order.png",
				"selectedIconPath": "static/tabbar/icon-order-ac.png",
				"text": "业务下单"
			},
			{
				"pagePath": "pages/tabBar/return/returnList",
				"iconPath": "static/tabbar/icon-return.png",
				"selectedIconPath": "static/tabbar/icon-return-ac.png",
				"text": "退货申请"
			},
			{
				"pagePath": "pages/tabBar/my/my",
				"iconPath": "static/tabbar/icon-my.png",
				"selectedIconPath": "static/tabbar/icon-my-ac.png",
				"text": "我的"
			}
		]
	}
}

 3.UI框架修改

原先vue项目我使用的是vant ui。但是我在uniapp项目中引入vant-weapp后，运行一直报错 

Cannot read property 'userAgent' of undefined。好像是因为微信小程序不支持document, window对象的原因。所以我最后还是换了ui 框架，比较推荐使用 uViewUI。如果使用了图表插件，我是改为使用 uCharts  秋云 ucharts echarts 高性能跨全端图表组件 - DCloud 插件市场，因为使用echarts出现了一些样式问题，和有点模糊。

直接下载导入指定项目就行咯

自己写的的组件也是可以直接放进components文件夹中，直接使用的

 

这是使用vant ui的代码

<div class="search">
        <van-search v-model="searchKey" placeholder="根据商品名称、规格等进行搜索" class="search_input" />
        <span @click="searchFor">查询</span>
 </div>
 <van-tabs @change="changeTabs" class="menu_tabs arrival_date" style="width: 100%">
      <van-tab title="全部品牌" name=""></van-tab>
      <van-tab v-for="(item, index) in listDatax" :name="item.brand_id" :key="index" 
        :title="item.brand_name">
      </van-tab>
 </van-tabs>

这是使用 uViewUI的代码，其实都是差不多的，熟悉之后改起来还是比较快的。

<div class="search">
				<u-search v-model="searchKey" :show-action="false" :clearabled="false" placeholder="根据商品名称、规格等进行搜索"
					class="search_input" />
				<span @click="searchFor">查询</span>
</div>
	
<u-tabs @change="changeTabs" class="arrival_date" :current="activeName" style="width: 100%" :list="listDatax"
			name="brand_name">
</u-tabs>

 4.HTML代码的修改

html代码修改工作量是最少的，现在不需要把span, div,这些标签改为view,会自动帮你转换的。代码从原项目直接复制过来用就完事了。

5.css 代码修改

我比较推荐使用scss,原项目中css单位我用的rem和px，现在rem需要转为rpx。px可以不转

对 uViewUI组件样式修改需要样式穿透

6.js的修改 

js 基本也没有什么需要修改的，能用uni-app的js API,尽量使用就行了。

vue项目中的mixin，store都是一样正常使用的

 在main.js中引用，挂载。

import App from './App'
import store from './store'

// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
import uView from 'uview-ui';
import Mixins from './mixin/mixin.js'

Vue.mixin(Mixins)
Vue.prototype.$store = store
Vue.use(uView);
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
	store,
	...App
})
app.$mount()
// #endif

// #ifdef VUE3
import {
	createSSRApp
} from 'vue'
export function createApp() {
	const app = createSSRApp(App)
	app.use(store)
	return {
		app
	}
}
// #endif

7.当你代码修改完毕后，就可以在 manifest.json配置 appid,然后在运行到微信开发者工具就行了

微信开发者工具中需要先开启服务端口

8.运行没问题，就可以上传代码咯。如果上传不了，就需要优化主包了，看看是不是图片太大了，记住一定要使用分包配置哦！！！ 

因为第一次写uniapp，有许多写的不好的地方，请大家多多指教😊。

鹿语~
关注
从Vue到UniApp：项目转换的终极指南！
weixin_45734165的博客
08-23 2027
如果您需要开发移动应用，uniapp是一个不错的选择。对于Vue.js项目来说，只能在web平台上进行开发，但随着移动端应用的增加，开发者需要将其迁移至移动平台，这就需要将Vue.js项目转换为uniapp。在Vue.js项目中，页面文件的后缀名是.vue，而在uniapp中，页面文件的后缀名是.vue或者nvue。在Vue.js项目中，跳转页面通常是使用Vue-router进行路由跳转，而在uniapp中，可以使用uni.navigateTo或uni.switchTab等API完成页面的跳转。
vue h5转换uni-app指南（vue转uni、h5转uni）
qq_35744728的博客
03-27 6279
如果你已经有了一个基于vue开发的H5站点，想转换为uni-app。 首先注意2个前提：1、你的web站是适合手机屏幕的；2、你的H5代码是全后端分离的，uni-app只处理前端代码。 一切从新建一个uni-app项目开始。然后依次进行 文件处理 把之前的vue web项目的前端代码copy到新项目下 如果之前的文件后缀名是.html，需要改为.vue，并注意遵循vue单文件组件SFC规范，比如必须一级根节点为template、script、style，template节点下必须且只能有一个根vi
将h5项目转成uniapp小程序
Menqq的博客
06-20 2071
将H5项目转成小程序
uni-app打包h5并部署到nginx，路由模式history
最新发布
星月昭铭的博客
03-13 1276
uni-app打包有些坑，当时运行的基础路径填写了./，导致在二级页面刷新之后，页面直接空白。就只能换一个路径了，nginx也要跟着改，下面是具体步骤。
vue-to-uniapp:用于代码适配性的转换
05-07
vue to uni-app 用于公司内部项目的文件转换 把 Vue 组件文件放到 source 文件夹中，输出到 result 文件中转换好的可用在 uni-app 的组件文件 主要转换的方面有如下几个： template 标签转换： div/li/ul 标签转换为 view img 转换为 image，添加 mode='widthFix'属性 span 转换为 text 标签 内部的 template 标签，转换为 block 标签 transition 标签，转换为 uni-transition 标签 script 标签内部内容不转换 style 标签内容，暂时只考虑 less 对于 rem 单位，乘以 200 转换为 px 单位 对于 px 单位，乘以 2 保持为 px 单位 转换后还要注意一下几个方面的改写： 如果之前图片是作为 div 的背景图，那在 uni-app 里面是不支
h5转uniapp
lingdian1614114082的博客
09-09 4846
初入uni-app遇到的问题 誰在花里胡哨关注 0.792020.01.10 17:24:09字数 1,198阅读 2,396 本人之前是做Vue项目开发的，此篇文章是相对于vue项目转移至uni-app遇到的问题，以及对uniapp的学习~~~ ???????????????? 后续学习中遇到的问题也会持续更新的???? --------Loading..... image.png uni-app官方地址 不得不说，人家的标语还是很吸引人的，这要是学会了，Android和IOS开发不
把已经写好的Vue项目转成uni-app项目
热门推荐
我的代码没有Bug的博客
01-10 5万+
先介绍一下我写的vue项目 我的vue项目采用的是： vue+vuex+element+axios+vue-router+webpack+vue-cil 由于某些原因需要把我的项目转移成uni-app项目 （具体原因：相信了uni-app吹的牛b，一个套代码可以适用，安卓，IOS，微信小程序 经过了解，发现uni-app项目不支持vue-router。所以我的工作量就比较大了。 由于我的项目是采...
face recognition demo（vue、h5、uniapp-h5、uniapp-wx）
01-25
本文将详细介绍一个名为“face recognition demo”的项目，该项目囊括了多种技术框架下的人脸识别功能实现，具体包括vue.js框架下H5端的官方demo，以及uniapp框架下支持H5端和微信小程序端的人脸识别实现。...
基于Vue的精华新材uniapp-H5设计源码
09-28
基于Vue的精华新材uniapp-H5设计源码是一个基于Vue框架开发的项目，主要用以创建H5页面。该项目包含了176个文件，内容丰富，涵盖了多个方面。其中包括97个Vue组件，这些组件是Vue框架的核心，用于构建用户界面；51个...
vue整合uniapp_vue h5转换uni-app指南（vue转uni、h5转uni）
weixin_36079903的博客
12-23 1271
如果你已经有了一个基于vue开发的H5站点，想转换为uni-app。首先注意2个前提：1、你的web站是适合手机屏幕的；2、你的H5代码是全后端分离的，uni-app只处理前端代码。一切从新建一个uni-app项目开始。然后依次进行文件处理把之前的vue web项目的前端代码copy到新项目下如果之前的文件后缀名是.html，需要改为.vue，并注意遵循vue单文件组件SFC规范，比如必须一级根节...
vue移动端项目迁移到uniapp，并兼容小程序
qq_41231694的博客
06-09 8195
H5中，如果在main.js中使用Vue.prototype.定义一个属性，这时候如果把这个属性使用在视图上，当属性变化的时候，视图也会跟着变化。这样能避免分包不能引用分包的问题。，如果你停留在这个页面，又去改变了Vue.prototype.data，视图还是不会刷新。项目中ui组件在uniapp中大概率是不兼容的，比如：我们vue移动端常用的组件有。除了tabbar的icon图标，其他的图片全部迁移到服务器上，通过链接的形式访问。这时可以去uniapp官网的插件市场，找到兼容的ui组件，比如。
通过uni-app 把 h5 (vue.js) 转 App
chinaProgrammer8的博客
07-24 1141
通过uni-app 把 h5连接 直接打包生成 App
将vue开发的H5项目 通过uni_app本地打包成app
yao0924的博客
08-17 3553
首先在vue项目内需要重定向 vue.config.js文件中新增publicPath:"./"检查路由模式 只能使用hash模式 router.js文件内 不能使用history模式 以上两步是必须的 不改的话会导致在uniapp上运行后展示白屏在uniapp内新建项目 选择5+App 选择默认模板 点击创建创建完成后只保留manifest.json文件 将打包后的vue项目 也就是dist目录下的文件进行复制 放到新建的uniapp项目中填写manifest基础配置。
前端vue2迁移至uni-app
big_good_boy的博客
10-26 766
styles: 可以新建styles目录，将样式文件（如.less）移动到这里。uni_modules: uni-app的插件存放位置。static: assets内容移动到static。pages: views内容移动到pages。components: 继续沿用。
关于vue转uniapp的简单流程
max_or_min的博客
11-17 1万+
我这里使用的技术还是主要依赖于HBuilder 的5+app的功能 1 首先把你需要转换的vue项目打包 使用npm run build 命令进行打包 打包后的文件如下 在dist文件里面，内容大致如下，如果有其他多出的文件，大部分可能是在vue的这个文件里面添加了新东西 2打开hb 新建一个5+app的项目， 除去这两个文件不用替换后，其他都要替换 最后，一定要打开index.html文件，然后在真机测试 注意：uniapp和vue是两套不同的系统，他们的底层还...
h5项目编写成app，你还不了解吗？直接打包和套webview结合uniapp两种实现方式
weixin_45131389的博客
08-29 7155
h5项目编写成app，你还不了解吗？直接打包和套webview结合uniapp两种实现方式 包含成熟H5直接打包 和 新项目直接套H5进去开发
uniapp vue2 引入echarts柱状图
07-11
在uni-app（微信小程序、H5等多端开发框架）中引入ECharts的柱状图，首先需要安装ECharts的Vue版本。你可以通过npm或yarn来安装： ```bash // 使用npm npm install @vue-charts/echarts // 或者使用yarn yarn add @vue-charts/echarts ``` 然后，在你的Vue2项目中，可以在组件的`<script>`标签内导入并使用ECharts及其柱状图模块： ```html <template> <div id="chartContainer"></div> </template> <script setup> import { ECharts } from '@vue-charts/echarts' const data = [ // 示例数据，替换为你实际的数据 { name: '销售额', value: [120, 200, 150, 80] }, // 添加更多数据... ] setup() { const chartRef = ref(null) onMounted(async () => { const echartsInstance = await ECharts.init(chartRef.value) // 初始化图表实例 echartsInstance.setOption({ title: { text: '柱状图示例' }, xAxis: { type: 'category', data: data.map(item => item.name) }, yAxis: { type: 'value' }, series: [{ name: '销售额', type: 'bar', data: data.map(item => item.value) }] }) }) return { chartRef, // 其他组件数据... } } </script> ``` 在这个例子中，我们首先初始化了ECharts实例，并设置了柱状图的基本配置，包括标题、X轴和Y轴的信息以及系列的数据。记得在模板中创建一个id为`chartContainer`的元素供图表渲染。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值