微信小程序转化为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点击tr实现checkbox选中的方法
Mar 19 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
Jan 14 Javascript
js控制div弹出层实现方法
May 11 Javascript
jquery SweetAlert插件实现响应式提示框
Aug 18 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
Sep 16 Javascript
JS实现图片垂直居中显示小结
Dec 13 Javascript
JS对象的深度克隆方法示例
Mar 16 Javascript
Vue.js鼠标悬浮更换图片功能
May 17 Javascript
JavaScript定义函数_动力节点Java学院整理
Jun 27 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
Jul 26 Javascript
微信小程序 swiper组件构建轮播图的实例
Sep 20 Javascript
vue组件从开发到发布的实现步骤
Nov 11 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将文本文件转换csv输出的方法
2014/12/31 PHP
PHP5.2中PDO的简单使用方法
2016/03/25 PHP
详解PHP实现支付宝小程序用户授权的工具类
2018/12/25 PHP
动态改变textbox的宽高的js
2006/10/26 Javascript
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
JAVASCRIPT下判断IE与FF的比较简单的方式
2008/10/17 Javascript
jQuery 操作下拉列表框实现代码
2010/02/22 Javascript
Javascript读取cookie函数代码
2010/10/16 Javascript
在Linux上用forever实现Node.js项目自启动
2014/07/09 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
2015/05/20 Javascript
省市二级联动小案例讲解
2016/07/24 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
Vue 中的compile操作方法
2018/02/26 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
Vue中 key keep-alive的实现原理
2018/09/18 Javascript
详解在create-react-app使用less与antd按需加载
2018/12/06 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
2020/07/24 Javascript
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
Python去除字符串两端空格的方法
2015/05/21 Python
Django中使用locals()函数的技巧
2015/07/16 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
python中将\\uxxxx转换为Unicode字符串的方法
2018/09/06 Python
Python并发:多线程与多进程的详解
2019/01/24 Python
浅谈python3.6的tkinter运行问题
2019/02/22 Python
Tornado实现多进程/多线程的HTTP服务详解
2019/07/25 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
Linux内核产生并发的原因
2016/11/08 面试题
shell程序如何生命变量?shell变量是弱变量吗?
2014/11/10 面试题
财务会计人员岗位职责
2013/11/30 职场文书
教师的实习自我鉴定
2013/12/17 职场文书
校园安全广播稿
2014/02/08 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
故意伤害罪辩护词
2015/05/21 职场文书
PHP使用非对称加密算法RSA
2021/04/21 PHP