• Stars
    star
    106
  • Rank 325,871 (Top 7 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 4 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

WWTO,小程序跨端迁移解决方案,低成本将微信小程序转为其他平台(百度、支付宝、头条)小程序。

wwto Build Status license javascript style guide version

wwto: wuba wechat mini-program to other mini-program

简介

wwto是一款支持将原生微信小程序转换成其他小程序的工具集合。
使用wwto,几乎不需要对已有的微信小程序做任何改动,可以接近零成本获得百度小程序支付宝小程序头条小程序

前提

  • node >= 8.9.3
  • gulp >= 4.0.0

安装

  npm i wwto -g

  #or
  yarn global add wwto

使用

**注意:**如果包含插件,请将插件的源码拷贝到:src/plugins/xxx目录下,xxx为被调用插件名称。

命令行

  # 查看帮助
  wwto --help
  # 查看转换命令使用说明
  wwto build --help
  # 查看源码兼容性检测使用说明
  wwto lint --help
  # 查看版本号
  wwto -v

  # 转换成百度小程序
  wwto build -p baidu -s src -t dist/baidu
  # 检测源码对百度小程序的兼容性
  wwto lint -p baidu -s src
  
  # 转换成支付宝小程序
  wwto build -p alibaba -s src -t dist/alibaba
  # 检测源码对支付宝小程序的兼容性
  wwto lint -p alibaba -s src
  
  # 转换成头条小程序
  wwto build -p toutiao -s src -t dist/toutiao
  # 检测源码对头条小程序的兼容性
  wwto lint -p toutiao -s src
  
  # 转换成百度&&支付宝&&头条小程序
  wwto build -s src -t dist
  # 检测源码对百度&&支付宝&&头条小程序的兼容性
  wwto lint -s src
  
  # 转换插件调用方式
  wwto plugin -s dist/baidu

启动项目

  npm install
  # 安装依赖

  npm run build
  # 构建项目

  npm run dev
  # 运行项目

  jest --coverage
  # 检测单元测试覆盖率

打包工具

const gulp = require('gulp');
const wwto = require('wwto');

// 转换成百度/支付宝/头条小程序
gulp.task('build', function(cb) {
    wwto.toAll({
      source: './src',
      baiduTarget: './dist/baidu',
      alibabaTarget: './dist/alibaba',
      toutiaoTarget: './dist/toutiao',
    });
});

// 检测源码对各平台的兼容性
gulp.task('lint', function(cb) {
    wwto.lintAll({
      source: './src'
    });
});

注意事项

注意事项是各平台不支持且无法通过本工具转换完成的一些点,如果要开发跨平台的应用需要规避或者降级处理。

百度小程序

  • bind*={{str}} str只能是函数名(字符串),不能包含表达式计算(如:bindtap="flag ? 'fn1' : 'fn2'"
  • wx:for={{arr}} arr只能是变量名(字符串),不能包含表达式计算(如:wx:for="{{flag ? arr1 : arr2}}"
  • 在同一个标签上,wx:forwx:if不能同时使用
  • wxml不支持hidden
  • 通过properties绑定的数据,在子组件更新后不会同步到父组件(重要)
  • 图片的src属性不能用数组赋值(如:<image src="{{arr}}"></image>
  • 不要使用setData保存视图不需要的变量(如原生变量:Animation),继承字段会被丢弃

头条小程序

  • 不支持组件(如:movable-areamovable-viewcover-viewcover-imagemapaudiocanmera等)
  • websocket不能使用全局事件(如:wx.onSocketOpen
  • 录音功能没有全局方法(wx.startRecord, wx.stopRecord
  • 不支持背景音频
  • 不支持实时音视频通话
  • 条件/循环渲染,不能进行函数调用运算(如:wx:if="{{['aa', 'bb'].indexOf('aa')===-1}}"
  • 图片的src属性不能用数组赋值(如:<image src="{{arr}}"></image>
  • wx:for不支持对象,从源码规避(转换一下)
  • 不支持selectComponent,可以通过监听属性的observer来实现外部的调用
  • 自定义组件不能响应事件(如:bindTap),需要添加一层容器来捕获事件

支付宝小程序

  • json文件或模板绝对路径必须以/开头,相对路径必须以./开头
  • 自定义组件命名只能使用短横线(custom-com)
  • fetch是全局只读对象,不能对其赋值
  • require,参数只能是字符串直接量,不能是变量(如:var path = '/a/b/c'; require(path);
  • triggerEvent(name, data)name目前只支持字符串直接量,不支持变量
  • swiper组件手动设置current后,不会自动触发bindChange事件,如果需要主动触发
  • 只能存在一个websocket连接
  • 组件样式不是隔离的,父子组件之间class不要重复
  • 自定义组件不能响应事件(如:bindTap),需要添加一层容器来捕获事件
  • 唤起键盘不会上推position:fixed的元素
  • 文件名不能包含'@'字符

贡献

欢迎参与 wwto 项目的开发建设和讨论。

提交 pull request 之前请先提 [Issue 讨论].

More Repositories

1

Fair

A Flutter package used to update widget tree dynamically. Fair提供一整套Flutter动态化解决方案
Dart
2,598
star
2

WBBlades

Mach-O based ObjC & Swift useless classes, useless protocols, useless resources detection, packet size analysis, point-to-point crash resolution.基于Mach-O的ObjC & Swift无用类、无用协议、无用资源检测,包大小分析,点对点崩溃解析。
Objective-C
1,530
star
3

Picasso

一款UI自动生成代码插件,提供UI自动生成代码全流程解决方案。
TypeScript
1,126
star
4

react-native-echarts

📈 React Native ECharts Library: An awesome charting library for React Native, built upon Apache ECharts and leveraging react-native-svg and react-native-skia. Offers significantly better performance compared to WebView-based solutions.
TypeScript
729
star
5

Antenna

Antenna是58同城安全团队打造的一款辅助安全从业人员验证网络中多种漏洞是否存在以及可利用性的工具。其基于带外应用安全测试(OAST)通过任务的形式,将不同漏洞场景检测能力通过插件的形式进行集合,通过与目标进行out-bind的数据通信方式进行辅助检测。
JavaScript
719
star
6

Oceanus

58同城数据库中间件
Java
550
star
7

dl_inference

通用深度学习推理工具,可在生产环境中快速上线由TensorFlow、PyTorch、Caffe框架训练出的深度学习模型。
Java
405
star
8

Taro-Mortgage-Calculator

首个 Taro 3 多端统一实例 - 支持 React Native,Weapp,H5。
TypeScript
371
star
9

qa_match

A simple effective ToolKit for short text matching
Python
328
star
10

FairPushy

FairPushy 基于Dart三端一体化动态更新平台,为Flutter Fair设计的动态化框架提供动态分发能力
Dart
268
star
11

taro-playground

The Taro Playground App is a cross-platform application developed using Taro, to help developers develop and debug Taro applications.
TypeScript
253
star
12

metro-code-split

Further split the React Native code based on Metro build to improve performance, providing `Dll` and `Dynamic Imports` features
JavaScript
203
star
13

WPaxos

A production-grade java implementation of paxos consensus algorithm
Java
195
star
14

WLock

A high-reliable, high-throughput distributed lock service based on the consensus algorithm component WPaxos.
Java
184
star
15

magpie

Magpie is a visualized platform which designed to create, develop and compile your standalone flutter module.
Dart
123
star
16

Zucker

An easier way to automatically calculate the size of AAR in apk based on APP module
Python
88
star
17

LPA-Detector

Optimize and improve the Label propagation algorithm
Java
88
star
18

mp-monitor

mp-monitor脱胎于58内部前端质量监控系统“北斗”。致力于为小程序异常采集和性能统计分析提供采集方案和统一的数据指标,适配多端小程序(微信,头条,支付宝,百度,QQ,360,JD)。 如果开发者想要在自己的项目中快速搭建小程序的异常采集和性能监控数据分析。mp-monitor将能帮助用户快速采集到相关的数据用于分析和监控。
TypeScript
68
star
19

magpie_sdk

A Native-Futter hybrid development solution. Native developers do not need to install FlutterSDK. This Flutter plugin provides general capabilities such as routing management and dynamic protocol registration.
Objective-C
50
star
20

magpie_log

A visualized dynamic programming for log collection based on flutter.
Dart
48
star
21

magpie_fly

Magpie-fly is a component library produced by 58 Group, which encapsulates a variety of common components to meet the needs of developers
Dart
38
star
22

taro-visualization

TypeScript
33
star
23

json-model-validator

A flexible, lightweight JSON Data validator and formatter
TypeScript
30
star
24

wsilk

wsilk是一个辅助开发人员的代码生成框架(wsilk is a framework that assists developers to generate code)
Java
26
star
25

Taro-Code-In-React-Native

Taro React Native 参考样例。支持在 React Native 初始化的项目中引入 Taro 3 代码。
JavaScript
22
star
26

EasyAOP

EasyAOP是基于ASM实现切面通用能力的工具。EasyAOP提供的通用切面能力,可以使用配置文件方式来配置使用。(EasyAOP is a tool based on ASM to realize the general capability of AOP. General faceting capabilities provided by EasyAOP,You can use the yaml file format to configure the use of EasyAOP.)
Kotlin
22
star
27

first-meaning-paint

首次有效绘制表示当前页面最想展示给用户的元素渲染的时间点,即主元素渲染点。
JavaScript
11
star
28

FairTemplate

FairTemplate 是为Fair 开发者设计的常用基础组件库及代码模板,结合Fair 团队自研的IDE 插件,快速地搭建Fair 动态化页面,提升Fair 的开发效率。
Dart
5
star
29

ideaPlugin-MavenManager

Manage dependencies of maven project to resolve jar conflicts
Java
3
star