蝙蝠岛资源网 Design By www.hbtsch.com
Taro 是一套遵循 React 语法规范的 多端开发 解决方案。
现如今市面上端的形态多种多样,Web、React-Native、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。
使用 Taro,我们可以只书写一套代码,再通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信/百度/支付宝/字节跳动/QQ/京东小程序、快应用、H5、React-Native 等)运行的代码。
官方文档:https://nervjs.github.io/taro/
项目已上传GitHub:https://github.com/LazyTraveller/Jerry-Taro-Demo/blob/master/README.md
一、使用Taro cli工具初始化项目
1. 安装taro脚手架工具
首先,你需要使用 npm 或者 yarn 全局安装@tarojs/cli,或者直接使用npx:
# 使用 npm 安装 CLI $ npm install -g @tarojs/cli # OR 使用 yarn 安装 CLI $ yarn global add @tarojs/cli # OR 安装了 cnpm,使用 cnpm 安装 CLI $ cnpm install -g @tarojs/cli
2. 初始化taro项目
使用命令创建模板项目 $ taro init myApp npm 5.2+ 也可在不全局安装的情况下使用 npx 创建模板项目 $ npx @tarojs/cli init myApp
3. 进入myApp目录,安装依赖
# 使用 yarn 安装依赖 $ yarn # OR 使用 cnpm 安装依赖 $ cnpm install # OR 使用 npm 安装依赖 $ npm install
4. 编译项目,开启Dev模式,生成小程序 -- dist目录
# yarn $ yarn dev:weapp $ yarn build:weapp # npm script $ npm run dev:weapp $ npm run build:weapp # 仅限全局安装 $ taro build --type weapp --watch $ taro build --type weapp # npx 用户也可以使用 $ npx taro build --type weapp --watch $ npx taro build --type weapp
5. 使用微信开发者工具,打开项目中的dist目录
二、小程序购物车功能的实现过程
效果图:
三、具体实现代码
src/pages/cart/cart.js
import { View, Icon, Navigator, Image, Text, } from '@tarojs/components' import Taro from '@tarojs/taro' import './cart.less' class Cart extends Taro.Component { config = { navigationBarTitleText: '购物车' } state = { carts: [ { id: 1, title: '好喝"main"> {carts.length > 0 "cart-box"> {carts.map((item, index) => { return ( <View className="cart-list" key={index}> {item.selected "success" color="#b30000" data-index={index} className="cart-pro-select" onClick={this.selectList.bind(this,item.id)} ></Icon> ) : ( <Icon type="circle" className="cart-pro-select" data-index={index} onClick={this.selectList.bind(this,item.id)} ></Icon> )} <Navigator url={'../details/details"cart-thumb" src={item.image}></Image> </Navigator> <Text className="cart-pro-name">{item.title}</Text> <Text className="cart-pro-price">{'¥' + item.price}</Text> <View className="cart-count-box"> <Text className="cart-count-down" onClick={this.minusCount} data-index={index} > - </Text> <Text className="cart-count-num">{item.num}</Text> <Text className="cart-count-add" onClick={this.addCount} data-index={index} > + </Text> </View> <Text className="cart-del" onClick={this.deleteList} data-index={index} > 删除 </Text> </View> ) })} </View> <View className="cart-footer"> {selectAllStatus "success_circle" color="#b30000" className="total-select" onClick={this.selectAll} ></Icon> ) : ( <Icon type="circle" color="#b30000" className="total-select" onClick={this.selectAll} ></Icon> )} <Navigator url="../orders/orders"> <View className="order-icon"></View> </Navigator> <Text >{count> 0"cart-toatl-price">{'合计¥' + totalPrice}</Text> <Text className="pay" onClick={this.closeFun} data-index={index}> 立即下单 </Text> </View> </View> ) : ( <View> <View className="cart-no-data">购物车是空的哦~</View> </View> )} </View> ) } } export default Cart
src/pages/cart/cart.less
/* pages/cart/cart.wxss */ .cart-box{ padding-bottom: 100px; margin-bottom: 10px } .cart-list{ position: relative; padding: 20px 20px 20px 285px; height: 185px; border-bottom: 1px solid #e9e9e9; } .cart-list .cart-pro-select{ position: absolute; left: 20px; top: 90px; width: 45px; height: 45px; } .cart-list .cart-thumb{ position: absolute; top: 20px; left: 85px; width: 185px; height: 185px; border-radius:5px; box-shadow:5px 2px 6px #000 } .cart-list .cart-pro-name{ display: inline-block; // width: 500px; height: 105px; line-height: 50px; overflow: hidden; font-family: Microsoft Yahei, Cochin, Georgia, Times, 'Times New Roman', serif; font-size:28px; margin-right: 15px } .cart-list .cart-pro-price{ display: inline-block; font-size:30px; color: #b30000; height: 105px; line-height: 50px; } .cart-list .cart-count-box{ position: absolute; left: 420px; bottom: 20px; width: 250px; height: 80px; } .cart-list .cart-count-box text{ display: inline-block; line-height: 80px; text-align: center; } .cart-count-down,.cart-count-add{ font-size: 32px; width: 60px; height: 80px; font-family: Microsoft Yahei, Cochin, Georgia, Times, 'Times New Roman', serif; border: silver solid 1px; border-radius: 10px; } .cart-count-num{ width: 80px; font-size: 32px; height: 80px; border-radius: 10px; border: silver solid 1px; margin-left: 1px; margin-right: 1px; } .cart-del{ position: absolute; right: 15px; bottom: 20px; width: 80px; height: 80px; line-height: 80px; text-align: center; font-family: Arial,Helvetica,sans-serif; font-size:30px; color: #b30000; text-shadow: black; } .cart-footer{ position: fixed; bottom: 0; left: 0; width: 100%; height: 90px; line-height: 90px; padding:0 100px 0 80px; box-sizing: border-box; background: #bfbfbf; color: #4d4d4d; font-family: Microsoft Yahei, Cochin, Georgia, Times, 'Times New Roman', serif; font-size: 30px; } .total-select{ position: absolute; left: 20px; top: 25px; width: 45px; height: 45px; } .order-icon{ position: absolute; right: 40px; top: 25px; width: 45px; height: 45px; background-size: 100%; } .cart-toatl-price{ /* float: right; */ margin-left:80px; text-align: center; width: 100px; font-family: Microsoft Yahei, Cochin, Georgia, Times, 'Times New Roman', serif; color: #b30000; font-size: 30px; } .pay { position: absolute; right: 0; background-color: #b30000; height: 100%; width: 200px; text-align: center; font-family: Microsoft Yahei, Cochin, Georgia, Times, 'Times New Roman', serif; font-size: 26px; color: #f2f2f2; text-align: center } .cart-no-data{ padding:40px 0; color: #999; text-align: center; }
注意:检查本地电脑taro的版本,电脑需要和项目的taro版本号相同,否则发送编译错误,该项目的taro CLI版本为v2.1.1
官方提供的两个解决方案: 1、 对电脑的taro进行升级 # taro $ taro update self [version] # npm npm i -g @tarojs/cli@[version] # yarn yarn global add @tarojs/cli@[version] 2、 对项目的taro进行升级 $ taro update project [version] version 为选填,如:1.x.x/latest 等,将会直接更新到指定版本
总结
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com
暂无使用Taro实现小程序商城的购物车功能模块的实例代码的评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]