前言:

  之前自己做一个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版本:

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

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

第三步、使用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项目的更多相关文章

  1. 微信小程序:全局配置app.json

    微信小程序:全局配置app.json 一.全局配置app.json app.json文件用来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. 以下是一个包 ...

  2. 使用wepy开发微信小程序商城第一篇:项目初始化

    使用wepy开发微信小程序商城 第一篇:项目初始化 前言: wepy小程序项目初始化的操作,官方文档看了好几遍,感觉写得不是很清楚. 这篇写得挺好的:小程序开发之wepy 1.初始化项目 (1)全局安 ...

  3. 微信小程序开发(三)项目目录及文件结构

    第二章我们已经创建了一个Hello WXapplet示例小程序.我们从文件目录结构来了解Hello WXapplet项目的构成. 目录结构显示,在小程序项目的根目录下面包含3个app开头的文件(app ...

  4. 微信小程序(1)--新建项目

    这些天看了一下最近特别火的微信小程序,发现和vue大同小异. 新建项目 为方便初学者了解微信小程序的基本代码结构,在创建过程中,如果选择的本地文件夹是个空文件夹,开发者工具会提示,是否需要创建一个 q ...

  5. 微信小程序开发---逻辑层(App Service)

    再说逻辑层之前,先说说微信小程序框架(MINA) 小程序开发框架的目标是通过尽可能简单.高效的方式让开发者可以在微信中开发具有原生APP体验的服务. 框架提供了自己的视图层描述语言WXML和WXSS, ...

  6. 微信小程序--getLocation需要在app.json中声明permission字段

    在微信小程序开发中,需要获取用户所在地理位置,结果提示‘getLocation需要在app.json中声明permission字段’ 这是因为开发者需要填写获取用户地理位置的用途说明. 具体解决方法: ...

  7. 微信小程序笔记<三>入口app.js —— 注册小程序

    小程序开发框架在逻辑层使用的语言就是JavaScript,所以想玩小程序JavaScript的基本功一定要扎实.但小程序基于js做了一些修改,以方便开发者更方便的使用微信的一些功能,使得小程序更好的贴 ...

  8. 02——微信小程序官方demo讲解——app部分

    第一节讲了目录结构,这节主要讲解下目录中app.js部分. 它由三部分组成app.js.app.json与app.wxss 1.JS部分 1.1概述 //app.js App({ onLaunch: ...

  9. 微信小程序笔记<二>认识app.json

    *.json文件在小程序开发中必不可少,从 app.json 开始认识小程序中的配置文件*.json: app.json 为小程序必须文件,它不仅作为配置文件管理着小程序的UI还充当着路由器的功能: ...

随机推荐

  1. python语法基础-函数-递归函数-长期维护

    ###############    递归   ############## # 递归的定义——在一个函数里再调用这个函数本身 # 递归的最大深度——998 # 二分查找算法 # 你观察这个列表,这是 ...

  2. Java IO: 序列化与ObjectInputStream、ObjectOutputStream

    作者:Jakob Jenkov  译者: 李璟(jlee381344197@gmail.com) 本小节会简要概括Java IO中的序列化以及涉及到的流,主要包括ObjectInputStream和O ...

  3. [LC] 48. Rotate Image

    You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees (clockwise). ...

  4. in与exist , not in与not exist 的区别

    in和exists     in 是把外表和内表作hash 连接,而exists是对外表作loop循环,每次loop循环再对内表进行查询.一直以来认为exists比in效率高的说法是不准确的.     ...

  5. 利用Load命令将本地文本里面的数据导入到MySQL数据库

    摘要:在使用MySQL是我们可能会遇到要向我们的表中插入大量的数据如果都使用以下的语句在命令行输入有点不太切实际,幸好MySQL为我们提供了LOAD命令可以批量的从本地文件向MySQL表中导入数据! ...

  6. navicat 导出查询结果

    请依照下列步骤:(Windows 版本) 例子:导出查询结果到一个文本文件 在执行查询之后,保存查询及在工具栏点击导出向导/导出. 按照导出向导的步骤指导你完成 设置导出文件格式(步骤 1) 设置目标 ...

  7. ThinkPHP使用soapclient调用webservice接口

    1,开启 php.ini 这2个服务 12 extension=php_openssl.dllextension=php_soap.dll 以公共天气预报webservice为例,采用thinkPHP ...

  8. 查询优化基础知识 - chendh blog

    概述 处理一个给定的查询,尤其是复杂查询,通常会有许多种策略,查询优化就是从这许多策略中找出最有效的查询执行计划的处理过程. 查询执行计划的步骤 产生逻辑上与给定表达式等价的表达式: 估计每个执行计划 ...

  9. WTF is The BlockChain?

    最近区块链大热,走到哪儿都有人在讨论区块链和比特币,甚至于一些对密码学完全没有概念的人都开始大肆吹捧,不免让人嗤之以鼻.相信很多技术和非技术的朋友都希望能够更深层次地去了解它是如何工作的.本文将用不到 ...

  10. 从VR泛滥到倒闭看热门投机的山寨创业心态

    相对国外来说,国人的从众心理非常严重.无数的段子和"名人名言"都在反复向我们传递出一个信息:国人在做事的时候,总是随大流,趋向热点.而从行业角度来看,结果就会造成行业中良莠不齐.鱼 ...