微信小程序转化为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 相关文章推荐
csdn 博客的css样式 v3
Feb 24 Javascript
js no-repeat写法 背景不重复
Mar 18 Javascript
Javascript继承机制的设计思想分享
Aug 28 Javascript
jquery弹出关闭遮罩层实例
Aug 06 Javascript
常用的JavaScript模板引擎介绍
Feb 28 Javascript
jQuery基础_入门必看知识点
Jul 04 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
Jan 17 Javascript
javascript+html5+css3自定义提示窗口
Jun 21 Javascript
用js实现before和after伪类的样式修改的示例代码
Sep 07 Javascript
详解Vue.js Mixins 混入使用
Sep 15 Javascript
Node解决简单重复问题系列之Excel内容的获取
Jan 02 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
May 26 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解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
php中通过DirectoryIterator删除整个目录的方法
2015/03/13 PHP
yii实现model添加默认值的方法(2种方法)
2016/01/06 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
javascript奇异的arguments分析
2010/10/20 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
2013/11/15 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
2015/02/26 Javascript
Google 地图类型详解及示例代码
2016/08/06 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
2017/02/24 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
React简单介绍
2017/05/24 Javascript
js 奇葩技巧之隐藏代码
2017/08/11 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
Vue入门之数量加减运算操作示例
2018/12/11 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
2019/01/09 Javascript
Vue.js递归组件实现组织架构树和选人功能
2019/07/04 Javascript
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
[00:31]DOTA2荣耀之路7:Miracle-空血无敌斩
2018/05/31 DOTA
Python备份目录及目录下的全部内容的实现方法
2016/06/12 Python
python中文件变化监控示例(watchdog)
2017/10/16 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
tensorflow 输出权重到csv或txt的实例
2018/06/14 Python
Python Tkinter模块实现时钟功能应用示例
2018/07/23 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
详解用Python爬虫获取百度企业信用中企业基本信息
2020/07/02 Python
世界首屈一指的在线男士内衣权威:HisRoom
2017/08/05 全球购物
CheapTickets香港机票预订网站:CheapTickets.hk
2019/06/26 全球购物
网上蛋糕店创业计划书
2014/01/24 职场文书
幼儿园大班家长评语
2014/04/17 职场文书
小学生作文批改评语
2014/12/25 职场文书
Nginx反向代理及负载均衡如何实现(基于linux)
2021/03/31 Servers