如何将各种小程序(微信小程序)项目转换为 uni-app 项目

这篇具有很好参考价值的文章主要介绍了如何将各种小程序(微信小程序)项目转换为 uni-app 项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用【miniprogram-to-uniapp】可以将微信小程序项目转为 uni-app 项目(新版本 HBuilderX 工具已经支持各种小程序转换插件)

HBuilderX 插件地址:miniprogram-to-uniapp v2 - DCloud 插件市场

核心原理:使用 Babel 获取AST(词法分析),然后或使用 Babel 自带函数增删,或正则分析替换等等操作

支持的事件

1、支持微信、QQ、头条/抖音、支付宝/钉钉和百度等小程序转换到 uni-app 项目
2、支持有/无云开发的小程序项目转换为 uni-app 项目(cloudfunctions 目录将被忽略,uni-app 结合小程序云开发见:使用 uni-app 进行微信小程序云开发经验分享)
3、支持解析 TypeScript 小程序项目
4、支持解析使用 npm 模块的小程序项目
5、支持解析 include 标签
6、支持解析 template 标签
7、支持解析 Behavior 文件为 mixins 文件
8、支持 .js', .wxml 和 *.wxss 文件进行相应转换,并做了大量的优化
9、支持识别 App、Page、Component、VantComponent、Behavior 和纯 Javascript 文件的转换
10、修复变量名与函数重名的情况
11、合并使用 require 导入的 wxs 文件
12、setData() polyfill
13、搜索未在 data 声明,而直接在 setData() 里使用的变量,并修复
14、使用 jyf-parser 替换 wxParse(感谢网友 “爱瑞巴勒康忙北鼻” 的建议)
15、因 uni-app 会将所有非 static 目录的资源文件删除,因此将所有资源文件移入 static 目录,并修复所有能修复到的路径(目前 uni 编译时会将非 static 目录的文件复制一份到 static 目录,但并不完全,因此本功能仍保留)

不支持的转换

1、不支持转换反编译后的小程序项目
2、不支持转换使用 uni-app 编译的小程序项目
3、不支持转换使用 redux 开发的小程序(代表为:网易云信小程序 DEMO)
4、不支持转换使用 wxpage 开发的小程序(https://github.com/tvfe/wxpage)
5、不支持转换使用腾讯 omi 开发的小程序(https://github.com/Tencent/omi)
6、不支持转换小程序抽象节点 componentGenerics
7、不支持 component 里的 pageLifetimes 生命周期,请手动绕过
8、不支持使用 js 系统关键字作为函数或变量名(如 default、import、return、switch 等)
9、不支持以 \$ 开头的变量名称,如 Page({data:{$data:{name:"hello"}}}) ,刚好 \$data 是 vue 内置变量,so 不支持,需手动修复
10、不支持以动态绑定的函数 <input @input="test{{index+1}}">,需手动修复
11、更多,请参照 miniprogram to uniapp 工具答疑

使用方法

第一步

win + R 在命令行里,运行【 npm install miniprogram-to-uniapp -g 】进行安装,因为这个包是工具,要求全局都能使用,所以需要 -g 进行全局安装

npm install miniprogram-to-uniapp -g

提示:如果运行 npm 报错,请先安装 Node.js,下载地址:https://nodejs.org/zh-cn/

第二步

继续在命令行里,运行【 wtu -V 】,查看版本号,执行结果如下:

wtu -V

微信小程序转uniapp,uni-app,小程序,微信小程序,uni-app

显示版本号,说明已经安装成功了(wtu -> 取自 wx to uni 之意,后面都用这个全局命令)

第三步

在命令行里,输入【wtu -i "你的小程序项目路径"】
注意 -i 前面和后面都有空格
注意 -i 后面要使用双引号("")不能使用单引号('')

wtu -i ""

如:【wtu -i "D:\Desktop\wxmini_demo\mini"】,回车后即可以在源项目同及目录得到一个后缀为_uni的目录,即转换成功

微信小程序转uniapp,uni-app,小程序,微信小程序,uni-app

工具升级命令

因为工具更新比较频繁,安装后,可以使用如下命令进行升级

npm update miniprogram-to-uniapp -g

工具源码

仓库地址:https://github.com/zhangdaren/miniprogram-to-uniapp

参考于:miniprogram-to-uniapp使用指南(各种小程序项目转换为uni-app项目)文章来源地址https://www.toymoban.com/news/detail-763446.html

到了这里,关于如何将各种小程序(微信小程序)项目转换为 uni-app 项目的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni-app微信小程序如何渲染markdown

    在开发个人网站微信登录平台易登微信小程序的时候,由于说明文档是用markdown格式来书写的,在网页上有各种markdown个人渲染引擎,比如这个markdown编辑器无敌了!。 但是在小程序上还是第一次渲染markdown,找了各种方案,但处处是坑,除此之外最后渲染出来的效果也惨不忍

    2024年02月16日
    浏览(58)
  • Webstorm 入门级玩转uni-app 项目-微信小程序+移动端项目方案

    1. Webstorm uni-app语法插件 : Uniapp Support Uniapp Support - IntelliJ IDEs Plugin | Marketplace 第一个是不收费,第二个收费 我选择了第二个 Uniapp Support ,有试用30天,安装重启webstorm之后,可以提高生产率。 补充 有小伙伴说搜索不到插件,目前webstorm 2022.3版本还能搜到2个: # Uniapp Tool  

    2024年02月11日
    浏览(92)
  • 【uni-app】uni项目打包微信小程序中使用 ECharts (mpvue-echarts)

    在小程序里画图表,uniapp 不想引入 u-charts怎么办,个人还是喜欢用echarts 先看成品图 说明: 示例下载-- 完整dom 如果你想要在单页面渲染多个图标可以看看:这里(相关文章传送门) 原生小程序使用的是 echarts-for-weixin ,具体地址如下: https://github.com/ecomfe/echarts-for-weixin 想在

    2024年02月07日
    浏览(55)
  • 创建一个uni-app项目并运行再浏览器及微信小程序

    第一步: 打开HBuilder X 点击文件列表 新建 项目 第二步: 如图所示(根据项目所需要的进行选择) 第三步: 创建完成之后项目文件的(介绍以及作用) 第四步: 如何将uni-app项目运行到不同的浏览器,我在这里运行的是微信小程序 (1) 点击运行可以查看到项目的多种运行方式 (2

    2024年02月12日
    浏览(69)
  • 【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果(五十二)

    💌 所属专栏:【微信小程序开发教程】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! 💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘   大家好,又见面了,

    2023年04月18日
    浏览(70)
  • uni-app 微信小程序中如何通过 canvas 画布实现电子签名?

    一、实际应用场景 电子签名软件应用场景:电子签名在金融、银行、贷款行业中可以用于对内日常办公流转的文档的盖章签字,对外涉及业务合作协议,采购合同,贷款申请、信用评估、贷款合同、贷款文件表、说明函等等。 可以说,只要是涉及纸质文档签字盖章的场景,

    2024年02月10日
    浏览(51)
  • 跨平台应用开发进阶(六十二):如何把 uni-app APP项目转换成小程序

    随着移动互联网的快速发展,移动应用已成为生活中不可或缺的一部分。与此同时,跨平台开发也得到越来越多的关注,因为它可以提高应用程序的效率并降低开发成本。 uni-app 是一种跨平台开发框架,基于 Vue.js ,并且可以在多个平台如微信小程序、支付宝小程序、H5等上运

    2024年02月15日
    浏览(67)
  • 微信小程序开发者工具运行 uni-app 项目时报错 Uncaught (in promise) undefined

    开发者工具控制台报错 Uncaught (in promise) undefined,如图: 该错误主要是因为调试基础库过高或过低导致的。 在 微信开发者工具 — 详情 — 本地设置 — 调试基础库 中,将调试基础库版本调低或调高即可 调试基础库:此处选择的基础库为微信中的基础库版本,且仅用于开发者

    2024年02月12日
    浏览(69)
  • 【微信小程序】如何获得自己当前的定位呢?本文利用逆地址解析、uni-app带你实现

    目录 前言 效果展示 一、在腾讯定位服务配置微信小程序JavaScript SDK 二、使用uni-app获取定位的经纬度 三、 逆地址解析,获取精确定位 四、小提示 在浏览器搜索腾讯定位服务,找到官方网站,利用微信或者其他账号注册登录,登录后如下图操作 点进去之后,可以看到如下图

    2024年01月19日
    浏览(85)
  • WebStorm开发uni-app ,用vue2实现手机APP(apk) + 微信小程序多端项目开发方案

    我们主要分析了如下小程序开发框架,主要包括: 框架 技术栈 案例 微信小程序 支付宝小程序 百度小程序 头条小程序 H5 App uni-app Vue 丰富 ⭕ ⭕️ ⭕️ ⭕ ⭕️ ⭕ Taro React 丰富 ⭕ ⭕ ⭕ ⭕ ⭕ ⭕ wepy Vue 丰富 ⭕ ❌ ❌ ❌ ❌ ❌ mpvue Vue 丰富 ⭕ ❌ ❌ ❌ ⭕️ ❌  首先,就要排

    2024年02月08日
    浏览(75)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包