Giter Site home page Giter Site logo

nervjs / taro Goto Github PK

View Code? Open in Web Editor NEW
34.6K 34.6K 4.7K 1.43 GB

开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/

Home Page: https://docs.taro.zone/

License: Other

JavaScript 46.16% HTML 0.59% CSS 0.18% TypeScript 48.61% Vue 0.02% SCSS 2.74% Less 0.01% Sass 0.01% Stylus 0.01% Shell 0.01% Rust 1.69%
javascript jquery nerv nervjs react react-native reactjs taro typescript vue vue3 wechat wechat-mini-program weixin wxapp

taro's Introduction

Taro

开放式跨端跨框架解决方案,轻松构建可以运行在 小程序/Web/APP 上的应用

PRs Welcome GitHub contributors GitHub commit activity GitHub closed issues GitHub commits since latest release (by date) GitHub Release Date

简体中文 | English

👽 Taro['tɑ:roʊ],泰罗·奥特曼,宇宙警备队总教官,实力最强的奥特曼。

目录

  1. 简介
  2. 学习资源
  3. 社区共享
  4. 项目状态
  5. 使用案例
  6. 加入共建
  7. 问题反馈与建议
  8. 特别鸣谢
  9. 贡献者们
  10. 开发计划
  11. 更新日志
  12. 开发交流

简介

开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。现如今市面上端的形态多种多样,Web、React Native、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要

版本迁移

Taro 1/2 迁移至 Taro 3,请阅读《Taro 版本升级权威指南》

学习资源

5 分钟上手 Taro 开发

awesome-taro

社区共享

Taro 物料市场——让每一个轮子产生价值

UI 库

名称 地址 介绍 支持的框架 支持的 Taro 版本
taro-ui https://taro-ui.jd.com/#/ 一套基于 Taro 框架开发的多端 UI 组件库 React Taro 1/2/3
NutUI https://nutui.jd.com/#/ 京东风格的轻量级移动端 Vue 组件库 Vue3 Taro 3
taroify https://taroify.gitee.io/taroify.com/introduce/ 轻量、可靠的小程序端 Taro 组件库(Vant 的 Taro 版本) React Taro 3
@antmjs/vantui https://antmjs.github.io/vantui/#/home 基于有赞 VantWeapp 开发的同时支持 Taro 和 React 的 UI 库 React Taro 3
Tard https://tard-ui.selling.cn/ 一套基于 Taro 框架开发的多端 React UI 组件库 React Taro 3

项目状态

Alt

使用案例

Taro 已经投入了我们的生产环境中使用,业界也在广泛地使用 Taro 开发多端应用。

征集更多优秀案例

加入共建

加入 Taro 社区共建倡议

Taro 邀你加入社区共建

为 Taro 贡献代码

Taro 非常欢迎社区开发者为 Taro 贡献代码,在贡献之前请先阅读贡献指南

如果你想为 Taro 实现一个重要功能,需要先撰写 RFC 文档,按照 Taro 的RFC 机制进行操作,在经过社区讨论完善后才可以进行代码的提交。

问题反馈与建议

给 Taro 提 ISSUE

强烈推荐阅读 《提问的智慧》《如何向开源社区提问题》《如何有效地报告 Bug》《如何向开源项目提交无法解答的问题》,更好的问题更容易获得帮助。

Let's fund issues in this repository

特别鸣谢

nanjingboy jsNewbee Qiyu8 Garfield550
nanjingboy jsNewbee Qiyu8 Garfield Lee

贡献者们

开发计划

Milestones

更新日志

本项目遵从 Angular Style Commit Message Conventions,更新日志请查阅 Release

开发交流

官方交流微信群

License

MIT License

Copyright (c) O2Team

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

taro's People

Contributors

advancedcat avatar bigmeow avatar bless-l avatar chen-jj avatar garfield550 avatar guoenxuan avatar ichengbo avatar jinjinjin0731 avatar likailong180 avatar littly avatar luckyadam avatar manjiz avatar nanjingboy avatar pines-cheng avatar qican77 avatar qican777 avatar qlxws avatar robinv8 avatar shinken008 avatar simbachen avatar szzwk avatar tangcq-code avatar thekonka avatar vector-hope avatar xiaoyan428820 avatar xuanzebin avatar yechunxi avatar yuche avatar zakarycode avatar zhiqingchen avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

taro's Issues

jsx语法支持问题

刚刚尝试了下demo
下面这种写法会编译错误。

 <View className='index'>
   { [0, 1, 2, 3].map(i => <Text key={i}>{ i }</Text>) }
 </View>

编辑结果:

<block>
    <view class="index">{{[0, 1, 2, 3].map(i =>
        <Text wx:key={i}>{i}</Text>)}}</view>
</block>

写明return的写法可以

<View className='index'>
  {
    [0, 1, 2, 3].map(i => {
      return <Text key={i}>{ i }</Text>
    })
  }
</View>

因为eslint没有报错,所以怀疑是BUG。

对小程序的支持程度

不知道Taro 对小程序支持到哪种程度,所有小程序组件和api都支持么?还是只支持部分组件和api

支持SSR吗

我记得看文档Nerv 是支持SSR的,请问Taro支持SSR吗?
后期是否有下拉刷新和自动加载组件?

编译为小程序时,自定义组件不支持使用children

请问为什么自定义组件不能使用children呢?
这应该是比较常用的需求了,定义一个或多个布局组件,�然后页面上只需要引入所需的布局组件就好了。

在H5模式下貌似没发现总是,但是打包成小程序后无法使用。

import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import AppHeader from '../common/AppHeader.js'

export default class MainLayout extends Component {
  render () {
    return (
      <View className='MainLayout'>
      	<AppHeader backicon={this.props.backicon} title={this.props.title}></AppHeader>
        <View className='Main'>
        	{this.props.children}
        </View>
      </View>
    )
  }
}

any tests ?

we need some tests and continuous integrations to make it stronger

`taro build --type h5 --watch`报错

(node:660) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Cannot find module 'postcss-plugin-constparse'
(node:660) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

yarn add postcss-plugin-constparse --save-devNot Found

还有个建议:
建议在cli的选项中增加对less的支持

谢谢

列表循环报错

代码如下:

constructor(props){
    super(props);
    this.state={
      activeItem: 0,
    }
  }
  render(){
    const { state } = this;
    return(
      <View>
        <ScrollView
          scrollX
          scrollWithAnimation
          scrollLeft='0'
          style='width: 100%;white-space: nowrap;'
          lowerThreshold='20'
          upperThreshold='20'
        >
          {defaultFollowTags['post'].map((val,i)=>{
            return(
              <View key={i} className={state.activeItem===i?`${prefixcls}-scrollViewItem ${prefixcls}-itemActive`:`${prefixcls}-scrollViewItem`}>{val.title}</View>
            )
          })}
        </ScrollView>
      </View>
    )
  }

报错截图:

1

为什么会报i undefined

English info?

This repo is in trending now. I liked NervJS, which is partially translated to English.

What this project is? How this differs from NervJS? Can we expect more English info in the future?

中文 placeholder 显示异常

macos 10.13.4 (17E199)
image

<View className="weui-cell">
  <View className="weui-cell__hd"><Label className="weui-label">qq</Label></View>
  <View className="weui-cell__bd">
    <Input className="weui-input"  type='text' placeholder='将会获取焦点' focus/>
  </View>
</View>

npmrc还是让用户自己配置比较好吧

关于 #17
我yarn使用淘宝源会导致安装失败,只能先在本地去掉tempalte的npmrc。

以下为测试结果

  • npm + 淘宝源 = 成功
  • npm + npmjs源 = 成功
  • yarn + yarnpkg = 成功
  • yarn + 淘宝源 = 失败

结论: npmrc 这种东西还是让用户自己设置比较好吧?毕竟每个人的网络环境和使用习惯都不同。

非全局安装下使用npx创建项目的问题

因为不想全局安装,所以使用 npx @tarojs/cli init myApp 创建项目。
当 build 的时候就需要 npx @tarojs/cli build, build作为一个相对比较频繁使用的命令,每次这么操作比较麻烦(如网络原因)
是否也可以将 @tarojs/cli 作为 template 的依赖?这样在项目内就可以 npx taro build 或使用 npm script

不能install,安装依赖报错

/Users/suwu150/.nvm/versions/node/v8.0.0/bin/node /Users/suwu150/.nvm/versions/node/v8.0.0/lib/node_modules/npm/bin/npm-cli.js install --scripts-prepend-node-path=auto
npm ERR! Unexpected end of input at 1:7572
npm ERR! port","version":"0.4.1","dependencies":{"array.prototype.find":"^1.0.
npm ERR!                                                                      ^

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/suwu150/.npm/_logs/2018-06-08T10_20_57_884Z-debug.log

利用taro build --type weapp --watch 后更改项目代码编译失败

症状是:我仅仅改了将示例代码由 1 变成 2。然后就报错了。
具体报错信息是:
`$ taro build --type weapp --watch
Taro v0.0.40

开始编译项目 myApp
编译 入口文件 src/app.js
拷贝 NPM文件 dist/npm/@tarojs/taro-weapp/dist/index.js
拷贝 NPM文件 dist/npm/@tarojs/taro-weapp/index.js
生成 入口配置 dist/app.json
生成 入口文件 dist/app.js
生成 入口样式 dist/app.wxss
编译 所有页面
编译 页面文件 src/pages/index/index
生成 页面JSON dist/pages/index/index.json
生成 页面JS dist/pages/index/index.js
生成 页面WXML dist/pages/index/index.wxml
生成 页面WXSS dist/pages/index/index.wxss

监听文件修改中...

修改 组件文件 src/pages/index/index.js
错误 编译失败 src\pages\index\index.js
{ SyntaxError: unknown: Unexpected token (18:11)
16 |
17 | render() {

18 | return
| ^
19 | 2
20 | ;
21 | }
at Parser.pp$5.raise (C:\Users\Administrator\Desktop\Taro\myApp\node_modules_babylon@6.18.0@babylon\lib\index.js:4454:13)
at Parser.pp.unexpected (C:\Users\Administrator\Desktop\Taro\myApp\node_modules_babylon@6.18.0@babylon\lib\index.js:1761:8)
at Parser.pp$3.parseExprAtom (C:\Users\Administrator\Desktop\Taro\myApp\node_modules_babylon@6.18.0@babylon\lib\index.js:3750:12)
at Parser.pp$3.parseExprSubscripts (C:\Users\Administrator\Desktop\Taro\myApp\node_modules_babylon@6.18.0@babylon\lib\index.js:3494:19)
at Parser.pp$3.parseMaybeUnary (C:\Users\Administrator\Desktop\Taro\myApp\node_modules_babylon@6.18.0@babylon\lib\index.js:3474:19)
at Parser.pp$3.parseExprOps (C:\Users\Administrator\Desktop\Taro\myApp\node_modules_babylon@6.18.0@babylon\lib\index.js:3404:19)
at Parser.pp$3.parseMaybeConditional (C:\Users\Administrator\Desktop\Taro\myApp\node_modules_babylon@6.18.0@babylon\lib\index.js:3381:19)
at Parser.pp$3.parseMaybeAssign (C:\Users\Administrator\Desktop\Taro\myApp\node_modules_babylon@6.18.0@babylon\lib\index.js:3344:19)
at Parser.pp$3.parseExpression (C:\Users\Administrator\Desktop\Taro\myApp\node_modules_babylon@6.18.0@babylon\lib\index.js:3306:19)
at Parser.pp$1.parseReturnStatement (C:\Users\Administrator\Desktop\Taro\myApp\node_modules_babylon@6.18.0@babylon\lib\index.js:2078:26)
pos: 295,
loc: Position { line: 18, column: 11 },
_babel: true,
codeFrame: ' 16 | \n 17 | render() {\n> 18 | return \n | ^\n 19 | 2\n 20 | ;\n 21 | }' }`

另一个问题是,内联 css 样式会直接覆盖css选择器。如
组件内容
render () { return ( <View className='index'> <Text className='test' style='font-size: 24px;'>2</Text> </View> ) }
index,scss
.test { color: red; font-size: 60px; }
这样子color样式不生效

css不支持rpx?

体验了一下,很赞,有个问题想问下,rpx在H5中好像不支持?

代码中多处 callback/Promise 的疑问

代码中多处API都存在如下这样的样板式的代码.

    success && success(res)
    complete && complete(res)

    return Promise.resolve(res)
      fail && fail(res)
      complete && complete(res)

      return Promise.reject(err)

https://github.com/NervJS/taro/search?utf8=%E2%9C%93&q=Promise.resolve%28res%29&type=

即提供 callback 形式的回调逻辑,也有返回 Promise.

是整个框架就是这么设计的? 还是没考虑好?

现在还在判断有没有 success/fail/complete 然后分别执行不同的函数. 而且各个地方, 对 它们的判断也不一样, 有的地方有判断是不是function, 有的地方, 则只判断是不是真值, 而没有明确必须要是一个函数..

改成统一约定成返回 Promise, 后续调用方是想用 success 或者 fail 或者 complete, 由调用方 自己掌握 不更好吗?

taro代码报错

用npm install -g @tarojs/cli安装,然后安装成功之后运行任何命令都报错
exports.replaceAsync = async function (str, regex, asyncFn) {
^^^^^^^^
SyntaxError: Unexpected token function
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object. (E:\nodejs\node\node_modules\npm\node_modules@tarojs
cli\bin\taro:7:5)

taro build --type h5命令打包出错,不能正常显示界面

打包之后index.html里边代码如下所示

...
<link href="/css/app.css" rel="stylesheet"></head>
<body>
  <div id="app"></div>
<script type="text/javascript" src="/js/app.js"></script></body>
</html>

错误信息如下
404

我的版本信息:

  "dependencies": {
    "@tarojs/components": "^0.0.40",
    "@tarojs/router": "^0.0.40",
    "@tarojs/taro": "^0.0.40",
    "@tarojs/taro-h5": "^0.0.40",
    "@tarojs/taro-weapp": "^0.0.40",
    "nervjs": "^1.2.18"
  },
  "devDependencies": {
    "@tarojs/plugin-babel": "^0.0.40",
    "@tarojs/plugin-csso": "^0.0.40",
    "@tarojs/plugin-sass": "^0.0.40",
    "@tarojs/plugin-uglifyjs": "^0.0.40",
    "@tarojs/webpack-runner": "^0.0.40",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-eslint": "^8.2.3",
    "eslint": "^4.19.1",
    "eslint-config-taro": "^0.1.3",
    "eslint-plugin-react": "^7.8.2",
    "eslint-plugin-import": "^2.12.0",
    "eslint-plugin-taro": "^0.1.3"
  }

上面这段代码是因为导入出问题了,但是当我修改了mime之后,界面却显示空白,没有任何组件显示,
下面是我修改之后的代码,修改了文件导入时的mime

  <link href="./css/app.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="app"></div>
<script type="application/javascript" src="./js/app.js" /></body>
</html>

在预览模式中使用命令taro build --type h5 --watch也是正常显示的

无法使用redux-saga

taro-cli:v0.0.41

redux配置:
`
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk'
import createSagaMiddleware from 'redux-saga'
import rootReducer from '../reducers'
import rootSaga from '../sagas';

const sagaMiddleware = createSagaMiddleware()
let middlewares = [thunk,sagaMiddleware]

export default function configStore () {
const store = createStore(rootReducer, applyMiddleware(...middlewares));
// then run the saga
sagaMiddleware.run(rootSaga);
return store
}
`

运行报错:
image

在对应的dist/npm/redux-saga目录下,发现并没有相关的文件
image

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.