微信小程序转化为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 相关文章推荐
js CSS操作方法集合
Oct 31 Javascript
13个绚丽的Jquery 界面设计网站推荐
Sep 28 Javascript
js 浏览器事件介绍
Mar 30 Javascript
php和js对数据库图片进行等比缩放示例
Apr 28 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
Mar 31 Javascript
JavaScript实现斗地主游戏的思路
Feb 29 Javascript
基于原生js淡入淡出函数封装(兼容IE)
Oct 20 Javascript
jQuery实现可移动选项的左右下拉列表示例
Dec 26 Javascript
bootstrap表格分页实例讲解
Dec 30 Javascript
vue回到顶部监听滚动事件详解
Aug 02 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
vue 获取及修改store.js里的公共变量实例
Nov 06 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 socket的讲解与实例分析
2013/06/13 PHP
PHP实现的增强性mhash函数
2015/05/27 PHP
PHP导出Excel实例讲解
2016/01/24 PHP
php获取手机端的号码以及ip地址实例代码
2018/09/12 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
JavaScript高级程序设计
2006/12/29 Javascript
javascript 打印页面代码
2009/03/24 Javascript
php 中序列化和json使用介绍
2013/07/08 Javascript
深入分析原生JavaScript事件
2014/12/29 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
EasyUI创建对话框的两种方式
2016/08/23 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
vue v-model动态生成详解
2018/06/30 Javascript
部署vue+Springboot前后端分离项目的步骤实现
2020/05/31 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
2020/07/24 Javascript
Python中序列的修改、散列与切片详解
2017/08/27 Python
python并发编程之线程实例解析
2017/12/27 Python
Python实现合并两个有序链表的方法示例
2019/01/31 Python
在tensorflow中实现屏蔽输出的log信息
2020/02/04 Python
Python3运算符常见用法分析
2020/02/14 Python
Python3+selenium配置常见报错解决方案
2020/08/28 Python
极简的HTML5模版
2015/07/09 HTML / CSS
俄罗斯儿童和青少年服装、鞋子及配件的在线商店:Orby
2020/02/20 全球购物
简单介绍Object类的功能、常用方法
2013/10/02 面试题
就业自我评价
2014/02/04 职场文书
应届生求职信
2014/05/31 职场文书
运动会入场口号
2014/06/07 职场文书
2014年民政局关于保密工作整改措施
2014/09/19 职场文书
商铺租房协议书范本
2014/12/04 职场文书
罗马假日观后感
2015/06/08 职场文书
Python实现对齐打印 format函数的用法
2022/04/28 Python
Windows Server 2022 超融合部署(图文教程)
2022/06/25 Servers
windows11选中自动复制怎么开启? Win11自动复制所选内容的方法
2022/07/23 数码科技