人生第一篇博客（taro实战适合初学者）

最新推荐文章于 2024-04-02 17:43:55 发布

正在进击的运维小白

最新推荐文章于 2024-04-02 17:43:55 发布

阅读量776

点赞数

分类专栏：实战

本文链接：https://blog.csdn.net/aaMyCup/article/details/107369104

版权

实战专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、环境准备

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.tsx

import 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

正在进击的运维小白

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
人生第一篇博客（taro实战适合初学者）

一、环境准备1、安装taronpm install -g @tarojs/cliyarn global add @tarojs/clicnpm install -g @tarojs/cli2、项目初始化taro init myApp原教程：Taro官网到了这里我们已经完成了前期准备。二、了解组件1、在Taro中无法使用html中的标签，只能使用Taro自带的组件库。2、Taro中的基础标签是<View>3、目前的Taro已支持Vue进行开发4、
复制链接

扫一扫