微信小程序转化为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 相关文章推荐
JQuery Tips(3) 关于$()包装集内元素的改变
Dec 14 Javascript
Javascript中arguments对象详解
Oct 22 Javascript
jQuery实现可展开合拢的手风琴面板菜单
Sep 15 Javascript
基于JavaScript实现回到页面顶部动画代码
May 24 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
May 30 Javascript
javascript创建含数字字母的随机字符串方法总结
Aug 01 Javascript
JS中from 表单序列化提交的代码
Jan 20 Javascript
Node.JS利用PhantomJs抓取网页入门教程
May 19 Javascript
详解webpack的proxyTable无效的解决方案
Jun 15 Javascript
Vue父子组件双向绑定传值的实现方法
Jul 31 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
Aug 31 Javascript
vue特效之翻牌动画
Apr 20 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/08/28 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
js中cookie的使用详细分析
2008/05/28 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
基于jquery的合并table相同单元格的插件(精简版)
2011/04/05 Javascript
alert出数组中的随即值代码
2014/09/25 Javascript
js实现Select下拉框具有输入功能的方法
2015/02/06 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
jQuery siblings()用法实例详解
2016/04/26 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
2016/09/01 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
2016/12/15 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
[05:09]2016国际邀请赛中国区预选赛淘汰赛首日精彩回顾
2016/06/29 DOTA
python进程管理工具supervisor使用实例
2014/09/17 Python
Python类方法__init__和__del__构造、析构过程分析
2015/03/06 Python
Python Requests安装与简单运用
2016/04/07 Python
Python3编程实现获取阿里云ECS实例及监控的方法
2017/08/18 Python
微信跳一跳python辅助脚本(总结)
2018/01/11 Python
Python使用combinations实现排列组合的方法
2018/11/13 Python
python障碍式期权定价公式
2019/07/19 Python
django 中QuerySet特性功能详解
2019/07/25 Python
Python实现多线程/多进程的TCP服务器
2019/09/03 Python
python程序 创建多线程过程详解
2019/09/23 Python
Python 获取命令行参数内容及参数个数的实例
2019/12/20 Python
如何把外网python虚拟环境迁移到内网
2020/05/18 Python
化工专业个人的求职信范文
2013/11/28 职场文书
金融事务专业毕业生求职信
2014/02/23 职场文书
乡镇综治宣传月活动总结
2014/07/02 职场文书
秋冬农业生产标语
2014/10/09 职场文书
2015年乡镇流动人口工作总结
2015/05/12 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
承诺书应该怎么写?
2019/09/10 职场文书
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android