Skip to content

Commit

Permalink
docs: update README
Browse files Browse the repository at this point in the history
  • Loading branch information
luckyadam committed Nov 6, 2018
1 parent 842f870 commit 7cb32cd
Show file tree
Hide file tree
Showing 2 changed files with 77 additions and 18 deletions.
76 changes: 62 additions & 14 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

**Taro** 是一套遵循 [React](https://reactjs.org/) 语法规范的 **多端开发** 解决方案。现如今市面上端的形态多种多样,Web、React-Native、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。

使用 **Taro**,我们可以只书写一套代码,再通过 **Taro** 的编译工具,将源代码分别编译出可以在不同端(微信小程序、H5、React-Native 等)运行的代码。
使用 **Taro**,我们可以只书写一套代码,再通过 **Taro** 的编译工具,将源代码分别编译出可以在不同端(微信/百度/支付宝小程序、H5、React-Native 等)运行的代码。

## 使用案例

Expand Down Expand Up @@ -120,7 +120,7 @@ Taro 立足于微信小程序开发,众所周知小程序的开发体验并不

#### 支持多端开发转化

Taro 方案的初心就是为了打造一个多端开发的解决方案。目前 Taro 代码可以支持转换到 **微信小程序**/**H5 端**以及**移动端(React-Native)**
Taro 方案的初心就是为了打造一个多端开发的解决方案。目前 Taro 代码可以支持转换到 **微信/百度/支付宝小程序****H5 端** 以及 **移动端(React-Native)**

<div align="center"><img src="http://ww1.sinaimg.cn/large/49320207gy1fr21yeoexvj20hw0tu0vg.jpg" width="320"/><br><span style="font-size: 12px; color: #999;">微信小程序</span></div>

Expand Down Expand Up @@ -150,43 +150,78 @@ npm5.2+ 也可在不全局安装的情况下使用 npx 创建模板项目
$ npx @tarojs/cli init myApp
```

进入项目目录开始开发,可以选择小程序预览模式,或者 H5 预览模式。若使用微信小程序预览模式,则需要自行下载并打开[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html),选择预览项目根目录。
进入项目目录开始开发,目前已经支持 微信/百度/支付宝小程序、H5 以及 ReactNative 等端的代码转换,针对不同端的启动以及预览、打包方式并不一致

微信小程序编译预览模式
### 微信小程序

选择微信小程序模式,需要自行下载并打开[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html),然后选择项目根目录进行预览。

微信小程序编译预览及打包(去掉 --watch 经不会监听文件修改,并会对代码进行压缩打包)

```bash
# npm script
$ npm run dev:weapp
$ npm run build:weapp
# 仅限全局安装
$ taro build --type weapp --watch
$ taro build --type weapp
# npx 用户也可以使用
$ npx taro build --type weapp --watch
$ npx taro build --type weapp
```

H5 编译预览模式
### 百度小程序

选择百度小程序模式,需要自行下载并打开[百度开发者工具](https://smartprogram.baidu.com/docs/develop/devtools/show_sur/),然后在项目编译完后选择项目根目录下 `dist` 目录进行预览。

百度小程序编译预览及打包(去掉 --watch 经不会监听文件修改,并会对代码进行压缩打包)

```bash
# npm script
$ npm run dev:h5
$ npm run dev:swan
$ npm run build:swan
# 仅限全局安装
$ taro build --type h5 --watch
$ taro build --type swan --watch
$ taro build --type swan
# npx 用户也可以使用
$ npx taro build --type h5 --watch
$ npx taro build --type swan --watch
$ npx taro build --type swan
```

## 项目打包
打包小程序代码
### 支付宝小程序

选择支付宝小程序模式,需要自行下载并打开[支付宝小程序开发者工具](https://docs.alipay.com/mini/developer/getting-started/),然后在项目编译完后选择项目根目录下 `dist` 目录进行预览。

支付宝小程序编译预览及打包(去掉 --watch 经不会监听文件修改,并会对代码进行压缩打包)

```bash
# npm script
$ npm run build:weapp
$ npm run dev:alipay
$ npm run build:alipay
# 仅限全局安装
$ taro build --type weapp
$ taro build --type alipay --watch
$ taro build --type alipay
# npx 用户也可以使用
$ npx taro build --type weapp
$ npx taro build --type alipay --watch
$ npx taro build --type alipay
```

打包 H5 代码
### H5

H5 模式,无需特定的开发者工具,在执行完下述命令之后即可通过浏览器进行预览

H5 预览项目

```bash
# npm script
$ npm run dev:h5
# 仅限全局安装
$ taro build --type h5 --watch
# npx 用户也可以使用
$ npx taro build --type h5 --watch
```

H5 打包项目

```bash
# npm script
Expand All @@ -197,6 +232,19 @@ $ taro build --type h5
$ npx taro build --type h5
```

### React Native

React Native 端运行需执行如下命令,React Native 端相关的运行说明请参见 [React Native 教程](https://nervjs.github.io/taro/docs/react-native.html)

```bash
# npm script
$ npm run dev:rn
# 仅限全局安装
$ taro build --type rn --watch
# npx 用户也可以使用
$ npx taro build --type rn --watch
```

## 开发计划

[开发计划](./PLANS.md)
Expand Down
19 changes: 15 additions & 4 deletions docs/GETTING-STARTED.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ $ npx @tarojs/cli init myApp

选择微信小程序模式,需要自行下载并打开[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html),然后选择项目根目录进行预览。

微信小程序编译预览及打包
微信小程序编译预览及打包(去掉 --watch 经不会监听文件修改,并会对代码进行压缩打包)

```bash
# npm script
Expand All @@ -51,7 +51,7 @@ $ npx taro build --type weapp

选择百度小程序模式,需要自行下载并打开[百度开发者工具](https://smartprogram.baidu.com/docs/develop/devtools/show_sur/),然后在项目编译完后选择项目根目录下 `dist` 目录进行预览。

百度小程序编译预览及打包
百度小程序编译预览及打包(去掉 --watch 经不会监听文件修改,并会对代码进行压缩打包)

```bash
# npm script
Expand All @@ -69,7 +69,7 @@ $ npx taro build --type swan

选择支付宝小程序模式,需要自行下载并打开[支付宝小程序开发者工具](https://docs.alipay.com/mini/developer/getting-started/),然后在项目编译完后选择项目根目录下 `dist` 目录进行预览。

支付宝小程序编译预览及打包
支付宝小程序编译预览及打包(去掉 --watch 经不会监听文件修改,并会对代码进行压缩打包)

```bash
# npm script
Expand All @@ -87,7 +87,7 @@ $ npx taro build --type alipay

H5 模式,无需特定的开发者工具,在执行完下述命令之后即可通过浏览器进行预览

H5 编译预览及打包
H5 预览项目

```bash
# npm script
Expand All @@ -98,6 +98,17 @@ $ taro build --type h5 --watch
$ npx taro build --type h5 --watch
```

H5 打包项目

```bash
# npm script
$ npm run build:h5
# 仅限全局安装
$ taro build --type h5
# npx 用户也可以使用
$ npx taro build --type h5
```

### React Native

React Native 端运行需执行如下命令,React Native 端相关的运行说明请参见 [React Native 教程](https://nervjs.github.io/taro/docs/react-native.html)
Expand Down

0 comments on commit 7cb32cd

Please sign in to comment.