taro 小程序转h5之后报错_初识Taro小程序（一）

————☝☝☝————————————————

 点击上方蓝字 “野九和浪七”

关注不迷路 满满的干货喔♥

————————————————————————

正当移动互联网进入白热化阶段时，以微信小程序为代表的一类“轻应用”异军突起。它们无需下载，使用方便，“用完即走”，同时功能也较为完备，一经推出即得到了各大平台和及用户的热烈追捧。但是问题也随之而来——开发者们要同时维护 Web 端、移动端、微信小程序、支付宝小程序等等多套用户界面，其维护成本可以想象。作为一个优秀的多端统一开发解决方案，Taro 的出现则改变了这一情况。正值 Taro 3.x 进入 beta 阶段，让我们沏上一杯茶，开始我们的 Taro 多端小程序开发之旅吧。 起步 对于国内 React 开发者来说， Taro 的出现无疑是福音——它能够让我们用熟悉的 React 代码去搭建各类小程序，并且 一份代码可以编译成多个平台的应用 (目前包括微信小程序、支付宝小程序、React Native、H5 等等)。随着 Taro 的不断进化，它对 React 代码的支持程度越来越好，所支持的目标平台也越来越多，学习的价值自然不必多言。正值 Taro 进入 3.0.0 版本的 beta 阶段，我们在这一篇教程将手把手带你实现一个能够部署到多端的小程序，让你感受 Taro 的强大与魅力！

在这一系列教程中，我们将构建一个多端小程序应用——奥特曼俱乐部(Ultraman Club，简称 UltraClub)，一个支持多端登录(微信和支付宝)的类似贴吧的小程序。

我们将构建什么？

前提条件

• 了解 HTML、CSS、JavaScript 的基础知识

• 了解 React 框架的基础知识

• 了解并已经安装好 node 与 npm (注意：node环境需要 >= 12.0.0)

除此之外，你还需要下载并安装微信开发者工具，下载地址： https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html。 用 Taro 脚手架初始化项目 首先安装 Taro CLI：

npm install  -g @tarojs/cli

然后创建我们的项目：

taro init ultra-club

之后会出现一系列选项，按照下图所示进行选择即可(CSS 预处理器选择 Sass，模板选择“默认模板”，老司机可自行选择使用 TS)：

之后进入到我们的项目目录 ultra-club 之后，可以看到项目模板包括以下文件：

.├── config                    # 项目配置│   ├── dev.js                # 开发环境配置文件│   ├── index.js              # 主配置文件│   └── prod.js               # 生产环境配置文件├── package.json├── project.config.json       # 微信小程序项目配置└── src                       # 项目源码目录    ├── app.scss              # 根组件样式    ├── app.jsx               # 根组件 app    ├── index.html            # 等待被嵌入代码的 HTML 文档    └── pages                 # 页面目录        └── index             # index 页面模块            ├── index.scss    # index 页面样式            └── index.jsx     # index 页面组件

我们主要看一下两个代码文件： src/app.jsx 以及 src/pages/index/index.jsx 。

初探脚手架代码

src/app.jsx 定义了项目的根组件App ，它的代码如下：

// 如果需要在 h5 环境中开启 React Devtools// 取消以下注释：// if (process.env.NODE_ENV !== 'production' && process.env.TARO_ENV === 'h5')  {//   require('nerv-devtools')// }class App extends Component {  config = {    pages: ['pages/index/index'],    window: {      backgroundTextStyle: 'light',      navigationBarBackgroundColor: '#fff',      navigationBarTitleText: 'WeChat',      navigationBarTextStyle: 'black',    },  }  // 在 App 类中的 render() 函数没有实际作用  // 请勿修改此函数  render() {    return   }}Taro.render(, document.getElementById('app'))

如果你熟悉 React 的话，那么上面这段代码一定不难理解，只不过是把相应的地方(导包、渲染)从之前的 React 以及 ReactDOM 改成 Taro 。

我们再看看 src/pages/index/index.jsx。按照最佳实践，Taro 项目中一般把页面组件放到 src/pages目录中，src/pages/index就是 index 页面组件模块，其中 index.jsx 的代码如下：

import Taro, { Component } from '@tarojs/taro'import { View, Text } from '@tarojs/components'import './index.scss'export default class Index extends Component {  config = {    navigationBarTitleText: '首页',  }  render() {    return (              Hello world!          )  }}

依旧是熟悉的 React 组件风格，只不过与普通的 React 相比，在 render 函数中我们用的不再是 div 和 p 标签，而是 Taro 为我们准备好的 View 和 Text 组件。为什么 Taro 要自己搞一套组件库呢？因为 Taro 的目标是星辰大海……sorry，是能够编译到各个平台。 只有通过制定 Taro 自己的组件库，才能在各个平台的原生组件库上盖了一层抽象层，进而实现跨平台的目标。 运行小程序

打开根目录进入终端，运行以下命令：

npm run dev:weapp

会出现以下提示信息：

当看到“监听文件修改中…”的提示后，我们就可以打开微信开发者工具，用微信扫码登录后界面如下：

点击 + 号，开始导入我们刚才创建的 ultra-club 项目：

如上图所示，首先切换到”导入项目“一栏，然后点击”目录“输入栏右侧的按钮选择刚才创建的 ultra-club 文件夹，最后点击右下角的”导入“按钮即可。 导入成功后，微信开发者工具的界面如下图所示：

在模拟器页面中，看到了我们 index 页面渲染的 Hello world；编辑器能够查看所有代码，不过通常我们用自己习惯的代码编辑器来开发(VSCode 真香！)；调试器则是类似 Chrome 的开发者工具。 一切就绪，让我们开始动工吧！ 下次再见吧！