微信小程序转化为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 相关文章推荐
node.js中的buffer.length方法使用说明
Dec 14 Javascript
JavaScript实现简单图片翻转的方法
Apr 17 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
Nov 25 Javascript
layui导航栏实现代码
May 19 Javascript
js实现水平滚动菜单导航
Jul 21 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
Aug 24 Javascript
JavaScript登录验证基础教程
Nov 01 Javascript
微信小程序多音频播放进度条问题
Aug 28 Javascript
es6中Promise 对象基本功能与用法实例分析
Feb 23 Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 Javascript
解决ant Design中Select设置initialValue时的大坑
Oct 29 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
提问的智慧
2006/10/09 PHP
第十五节--Zend引擎的发展
2006/11/16 PHP
PHP开发过程中常用函数收藏
2009/12/14 PHP
劣质的PHP代码简化
2010/02/08 PHP
PHP获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
php preg_filter执行一个正则表达式搜索和替换
2012/02/27 PHP
PHP实现ftp上传文件示例
2014/08/21 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
IE6图片加载的一个BUG解决方法
2010/07/13 Javascript
JavaScript中使用构造函数实现继承的代码
2010/08/12 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
2011/10/24 Javascript
treepanel动态加载数据实现代码
2012/12/15 Javascript
js获得地址栏?问号后参数的方法
2013/08/08 Javascript
JavaScript实现的伸展收缩型菜单代码
2015/10/14 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
2016/06/24 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
2019/10/11 Javascript
Django验证码的生成与使用示例
2017/05/20 Python
PyCharm在win10的64位系统安装实例
2017/11/26 Python
分享vim python缩进等一些配置
2018/07/02 Python
基于Python共轭梯度法与最速下降法之间的对比
2020/04/02 Python
利用Python发送邮件或发带附件的邮件
2020/11/12 Python
TOWER London官网:鞋子、靴子、运动鞋等
2019/07/14 全球购物
J2EE包括哪些技术
2016/11/25 面试题
优秀生推荐信范文
2013/11/28 职场文书
个人职业生涯规划书1500字
2013/12/31 职场文书
专业技术职务聘任书
2014/03/29 职场文书
城市轨道交通工程职业生涯规划书范文
2014/09/16 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
生产现场禁烟通知
2015/04/23 职场文书
乔迁新居祝福语
2019/11/04 职场文书
详细聊聊浏览器是如何看闭包的
2021/11/11 Javascript