docs(sync): next 更新到 3.x

docs/config-detail.md

@@ -35,7 +35,7 @@ title: 编译配置详情
 
 配置方式可参考 [Webpack DefinePlugin](https://webpack.js.org/plugins/define-plugin/)，例如：
 
-```js
+```js title="/config/index.js"
 module.exports = {
   // ...
   defineConstants: {
@@ -110,7 +110,7 @@ import projectConfig from '@/project'
 
 **config/dev.js**：
 
-```jsx
+```jsx title="/config/dev.js"
 module.exports = {
   // ...
   env: {
@@ -121,7 +121,7 @@ module.exports = {
 
 **config/prod.js**：
 
-```jsx
+```jsx title="config/prod.js"
 module.exports = {
   // ...
   env: {

docs/config.md

@@ -10,7 +10,7 @@ title: 编译配置
 
 ## index.js —— 通用配置
 
-```js
+```js title="/config/index.js"
 const config = {
   // 项目名称
   projectName: 'Awesome Next',

docs/convert-to-react.md

@@ -0,0 +1,72 @@
+---
+title: 转换成 React
+---
+
+## 二次开发
+
+原生小程序代码：
+
+```jsx
+Page({
+  data: {
+    text: 'Hello World'
+  }
+})
+
+<view class="container">
+  {{ text }}
+</view>
+```
+
+转换后：
+
+```javascript
+import { Block, View } from '@tarojs/components'
+import React from 'react'
+import Taro from '@tarojs/taro'
+import withWeapp from '@tarojs/with-weapp'
+import Title from '../../components/title/index'
+import './index.scss'
+
+@withWeapp({
+  data: {
+    text: 'Hello World'
+  }
+})
+class _C extends React.Component {
+  render() {
+    const { text } = this.data
+    return <View className="container">{text}</View>
+  }
+}
+
+export default _C
+```
+
+它看起来就像普通的 Taro 组件，最重要的区别就在于 `@withWeapp()` 这个装饰器，你可以将它理解为转换代码的运行时，`@withWeapp()` 会增加一些原来 Taro 没有方法和属性，例如：
+
+### `this.setData`
+
+转换后的 `this.setData` 的 API 相当于小程序的 `this.setData` 的 polyfill，他和 `this.setState` 最大的区别就在于，`this.setData` 之后 `data` 的数据是同步更新，而渲染是异步更新，而 `setState` 两者都是异步的。
+
+### `this.data` 和 `this.properties`
+
+`this.data` 和 `this.properties` 相当于 Taro 的 `this.state` 和 `this.props` 的 alias，当它们的数据更新时，对应的 `state` 和 `props` 也会同步更新。
+
+### 生命周期
+
+Taro 会将原生小程序的生命周期转换为 Taro 的生命周期，完整对应关系如下：
+
+|小程序生命周期|Taro 生命周期|
+| :-- | :-- |
+| onShow | componentDidShow |
+| onHide | componentDidHide |
+| App.onLaunch | onLaunch |
+| Page.onLoad | onLoad |
+| Page.onReady | onReady |
+| Page.onUnload | componentWillUnmount |
+| Component.created | componentWillMount |
+| Component.attached | componentDidMount |
+| Component.ready | Page.onReady  |
+| Component.detached | componentWillUnmount |
+

docs/css-in-js.md

@@ -16,7 +16,7 @@ $ npm i linaria
 
 其次配置项目根目录的 `babel.config.js`:
 
-```js
+```js title="babel.config.js"
 module.exports = {
   presets: [
     ['taro', {
@@ -30,7 +30,7 @@ module.exports = {
 
 之后配置 `config/index.js`
 
-```js
+```js title="config/index.js"
 const config = {
   mini: {
     webpackChain(chain, webpack) {
@@ -49,7 +49,7 @@ const config = {
 
 最后在项目根目录新建 `linaria.config.js`
 
-```js
+```js title="linaria.config.js"
 // linaria 配置详见 https://github.com/callstack/linaria/blob/master/docs/CONFIGURATION.md#options
 module.exports = {
   rules: [

docs/css-modules.md

@@ -8,7 +8,7 @@ Taro 中内置了 [CSS Modules](https://github.com/css-modules/css-modules) 的
 
 小程序端开启
 
-```js
+```js title="config/index.js"
 weapp: {
   module: {
     postcss: {
@@ -27,7 +27,7 @@ weapp: {
 
 H5 端开启
 
-```js
+```js title="config/index.js"
 h5: {
   module: {
     postcss: {

docs/debug-config.md

@@ -43,7 +43,7 @@ yarn global add rollup
 
 launch.json 有以下预设配置：
 
-```json
+```json title="launch.json"
 {
   // ...
   "configurations": [
@@ -83,7 +83,7 @@ launch.json 有以下预设配置：
 
 可以这样配置 launch.json：
 
-```json
+```json title="launch.json"
 {
   // ...
   "configurations": [
@@ -108,7 +108,7 @@ launch.json 有以下预设配置：
 
 可以这样配置 launch.json：
 
-```json
+```json title="launch.json"
 {
   // ...
   "configurations": [

docs/envs-debug.md

@@ -3,7 +3,8 @@ title: 多端同步调试
 ---
 
 从 1.3.5 版本开始，可以在 dist 目录下创建一个与编译的目标平台名同名的目录，并将结果放在这个目录下，例如编译到微信小程序，最终结果是在 dist/weapp 目录下，这样做的好处是，各个平台使用独立的目录互不影响，从而达到多端同步调试的目的，在 `config/index.js` 配置如下：
-```
+
+```js title="/config/index.js"
 outputRoot: `dist/${process.env.TARO_ENV}`
 ```
 

docs/envs.md

@@ -81,15 +81,15 @@ import Test from '../../components/test'
 
 增加 `set_title.h5.js`，代码如下
 
-```js
+```js title="set_title.h5.js"
 export default function setTitle (title) {
   document.title = title
 }
 ```
 
 增加 `set_title.weapp.js`，代码如下
 
-```js
+```js title="set_title.weapp.js"
 import Taro from '@tarojs/taro'
 export default function setTitle (title) {
   Taro.setNavigationBarTitle({
@@ -145,7 +145,7 @@ Taro 3 里的多端文件由 [MultiPlatformPlugin](https://github.com/NervJS/tar
 
 假如我们有一个 npm 包名叫 @taro-mobile，需要解析里面的多端文件，可以在 taro 的配置文件中这样修改 MultiPlatformPlugin 的配置：
 
-```js
+```js title="/config/index.js"
 // mini 也可改为 h5，分别对应小程序与 h5 端配置
 mini: {
   webpackChain (chain) {

docs/mini-third-party.md

@@ -18,8 +18,7 @@ Taro 支持使用小程序的第三方组件和插件，使用方式也异常的
 
 > 注意：Taro3 中没有自定义组件，组件是没有配置文件的。usingComponents 必须配置在“页面”的配置文件中。
 
-```js
-// page.config.js
+```js {2} title="page.config.js"
 export default {
   usingComponents: {
     // 定义需要引入的第三方组件
@@ -32,8 +31,7 @@ export default {
 
 2. JSX 中引用
 
-```jsx
-// page.js
+```jsx {14} title="page.js"
 import React, { Component } from 'react'
 import { View } from '@tarojs/components'
 
@@ -83,8 +81,7 @@ page.selectComponent('#mychart-dom-area')
 
 使用插件前，使用者要在 `app.confg.js` 的配置中声明需要使用的插件，例如
 
-```jsx
-// app.config.js
+```jsx title="app.config.js"
 export default {
   plugins: {
     myPlugin: {

docs/miniprogram-plugin.md

@@ -50,7 +50,7 @@ taro build --plugin weapp --watch
 
 plugin.json 的 **pages** 字段加入页面插件路径：
 
-```json
+```json title="plugin.json"
 {
   "pages": {
     "list": "pages/list/list"
@@ -60,7 +60,7 @@ plugin.json 的 **pages** 字段加入页面插件路径：
 
 页面使用路径： **plugin://[app.js 中注册的插件名]/[plugin.json 中注册的页面名]** 进行跳转。
 
-```jsx
+```jsx {1}
 <Navigator url='plugin://myPlugin/list'>
   Go to pages/list!
 </Navigator>
@@ -70,7 +70,7 @@ plugin.json 的 **pages** 字段加入页面插件路径：
 
 plugin.json 的 **publicComponents** 字段加入组件插件路径：
 
-```json
+```json title="plugin.json"
 {
   "publicComponents": {
     "avatar": "components/avatar/avatar"
@@ -80,7 +80,7 @@ plugin.json 的 **publicComponents** 字段加入组件插件路径：
 
 在页面配置 config.usingComponents 中配置好插件名和插件路径（**plugin://[app.js 中注册的插件名]/[plugin.json 中注册的组件名]**）：
 
-```jsx
+```jsx {4}
 export default class Index extends Component {
   config = {
     usingComponents: {
@@ -114,7 +114,7 @@ const extraProps = {
 
 plugin.json 的 **main** 字段加入接口插件路径：
 
-```json
+```json title="plugin.json"
 {
   "main": "index.js"
 }

docs/nerv.md

@@ -8,7 +8,7 @@ title: Nerv
 
 在使用第三方 React 库时，需要在[配置文件](config-detail.md#miniwebpackchain) `webpack.resolve.alias`，把 `react` 和 `react-dom` 映射到 `nervjs`:
 
-```js
+```js title="/config/index.js"
 {
   webpackChain (chain, webpack) {
     chain.merge({

docs/platform-plugin-base.md

@@ -6,8 +6,7 @@ title: TaroPlatformBase
 
 例如我们创建一个微信小程序平台：
 
-```js
-// program.ts
+```js title="program.ts"
 import { TaroPlatformBase } from '@tarojs/service'
 export default class Weapp extends TaroPlatformBase {
   // ...
@@ -184,8 +183,7 @@ runner(options)
 
 ### 1. 继承基类
 
-```js
-// program.ts
+```js title="program.ts"
 import { TaroPlatformBase } from '@tarojs/service'
 
 class Weapp extends TaroPlatformBase {
@@ -234,8 +232,7 @@ class Weapp extends TaroPlatformBase {
 
 规范：
 
-```js
-//components.ts
+```js title="components.ts"
 import { singleQuote } from '@tarojs/shared'
 
 export const components = {
@@ -319,8 +316,7 @@ internalComponent = {
 
 除了借助 `template.mergeComponents` 进行合并，我们也可以直接修改 `template.internalComponents`。
 
-```js
-// program.ts
+```js title="program.ts"
 class Weapp extends TaroPlatformBase {
   modifyComponents () {
     // 删除 Slider 组件里的一些属性
@@ -376,8 +372,7 @@ class Weapp extends TaroPlatformBase {
 
 我们创建的平台类需要编写一个对外的接口，在其中对编译流程进行设计，最终目标是调用 `@tarojs/mini-runner` 驱动 **Webpack** 开启编译。
 
-```js
-// program.ts
+```js title="program.ts"
 class Weapp extends TaroPlatformBase {
   // ...
   async start () {