吉时雨商户端H5 转小程序(打包成小程序)

180 阅读5分钟

吉时雨商户端H 5 转小程序(打包成小程序)****

1. 使用uni-app框架将vue3项目打包成小程序****

步骤1:安装uni-app****

要使用uni-app,您需要首先安装它。您可以使用npm或yarn安装uni-app:

npm install -g @vue/cli @vue/cli-init

vue init dcloudio/uni-preset-vue my-project

步骤2:创建Vue 3应用程序****

在此步骤中,您需要创建Vue 3应用程序。您可以使用Vue CLI创建Vue 3应用程序:

vue create my-app

步骤3:将Vue 3应用程序转换为uni-app****

在此步骤中,您需要将Vue 3应用程序转换为uni-app。您可以使用uni-app的CLI工具将Vue 3应用程序转换为uni-app:

npm install -g @vue/cli-plugin-uni

vue invoke uni

步骤4:在uni-app中构建小程序****

在此步骤中,您需要在uni-app中构建小程序。您可以使用uni-app的构建工具构建小程序:

npm run dev:mp-weixin

步骤5:运行调试测试****

在小程序平台上运行小程序在此步骤中,您需要在小程序平台上运行小程序。您可以使用微信开发者工具或其他小程序平台的开发者工具来运行小程序。

注: 转化后的小程序应用可能会存在web应用和小程序view语法不兼容问题,开发中需要再改一套新的代码来适配打包后的小程序应用,后续根据不同的语法改进准换打包后的小程序应用(工作量巨大,需要一一对照项目功能梳理语法兼容问题)****

相关准换方式方法: blog.csdn.net/liudiyang12…****

2 . 使用uni-app创建小程序应用并将H 5 应用使用web-view标签嵌套

****步骤一:使用uni-app创建小程序应用
步骤二:在项目中找到index.vue文件使用view标签****
步骤三:配置小程序的appid****

登录微信公众平台,登录小程序账号查看appId,在项目中找到manifest.josn文件将appId放在小程序配置中

步骤四:运行测试小程序****

查看适配情况,如果适配不兼容的话可以重新剥离一套代码来兼容嵌套后的小程序

注: 此方法相对简单,只需嵌套网页后做适配兼容****

image.png

已经测试过可以嵌套进小程序项目中,只是部分样式发生变化,字体需要跟换单位,需要修改样式以及部分标签,删除tab以及稍微复杂点的顶部网站名称需要删除(但是网页布局对的,在小程序上面就是反的,不生效)

3. 使用uni-pages工具将vue3项目转换成uni-app项目

步骤一: 确保 转换开发环境****

确保开发环境已经安装了uni-app和vue3

步骤二: 下载uni-pages****

Npm install uni-pages –save-dev

步骤三: 配置uni-pages****

在你的项目根目录下,创建一个名为 pages.js 的文件,用于配置 uni-pages。在这个文件中,你需要导入 uni-pages 并定义你的 Vue 页面,如下所示:

const { vueRoutes } = require('uni-pages');

module.exports = {

  // 配置Vue页面

  vuePages: vueRoutes,

};

步骤四: 生成 uni-app页面****

执行 uni-pages 命令来生成 uni-app 页面和路由配置:

npx uni-pages generate

步骤5:运行调试测试****

在小程序平台上运行小程序在此步骤中,您需要在小程序平台上运行小程序。您可以使用微信开发者工具或其他小程序平台的开发者工具来运行小程序。

注: 转化后的小程序应用可能会存在web应用和小程序view语法不兼容问题,开发中需要再改一套新的代码来适配打包后的小程序应用,后续根据不同的语法改进准换打包后的小程序应用(工作量巨大,需要一一对照项目功能梳理语法兼容问题)****

相关准换方式类似方法: blog.csdn.net/liudiyang12…****

4. 使用mpvue工具

此方式与上述1,3方式雷同,第三方工具都会存在转换包不存在或者无法转换问题!

image.png

5. 使用uni-app框架重新构建

步骤一: 创建uni-app项目,****
步骤二: 将现有项目前端文件导入uni-app项目中****

Uni-app框架基于vue语法构建

步骤三: 梳理更改项目标签,样式以及js语法****
步骤四: 使用微信开发者工具调试适配****

 

注: 此方法接近于重新开发模式,新项目中导入的老项目所有文件语法标签样式都需要一定的更换,内容繁琐工作量较大(优势是后期可以多端应用)****





终上所述:****

1, 3 , 4 方法都是基于工具准换项目类型,并不会转换了就可以直接适配小程序,都需要更改部分样式和标签以及语法,目前测试过1, 3 , 4 方法都没能成功准换过来,不知是我方式方法不对还是其他什么原因****

2方法相对简单快捷,只需重新创建新的小程序项目,将现有的H 5 应用网页嵌套进小程序就可,可以正常使用,功能正常,只是部分样式失效或者错乱,需要修改部分样式方法,以及尺寸适配****

5方法类似重新开发,将原有文件修改成适配uni-app的语法,但是uni-app是基于vue框架构建,部分语法不用更改,相对减少重写工作量,但是不同的框架兼容适配起来可能会多花费梳理工作量****


image.png


目前最快捷便利的方式是使用网页嵌套的方式!但是通过嵌套的页面不能取消小程序顶部导航栏****