基础使用

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

├── 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}`,