————☝☝☝————————————————
点击上方蓝字 “野九和浪七”
关注不迷路 满满的干货喔♥
————————————————————————
在这一系列教程中,我们将构建一个多端小程序应用——奥特曼俱乐部(Ultraman Club,简称 UltraClub),一个支持多端登录(微信和支付宝)的类似贴吧的小程序。
我们将构建什么?
前提条件
了解 HTML、CSS、JavaScript 的基础知识
了解 React 框架的基础知识
了解并已经安装好 node 与 npm (注意:node环境需要 >= 12.0.0)
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
会出现以下提示信息: