微信小程序转化为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入门学习资料收集整理篇
Jul 06 Javascript
JavaScript 学习笔记之语句
Jan 14 Javascript
jQuery网页右侧广告跟随滚动代码分享
Apr 20 Javascript
分享两段简单的JS代码防止SQL注入
Apr 12 Javascript
js select实现省市区联动选择
Apr 17 Javascript
Angularjs 实现分页功能及示例代码
Sep 14 Javascript
easy ui datagrid 从编辑框中获取值的方法
Feb 22 Javascript
bootstrap响应式工具使用详解
Nov 29 Javascript
vue实现的树形结构加多选框示例
Feb 02 Javascript
如何将百度地图包装成Vue的组件的方法步骤
Feb 12 Javascript
微信小程序返回上一页传参并刷新过程解析
Dec 13 Javascript
解决小程序无法触发SESSION问题
Feb 03 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 遍历数据表数据并列表横向排列的代码
2009/09/05 PHP
PHP对MongoDB[NoSQL]数据库的操作
2013/03/01 PHP
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
PHP中PCRE正则解析代码详解
2019/04/26 PHP
详解javascript事件冒泡
2016/01/09 Javascript
AngularJS 让人爱不释手的八种功能
2016/03/23 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
2016/06/22 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
node.js学习之交互式解释器REPL详解
2016/12/08 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
2018/01/06 jQuery
React Native中Mobx的使用方法详解
2018/12/04 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
2019/04/11 Javascript
JS函数进阶之继承用法实例分析
2020/01/15 Javascript
Vue路由的模块自动化与统一加载实现
2020/06/05 Javascript
vue接通后端api以及部署到服务器操作
2020/08/13 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
python进程管理工具supervisor使用实例
2014/09/17 Python
Python编程中运用闭包时所需要注意的一些地方
2015/05/02 Python
基于Python_脚本CGI、特点、应用、开发环境(详解)
2017/05/23 Python
python+opencv实现动态物体追踪
2018/01/09 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
详解Django中间件执行顺序
2018/07/16 Python
Python http接口自动化测试框架实现方法示例
2018/12/06 Python
如何利用Python模拟GitHub登录详解
2019/07/15 Python
PyTorch 随机数生成占用 CPU 过高的解决方法
2020/01/13 Python
Django import export实现数据库导入导出方式
2020/04/03 Python
Django实现celery定时任务过程解析
2020/04/21 Python
小学毕业感言150字
2014/02/05 职场文书
2014年班组长工作总结
2014/11/20 职场文书
北京导游词
2015/02/12 职场文书
2015年预备党员自我评价
2015/03/04 职场文书
入党团支部推荐意见
2015/06/02 职场文书
教师节作文之小学四年级
2019/09/03 职场文书
python实现简易名片管理系统
2021/04/11 Python
mysql 获取时间方式
2022/03/20 MySQL