微信小程序转化为uni-app项目的方法示例


Posted in Javascript onMay 22, 2020

前言:

之前自己做一个uni-app的项目的时候前端需要实现一个比较复杂的动态tab和swiper切换的功能,但是由于自己前端抠脚的原因没有写出来,然后自己在网上搜索的时候发现了有个微信小程序里面的页面及极其的符合我的需求。那么问题来了我该如何将微信小程序转为为uni-app项目呢?搜索了下网上的相关解决方案还真有个将微信小程序转化为uni-app的项目,该项目名称叫做【miniprogram-to-uniapp】,接下来就看看如何实操吧!

miniprogram-to-uniapp项目介绍:

概要介绍:是一个能够将微信项目转化为Uni-app项目的开源项目

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

使用指南:https://ask.dcloud.net.cn/article/36037

第一步、在window上安装NPM包管理工具:

由于该项目需要使用NPM包管理工具安装对应的项目包,而NPM是随同NodeJS一起安装的包管理工具,所以接下来我们只需要把node.js安装配置好即可。

Node.js 安装配置详细教程:https://3water.com/article/97801.htm

第二步、初始化一个NPM模块:首先查看NPM版本:

微信小程序转化为uni-app项目的方法示例

在任意盘中新建一个空白文件夹,用于存放NPM初始化模块配置:

微信小程序转化为uni-app项目的方法示例

第三步、使用miniprogram-to-uniapp将微信小程序转化uni-app实例:

首先下载需要转化的微信小程序:

为了示范随便下载了一个微信小程序商城,项目地址为:https://github.com/hanxue10180/shangcheng

下图为微信小程序的基本结构:

微信小程序转化为uni-app项目的方法示例

安装miniprogram-to-uniapp,并将小程序转化为uni-app项目:

因为这个包是工具,要求全局都能使用,所以需要-g进行全局安装,运行以下命令进行安装:

npm install miniprogram-to-uniapp -g

微信小程序转化为uni-app项目的方法示例

安装完成,执行以下命令查看工具版本:

(wtu -> 取自wx to uni之意,后面都用这个全局命令)

wtu -V

微信小程序转化为uni-app项目的方法示例

运行以下命令将微信小程序转化为uni-app项目:

在命令行里,输入【wtu -i "你的小程序项目路径"】,注意-i后面有个空格!!!如:【wtu -i "G:\shangcheng"】 ;

回车后即可以在源项目同及目录得到一个后缀为_uni的目录,即转换成功。如下图所示:

微信小程序转化为uni-app项目的方法示例

微信小程序转化为uni-app项目的方法示例

大功告成,顺利转化为uni-app项目结构:

微信小程序转化为uni-app项目的方法示例

到此这篇关于微信小程序转化为uni-app项目的方法示例的文章就介绍到这了,更多相关小程序转化为uni-app内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
Apr 06 Javascript
jquery的总体架构分析及实现示例详解
Nov 08 Javascript
jquery实现标签上移、下移、置顶
Apr 26 Javascript
js判断日期时间有效性的方法
Oct 24 Javascript
jQuery tip提示插件(实例分享)
Apr 28 jQuery
详解Vue路由History mode模式中页面无法渲染的原因及解决
Sep 28 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
微信小程序实现星级评分和展示
Jul 05 Javascript
深度了解vue.js中hooks的相关知识
Jun 14 Javascript
JS合并两个数组的3种方法详解
Oct 24 Javascript
vue style width a href动态拼接问题的解决
Aug 07 Javascript
Vue中component标签解决项目组件化操作
Sep 04 Javascript
小程序分享链接onShareAppMessage的具体用法
May 22 #Javascript
jquery绑定事件 bind和on的用法与区别分析
May 22 #jQuery
JS变量提升原理与用法实例浅析
May 22 #Javascript
JavaScript直接调用函数与call调用的区别实例分析
May 22 #Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 #Javascript
JavaScript使用prototype属性实现继承操作示例
May 22 #Javascript
详解如何修改 node_modules 里的文件
May 22 #Javascript
You might like
php下将XML转换为数组
2010/01/01 PHP
PHP 文件缓存的性能测试
2010/04/25 PHP
解决CodeIgniter伪静态失效
2014/06/09 PHP
PHP实现导出带样式的Excel
2016/08/28 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
Ajax请求PHP后台接口返回信息的实例代码
2018/08/21 PHP
基于jQuery的简单的列表导航菜单
2011/03/02 Javascript
jQuery代码优化 选择符篇
2011/11/01 Javascript
异步javascript的原理和实现技巧介绍
2012/11/08 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
探寻Javascript执行效率问题
2014/11/12 Javascript
JavaScript中string转换成number介绍
2014/12/31 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
2016/06/17 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
2016/11/29 Javascript
angular分页指令操作
2017/01/09 Javascript
从零学习node.js之利用express搭建简易论坛(七)
2017/02/25 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
2017/03/07 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
Python写的PHPMyAdmin暴力破解工具代码
2014/08/06 Python
利用Python和OpenCV库将URL转换为OpenCV格式的方法
2015/03/27 Python
Python中的函数作用域
2018/05/07 Python
使用python判断你是青少年还是老年人
2018/11/29 Python
python字符串循环左移
2019/03/08 Python
Pytorch maxpool的ceil_mode用法
2020/02/18 Python
Python requests模块session代码实例
2020/04/14 Python
使用python实现下载我们想听的歌曲,速度超快
2020/07/09 Python
Bootstrap File Input文件上传组件
2020/12/01 HTML / CSS
万宝龙英国官网:Montblanc手表、书写工具、皮革和珠宝
2018/10/16 全球购物
巴西备受欢迎的服装和生活方式品牌:FARM Rio
2020/02/04 全球购物
我的applet原先好好的, 一放到web server就会有问题,为什么?
2016/05/10 面试题
如果有两个类A,B,怎么样才能使A在发生一个事件的时候通知B
2016/03/12 面试题
银行委托书范本
2014/04/04 职场文书
MySQL 如何分析查询性能
2021/05/12 MySQL
python实现局部图像放大
2021/11/17 Python
js判断两个数组相等的5种方法
2022/05/06 Javascript
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS