跨端（小程序/H5/App）前端开发框架调研和应用

// NavBar.h5.tsx
import React from 'react'
import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtNavBar } from 'taro-ui'
import './index.less'

export default (props: any) => {
  const back = () => {
    const pages = Taro.getCurrentPages();
    let canBack = true;
    if (pages.length === 1) {
      canBack = false;
    }
    if (pages[pages.length - 2] && pages[pages.length - 2].path.indexOf('/pages/auth/index') >= 0) {
      canBack = false;
    }
    canBack ? Taro.navigateBack() : Taro.switchTab({ url: '/pages/home/index' })
  }
  return (
    <View>
      <AtNavBar customStyle={{ opacity: 0 }} leftIconType="chevron-left" color="#fff" onClickLeftIcon={back} {...props} />
      <AtNavBar className="fix-nav" leftIconType="chevron-left" color="#fff" onClickLeftIcon={back} {...props} />
    </View>
  )
}
// NavBar.tsx
export default (props: any) => {
  return null
}
// Detail.tsx
import React, { useState, useEffect } from 'react'
import Taro from '@tarojs/taro'
import dayjs from 'dayjs'
import { View, Text, RichText, Swiper, SwiperItem, Image } from '@tarojs/components'
import NavBar from '../../components/NavBar'
import { getInformation } from '../../service'
import './index.less'

export default () => {
  const [information, setInformation] = useState(null)

  useEffect(() => {
    const { id } = Taro.getCurrentInstance().router.params
    fetchData(id)
  }, [])

  const fetchData = (id: string) => {
    // code
  }

  if (!information) {
    return null
  }
  const { name, time, description, posters } = information
  
  return (
    <View>
      <NavBar title="" />
      <View className="detail">
        <View className="detail-title"><Text>{name}</Text></View>
        <View className="detail-date"><Text>{time}</Text></View>
        <View className="detail-content">
          <RichText nodes={description} />
        </View>
      </View>
    </View>
  )
}

// app.ts
import { Component } from 'react'
import Taro from '@tarojs/taro'
import 'taro-ui/dist/style/index.scss'
import './app.less'

class App extends Component {
  async componentDidMount () {
    // TODO: hack tabbar error for h5
    if (process.env.TARO_ENV === 'h5') {
      const hash = document.URL.split('#')[1].split('?')[0]
      const index = ['/pages/home/index', '/pages/notice/index', '/pages/service/index', '/pages/mine/index'].indexOf(hash)
      if (index >= 0) {
        Taro.switchTab({ url: hash })
      }
    }
  }
  render () {
    return this.props.children
  }
}

export default App

// list.jsx
import React, { useEffect, useState } from 'react';
import Taro from '@tarojs/taro';

export default () => {

  const [startX, setStartX] = useState(0);
  const [startY, setStartY] = useState(0);
  const [endX, setEndX] = useState(0);
  const [endY, setEndY] = useState(0);

  useEffect(() => {
    // code here
  }, []);

  const touchStart: any = (e: { touches: any[]; }) => {
    const touch = e.touches[0]
    setStartX(touch.pageX);
    setStartY(touch.pageY);
  }

  const touchMove: any = (e: { touches: any[]; }) => {
    const touch = e.touches[0]
    const deltaX = touch.pageX - startX;
    const deltaY = touch.pageY - startY;
    setEndX(deltaX);
    setEndY(deltaY);
  }

  const touchEnd: any = () => {
    if (endY < -100) { // 向下滑动
      setEndY(0);
      setEndX(0);
      // code here
    }
    if (endY > 100) {
      setEndY(0);
      setEndX(0);
      // code here
    }
    if (endX < -100) {
      // 向左滑动
    }
    if (endX > 100) {
      // 向右滑动
    }
  }

  return <View onTouchStart={touchStart} onTouchMove={touchMove} onTouchEnd={touchEnd} />;
}