微信小程序转化为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中给animation加更多的运作效果实例
Sep 05 Javascript
jquery 检测元素是否存在的实例代码
Nov 19 Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
May 17 Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 Javascript
JS使用正则实现去掉字符串左右空格的方法
Dec 27 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
jQuery tip提示插件(实例分享)
Apr 28 jQuery
最实用的JS数组函数整理
Dec 05 Javascript
详解nvm管理多版本node踩坑
Jul 26 Javascript
layui实现checkbox的目录树tree的例子
Sep 12 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
May 25 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实现专业获取网站SEO信息类实例
2015/04/02 PHP
php实现可运算的验证码
2015/11/10 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
基于laravel belongsTo使用详解
2019/10/18 PHP
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
2013/08/27 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
Jquery uploadify上传插件使用详解
2016/01/13 Javascript
jQuery div拖拽用法实例
2016/01/14 Javascript
jquery实现简单的banner轮播效果【实例】
2016/03/30 Javascript
jquery实现百叶窗效果
2017/01/12 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
提高Web性能的前端优化技巧总结
2017/02/27 Javascript
js时间戳与日期格式之间相互转换
2017/12/11 Javascript
JavaScript常用工具方法封装
2019/02/12 Javascript
JS JQuery获取data-*属性值方法解析
2020/09/01 jQuery
vue element ui validate 主动触发错误提示操作
2020/09/21 Javascript
JS sort排序详细使用方法示例解析
2020/09/27 Javascript
[02:42]DOTA2城市挑战赛收官在即 四强之争风起云涌
2018/06/05 DOTA
python简单的函数定义和用法实例
2015/05/07 Python
Python实现压缩和解压缩ZIP文件的方法分析
2017/09/28 Python
使用requests库制作Python爬虫
2018/03/25 Python
美国最佳选择产品网站:Best Choice Products
2019/05/27 全球购物
英国网上电器商店:Electricshop
2020/03/15 全球购物
Jar包的作用是什么
2014/03/30 面试题
总经理岗位职责范本
2014/02/02 职场文书
眼镜促销方案
2014/03/15 职场文书
2015元旦家电促销活动策划方案
2014/12/09 职场文书
2015年师德表现自我评价
2015/03/05 职场文书
2015年班长个人工作总结
2015/04/03 职场文书
小学入学感言
2015/08/01 职场文书
2016教师六五普法学习心得体会
2016/01/21 职场文书
基于Golang 高并发问题的解决方案
2021/05/08 Golang
JavaScript实现两个数组的交集
2022/03/25 Javascript
HTML页面点击按钮关闭页面的多种方式
2022/12/24 HTML / CSS