迅速上手:使用taro构建微信小程序基础教程
前言
由于微信小程序在开发上不能安装npm依赖,和开发流程上也饱受诟病;Taro 是由京东·凹凸实验室(aotu.io)倾力打造的 多端开发解决方案,它的api基于react,在本篇文章中主要介绍了使用taro搭建微信小程序的一些步骤和一个简单demo的实现。
安装
先全局安装@tarojs/cli
$ npm install -g @tarojs/cli
$ yarn global add @tarojs/cli
之后我们初始化一个名为myApp
的项目:
$ taro init myApp
然后输入你的配置:
之后等待所有依赖安装完毕。
开发
在命令行执行
$ npm run dev:weapp
taro将会进入微信小程序编译预览模式。我们打开微信开发者工具,将项目导入,会在预览窗口中看到hello world。这时我们就可以进行开发啦~~
1.生命周期函数
生命周期方法 | 作用 | 说明 |
---|---|---|
componentWillMount | 程序被载入 | 对应微信小程序onLaunch |
componentDidMount | 程序被载入 | 对应微信小程序onLaunch ,在componentWillMount 之后执行 |
componentDidShow | 程序展示出来 | 对应微信小程序onShow |
componentDidHide | 程序被隐藏 | 对应微信小程序onHide |
不过当然也包含componentWillUnmout
和componentWillReceiveProps
等react原始生命周期函数,用来编写自定义组件。
2.路由
在 Taro 中,路由功能是默认自带的,不需要开发者进行额外的路由配置。
// 跳转到目的页面,打开新页面
Taro.navigateTo({
url: '/pages/page/path/name'
})
// 跳转到目的页面,在当前页面打开
Taro.redirectTo({
url: '/pages/page/path/name'
})
传参
// 传入参数 id=2&type=test
Taro.navigateTo({
url: '/pages/page/path/name?id=2&type=test'
})
我们可以使用this.$router.params
来获取路由上的参数。
3.组件
Taro 以 微信小程序组件库 为标准,结合 jsx 语法规范,定制了一套自己的组件库规范。这部分可以自行去看文档。*值得注意的是,小程序中的写法`bind这种事件都要改成以
on`开头。**
写个demo
现在使用taro构建一个很简单的demo;需要实现简单的组件调用,路由跳转传参等功能。
1.主页
一个Swiper,一个列表组件:
// index.js
import Taro, { Component } from '@tarojs/taro'
import { View, Swiper,SwiperItem, Image } from '@tarojs/components'
import ListItem from '../../components/ListItem'
import './index.less'
import img0 from './img/img0.jpg'
import img1 from './img/img1.jpg'
import img2 from './img/img2.jpg'
export default class Index extends Component {
config = {
navigationBarTitleText: '首页'
}
skipToDetail(){
/* */
}
render() {
return (
<View className='index'>
<Swiper indicatorDots autoplay>
{[img0,img1,img2].map(img=>(<SwiperItem key={img}><Image src={img} /></SwiperItem>))}
</Swiper>
{listSet.map(item=>(<ListItem onClick={this.skipToDetail.bind(this)} description={item.description} title={item.title} key={item.title} />))}
</View>
)
}
}
const listSet=[
{title:'标题一',description:'描述一'},
{title:'标题二',description:'描述二'},
{title:'标题三',description:'描述三'},
]
列表组件,注意这里有个坑,就是不能直接调用函数props,会报一个警告,说是没有找到onClick handler
。查阅官方文档后,在issues 215中找到了答案,官方说是会在以后的版本中修复这个bug,目前先按下面代码写。
import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.less'
export default class ListItem extends Component {
skipToDetail(){
/* 必须得这样写=。= */
this.props.onClick()
}
render() {
const { title, description } = this.props
return (
<View className='list-item' onClick={this.skipToDetail}>
<View><Text>{title}</Text></View>
<View><Text>{description}</Text></View>
</View>
)
}
}
2.详情页跳转
我们在入口文件添加新的路由,指向详情页detail:
这里需要注意先配置好pages,然后再写这个组件,要不再编译的时候会找不到这个页
// app.js
config = {
pages: [
'pages/index/index',
'pages/detail/index'
],
...
}
创建详情页:
import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import './index.less'
export default class Index extends Component {
componentWillMount () {
}
config = {
navigationBarTitleText: '详情页'
}
render () {
const {title,description}=this.$router.params
return (
<View>
...
</View>
)
}
}
要求点击每个列表项,需要进行跳转,并把当前的title和description传到详情页。需要在首页中的skipToDetail
中补充以下内容:
skipToDetail({title,description}){
Taro.navigateTo({
url: `/pages/detail/index?title=${title}&description=${description}`
})
}
并在render方法中将参数传入这个函数中:
render() {
return (
<View className='index'>
...
{listSet.map(item=>(<ListItem onClick={this.skipToDetail.bind(this,item)} description={item.description} title={item.title} key={item.title} />))}
</View>
)
}
参考文档
链接:http://www.imooc.com/article/44296
迅速上手:使用taro构建微信小程序基础教程的更多相关文章
- Taro开发微信小程序
Taro开发微信小程序 https://www.cnblogs.com/rynxiao/p/9230237.html 了解Taro 听说Taro是从几个星期前开始的,在一次饭桌上,一个小伙伴说:&qu ...
- 利用函数计算构建微信小程序的Server端
10分钟上线 - 利用函数计算构建微信小程序的Server端-博客-云栖社区-阿里云 https://yq.aliyun.com/articles/435430 函数计算 读写 oss import ...
- Python flask构建微信小程序订餐系统
第1章 <Python Flask构建微信小程序订餐系统>课程简介 本章内容会带领大家通览整体架构,功能模块,及学习建议.让大家在一个清晰的开发思路下,进行后续的学习.同时领着大家登陆ht ...
- Python flask构建微信小程序订餐系统☝☝☝
Python flask构建微信小程序订餐系统☝☝☝ 一.Flask MVC框架结构 1.1实际项目结构 1.2application.py 项目配置文件 Flask之flask-script模块使 ...
- 【Taro全实践】Taro在微信小程序中的生命周期
一.Taro的本身生命周期 生命周期componentWillMount在微信小程序中这一生命周期方法对应页面的onLoad或入口文件app中的onLaunch componentDidMount在微 ...
- Python flask构建微信小程序订餐系统✍✍✍
Python flask构建微信小程序订餐系统 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课程本身没问题, ...
- 新手避坑 -- 用 Jenkins +miniprogram-ci 自动构建微信小程序
先看看效果: 要实现这样的效果,需要下面3步: 1.下载 node 依赖包 miniprogram-ci,编写预览和上传功能 2. 登录微信公众平台, 下载项目的privateKey+添加代码上传IP ...
- 微信小程序开发教程 #043 - 在小程序开发中使用 npm
本文介绍了如何在微信小程序开发中使用 npm 中包的功能,大大提高微信小程序的开发效率,同时也是微信小程序系列教程的视频版更新. 微信小程序在发布之初没有对 npm 的支持功能,这也是目前很多前端开发 ...
- 从零开始的微信小程序入门教程(一)
之前说要和同事一起开发个微信小程序项目,现在也在界面设计,功能定位等需求上开始实施了.所以在还未正式写项目前,打算在空闲时间学习下小程序.本意是在学习过程中结合实践整理出一个较为入门且不是很厚的教程, ...
随机推荐
- VPS上拖文件(Apache配置、SSH)
场景 下载VPS上的文件 命令 Apache配置 yum install httpd -y /etc/rc.d/init.d/httpd start /sbin/iptables -I INPUT - ...
- Xilinx原语学习之时钟资源相关原语
一直来,都是使用Vivado中自带的GMIItoRGMII IP核来完成GMII转RGMII的功能:尽管对GMII及RGMII协议都有一定的了解,但从没用代码实现过其功能.由于使用IP时,会涉及到MD ...
- aiohttp的笔记之TCPConnector
TCPConnector维持链接池,限制并行连接的总量,当池满了,有请求退出再加入新请求.默认是100,limit=0的时候是无限制 1.use_dns_cache: 使用内部DNS映射缓存用以查询D ...
- for循环查找元素怎么跳出for循环
应用场景: 当我们通过for循环来循环对象或者数组时,当找到符合条件的数据时,想要跳出这个循环,不在执行循环继续往后面查找. 解决方法: for循环里面使用return没有效果,于是,我们回到最初控制 ...
- 微信小程序开发记录
顶栏banner代码 /**app.wxss**/ .container { height: 100%; display: flex; flex-direction: column; align-it ...
- 题解-POI2009 WSP-Island
Problem bzoj1137 题意概要:给定一个凸多边形坐标.点按顺时针编号 \(1\) 到 \(n\).任意两点之间都有一条长度为欧氏距离的边相连.边相交处可以自由穿行.有 \(m\) 条边不能 ...
- <pre>标签的基本样式设置
断行 在html中,换行符无法在一般标签内作为布局控制显示,包括xml实体 和 均表现为white-space,仅用于断字[1]. 一般情形下,可使用<br>标签断行:但需要从原始xml文 ...
- This project is not a myeclipse hibernate project . Assuming Hibernate 3 capabilities configuration editor
开某工程Hibernate配置文件时出现提示,信息大概如标题. 根据网友提供,选中工程,点击MyEclipse-->Project capabilities-->add hibernate ...
- Ubuntu18系统qt生成程序无法双击运行问题
1.Ubuntu18 安装qt编译生成的程序文件类型为application/x-sharedlib,无法双击直接运行.文件类型应该为x-executable. 2.解决方法 在.pro文件中添加下面 ...
- web@前端--html,css,javascript简介、第一个页面(常用标签简介)
1.什么是标签#1.在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来,如`<html>`.`<head>`.`<body>`都是标签,#2. ...