微信小程序转化为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 相关文章推荐
javascript Object与Function使用
Jan 11 Javascript
关于JavaScript与HTML的交互事件
Apr 12 Javascript
使用JS取得焦点(focus)元素代码
Mar 22 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
Mar 13 Javascript
JavaScript中连接操作Oracle数据库实例
Apr 02 Javascript
JavaScript中setMonth()方法的使用详解
Jun 11 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 Javascript
巧用canvas
Jan 21 Javascript
fullPage.js和CSS3实现全屏滚动效果
May 05 Javascript
详解微信小程序之scroll-view的flex布局问题
Jan 16 Javascript
JavaScript刷新页面的几种方法总结
Mar 28 Javascript
Vue结合路由配置递归实现菜单栏功能
Jun 16 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
Discuz Uchome ajaxpost小技巧
2011/01/04 PHP
图解找出PHP配置文件php.ini的路径的方法
2014/08/20 PHP
PHP实现数组递归转义的方法
2014/08/28 PHP
PHP使用array_merge重新排列数组下标的方法
2015/07/22 PHP
php使用文本统计访问量的方法
2016/05/12 PHP
Highslide.js是一款基于js实现的网页中图片展示插件
2020/03/30 Javascript
js中cookie的使用详细分析
2008/05/28 Javascript
在javascript将NodeList作为Array数组处理的方法
2010/07/09 Javascript
日历查询的算法 如何计算某一天是星期几
2012/12/12 Javascript
AngularJS中的模块详解
2015/01/29 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
2016/12/20 Javascript
js实现登录框鼠标拖拽效果
2017/03/09 Javascript
web前端vue filter 过滤器
2018/01/12 Javascript
vue.js动画中的js钩子函数的实现
2018/07/06 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
2018/07/25 Javascript
bootstrap-table后端分页功能完整实例
2020/06/01 Javascript
[43:03]完美世界DOTA2联赛PWL S2 PXG vs Magma 第二场 11.21
2020/11/24 DOTA
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
浅谈Python的垃圾回收机制
2016/12/17 Python
Python实现将16进制字符串转化为ascii字符的方法分析
2017/07/21 Python
python中使用%与.format格式化文本方法解析
2017/12/27 Python
python文件写入write()的操作
2019/05/14 Python
Python 3.8新特征之asyncio REPL
2019/05/28 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
配置python的编程环境之Anaconda + VSCode的教程
2020/03/29 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
django和flask哪个值得研究学习
2020/07/31 Python
美国休闲服装品牌:Express
2016/09/24 全球购物
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
英国领先的维生素和营养补充剂直接供应商:Healthspan
2019/04/22 全球购物
函授毕业自我鉴定
2013/12/19 职场文书
论文指导教师评语
2014/04/28 职场文书
学习之星事迹材料
2014/05/17 职场文书
精神文明建设汇报材料
2014/12/24 职场文书
刮痧观后感
2015/06/05 职场文书
使用opencv-python如何打开USB或者笔记本前置摄像头
2022/06/21 Python