Code Monkey home page Code Monkey logo

miniprogram-to-uniapp's Introduction

微信小程序转换为uni-app项目

输入小程序项目路径,输出uni-app项目。

实现项目下面的js+wxml+wxss转换为vue文件,模板语法、生命周期函数等进行相应转换,其他文件原样复制,生成uni-app所需要的配置文件。

安装

$ npm install miniprogram-to-uniapp -g

使用方法

Usage: wtu [options]

Options:

  -V, --version     output the version number
  -i, --input       the input path for weixin miniprogram project
  -o, --output      the output path for uni-app project, which default value is process.cwd()
  -h, --help        output usage information

Examples:

$ wtu -i miniprogramProject

处理规则

基本参照大佬的文章:微信小程序转换uni-app详细指南

因为小程序与uni/vue的语法以及文件结构都有很大的差别,所以做了很多的优化工作,后面再补。

ps: 值得注意的是app.js里根级属性也会被转换进data里,如:

const baidu = require('./utils/baidu.js');
App({baidu:baidu})

转换为:

const baidu = require('./utils/baidu.js');
App({
    data() { 
        return {
            baidu: baidu
        }      
    }   
})

已完成

  • 支持含云开发的小程序项目(有云开发与无云开发的项目的目录结构有差别)
  • 支持['btn/btn.js', 'btn/btn.wxml', 'btn/btn.wxss']或['btn/btn.js', 'btn/btn.wxml' || 'btn/btn.wxss']转换为'btn/btn.vue' ,模板语法、生命周期函数等进行相应转换
  • 支持['util/util.js']复制为['util/util.js'],原样复制,仅对import的模块进行后缀名修改
  • 支持['wxss/1.wxss']复制为['wxss/1.css'],原样复制,仅对import的模块进行后缀名修改
  • 支持生命周期函数的转换
  • 支持同一目录下有不同名js/wxml/wxss文件转换
  • 区分app.js/component,两者解析规则略有不同
  • 替换rpx为upx
  • this.SetData({aa:"123", bb:"456"}); 转换为this.aa="123"; this.bb="456";

存在问题 & todolist

  • [todo] js里含有ES6的解构语法(...)时,会解析报错
  • [todo] wxml含有import语法时(),此行未转换,仅原样复制
  • [todo] 配置参数,支持指定目录、指定文件方式进行转换
  • [todo] 文件操作的同步方法添加try catch
  • [todo] 未去掉转换产生的空生命周期
  • [todo] bind:click未简写的情况
  • [todo] getApp()的支持

感谢

感谢转转大佬的文章:[AST实战]从零开始写一个wepy转VUE的工具,本项目基于此文章里面的代码开发,在此表示感谢~
感谢网友[没有好名字了]给予帮助。
感谢官方大佬DCloud_heavensoft的文章:微信小程序转换uni-app详细指南,补充了我一些未考虑到的规则。

参考资料

0.[AST实战]从零开始写一个wepy转VUE的工具 此文获益良多
1.https://astexplorer.net/ AST可视化工具
2.Babylon-AST初探-代码生成(Create) 系列文章(作者是个程序媛噢~)
3.Babel 插件手册 中文版Babel插件手册
5.Babel官网 有问题直接阅读官方文档哈
6.微信小程序转换uni-app详细指南 补充了我一些未考虑到的规则。

LICENSE

This repo is released under the MIT.

miniprogram-to-uniapp's People

Contributors

zhangdaren avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.