【小程序】多端框架Taro实现外卖首页

最新推荐文章于 2025-03-25 08:48:17 发布

richest_qi

最新推荐文章于 2025-03-25 08:48:17 发布

阅读量926

点赞数 1

分类专栏：微信小程序

本文链接：https://blog.csdn.net/qzw752890913/article/details/112489963

版权

本文介绍了使用Taro开发微信小程序项目的流程，包括全局安装Taro命令行工具、创建模板项目、安装第三方依赖、编写详细代码、编译打包生成dist目录并导入微信开发者工具。同时，还分享了Taro CLI多版本共存和无法全局卸载的解决方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

全局安装Taro命令行工具

npm install -g @tarojs/cli 【Taro v3.0.18】

创建模板项目

taro init myApp

安装其他第三方依赖

npm install --save taro-ui@next 安装失败，改用cnpm install --save taro-ui@next 【taro-ui@3.0.0-alpha.9】。
npm install --save events 安装失败，改用cnpm install --save events【events@3.2.0】。

代码目录

在这里插入图片描述

详细代码

修改index.jsx

import React, {
    Component } from 'react';
import {
    View} from '@tarojs/components';
import './index.scss';
import Head from "../../components/head/head.jsx";
import Food from "../../components/food/food.jsx";
import Bottom from "../../components/bottom/bottom.jsx";

class Index extends Component {
   

  render () {
   
    return (
      <View className='index'>
        <Head/>
        <Food/>
        <Bottom/>
      </View>
    )
  }
}

export default Index;

新增目录 assets/images

请移步此处下载图片。

新增commons/utils/utils.js

import Taro from "@tarojs/taro";
import EventEmitter  from "events";

function getTotal(){
   
    let buffer = Taro.getStorageSync("buffer");
    let total = 0,sum = 0;
    Object.keys(buffer).map(item => {
   
        let {
   price,quantity} = buffer[item];
        sum += quantity;
        total += price*quantity;
    })
    return {
   sum,total};
}

const Event = new EventEmitter();

export {
   
    getTotal,
    Event
}

新增目录components/bottom

bottom.jsx

import React,{
   Component} from "react";
import {
   View,Image,Text} from "@tarojs/components";
import "./bottom.scss";
import {
   Event,getTotal} from "../../common/utils/utils.js";

class Bottom extends Component{
   
    constructor(){
   
        super(...arguments);
        this.state = {
   
            total:0,
            sum:0,
            delivery:15,
            starting:20
        }
    }
    componentDidMount(){
   
        let {
   total,sum} = getTotal();
        this.setState({
   
            total:total,
            sum:sum
        })
        Event.on("change",() => {
   
            let {
   total,sum} = getTotal();
            this.setState({
   
                total:total,
                sum:sum
            })
        })
    }
    render(){
   
        let {
   total,sum,delivery,starting} = this.state;
        return (
            <View className="bottom">
                <View className="bottom-content">
                    {
   
                        (sum>0) 
                        ? <><Text className="sum">{
   sum}</Text><Image className="expressman" src={require("../../assets/images/expressman_light.png")}></Image></>
                        : <Image className="expressman" src={
   require("../../assets/images/expressman_dark.png")}></Image>
                    }
                    <View className="cost">
                        <Text className="total">￥<Text className="value">{
   total}</Text></Text>
                        <Text className="delivery">预估送配送费￥{
   total<starting?delivery:0}</Text>
                    </View>
                    {
   (total<starting)
                        ?<View className="starting"><Text>￥{
   starting}起送</Text></View>
                        :<View className="gotoPay">去结算</View>
                    }       
                </View>
            </View>
        )
    }
}

export default Bottom;

bottom.scss

.bottom{
   
    padding: 0 24px;
    box-sizing: border-box;
    width: 100%;
    height: 100px;
    position: fixed;
    bottom: 0;
    .bottom-content{
   
        height: inherit;
        background-color: #020001;
        border-radius: 60px;
        display: flex;
        color: #6a6a6a;
        justify-content: space-between;
        align-items: center;
        font-size: 26px;
        .sum{
   
            width: 36px;
            height: 36px;
            line-height: 36px;
            display: inline-block;
            background-color: #fa4e3f;
            color: #fff;
            text-align: center;
            border-radius: 50%;
            position: absolute;
            bottom: 10px;
            left: 150px;
        }
        .expressman{
   
            width: 128px;
            height: 128px;
            margin-top: -30px;
            margin-left:50px;
        }
        .cost{
   
            margin-left: -30px;
            display: flex;
            align-items: center;
        }
        .total{
   
            color: #fff;
            font-size: 28px;
            padding-right: 10px;
        }
        .value{
   
            font-size: 42px;
        }
        .delivery{
   
            padding-left: 10px;
            border-left: 1px solid #666;
        }
        .starting{
   
            margin-right: 50px;
        }
        .gotoPay{
   
            width: 150px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            border-top-right-radius: 60px;
            border-bottom-right-radius: 60px;
            background-color: #ffc236;
            box-shadow: 1px 0 0 #ffc236;
        }
    }

}