一、环境准备

1、安装taro

npm install -g @tarojs/cli

yarn global add @tarojs/cli

cnpm install -g @tarojs/cli

2、项目初始化

taro init myApp

原教程：Taro官网

到了这里我们已经完成了前期准备。

二、了解组件

1、在Taro中无法使用html中的标签，只能使用Taro自带的组件库。

2、Taro中的基础标签是<View>

3、目前的Taro已支持Vue进行开发

4、使用vue开发想使用Taro自带的组件库可以使用taro-ui-vue

三、学习过程及问题

1、作为一个初学者在我使用过程中遇到问题，第三方插件可能有的taro无法编译发生错误，作为一个初学者看到一大堆的红色难免会心里慌慌的。

2、taro微信小程序不能使用html中的组件，只能使用taro的组件库。

3、taro目前的vue的支持程度还算不错。

4、如果组件存在警告问题添加泛型参考

四、创建第一个组件

1、在src目录下创建components文件夹，新建一个index.scss作为新的样式表，新建TopNav.tsx作为组件。

# components/index.scss
.movie{display: flex;flex-wrap: wrap;width: 750px;padding-top: 50px;.movie-item{padding-top: 20px;display: flex;flex-direction: column;font-size: 30px;width: 250px;.movie-image{width: 240px;height: 360px;box-shadow: 5px 5px 5px 5px #A5A5A5;border-radius: 20px;}}
}
#fixd{background-color: purple;padding: 20px 0;width: 750px;position: fixed;display: flex;z-index: 20;justify-content: center;// padding-top: 200px;#top{display: flex;justify-content: space-between;width: 650px;font-size: 30px;color: white;}
}

# index/index.tsx
import React, { Component } from 'react'
import Taro from '@tarojs/taro'
import './index.scss'
import {View} from '@tarojs/components'export default class Top extends Component {render() {return (<View id="fixd"><View id="top"><View>首页</View><View>电影</View><View>连续剧</View><View>搜片</View></View></View>)}}

这样我们的第一个组件就已经完美完成了。

2、开始调用我们开发的组件，在pages/index目录下修改index.tsx文件

# index/index.tsx
import React, { Component } from 'react'
import { View } from '@tarojs/components'
import './index.scss'
import TopNav from '../../components/TopNav'export default class Index extends Component {componentWillMount() { }componentDidMount() { }componentWillUnmount() { }componentDidShow() { }componentDidHide() { }render() {return (<View className='index'><TopNav /></View>)}
}

五、继续添加并完善功能页面

# components/MovieList.tsx
import React, { Component } from 'react';
import { Image,View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import './index.scss'export default class Index extends Component {# state定时器state = {element:[],}constructor(props) {super(props);}goToDetails(index) {Taro.navigateTo({url: '/pages/details/index?id='+index,})Taro.setStorage({key: 'movie_id',data: index,})}async componentDidMount  () {await Taro.request({url: `http://120.71.148.82:7070/demo/all`,method: "GET",success: (res) => {const element = res.data.map((i) =>{return <View onClick={() => this.goToDetails(i['id'])} key={i['id']} className="movie-item"><View><Image lazyLoad={true} className="movie-image" src={i['img_url']}></Image></View><View>{i['name']}</View></View>})this.setState({element:element,})}})}render() {return <View className="movie">{this.state.element}</View>}
}

# index/index.tsximport React, { Component } from 'react'
import { View, Swiper, SwiperItem, Image } from '@tarojs/components'
import './index.scss'
import TopNav from '../../components/TopNav'
import MovieList from '../../components/MovieList'
const imgs = ["https://wxt.sinaimg.cn/mw690/006hrwDrgy1gfl8scqz9ej30mw08stk3.jpg", "https://wxt.sinaimg.cn/mw690/006hrwDrgy1gfvosg4zx1j30mw08sqcr.jpg", "https://wxt.sinaimg.cn/mw690/006hrwDrgy1ggl3aw7wbxj30mw08sk2z.jpg", "https://tvax1.sinaimg.cn/mw690/006hrwDrgy1g83qhaxejpj30mw08stnu.jpg", "https://wxt.sinaimg.cn/mw690/006hrwDrgy1gdmpi7u99sj30mw08sds5.jpg"]
var navObjs = [{title: '电影',icon: 'https://xdg999-1256062680.file.myqcloud.com/xdg123/images/09c0-40b8-4293-bafa-95b431577b5355.png',
}, {title: '电视',icon: 'https://xdg999-1256062680.file.myqcloud.com/xdg123/images/92e7-b0b8-4c01-8dab-d2480e19340244.png',
}, {title: '动漫',icon: 'https://xdg999-1256062680.file.myqcloud.com/xdg123/images/b462-8f9c-4c3b-816e-d3ec851a037714.png',
}, {title: '理论',icon: 'https://xdg999-1256062680.file.myqcloud.com/xdg123/images/b429-9dc7-4d49-b1dd-14a4d5db1c5808.png',
}, {title: '韩漫',icon: 'https://xdg999-1256062680.file.myqcloud.com/xdg123/images/2836-831f-4c96-91be-a5e69ac2e5cb80.png',
},
{title: '综艺',icon: 'https://xdg999-1256062680.file.myqcloud.com/xdg123/images/3f10-87e4-4200-9e58-9658959a9de467.png',
}]function Banner() {const images = imgs.map((img) => <SwiperItem key={img} className="banner-swiper-item"><View><Image className="banner-swiper-image" src={img} /></View></SwiperItem>)return (<View className="banner"><Swiper indicatorDots autoplay indicatorColor="#FFF" indicatorActiveColor="#FF8c00" className="banner-swiper">{images}</Swiper></View>);}
function Nav() {const navs = navObjs.map((i) => <View key={i.title} className="nav-item"><View><Image className="nav-item-icon" src={i.icon} /></View><View>{i.title}</View></View>)return <View className="nav">{navs}</View>
}function Type(props) {return <View className="type-nav"><View><span className="type-border"></span><span className="type-title">{props.title}</span></View><View><span>更多热门》》</span></View></View>
}export default class Index extends Component {componentWillMount() { }componentDidMount() { }componentWillUnmount() { }componentDidShow() { }componentDidHide() { }render() {return (<View className='index'><TopNav /><Banner /><Nav /><Type title="电影" /><MovieList /></View>)}
}

# conponents/TopNav.tsx
import React, { Component } from 'react'
import Taro from '@tarojs/taro'
import './index.scss'
import {View} from '@tarojs/components'export default class Top extends Component {goToSearch(){Taro.switchTab({url:'/pages/search/index'})}goToHome(){Taro.switchTab({url:'/pages/index/index'})}goToMovie(){Taro.switchTab({url:'/pages/movie/index'})}goToTV(){Taro.switchTab({url:'/pages/movie/index'})}render() {return (<View id="fixd"><View id="top"><View onClick={this.goToHome}>首页</View><View onClick={this.goToMovie}>电影</View><View onClick={this.goToMovie}>连续剧</View><View onClick={this.goToSearch}>搜片</View></View></View>)}}

代码太多就不全部展示了

源码地址：https://github.com/lt2980046282/starmovie