• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧
您的位置:首页 > CMS教程 >建站教程 > 聊聊怎么将小程序项目转为uni-app项目

聊聊怎么将小程序项目转为uni-app项目

作者:站长图库 字体:[增加 减小] 来源:互联网

站长图库向大家介绍了小程序项目转为uni-app项目等相关知识,希望对您有所帮助

怎么将小程序项目转为uni-app项目?下面本篇文章给大家介绍一下微信小程序转化为uni-app项目的方法,希望对大家有所帮助!


聊聊怎么将小程序项目转为uni-app项目


之前自己做一个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://www.runoob.com/nodejs/nodejs-install-setup.html

第二步、初始化一个NPM模块:

首先查看NPM版本:


聊聊怎么将小程序项目转为uni-app项目


在任意盘中新建一个空白文件夹,用于存放NPM初始化模块配置:

使用CMD进入对应的文件夹输入:npm init命令即可


聊聊怎么将小程序项目转为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项目


分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

相关文章

  • Discuz不使用插件实现简单的打赏功能
  • Photoshop设计冬季促销广告设计教程
  • 百度更加重视和同行交换连接,事实证明
  • JS 中 9 个强大主流写法(各种 Hack 写法)
  • PHP如何去掉所有HTML标签?
  • 深入浅析Bootstrap中的自动定位浮标
  • Node.js深入学习之浅析require函数中怎么添加钩子
  • Photoshop制作晶莹剔透的音乐水晶球
  • 15个值得收藏的实用JavaScript代码片段(项目必备)
  • 织梦怎么去掉index.html

文章分类

  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧

最近更新的内容

    • PHP中如何利用define定义常量
    • PHP怎么删除最后一个字符
    • PHP中exec和system的区别是什么
    • 四种方式快速实现上拉触底加载效果
    • HTML用JS导出Excel的五种方法
    • PhotoShop打造Wacom中国风熊猫创意广告海报制作教程
    • 详解Laravel如何安装FFmpeg并进行视频文件处理
    • 利用图层样式制作漂亮的彩色霓虹字
    • 实战分享:利用nodejs​爬取并下载一万多张图片
    • Bootstrap中switch的用法是什么

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有