微信小程序转化为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 相关文章推荐
判断ie的两种简单方法
Aug 12 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
Oct 18 Javascript
html的DOM中document对象forms集合用法实例
Jan 21 Javascript
JavaScript中定义类的方式详解
Jan 07 Javascript
jQuery源码分析之sizzle选择器详解
Feb 13 Javascript
Node.js实现文件上传的示例
Jun 28 Javascript
微信小程序实现留言板功能
Nov 02 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
Apr 23 Javascript
js console.log打印对象时属性缺失的解决方法
May 23 Javascript
微信小程序实现手指拖动选项排序
Apr 22 Javascript
Element Alert警告的具体使用方法
Jul 27 Javascript
写一个Vue loading 插件
Nov 09 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
Zerg建筑一览
2020/03/14 星际争霸
在PHP中使用XML
2006/10/09 PHP
PHP中去除换行解决办法小结(PHP_EOL)
2011/11/27 PHP
与文件上传有关的php配置参数总结
2013/06/14 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
jQuery常见开发技巧详细整理
2013/01/02 Javascript
jquery DIV撑大让滚动条滚到最底部代码
2013/06/06 Javascript
jQuery实现密保互斥问题解决方案
2013/08/16 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
node.js中的fs.lchmod方法使用说明
2014/12/16 Javascript
JQuery radio(单选按钮)操作方法汇总
2015/04/15 Javascript
jquery.map()方法的使用详解
2015/07/09 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
JavaScript的兼容性与调试技巧
2016/11/22 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
jquery滚动条插件slimScroll使用方法
2017/02/09 Javascript
详解cordova打包成webapp的方法
2017/10/18 Javascript
JavaScript引用类型Date常见用法实例分析
2018/08/08 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
2019/09/06 Javascript
layui导出所有数据的例子
2019/09/10 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
Python编程中NotImplementedError的使用方法
2018/04/21 Python
Python打开文件、文件读写操作、with方式、文件常用函数实例分析
2020/01/07 Python
在Python3.74+PyCharm2020.1 x64中安装使用Kivy的详细教程
2020/08/07 Python
python3列表删除大量重复元素remove()方法的问题详解
2021/01/04 Python
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
海蓝之谜(LA MER)澳大利亚官方商城:全球高端奢华护肤品牌
2017/10/27 全球购物
构造器Constructor是否可被override?
2013/08/06 面试题
旅游管理专业学生求职信
2013/09/28 职场文书
大学军训通讯稿
2015/07/18 职场文书
大学生创业,为什么都会选择快餐饮?
2019/08/08 职场文书
用Python创建简易网站图文教程
2021/06/11 Python
MySQL 主从复制数据不一致的解决方法
2022/03/18 MySQL