微信小程序转化为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操作userdata
Apr 27 Javascript
IE8 下的Js错误HTML Parsing Error...
Aug 14 Javascript
js操作二级联动实现代码
Jul 27 Javascript
详细介绍8款超实用JavaScript框架
Oct 25 Javascript
js闭包实例汇总
Nov 09 Javascript
JSON格式化输出
Nov 10 Javascript
浅析javascript 定时器
Dec 23 Javascript
jQuery实现表格展开与折叠的方法
May 04 Javascript
javascript学习之json入门
Dec 22 Javascript
基于vue实现图片验证码倒计时60s功能
Dec 10 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
Oct 02 Javascript
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
小程序分享链接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语法基础
2016/01/01 PHP
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
2012/12/09 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
jQuery点缩略图弹出层显示大图片
2015/02/13 Javascript
基于js中的原型、继承的一些想法
2016/08/10 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
2017/03/07 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
jquery实现静态搜索功能(可输入搜索文字)
2017/03/28 jQuery
解决webpack打包速度慢的解决办法汇总
2017/07/06 Javascript
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
python基础教程之获取本机ip数据包示例
2014/02/10 Python
Python获取脚本所在目录的正确方法
2014/04/15 Python
Python os模块中的isfile()和isdir()函数均返回false问题解决方法
2015/02/04 Python
Python中atexit模块的基本使用示例
2015/07/08 Python
Python的Django框架中的Context使用
2015/07/15 Python
python实现红包裂变算法
2016/02/16 Python
python中的错误处理
2016/04/10 Python
python图像常规操作
2017/11/11 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
Django基础三之视图函数的使用方法
2019/07/18 Python
Django视图扩展类知识点详解
2019/10/25 Python
Python如何读写字节数据
2020/08/05 Python
Python压缩模块zipfile实现原理及用法解析
2020/08/14 Python
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
日本土著品牌,综合型购物网站:Cecile
2016/08/23 全球购物
美国最大的骑马用品零售商:HorseLoverZ
2017/01/12 全球购物
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
公积金单位接收函
2014/01/11 职场文书
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
元旦活动感言
2014/03/08 职场文书
大学毕业典礼致辞
2015/07/29 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书