taro开发小程序新增页面

Taro 是一个基于 React 的开发框架，它可以同时开发多端应用程序，包括小程序、H5、RN 等等。Taro 的官方文档中提供了如何使用 Taro 开发小程序的详细指南，本文将针对 Taro 如何新增页面进行介绍。

在 Taro 中新增页面非常简单，只需要按照以下步骤操作：

1. 首先，在`src/pages`目录下新建一个文件夹，命名为新页面的名称，例如`MyNewPage`。

2. 接着，在`MyNewPage`目录下新建两个文件：`index.jsx`和`index.scss`。其中`index.jsx`是视图逻辑代码文件，`index.scss`是样式文件。

3. 在`index.jsx`文件中编写视图逻辑代码，例如：

```jsx

import Taro, { Component } from '@tarojs/taro'

import { View, Text } from '@tarojs/components'

import './index.scss'

export default class MyNewPage extends Component {

config = {

navigationBarTitleText: '我的新页面'

}

render () {

return (

Hello, World!

)

}

}

```

在上面的代码中，我们引入了 Taro 和相关组件，定义了我们新页面的配置信息和页面渲染方法，并在页面中渲染了一个简单的文本。上面的代码可以理解为是一个简单的 React 组件。

4. 在`index.scss`文件中编写样式代码，例如：

```scss

.my-new-page {

background-color: #f5f5f5;

padding: 20px;

text {

color: #333;

font-size: 16px;

}

}

```

在上面的代码中，我们为新页面定义了一个简单的样式，包括页面的背景色和一些文本样式。

5. 最后，在路由文件`src/app.jsx`中添加路由配置，将新页面加入到应用程序的路由表中。例如：

```jsx

import Taro, { Component } from '@tarojs/taro'

import { Provider } from '@tarojs/redux'

import Index from './pages/index'

import './app.scss'

import './custom-theme.scss'

class App extends Component {

config = {

pages: [

'pages/index/index',

'pages/myNewPage/index' // 新页面的路由路径

],

window: {

backgroundTextStyle: 'light',

navigationBarBackgroundColor: '#fff',

navigationBarTitleText: 'Taro Demo',

navigationBarTextStyle: 'black'

},

tabBar: {

list: [

{

pagePath: 'pages/index/index',

text: '首页'

},

{

pagePath: 'pages/myNewPage/index',

text: '我的新页面',

}

],

color: '#666',

selectedColor: '#333',

backgroundColor: '#fff',

borderStyle: 'black'

},

}

render () {

return (

)

}

}

Taro.render(, document.getElementById('app'))

```

在上面的代码中，我们在`pages`数组中添加了新页面的路由路径。同时，在`tabBar`中也添加了对于新页面的配置，可以让新页面在应用程序的选项卡中显示出来。

至此，我们已经完成了在 Taro 中新增页面的所有操作，可以重新启动应用程序，在选项卡中点击新页面，即可看到我们新增的页面了。

总体来说，Taro 的页面开发非常简单，只需要按照上述步骤即可完成。如果你有 React 开发经验，会更加容易上手；如果你没有任何 React 开发经验，也可以根据 Taro 提供的文档和案例快速学习。