微信小程序转化为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.jb51.net/article/97801.htm

第二步、初始化一个NPM模块：首先查看NPM版本：

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

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

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

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

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

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

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

npm install miniprogram-to-uniapp -g

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

（wtu -> 取自wx to uni之意，后面都用这个全局命令）

wtu -V

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

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

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

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

到此这篇关于微信小程序转化为uni-app项目的方法示例的文章就介绍到这了,更多相关小程序转化为uni-app内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 微信小程序 实战小程序实例

    微信小程序 实战小程序实例

    微信小程序基本组件和API已撸完,总归要回到正题的,花了大半天时间做了个精简版的百思不得姐,包括段子,图片,音频,视频,四个模块.这篇就带着大家简述下这个小的APP,源码会放到GitHub上欢迎start. 项目中我能学到什么? tabbar使用方式 网络调用真实接口 loading使用 scroll-view实现下拉刷新上拉加载 image组件对图片的处理, 音乐和视频组件的使用 跳转传值使用 等等等.... app.json全局配置文件 { "pages":[ "page

  • 微信小程序购物商城系统开发系列-目录结构介绍

    微信小程序购物商城系统开发系列-目录结构介绍

    上一篇我们简单介绍了一下微信小程序的IDE(微信小程序购物商城系统开发系列-工具篇),相信大家都已经蠢蠢欲试建立一个自己的小程序,去完成一个独立的商城网站. 先别着急我们一步步来,先尝试下写一个自己的小demo. 这一篇文章我们主要的是介绍一下小程序的一些目录结构,以及一些语法,为我们后面的微信小程序商城系统做铺垫. 首先我们来了解下小程序的目录结构 Pages 我们新建的一些页面将保存在这个文件夹下面,每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js.index.

  • 微信小程序 增、删、改、查操作实例详解

    微信小程序 增、删、改、查操作实例详解

    微信小程序 增.删.改.查操作实例详解 1.以收货地址的增删改查为例 2.文件目录 js文件是逻辑控制,主要是它发送请求和接收数据, json 用于此页面局部 配置并且覆盖全局app.json配置, wxss用于页面的样式设置, wxml就是页面,相当于html <form bindsubmit="addSubmit"> <view class="consignee"> <text class="consignee-tit&q

  • 详解微信小程序开发(项目从零开始)

    一.序 微信小程序,估计大家都不陌生,现在应用场景特别多.今天就系统的介绍一下小程序开发.注意,这里只从项目代码上做解析,不涉及小程序如何申请.打包.发布的东西.(这些跟着微信官方文档的流程走就好).好了废话不多说,看目录. 注: 小程序是一套特殊的东西,融合了原生和web端.他是一个不完整的浏览器对象,所以很多DOM . BOM 的东西无法使用,但是他又通过微信APP实现了多线程. 二.如何创建小程序 很简单,首先下载微信开发者工具,下载稳定版本的就好. 下载 然后,创建小程序,可以参考下述图

  • 简单了解微信小程序的目录结构

    简单了解微信小程序的目录结构

    前言 在开发小程序之前,我们首先需要对其目录结构进行了解,以便于提升开发效率. 我们使用微信开发者工具构建一个小程序项目,我们可以看到目录下生成了件. ① 以.json为后缀的JSON配置文件: ② 以.wxml为后缀的WXML模板文件,其可以看做是一个简洁的HTML页面,略有不同的则是文件后缀以及其中的部分标签不同: ③ 以.wxss为后缀的WXSS样式文件,也可以看做一个CSS样式文件: ④ 以.js为后缀的JS脚本文件. 在上图的示例中,我们可以看到根目录下有JS.JSON.WXSS类型文

  • 微信小程序学习总结（一）项目创建与目录结构分析

    本文实例讲述了微信小程序项目创建与目录结构.分享给大家供大家参考,具体如下: 首先,放上微信公众品台的网址https://mp.weixin.qq.com/,下面内容完全可以跟着做.https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html 下载开发工具. 创建项目 如图所示 选点此校验就行啦,右边有个详情也点开瞅两眼. 上传测试和腾讯这块点不了是为啥呢,因为你创建项目的时候没有填写AppID,下一题. 具体的东西下载下来瞅瞅

  • 微信小程序学习笔记之目录结构、基本配置图文详解

    微信小程序学习笔记之目录结构、基本配置图文详解

    本文实例讲述了微信小程序学习笔记之目录结构.基本配置.分享给大家供大家参考,具体如下: 结束了一段时间的学习,开始一段新的学习旅程 -- 微信小程序.现在出去找工作只会PHP.HTML+CSS.JS什么的不够了,总得会点时下热门的东西,例如微信小程序,有很多企业的招聘要求上写着:"做过微信小程序的优先"."只要做过微信小程序的"...... 可见微信小程序的热门程度.话(fei)不(hua)多(ting)说(duo),开始学习. 首先在微信公众平台注册小程序账号:

  • 微信小程序项目总结之记账小程序功能的实现（包括后端）

    一.小程序部分 这是理财系统的前端,江苏海洋大学微信小程序比赛,最后获得了一等奖 GitHub:https://github.com/GeorgeLeoo/finance 1. 项目描述 (1). 此项目为记账小程序 (2). 包括账单.图表.搜索.用户等多个子模块 (3). 使用微信小程序技术 (4). 采用模块化.组件化.工程化等模式开发 2. 项目功能界面 在 1.0.2版本中删除了扇形图 3. 项目目录 * pages:页面 * components:组件 * utils:工具类 |--

  • 基于mpvue搭建微信小程序项目框架的教程详解

    简介: mpvue框架对于从没有接触过小程序又要尝试小程序开发的人员来说,无疑是目前最好的选择.mpvue从底层支持 Vue.js 语法和构建工具体系,同时再结合相关UI组件库,便可以高效的实现小程序开发 前言: 本文讲述如何搭建完整的小程序项目框架,因为是第一次使用,有不完善的地方请大佬指正. 搭建内容包括: 1.使用scss语法:依赖插件sass-loader .node-sass 2.像vue一样使用路由:依赖插件 mpvue-entry 和 mpvue-router-patch 3.使用

  • 微信小程序开发（二）图片上传+服务端接收详解

    微信小程序开发（二）图片上传+服务端接收详解

    这次介绍下小程序当中常用的图片上传. 前几天做了图片上传功能,被坑了一下.接下来我们来看一下微信的上传api. 这里的filePath就是图片的存储路径,类型居然是个String,也就是 只能每次传一张图片,我以前的接口都是接收一个array,我本人又是一个半吊子的PHP,只能自己去改接收图片的接口. 看一下页面效果图 一个很常见的修改头像效果,选择图片(拍照),然后上传. 下面就是贴代码了 首先是小程序的wxml代码 <view class="xd-container">

  • 微信小程序 删除项目工程实现步骤

    微信小程序 删除项目工程实现步骤

    微信小程序如何删除项目工程 微信小程序现在非常火,也许是前端工程师有一个春天的来临,最近学习这部分知识,也做些小的DEMO ,这里就说下如何实现小程序的项目工程删除. 微信小程序本地创建的项目没有删除功能,我通过尝试找到了可以清理的方法,只在Mac osx测试通过,windows可以根据原理自行解决,估计原理都是一致的: 删除数据文件夹下的Default即可,属于全部清理,删除后需要重新扫二维码登录. Mac osx 下目录: $HOME/Library/Application Support/

随机推荐