Taro 3.4.10 + Dva.js 搭建微信小程序

本文档详细介绍了如何使用Taro 3.4.10和Dva.js搭建微信小程序。从前期的Node环境准备,到Taro的安装和版本查看,再到项目初始化、配置Dva、引入Taro-ui以及解决可能出现的问题,每个步骤都有清晰的说明。最后,通过引入Taro-ui并测试,确保项目搭建成功。
摘要由CSDN通过智能技术生成

前期准备

安装node(node环境>=12.0.0)

安装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

查看 Taro 全部版本信息

可以使用 cnpm info 查看 Taro 版本信息,在这里你可以看到当前最新版本

项目初始化

用命令打开项目所想创建的文件夹(你想把项目创建到哪里),在该文件夹下使用命令创建模板项目:

$ taro init myApp

npm 5.2+ 也可在不全局安装的情况下使用 npx 创建模板项目:

$ npx @tarojs/cli init myApp

在创建完项目之后,Taro 会默认开始安装项目所需要的依赖,安装使用的工具按照 yarn > cnpm > npm 顺序进行检测。一般来说,依赖安装会比较顺利,但某些情况下可能会安装失败,这时候你可以在项目目录下自己使用安装命令进行安装:

# 进入项目根目录
$ cd myApp

# 使用 yarn 安装依赖
$ yarn

# OR 使用 cnpm 安装依赖
$ cnpm install

# OR 使用 npm 安装依赖
$ npm install

创建成功之后,我们可以用微信开发者工具打开项目,执行cnpm run dev:weapp运行项目,运行结果如下

cnpm run dev:weapp

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Taro.js是一种支持多个小程序平台开发的框架,它提供了一种简洁、高效的方式来创建微信小程序。在Taro.js中,我们可以使用城市选择列表组件来方便地实现城市选择功能。 微信小程序城市选择列表是指用户可以在小程序中选择所在城市的功能。使用Taro.js开发微信小程序时,我们可以通过调用微信小程序提供的定位功能,获取用户所在位置的经纬度信息。然后,我们可以将经纬度信息传递给城市选择列表组件,让用户选择所在城市。 城市选择列表通常包括省份和城市两级下拉菜单。当用户选择省份时,城市列表会动态更新为该省份对应的城市列表。用户可以通过滚动或搜索的方式,在城市列表中选择目标城市。用户选择完成后,我们可以将所选择的城市信息传递给后端服务器,进行进一步的处理。 在Taro.js中,我们可以使用类似以下的代码来实现城市选择列表: ``` import { View, Picker } from '@tarojs/components' const cities = { 北京: ['北京市'], 上海: ['上海市'], 广东: ['广州市', '深圳市', '珠海市', '东莞市'], ... } export default class CitySelector extends Component { state = { province: '', city: '', } handleProvinceChange = e => { const province = e.detail.value const city = cities[province][0] this.setState({ province, city }) } handleCityChange = e => { const city = e.detail.value this.setState({ city }) } render() { const { province, city } = this.state return ( <View> <Picker mode='selector' range={Object.keys(cities)} onChange={this.handleProvinceChange}> <View>{province || '请选择省份'}</View> </Picker> <Picker mode='selector' range={cities[province]} onChange={this.handleCityChange}> <View>{city || '请选择城市'}</View> </Picker> </View> ) } } ``` 以上代码中,我们定义了一个城市选择列表组件`CitySelector`,其中使用了`Picker`组件来实现下拉选择功能。`cities`对象存储了各省份对应的城市列表。当用户选择省份时,触发`handleProvinceChange`函数,在城市列表中显示对应省份的城市。当用户选择城市时,触发`handleCityChange`函数,更新城市信息。最终,用户选择的省份和城市会保存在`state`中,方便后续的数据处理和传递。 通过这样的方式,我们可以在Taro.js微信小程序中实现城市选择列表的功能。希望这个回答能对你有所帮助。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值