精华内容
下载资源
问答
  • taro 官方教程pdf

    2019-03-26 09:28:13
    taro 官方文档教程pdf. 方便随时查看,细碎的知识点都涉及到了。
  • Taro

    2020-11-08 14:58:12
    技术胖Taro教程博客 1.Taro框架简介 Taro的优点: 目前Taro支持的终端: 微信小程序 H5 移动端Web页面 百度小程序 支付宝小程序 快应用 ReactNative(生成原生的移动端app应用) 字节跳动小程序 QQ轻应用 2.Taro...

    Taro

    学习视频地址:👉技术胖Taro免费视频教程

    笔记参考文章地址:👉技术胖Taro教程博客

    1.Taro框架简介

    Taro的优点:

    Taro优点

    目前Taro支持的终端:

    • 微信小程序
    • H5 移动端Web页面
    • 百度小程序
    • 支付宝小程序
    • 快应用
    • ReactNative(生成原生的移动端app应用)
    • 字节跳动小程序
    • QQ轻应用

    2.Taro开发环境搭建和Hello World

    Taro是一套遵循React语法规范的多端开发解决方案,使用Taro,只书写一套代码,再通过Taro的编译工具,讲源代码分别编译出可以再不同端(微信小程序,H5,RN等)运行代码。

    开发环境搭建

    1.安装脚手架

    npm方法

    npm install -g @tarojs/cli
    

    yarn方法

    yarn global add @tarojs/cli
    

    2.创建项目并初始化项目

    使用下面的命令来创建项目

    taro init myDemo1
    

    在创建项目的时候会让你选择一些信息,比如项目描述,框架是基于React还是Vuecss使用的是sass还是less,模板是选择Redux还是默认模板等等…在这里我选择的是基于React,less,默认模板(模板选择不一样对应生成的文件目录以及文件内容也会不一样)。

    3.运行项目

    运行到浏览器(h5端)

    npm run dev:h5
    

    或者

    yarn dev:h5
    

    运行到小微信程序

    npm run dev:weapp
    

    或者

    yarn dev:weapp
    

    运行到小程序的话,Taro编译工具会把你的代码重新编译成一份小程序的代码并存放在dist目录下。在微信开发者工具中直接导入项目(不是新建项目)并选择dist文件夹即可。Taro作为一个可以运行到多端的框架代码,在进行维护修改代码时只需要修改源代码即可不需要在运行端修改。

    我们每次运行到浏览器端(或者其它端)的时候,都会出现红字,提示我们不是最新版本,可以在终端中输入下列命令进行升级:

    taro update self
    

    3.项目目录分析

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZlHYCb2v-1604818612331)(C:\Users\Aurora\AppData\Roaming\Typora\typora-user-images\image-20201104141726287.png)]

    --config                 配置文件
      --dev.js               项目开发时所用的配置
      --index.js             项目默认的基本配置
      --prod.js              项目打包时所用的配置
    --dist                   dist目录用来用来存放对应的运行端的特殊代码,里面的代码不需要改
    --node_modules           整个项目所需要的包
    --src                    代码文件
      --pages                针对小程序设计的页面文件夹
    --.editorconfig          设置语法格式的文件
    --.eslintrc              配置eslint所要的配置
    --.gitignore             在配置git时指定哪些目录不需要上传
    --package.json           整个项目的配置文件
    --project.config.json    项目信息的配置文件
    

    官方给出的目录结构说明

    ├── dist                   编译结果目录
    ├── config                 配置目录
    |   ├── dev.js             开发时配置
    |   ├── index.js           默认配置
    |   └── prod.js            打包时配置
    ├── src                    源码目录
    |   ├── pages              页面文件目录
    |   |   ├── index          index 页面目录
    |   |   |   ├── index.js   index 页面逻辑
    |   |   |   └── index.css  index 页面样式
    |   ├── app.css            项目总通用样式
    |   └── app.js             项目入口文件
    └── package.json
    

    4.Taro使用React Hooks新特性

    /src/page/index/index.js页面,可以看到目前的代码全部都是React的基本语法,比如:继承components,比如React经典的生命周期,比如原来使用的statesetState赋值。

    首先在/src/page/index/index.js中引入useState

    import React, { useState } from 'react'
    

    注意,引入useState的时候其实from 'react'from '@tarojs/taro'都可以,所以form不用进行更改,只需要将原来{ Component }换成{ useState }即可。app.js也不需要更改。

    import React, { useState } from 'react'
    import { View, Text } from '@tarojs/components'
    import './index.less'
    
    function Index(){
    
      const [userName ,setUserName] = useState('Hello Taro!!!!')
    
      return ( 
        <View>
            <Text>{userName}</Text>
        </View>
      )
    
    }
    
    export default Index
    
    

    5.Taro中子组件的编写和传值

    1.编写子组件

    打开/myDemo1/src/pages/index文件夹,在文件下面建立一个child.jsx文件:

    import React from 'react'
    import { View, Text } from '@tarojs/components'
    function Child(){
      return ( 
        <View><Text>我是子组件</Text></View>
      )
    }
    export default Child
    

    接着在父组件index中把子组件child引入进来并渲染到页面上即可:

    import React, { useState } from 'react'
    import { View, Text } from '@tarojs/components'
    import './index.less'
    import Child from './child' //引入子组件
    
    function Index(){
    
      const [userName ,setUserName] = useState('Hello Taro!!!!')
    
      return ( 
        <View>
            <Text>{userName}</Text>
            <Child></Child> //渲染子组件到页面
        </View>
      )
    
    }
    
    export default Index
    
    

    2.向子组件传值

    父组件向子组件传值用到的是props,首先在父组件中:

    <Child username={userName}></Child>
    

    大括号内的是在useState中声明的变量,前面的username可自定义。

    在子组件中:

    import React from 'react'
    import { View, Text } from '@tarojs/components'
    function Child(props){
      return ( 
      <View><Text>我是子组件,父组件给我传递的值是{props.username}</Text></View>
      )
    }
    export default Child
    

    6.Taro路由配置和跳转

    1.路由配置

    app.js的配置文件app.config.js中的pages属性表示的是Taro的路由信息,并且谁配置在第一个数组位置,谁就是默认打开的首页

    首先在src/pages下新建一个文件夹blog,在blog文件夹下新建一个blog.jsx

    import React from 'react'
    import {View,Text} from '@tarojs/components'
    
    function Blog(){
        return (
            <View>
                <Text>Blog Page</Text>
            </View>
        )
    }
    export default Blog
    

    接着在app.config.js中的pages属性中增加一项blog并且放在第一个位置,那么运行之后就能看到Blog页面。

    export default {
      pages: [
        'pages/blog/blog',
        'pages/index/index'
      ],
      window: {
        backgroundTextStyle: 'light',
        navigationBarBackgroundColor: '#fff',
        navigationBarTitleText: 'WeChat',
        navigationBarTextStyle: 'black'
      }
    }
    
    

    如果没有看到想要的效果,重新npm run dev:h5再运行一遍试试。

    2.路由跳转

    Taro提供了6个相关的导航API,我们可以使用这些API进行跳转,需要注意的是这些有些是小程序专用的。

    • navigateTo: 最基本的跳转方式,可以返回上级页面。三端都支持的(小程序、H5、React Native)

    • redirectTo不记录上集页面,直接跳转。三端都支持的(小程序、H5、React Native)

    • switchTab: Tab之间进行切换,这个要配合Taro的导航栏一起使用,三端都支持的(小程序、H5、React Native)

    • navigateBack: 返回上一级页面,这个在小程序中常使用,三端都支持的(小程序、H5、React Native)

    • relaunch:关闭所有额面,打开到应用内某个页面。三端都支持的(小程序、H5、React Native)

    • getCurrentPages:获取当前页面信息所用,这个H5是不支持的

    这些API都和微信小程序中的语法类似。

    例如现在想要实现的功能是从博客页面blog.jsx跳转回首页index.jsx

    首先在blog.jsx引入Taro(实现路由跳转必需)和按钮组件

    import Taro from '@tarojs/taro'
    import { View , Text , Button } from '@tarojs/components'
    

    接着直接在function中声明跳转的方法:

    const gotoIndex=()=>{
    	Taro.navigateTo({url:'/pages/index/index'})
    }
    

    最后绑定到按钮上:

    <Button onClick={gotoIndex}>我要去Index页面</Button>
    

    全部代码:

    import React from 'react'
    import Taro from '@tarojs/taro'
    import { View , Text , Button } from '@tarojs/components'
    
    function Blog(){
    
        const gotoIndex=()=>{
            Taro.navigateTo({
                url:'/pages/index/index'
            })
        }
    
        return (
            <View>
                <Text>Blog Page</Text>
                <Button onClick={gotoIndex}>我要去Index页面</Button>
            </View>
        )
    }
    export default Blog
    

    这样就实现了路由的跳转

    7.Taro路由参数的传递和接收

    首先在blog.jsx中定义一个数据blogTitle

    const [blogTitle,setBlogTitle] = useState('JSPan---Taro教程')
    

    然后在路由跳转处向跳转页面传递参数

    Taro.navigateTo({
    	url:'/pages/index/index?blogTitle=' + blogTitle //这里采用字符串拼接的方式传递参数
    })
    

    跳转页(接收参数页面)

    import React, { useState,useEffect } from 'react' //引入useEffect
    ...
    const [blogTitle,setBlogTitle] = useState('') //同样声明一个数据用于接收传递过来的参数
    ...
    useEffect(()=>{
    	setBlogTitle(Taro.Current.router.params.blogTitle)
    },[])
    ...
    return ( 
        <View>
            <Text>{userName}</Text>
            <Child username={userName}></Child>
            <View>{blogTitle}</View>
        </View>
    )
    

    传递参数:url:'路由地址?参数键=' + 参数值,如果碰到多个参数中间用&连接即可。例如url: '/pages/index/index?blogTitle=' + blogTitle +'&introduce=' + introduce

    接收参数:Taro.Current.router.params.键值

    8.Taro静态资源的引入

    1.引入JS资源

    /src目录下,新建一个/tools文件夹,然后在文件夹下边建立一个index.js文件,随便写两个方法并暴露出去:

    export function xiedajiao(){
        console.log('我是谢大脚')
    }
    
    export function liuying(){
        console.log('我是刘英')
    }
    

    加入要在blog.jsx中引入使用这两个方法:

    import { xiedajiao , liuying } from '../../tools'
    
    function Blog(){
    ...
    	useEffect(()=>{
            xiedajiao();
            liuying();
        },[])
    }
    

    引入这两个方法的时候,不能写import tools from `../../tools,因为你写的工具类/tools/index.js并不是有一个类,而是两个单独的方法。

    2.引入图片资源

    通常的图片引入方法是设置Image标签的src属性,例如:

    <Image src="../../static/newbbd0001.jpg" width="100px" height="100px" />
    

    这种方式是没办法引入成功的,因为我们的程序最终是要通过Taro编译器进行编译的,编译后的文件目录会进行改变,你所引用的图片就会失效。

    正确的引入方式是先用import进行引入,然后再使用src属性:

    import reactimg from '../../static/timg.jpg'
    ...
    <View>
        <Image src={reactimg}></Image>
    </View>
    

    另外还有一种方式就是:

    <Image src={require('../../static/timg.jpg')}></Image>
    

    9.Taro列表渲染和三元运算符

    1.列表渲染

    先在blog.jsx中声明一个数组对象:

    const girls = [
        {id:1,name:'谢大脚'},
        {id:2,name:'刘英'},
        {id:3,name:'王小蒙'},
        {id:4,name:x'香秀'}
    ]
    

    然后在return中渲染出列表:

    { 
    	girls.map((item,index)=>{
            return (
            	<View key={index}>{item.id}:{item.name}</View>
            )
        }) 
    }
    

    2.在jsx中使用逻辑判断(使用三元运算符)

    错误示例

    const zhujueNum = 1
    ...
    <view>
        {
            if(zhujueNum===1){
                return ('玉田')
            }else{
                return('刘能')
            }
        }
    </view>
    

    Taro中,不能使用if...else...

    正确示例

    // 使用三元运算符
    <view>
    	男主角是:{zhujueNum==1?'玉田':'刘能'}
    </view>
    

    或者

    // 使用短路运算符
    <view>
        男主角是:{zhujueNum==1 && '玉田' || '刘能'}
    </view>
    

    10.Taro请求远程数据

    Taro请求远程数据用到的方法是Taro.request获取远程接口数据,并渲染到页面上。

    1.获取数据

    const testHandler= ()=>{
        Taro.request({
            url:'https://apiblog.jspang.com/default/getArticleList'
        }).then(res=>{
            console.log(res.data)
        })
    }
    ...
    <Button onClick={testHandler}>获取接口数据</Button>
    

    2.渲染到页面上

    const  [articleList,setArticleList] = useState([])
    ...
    const testHandler= ()=>{
            Taro.request({
                url:'https://apiblog.jspang.com/default/getArticleList'
            }).then(res=>{
                console.log(res.data)
                setArticleList(res.data.list) //将获取到的接口数据赋值给变量articleList
            })
        }
    ...
    // 渲染到页面
    {
        articleList.map((item,index)=>{
        	return (<View key={index}>- {item.title} </View>)
        })
    }
    

    })
    }

    获取接口数据

    
    #### 2.渲染到页面上
    
    ```jsx
    const  [articleList,setArticleList] = useState([])
    ...
    const testHandler= ()=>{
            Taro.request({
                url:'https://apiblog.jspang.com/default/getArticleList'
            }).then(res=>{
                console.log(res.data)
                setArticleList(res.data.list) //将获取到的接口数据赋值给变量articleList
            })
        }
    ...
    // 渲染到页面
    {
        articleList.map((item,index)=>{
        	return (<View key={index}>- {item.title} </View>)
        })
    }
    
    展开全文
  • Taro基础教程

    2021-06-10 16:30:33
    页面跳转 1).Taro.switchTab(option):跳转到tabBar页面,并关闭其他所有非tabBar页面 例子: Taro.switchTab({ url: ‘/pages/page/name’ }) 支持:全部 2).Taro.reLaunch(option):关闭所有页面,打开到应用内的...

    基础使用

    这个是目录结构对应的作用

    ├── babel.config.js # Babel 配置
    ├── .eslintrc.js # ESLint 配置
    ├── config # 编译配置目录
    │ ├── dev.js # 开发模式配置
    │ ├── index.js # 默认配置
    │ └── prod.js # 生产模式配置
    ├── package.json # Node.js manifest
    ├── dist # 打包目录
    ├── project.config.json # 小程序项目配置
    ├── src # 源码目录
    │ ├── app.config.js # 全局配置
    │ ├── app.css # 全局 CSS
    │ ├── app.js # 入口组件
    │ ├── index.html # H5 入口 HTML
    │ └── pages # 页面组件
    │ └── index
    │ ├── index.config.js # 页面配置
    │ ├── index.css # 页面 CSS
    │ └── index.jsx # 页面组件,如果是 Vue 项目,此文件为 index.vue

    使用快捷键来创建文件 创建好里面的东西会自动生成

    taro create --name mine // mine是文件名
    

    在这里插入图片描述

    • 配置顶部导航 index.config.js
    export default {
      navigationBarTitleText: '首页'
    }
    
    

    创建公共组件

    我们在pages文件夹下创建一个文件夹

    components
    

    在这里插入图片描述
    这个就是他的组件,里面的公共组件可以写在这个文件夹下

    jsx简介

    这个就相当于HTML 写标签的一些东西的撒
    在这里插入图片描述

    
    import Taro, { Component } from 'react'//因为要使用taro这边是引入进来
    import { View, Text } from '@tarojs/components'//这边是使用taro对应的标签
    import './index.scss'//这边是使用对应的样式
    
    export default class Index extends Component {}//这边是要继承对应的文件
    

    app.config.js

    app.config.js这个文件是全局配置文件
    没有手动创建 与src同级目录

    export default {
      pages: [
        'pages/index/index'
      ],
      window: {
        backgroundTextStyle: 'light',
        navigationBarBackgroundColor: '#fff',
        navigationBarTitleText: 'WeChat',
        navigationBarTextStyle: 'black'
      }
    }
    
    

    在这里插入图片描述

    每次你生成的文件要在这写下
    在这里插入图片描述

    • index.jsx
      这个文件内需要引入react 当然了 如果你是命令创建会自动生成好给你
    import React, { Component } from 'react'
    
    

    使用显示隐藏效果(相当于v-if else)

    在这里插入图片描述

    组件库

    https://taro-docs.jd.com/taro/docs/components-desc

    import { View, Text } from '@tarojs/components'//这个是要使用的时候把需要的引入过来
    

    小程序编译出现bug

    Error: 未找到入口 sitemap.json 文件,或者文件读取失败,请检查后重新编译。
    解决是

    • 在src目录下添加sitemap.json。
    
    {
        "desc": "关于本文件的更多信息,请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
        "rules": [{
          "action": "allow",
          "page": "*"
        }]
      }
    
    • 配置文件下修改配置:【复制开发过程的sitemap.json文件到dist下】

    在这里插入图片描述

    • from:src/sitemap.json,to:src/sitemap.json
      {
            from:`src/sitemap.json`,to:`src/sitemap.json`
          }
    
    • 修改之后小程序目录结构查看

    在这里插入图片描述

    静态资源的引入

    • 说明:在Taro中可以像使用webpack那样自由地引用静态资源,而且不需要安装任何Loaders。
    • 1.引入css文件
    import './css/path/name.css'
    
    • 2.引入scss文件
    import './css/path/name.scss'
    
    • 3.引入js文件
    import { functionName } from './js/path/name.js';
    
    import defaultExportName from './js/path/name.js';
    
    • 4.引用图片、音频、字体等文件

      第一步先引入图片
      
    import Taro, { Component } from '@tarojs/taro'
    
    import { View, Image } from '@tarojs/components'
    
       4.1定义变量引入
    
    import namedPng from '../../images/path/named.png'
    
    // 使用
    
    <Image src={namedPng} />
    
    4.2本地资源图片引入
    
    <Image className="unit-info-tax-tip" src=
    {require('../../../../images/icon_03.png')} />
    
    • 5.引用JSON文件
    import namedJson from '../../json/path/named.json';
    
    //使用
    
    console.log(namedJson.x)
    

    项目目录结构介绍

    ├── dist 编译结果目录

    ├── config 配置目录

    | ├── dev.js 开发时配置

    | ├── index.js 默认配置

    | └── prod.js 打包时配置

    ├── src 源码目录

    | ├── pages 页面文件目录

    | | ├── index index 页面目录

    | | | ├── index.js index 页面逻辑

    | | | └── index.css index 页面样式

    | ├── app.css 项目总通用样式

    | └── app.js 项目入口文件

    └── package.json

    项目配置

    说明:各类小程序平台均有自己的项目配置文件。
    
    1.微信project.config.json
    
    2.百度project.swan.json
    
    3.头条project.config.json,大部分字段与微信一样
    
    4.支付宝,暂无
    
    5.快应用 manifest.json
    
    6.QQ,暂无
    
    为了能不适配到各个小程序平台,满足不同小程序配置文件不同的情况,在Taro支持为各个小程序平台添加不同的项目配置文件。
    
    通过Taro模板创建的项目都会默认用语project.config.json这一项目配置文件,这个文件只能用于微信小程序,若要兼容到其他小程序平台,请按对## 标题应规则来增加相应平台的配置文件。
    
    微信小程序=》project.config.json
    
    百度智能小程序=》project.swan.json
    
    头条小程序=》project.tt.json
    
    快应用=》project.quickapp.json
    
    qq小程序=》project.qq.json
    
    

    设计稿与尺寸单位

    说明:在Taro中尺寸单位建议使用px、百分比%,Taro默认会对所有单位进行转换。在Taro中书写尺寸按照1:1的关系来进行书写,即从设计稿上量的长度100px,那么尺寸书写就是100px,当转成微信小程序的时候,尺寸将默认转换为100rpx,当转成H5时将默认转换为rem为单位的值。如果设置不转换,你可以在px单位中增加一个大写字母,例如Px或者PX这样。

    1.常用情况

    Taro默认以750px作文换算尺寸标准,如果设计稿不是以750px为标准,则需要在项目配置config/index.js中进行设置,例如设计稿尺寸是640px,则需要修改项目配置config/index.js中的designWidth配置为640

    在这里插入图片描述

    2.支持尺寸

    目前Taro支持750、640、828三种尺寸设计稿,换算规则:

    3.配置中设置其他尺寸

    如果你的设计稿是375,不在以上三种之中,那么你需要把designWidth配置为375,同时在DEVICE_RATIO中添加如下换算规则:

    4.JS中书写行内样式无法渲染

    在Taro中提供了API Taro.pxTransform来做运行时的尺寸转换

    Taro.pxTransform(10) // 小程序:rpx, H5: rem

    页面跳转及路由传参

    1.页面跳转

    1).Taro.switchTab(option):跳转到tabBar页面,并关闭其他所有非tabBar页面

    例子:

    Taro.switchTab({
    url: ‘/pages/page/name’

    })

    支持:全部

    2).Taro.reLaunch(option):关闭所有页面,打开到应用内的某个页面【全部支持】

    3).Taro.redirectTo(option):关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到tabbar页面。【全部支持】

    4).Taro.navigateTo(option):保留当前页面,跳转到应用内的某个页面。但是不能跳到tabbar页面。使用Taro.navigateBack可以返回到原页面。小程序中页面栈最多十层。【全部支持】

    5).Taro.navigateBack(option):关闭当前页面,返回上一页面或多级页面。可通过getCurrentPages获取当前的页面栈,决定需要返回几层。【全部支持】

    2.跳转参数

    import { getCurrentInstance } from ‘@tarojs/taro’

    让项目在h5与小程序端同时跑起来

    最初刚开始的话只能在运行窗口输入单个命令
    ,不能同时输入,
    那么我们如何让他同时可以输入,同时可以查看呢

    多端同步调试
    在config->index.js里面写下如下所示的话

     outputRoot: `dist/${process.env.TARO_ENV}`,
    

    在这里插入图片描述

    请添加图片描述
    在这里插入图片描述

    展开全文
  • taro入门教程(一)

    2020-08-12 17:32:38
    taro入门教程 安装cli,初始化项目 # taro $ taro update self [version] # npm npm i -g @tarojs/cli@2.2.11 # yarn yarn global add @tarojs/cli@2.2.11 使用2.x版本开发小程序,初始化项目 $ taro init myApp...

    taro入门教程


    安装cli, 初始化项目

    # taro
    $ taro update self [version]
    # npm
    npm i -g @tarojs/cli@2.2.11
    # yarn
    yarn global add @tarojs/cli@2.2.11

    使用2.x版本开发小程序, 初始化项目

    $ taro init myApp
    
    npm 5.2+ 也可在不全局安装的情况下使用 npx 创建模板项目
    $ npx @tarojs/cli init myApp
    
    
    使用sass的话, 运行错误请安装
    $ npm install -g mirror-config-china

    初始时选择的ts, css预处理, 项目模板自己看情况, 模板用默认就可以了

    在使用 Taro 进行多端开发中,请确保 Taro CLI 的版本与你项目的依赖版本一致,否则可能会出现编译错误或者运行时错误。


    微信小程序

    需要自行下载并打开微信开发者工具,然后选择项目根目录进行预览。

    # 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

    去根目录的project.config.json文件设置小程序的appid, 使用微信开发者工具打开目录下dist即可预览编译出来的代码


    生命周期

    // app.js  page页面
    class Xxxx extends Component {
    
      // 对应小程序的个个json配置--项目配置, 页面配置
      config = {
        pages: [
          'pages/index/index'
        ],
        window: {
          backgroundTextStyle: 'light',
          navigationBarBackgroundColor: '#fff',
          navigationBarTitleText: 'WeChat',
          navigationBarTextStyle: 'black'
        }
      }
    
      // 钩子函数没有option传参 使用 this.$router.params 替代
      componentWillMount () {
        console.log('onLaunch:', this.$router.params)
      }
    
      componentDidMount () {}
        
      // 对应app.js, page的onShow函数
      componentDidShow () {
        console.log('onShow')
      }
      
      // 页面卸载时触发,如 redirectTo 或 navigateBack 到其他页面时
      componentWillUnmount () { }
      
      // onHide  页面隐藏/切入后台时触发
      componentDidHide () {}
    
      render () {
        return (
          <Index />
        )
      }
    }
    

     

    展开全文
  • 来源 |https://segmentfault.com/a/1190000039033249简介Taro 是一个遵循 React 语法规范的开放式跨端跨框架解决方案,支持使用 Reac...

    来源 | https://segmentfault.com/a/1190000039033249

    简介

    Taro 是一个遵循 React 语法规范的开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5 等应用,内置了UI组件,还有物料市场,只编写一套代码就能够适配到多端。

    Tara 遵循 React 语法,集成的是 Nerv 框架。

    Nerv是一款基于virtual dom技术的类React UI框架,它基于React标准,拥有和React一致的API与生命周期。得益于与React保持一致API的特性,Nerv可以无缝兼容到React的相关生态,例如react-routerreact-redux,以及使用React开发的组件,所以对于旧的React项目,可以无痛地将React替换成Nerv。

    环境准备

    Taro 仅提供一种开发方式:安装 Taro 命令行工具(Taro CLI)进行开发。
    在终端输入命令 npm i -g @tarojs/cli 安装 Taro CLI。
    Taro CLI 依赖于 Node.js 环境(>=8.0.0)。

    框架

    项目目录结构

    编译配置

    编译配置存放于项目根目录下 config 目录中,包含三个文件:

    index.js: 通用配置
    dev.js : 开发环境配置
    prod.js : 生产环境配置

    入口文件

    每一个 Taro 应用都需要一个入口组件用来注册应用,入口文件默认是 src/app.js。

    页面文件

    页面组件是每一项路由将会渲染的页面,Taro 的页面默认放在 src/pages 中,每一个 Taro 项目至少有一个页面组件。页面创建好后如果需要渲染展示,需要在项目入口文件 app.config.js 的 pages 数组中进行指定。

    文件配置

    全局配置:可以通过 app.config.js 的文件进行全局配置, 配置页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

    一个简单的全局配置如下:

    // app.config.js
    export default {
      pages: [
        'pages/index/index',
        'pages/list/index'
      ],
      window: {
        backgroundTextStyle: 'light',
        navigationBarBackgroundColor: '#fff',
      }
    }
    
    未指定 entryPagePath 时,数组的第一项代表初始页面。
    新增/减少页面,都需要对 pages 数组进行修改。

    页面配置:每一个页面组件(例如 index.js)也会有一个页面配置(例如 index.config.js),可以在页面配置文件中设置页面的导航栏、背景颜色等参数。

    一个最简单的页面配置如下:

    // ./pages/index/index.jsx
    export default {
      navigationBarTitleText: '首页'
    }
    

    配置规范基于微信小程序的全局配置进行制定,所有平台进行统一。在配置文件中,Taro 并不关心框架的区别,Taro CLI 会直接在编译时在 Node.js 环境直接执行全局配置的代码,并把 export default 导出的对象序列化为一个 JSON 文件。

    因此,我们必须保证配置文件是在 Node.js 环境中是可以执行的,不能使用一些在 H5 环境或小程序环境才能运行的包或者代码,否则编译将会失败。

    项目配置

    为了能够适配到各个小程序平台,满足不同小程序平台配置文件不同的情况, Taro 支持为各个小程序平台添加不同的项目配置文件。

    通过 Taro 模板创建的项目都会默认拥有 project.config.json 文件,若要兼容到其他小程序平台,按如下对应规则来增加相应平台的配置文件,其配置与各自小程序平台要求的一致。

    小程序平台配置文件说明
    微信小程序project.config.json
    百度小程序project.swan.json
    头条小程序project.tt.json
    快应用project.quickapp.json配置文件中请勿配置 router 与 display,这两个配置将由 Taro 生成
    QQ小程序project.qq.json

    组件生命周期与事件处理函数

    以Hooks为例:

    css 工具

    在 Taro 中,我们可以自由地使用 CSS 预处理器和后处理器,使用的方法也非常简单,只要在编译配置添加相关的插件即可:

    // config/index.js
    const config = {
      designWidth: 750,
      sourceRoot: 'src',
      outputRoot: 'dist',
      plugins: [
        '@tarojs/plugin-sass', // 使用 Sass
        // '@tarojs/plugin-less', // 使用 Less
        // '@tarojs/plugin-stylus', // 使用 Stylus
      ],
      defineConstants: {},
      mini: {},
      h5: {}
    }
    
    
    module.exports = function (merge) {
      if (process.env.NODE_ENV === 'development') {
        return merge({}, config, require('./dev'))
      }
      return merge({}, config, require('./prod'))
    }
    

    除了 CSS 预处理器之外,Taro 还支持 CSS Modules 和 CSS-in-JS。通过 自定义编译 ,还可以支持更多 CSS 工具。

    路由功能

    在 Taro 中,路由功能是默认自带的,不需要开发者进行额外的路由配置。

    入口组件和页面组件是通过配置文件来交互的,我们只需要在入口文件的 config 配置中指定好 pages,然后就可以在代码中通过 Taro 提供的 API 来跳转到目的页面,例如:

    // 跳转到目的页面,打开新页面
    Taro.navigateTo({
      url: '/pages/page/path/name'
    })
    
    
    // 跳转到目的页面,在当前页面打开
    Taro.redirectTo({
      url: '/pages/page/path/name'
    })
    

    尺寸单位

    在 Taro 中, 尺寸单位建议使用px, %,Taro 默认会对所有单位进行转换。当转成微信小程序的时候,尺寸单位将默认转换以 rpx为单位,当转成 H5 时将默认转换以 rem 为单位。

    如果你希望部分 px 单位不被转换成 rpx 或者 rem ,最简单的做法就是在 px 单位中增加一个大写字母,例如 Px 或者 PX 这样,则会被转换插件忽略。

    Taro 默认以 750px 作为换算尺寸标准,如果设计稿不是以 750px 为标准,则需要在项目配置 config/index.js 中进行设置,例如设计稿尺寸是 640px,则需要修改项目配置 config/index.js 中的 designWidth 配置为 640:

    const config = {
      designWidth: 640,
    }
    

    目前 Taro 支持 750、 640 、 828 三种尺寸设计稿,他们的换算规则如下:

    const DEVICE_RATIO = {
      '640': 2.34 / 2,
      '750': 1,
      '828': 1.81 / 2
    }
    

    多端开发

    由于不同的平台之间还是存在一些无法消除的差异,所以为了更好的实现跨平台开发,Taro 中提供了两种解决方案:

    1. 内置环境变量:process.env.TARO_ENV

    process.env.TARO_ENV 用于判断当前编译类型,目前有 weapp / swan / alipay / h5 / rn / tt / qq / quickapp 八个取值。通过这个变量来写对应一些不同环境下的代码,在编译时会将不属于当前编译类型的代码去掉,只保留当前编译类型下的代码。

    render () {
      return (
        <View>
          {process.env.TARO_ENV === 'weapp' && <ScrollViewWeapp />}
          {process.env.TARO_ENV === 'h5' && <ScrollViewH5 />}
        </View>
      )
    }
    

    缺点:虽然可以解决大部分跨端的问题,但是会让代码中充斥着逻辑判断,影响代码的可维护性,而且也让代码变得愈发丑陋。

    2. 统一接口的多端文件

    针对一项功能,如果多个端之间都有差异,开发者可以通过将文件修改成 原文件名.端类型 的命名形式实现多端文件。Taro 在编译时,会根据编译平台类型,将加载的文件变更为带有对应端类型文件名的文件,从而达到不同的端加载对应文件的目的。

    使用要点

    • 不同端的对应文件一定要对外暴露统一接口,统一调用方式,接受一致的参数

    • 最好有一个平台无关的默认文件,这样在使用 ts 的时候也不会出现报错

    • 引用文件的时候,只需要写默认文件名,不用带文件后缀

    多端文件简单的例子:

    1、多端组件

    // 1. 定义多端组件
    -test
    --test.js // Test组件默认的形式,编译到微信小程序和H5之外的端
    --test.h5.js // Test 组件的 H5 版本
    --test.weapp.js // Test 组件的 微信小程序 版本
    
    
    // 2. 引用组件
    import Test from '../../components/test';
    
    
    <Test argA={1} argA={2} />
    

    2、多端方法

    // 1.定义多端方法
    -utils
    --set_title.js
    --set_title.h5.js
    --set_title.weapp.js
    
    
    // 2. 使用方法
    import setTitle from '../utils/set_title'
    
    
    setTitle('页面标题')
    

    跨平台组件库

    相对于我们熟悉的 div、span 元素而言,在 Taro 中我们要全部使用跨平台组件进行开发。

    Taro 以 微信小程序组件库 为标准,结合 jsx 语法规范,定制了一套自己的组件库规范。基于这个原则,在小程序端,可以使用所有的小程序原生组件,在其他端,Taro提供了对应的组件库实现:

    • H5 端: @tarojs/components,需要引入的默认标准组件库

    • RN 端: @tarojs/components-rn

    开发规范

    • 首字母大写与驼峰式命名

    • 组件的事件传递都要以 on 开头

    组件种类

    使用

    在使用时,我们需要先从 Taro 标准组件库 @tarojs/components 引用组件,再进行使用。

    import Taro, { Component } from '@tarojs/taro';
    // 使用 <View />、 <Text /> 组件
    import { View, Text } from '@tarojs/components';
    
    
    export default class C extends Component {
      render () {
        return (
          <View className='c'>
            <Text>c component</Text>
          </View>
        )
      }
    }
    

    Taro UI

    Taro UI 是一款基于 Taro 框架开发的多端 UI 组件库。

    特性

    • 基于 Taro 开发 UI 组件

    • 一套组件可以在 微信小程序,支付宝小程序,百度小程序,H5 多端适配运行(ReactNative 端暂不支持)

    • 提供友好的 API,可灵活的使用组件

    组件种类

    使用

    1. 引入组件样式

    引入组件样式有三种方式:

    全局引入(JS中): 在入口文件app.js中引入 taro-ui 所有的样式

    import 'taro-ui/dist/style/index.scss' // 引入组件样式
    

    全局引入(CSS中): 在 app.scss 样式文件中 import 组件样式并按照文档说明使用

    @import "~taro-ui/dist/style/index.scss"; // 引入组件样式
    

    按需引入: 在页面样式或全局样式中 import 需要的组件样式

    @import "~taro-ui/dist/style/components/button.scss"; // 引入所需的组件样式
    

    2. 引入所需组件

    // index.js
    import { AtButton } from 'taro-ui';
    

    一个使用AtButton的完整例子:

    // src/pages/index/index.tsx
    import Taro, { Component, Config } from '@tarojs/taro'
    import { View } from '@tarojs/components'
    import { AtButton } from 'taro-ui'
    import './index.scss';
    
    
    export default class Index extends Component {
      config: Config = {
        navigationBarTitleText: '首页'
      }
    
    
      render () {
        return (
          <View className='index'>
             <AtButton type='primary'>按钮文案</AtButton>
          </View>
        )
      }
    }
    
    /* app.scss*/
    @import "~taro-ui/dist/style/index.scss";
    

    自定义主题

    Taro UI 目前只有一套默认的主题配色,为满足业务和品牌上多样化的视觉需求,UI 库支持一定程度的样式定制。(请确保微信基础库版本在 v2.2.3 以上)

    目前支持三种自定义主题的方式,可以进行不同程度的样式自定义:

    • SCSS 变量覆盖

    • globalClass 全局样式类

    • 配置 customStyle 属性(仅有部分组件支持,请查看组件文档,不建议使用)

    SCSS 主题变量覆盖

    Taro UI 的组件样式是使用 SCSS 编写的,如果你的项目中也使用了 SCSS,那么可以直接在项目中改变 Taro UI 的样式变量。

    1. 覆写的变量,需要在引入 taro ui 默认样式之前定义,默认主题变量命名

    2. Slider, Switch 组件暂时不支持 SCSS 变量覆盖的方式自定义主题。

    1、在app.scss文件写入以下内容:

    // app.scss
    $color-brand: #6190E8; /* 改变主题变量 */
    
    
    @import "~taro-ui/dist/style/index.scss"; /* 引入 Taro UI 默认样式 */
    

    2、在app.js中引入以上的样式文件即可

    // app.js
    import './app.scss';

    改变主题变量前后对比图:

    全局样式类

    全局样式类是微信小程序定义的一套用于修改组件内部样式的方案。如果希望组件外样式类能够影响组件内部,可以在组件构造器中的 options.addGlobalClass 字段设置为 true(Taro UI 的组件均开启了此特性)。

    addGlobalClass 只对 Page 上的 class 起作用。换言之,如果在自定义的组件中使用 taro-ui,是无法在自定义组件内部通过 全局样式类 的方式去更改组件样式的。

    当开放了全局样式类,存在外部样式无意间污染组件样式的风险。由于 Taro UI 的组件样式采用 BEM 的命名方式,从一定程度上避免了样式污染的问题。
    /* page/index/index.js */
    import Taro from '@tarojs/taro'
    import { AtButton } from 'taro-ui'
    import "./index.scss"
    
    
    export default IndexPage extends Taro.Component {  
      render () {
        return <AtButton className='my-button' />
      }
    }
    
    
    /**
     * page/index/index.scss 必须在 Page 上
     * .at-button 为组件内部类名,只需要写一样的类名去覆盖即可
     **/
    .my-button .at-button {
      color: red;
    }
    

    设计思想与编译原理

    在 Taro 中先按照 Nerv语法编写一份源代码,然后通过编译工具将源代码编译成对应的代码。

    编译工具采用的是编译原理的思想,所谓编译原理,就是一个对输入的源代码进行语法分析,语法树构建,随后对语法树进行转换操作再解析生成目标代码的过程。

    Taro标准:抹平多端差异

    基于编译原理,可以将 Taro 源码编译成不同端上可以运行的代码了,但是这对于实现多端开发还是远远不够。不同的平台都有自己的特性,每一个平台都不尽相同,这些差异主要体现在不同的组件标准与不同的 API 标准以及不同的运行机制上。

    以小程序和 Web 端为例:

    可以看出小程序和 Web 端上组件标准与 API 标准有很大差异,这些差异仅仅通过代码编译手段是无法抹平的,例如不能直接在编译时将小程序的 <view /> 直接编译成 <div />,因为他们虽然看上去有些类似,但是他们的组件属性有很大不同。

    仅仅依靠代码编译,无法做到一致,同理,众多 API 也面临一样的情况。针对这样的情况,Taro 采用了定制一套运行时标准来抹平不同平台之间的差异。

    这一套标准主要以三个部分组成,包括标准运行时框架、标准基础组件库、标准端能力 API,其中运行时框架和 API 对应 @taro/taro,组件库对应 @tarojs/components,通过在不同端实现这些标准,从而达到去差异化的目的。

    taro build命令

    taro build 命令是整个 taro 项目的灵魂和核心,主要负责 多端代码编译(h5,小程序,React Native等)。不同的平台,编译传参不同,编译规则不同。

    // package.json 
    "scripts": {
        // 微信小程序 weapp
        "build:weapp": "taro build --type weapp",
        // h5
        "build:h5": "taro build --type h5",
        // 支付宝小程序 alipay
        "build:alipay": "taro build --type alipay",
        // ....
      },

    编译工作流与抽象语法树(AST)

    一般来说,将一种结构化语言的代码编译成另一种类似的结构化语言的代码包括以下几个步骤:

    首先是 parse,将代码 解析(Parse)成 抽象语法树(Abstract Syntex Tree),然后对抽象语法树 AST 进行 遍历(traverse)和 替换(replace)(可以类比 DOM 树的操作),最后是 生成(generate),根据新的 AST 生成编译后的代码。

    Babel模块

    Babel 是一个通用的多功能的 JavaScript编译器,更确切地说是源码到源码的编译器,通常也叫做转换编译器(transpiler)。Taro 项目的代码编译部分就是基于 Babel 的以下模块实现:

    • babylon Babylon 是 Babel 的解析器。最初是 从Acorn项目fork出来的。Acorn非常快,易于使用,并且针对非标准特性(以及那些未来的标准特性) 设计了一个基于插件的架构。

    • babel-traverse Babel Traverse(遍历)模块维护了整棵树的状态,并且负责替换、移除和添加节点。

    • babel-types Babel Types模块是一个用于 AST 节点的 Lodash 式工具库, 它包含了构造、验证以及变换 AST 节点的方法。该工具库包含考虑周到的工具方法,对编写处理AST逻辑非常有用。

    • babel-generator Babel Generator模块是 Babel 的代码生成器,它读取AST并将其转换为代码和源码映射(sourcemaps)。

    • babel-template babel-template 是另一个虽然很小但却非常有用的模块。它能让你编写字符串形式且带有占位符的代码来代替手动编码, 尤其是生成的大规模 AST的时候。在计算机科学中,这种能力被称为准引用(quasiquotes)。

    本文完〜

    展开全文
  • Taro,快速上手教程

    2020-05-11 09:58:25
    使用 Taro,我们可以只书写一套代码,再通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信小程序、H5、RN 等)运行的代码。 官网:https://taro.aotu.io/ React 语法风格 Taro 遵循 React 语法规范,...
  • Taro 是由京东·凹凸实验室(aotu.io)倾力打造的 多端开发解决方案,在本篇文章中主要介绍了使用taro搭建微信小程序的一些步骤和一个简单demo的实现。 安装 先全局安装@tarojs/cli $ npm install -g @tarojs/...
  • Taro的推出适应了潮流及趋势:一套代码运行在多种小程序/H5/React Native上,React式的代码风格便于学习,详实的项目开发过程带你了解Taro开发。一套代码,通过Taro编译工具运行在各个客户端,即便出现新兴框架,...
  • 小程序框架taro使用详细教程

    千次阅读 2019-09-07 10:06:23
    1,安装node环境(node必须是8.0.0以上版本) 2.cli工具的安装 $ npm install -g @tarojs/cli 如果有sass相关的安装错误,那么执行以下的命令 ----npm install -g mirror-config-china ...taro init myApp(...
  • Taro 3 中可以使用完整的 React/Nerv 开发体验,具体请参考基础教程——React 代码示例 import React, { Component } from 'react' import { View, Text } from '@tarojs/components' export default class ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 714
精华内容 285
关键字:

taro教程