微信小程序转化为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版本:


1336199-20200310012406504-2086798176.png

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

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


1336199-20200310012914621-1447099513.png

第三步、使用miniprogram-to-uniapp将微信小程序转化uni-app实例:

首先下载需要转化的微信小程序:

为了示范随便下载了一个微信小程序商城,项目地址为:https://github.com/hanxue10180/shangcheng

下图为微信小程序的基本结构:

1336199-20200310020359740-738587572.png

安装miniprogram-to-uniapp,并将小程序转化为uni-app项目:

因为这个包是工具,要求全局都能使用,所以需要-g进行全局安装,运行以下命令进行安装:

npm install miniprogram-to-uniapp -g

1336199-20200310013611468-1254814271.png

安装完成,执行以下命令查看工具版本:

(wtu -> 取自wx to uni之意,后面都用这个全局命令)1336199-20200310013725253-738127298.png

wtu -V
 
         


运行以下命令将微信小程序转化为uni-app项目:

在命令行里,输入【wtu -i "你的小程序项目路径"】,注意-i后面有个空格!!!如:【wtu -i "G:\shangcheng"】 ;

回车后即可以在源项目同及目录得到一个后缀为_uni的目录,即转换成功。如下图所示:

1336199-20200310014849091-295112988.png

1336199-20200310014947120-755179805.png

大功告成,顺利转化为uni-app项目结构:

1336199-20200310015104837-72597657.png



相关文章
|
17天前
|
小程序 搜索推荐 JavaScript
引入小程序平台对app有啥好处
引入小程序平台对app有啥好处
45 1
|
15天前
|
人工智能 小程序 搜索推荐
【一步步开发AI运动APP】十二、自定义扩展新运动项目2
本文介绍如何基于uni-app运动识别插件实现“双手并举”自定义扩展运动,涵盖动作拆解、姿态检测规则构建及运动分析器代码实现,助力开发者打造个性化AI运动APP。
|
2月前
|
缓存 小程序 开发工具
最新原创uniapp+vue3仿微信界面聊天app系统
最新原创研发uniapp+vue3实战跨端仿微信App界面聊天程序。支持运行到H5+小程序+APP端。
174 6
最新原创uniapp+vue3仿微信界面聊天app系统
|
1月前
|
存储 小程序 Java
热门小程序源码合集:微信抖音小程序源码支持PHP/Java/uni-app完整项目实践指南
小程序已成为企业获客与开发者创业的重要载体。本文详解PHP、Java、uni-app三大技术栈在电商、工具、服务类小程序中的源码应用,提供从开发到部署的全流程指南,并分享选型避坑与商业化落地策略,助力开发者高效构建稳定可扩展项目。
|
3月前
|
存储 人工智能 Android开发
为什么微信发送的APP安装不了,.apk转化为.apk.1
微信发送的APP文件常被改为.apk.1格式导致无法安装,推荐使用夸克或QQ浏览器解决。
261 14
|
3月前
|
人工智能 小程序 前端开发
小程序、网站 vs. APP:成本差异究竟在哪里?技术栈如何决定项目上限?优雅草卓伊凡
小程序、网站 vs. APP:成本差异究竟在哪里?技术栈如何决定项目上限?优雅草卓伊凡
252 0
小程序、网站 vs. APP:成本差异究竟在哪里?技术栈如何决定项目上限?优雅草卓伊凡
|
3月前
|
小程序 Java 关系型数据库
圈子系统公众号app小程序系统源码圈子系统带即时通讯 多级圈子系统源码 兴趣小组系统开源 私密圈子系统代码 会员制社区系统
本圈子系统解决方案提供即时通讯、多级圈子、兴趣小组、私密社区及会员制管理功能。支持开源与商业方案,推荐ThinkSNS+、EasyClub及OpenFire等系统,并提供前后端技术选型建议,助力快速搭建社交平台。
162 0
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
2676 7
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
2235 1