一.什么是taro？

Taro 是一套遵循 React 语法规范的 多端开发 解决方案。通过一套react的代码，就可以分别编译出微信小程序、H5、支付宝小程序。。。
我根据taro redux模板创建了一套自己写的H5种子项目，大家可以一起学习，项目地址：https://github.com/WangxinsHub/taro-seed

二.如何安装taro？

1.首先全局安装taro命令行：

$ npm install -g @tarojs/cli

$ yarn global add @tarojs/cli

2.创建taro种子项目

$ taro init myApp

创建redux模板

3.编译taro，在创建的种子项目中，package文件如下：


"scripts": {

"build:weapp": "taro build --type weapp",//打包小程序

"build:h5": "taro build --type h5", //打包H5

"dev:weapp": "npm run build:weapp -- --watch",//编译小程序

"dev:h5": "npm run build:h5 -- --watch",//编译H5

},

三、开发前注意

小程序工具：

需要设置关闭 ES6 转 ES5 功能，开启可能报错

需要设置关闭上传代码时样式自动补全，开启可能报错

需要设置关闭代码压缩上传，开启可能报错

四、项目说明

taro推荐目录.png

我开发中的目录.png

1.dist是编译(dev/build)结果目录

2.config配置目录

index.js(默认配置）

const path  = require('path')
const config = {
  projectName: 'Taro-time-bus',
  date: '2019-1-8',
  designWidth: 750,//设计稿以 iPhone6 750px 作为设计尺寸标准。
  //目前 Taro 支持 750、 640 、 828 三种尺寸设计稿，他们的换算规则如下：
  deviceRatio: {
    '640': 2.34 / 2,
    '750': 1,
    '828': 1.81 / 2
  },
  // 项目源码目录
  sourceRoot: 'src',
  // 项目产出目录
  outputRoot: 'dist',
  // 通用插件配置
  plugins: {
    //plugins 用来设置一些各个端通用的编译过程配置，例如 babel 配置，JS/CSS 压缩配置等。
    babel: {
      sourceMap: true,
      presets: ['env'],
      plugins: ['transform-decorators-legacy', 'transform-class-properties', 'transform-object-rest-spread']
    }
    /*
    //设置打包过程中的 JS 代码压缩
    uglify: {
      enable: true,
      config: {
        // 配置项同 https://github.com/mishoo/UglifyJS2#minify-options
      }
    },
    //设置打包过程中的 CSS 代码压缩
    csso: {
      enable: true,
      config: {
        // 配置项同 https://github.com/css/csso#minifysource-options
      }
    }*/
  },
  // 全局变量设置
  defineConstants: {
    context:{
      iconPath:'xxx'
    }
  },
  alias: {
    '@components': path.resolve(__dirname,'../src/components'),
    '@icons': path.resolve(__dirname,'../src/icons'),
    '@src': path.resolve(__dirname,'../src/'),
    '@utils': path.resolve(__dirname, '..', 'src/utils')
  },
  weapp: {
    //小程序编译过程的相关配置。
    compile: {
      compressTemplate: true,//决定小程序打包时是否需要压缩 wxml
    },
    module: {
      postcss: {
        autoprefixer: {
          enable: true,
          config: {
            browsers: [
              'last 3 versions',
              'Android >= 4.1',
              'ios >= 8'
            ]
          }
        },
        pxtransform: {
          enable: true,
          config: {
            onePxTransform: true, //设置 1px 是否需要被转换
            unitPrecision: 5,//REM 单位允许的小数位。
            selectorBlackList: [],//黑名单里的选择器将会被忽略。
            replace: true,//直接替换而不是追加一条进行覆盖。
            mediaQuery: false,//允许媒体查询里的 px 单位转换
            minPixelValue: 0//设置一个可被转换的最小 px 值
          }
        },
        url: {
          enable: true,
          config: {
            limit: 10240 // 设定转换尺寸上限
          }
        },
        cssModules: {
          enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
          config: {
            namingPattern: 'module', // 转换模式，取值为 global/module
            generateScopedName: '[name]__[local]___[hash:base64:5]'
          }
        }
      }
    }
  },
  h5: {
    devServer: {
      port: 10086
    },
    publicPath: '/', //设置输出解析文件的目录。
    staticDirectory: 'static',//h5 编译后的静态文件目录。
    esnextModules: ['taro-ui'],//配置需要额外的编译的源码模块，比如taro-ui：
    miniCssExtractPluginOption: {
      filename: 'css/[name]/[hash].css',
      chunkFilename: 'css/[name]/[hash].css'
    },
    module: {
      postcss: {
        autoprefixer: {
          enable: true,
          config: {
            browsers: [
              'last 3 versions',
              'Android >= 4.1',
              'ios >= 8'
            ]
          }
        },
        cssModules: {
          enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
          config: {
            namingPattern: 'module', // 转换模式，取值为 global/module
            generateScopedName: '[name]__[local]___[hash:base64:5]'
          }
        }
      }
    }
  }
}

module.exports = function (merge) {
  if (process.env.NODE_ENV === 'development') {
    return merge({}, config, require('./dev'))
  }
  return merge({}, config, require('./prod'))
}

dev.js

module.exports = {
  env: {
    NODE_ENV: '"development"',
    API_HOSTNAME:JSON.stringify('https://appdev.ibuscloud.com'),//test环境地址
  },
  defineConstants: {
  },
  weapp: {
  },
  h5: {}
}

3.入口文件为 app.js

import '@tarojs/async-await'
import Taro, { Component } from '@tarojs/taro'
import { Provider } from '@tarojs/redux'
import 'taro-ui/dist/style/index.scss' // 全局引入一次即可

import Index from './pages/index'

import configStore from './store'

import './app.less'

// 如果需要在 h5 环境中开启 React Devtools
// 取消以下注释：
// if (process.env.NODE_ENV !== 'production' && process.env.TARO_ENV === 'h5')  {
//   require('nerv-devtools')
// }

const store = configStore()

class App extends Component {

  config = {
    pages: [
      'pages/index/index',
      'pages/search/index',
      'pages/lineDetail/index',
      'pages/page2/index'
    ],
    "permission": {
      "scope.userLocation": {
        "desc": "你的位置信息将用于小程序位置接口的效果展示"
      }
    },
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    }
  }

  componentDidMount () {}

  componentDidShow () {
    //获取用户位置，TODO:H5
    Taro.getLocation().then(data=>{
      console.log(data)
      const {latitude,longitude} = data ;
      Taro.setStorageSync('userLat', latitude);
      Taro.setStorageSync('userLng', longitude);
    })
  }

  componentDidHide () {}

  componentCatchError () {}

  componentDidCatchError () {}

  // 在 App 类中的 render() 函数没有实际作用
  // 请勿修改此函数
  render () {
    return (
      <Provider store={store}>
        <Index />
      </Provider>
    )
  }
}

Taro.render(<App />, document.getElementById('app'))

1️⃣其中config主要参考微信小程序的全局配置而来，在编译成小程序时，这一部分配置将会被抽离成 app.json，而编译成其他端，亦会有其他作用。
页面路由在此配置，页面背景色导航栏等也在此设置
2️⃣app.js的生命周期、页面与组件的生命周期：
而且由于入口文件继承自 Component 组件基类，它同样拥有组件生命周期，但因为入口文件的特殊性，他的生命周期并不完整，如下

image.png

3️⃣普通页面生命周期与component一致

image.png

小程序专有的方法：（H5中暂不支持）

image.png

4️⃣组件Taro 的组件同样是继承自 Component 组件基类，与页面类似，组件也必须包含一个 render 函数，返回 JSX 代码。比页面多了一个componentWillReceiveProps。

注意：组件的 constructor 与 render 提前调用，所以componentWillMount这个生命周期有一个滞后性，不可以直接在render中用路由得来的数据

render () {
  // 在 willMount 之前无法拿到路由参数
  const abc = this.$router.params.abc
  return <Custom adc={abc} />
}

❌

// 正确写法
componentWillMount () {
  const abc = this.$router.params.abc
  this.setState({
    abc
  })
}
render () {
  // 增加一个兼容判断
  return this.state.abc && <Custom adc={abc} />
}

✅
由于微信小程序里页面在 onLoad 时才能拿到页面的路由参数，而页面 onLoad 前组件都已经 attached 了。因此页面的 componentWillMount 可能会与预期不太一致。

五、开发中的问题

1.静态资源的引入

1️⃣通过ES6的import引用图片、js、等文件（暂不支持svg），而且不需要安装任何 loader。
2️⃣可以先上传到服务器，然后引用服务器的地址（在less中background用的多一点）

全局原始app.less 只会影响到页面级别的文件，组件的获取不到全局的样式
可以同过@import 让组件获得app.less全局样式

@import "../../app";

2.jsx的支持程度：

不能在包含 JSX 元素的 map 循环中使用 if 表达式
不能使用 Array#map 之外的方法操作 JSX 数组
[不能在 JSX 参数中使用匿名函数]（自 v1.2.9 开始支持注意：在各小程序端，使用匿名函数，尤其是在循环中使用匿名函数，比使用 bind 进行事件传参用更大的内存，速度也会更慢。）(https://github.com/NervJS/taro/blob/master/packages/eslint-plugin-taro/docs/no-anonymous-function-in-props.md)
暂不支持在 render() 之外的方法定义 JSX
不能在 JSX 参数中使用对象展开符

<View {...this.props} />
 
<View {...props} />
 
<Custom {...props} />

以上是错误写法

不支持无状态组件（必须return）

3.组件化 & props &state

1️⃣使用 PropTypes 检查类型

Greeting.propTypes = {
  name: PropTypes.string
};

2️⃣给组件设置 defaultProps

3️⃣组件传递函数属性名以 on 开头

4️⃣当组件传入jsx的时候必须用render开头，在小程序中其实是通过slot插槽来实现的，所以和this.props.children一样， this.props.children && this.props.children、this.props.children[0] 在 Taro 中都是非法的。且组合只能传入单个 JSX 元素，不能传入其它任何类型。当你需要进行一些条件判断或复杂逻辑操作的时候，可以使用一个 Block 元素包裹住，然后在 Block 元素的里面填充其它复杂的逻辑。

state：

5️⃣state this.state 和 props 一定是异步更新的，所以你不能在 setState 马上拿到 state 的值

6️⃣不要在 state 与 props 上用同名的字段，因为这些被字段在微信小程序中都会挂在 data 上
7️⃣尽量避免在 componentDidMount 中调用 this.setState 因为在 componentDidMount 中调用 this.setState 会导致触发更新（尽量避免，可以componentWillMount 中处理）
不要在 componentWillUpdate/componentDidUpdate/render 中调用 this.setState

5.事件

事件类型参照微信小程序https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

6.路由

1️⃣传参：

Taro.navigateTo({
  url: '/pages/page/path/name?id=2&type=test'
})

接收：this.$router.params

2️⃣预加载传参
在微信小程序中，从调用 Taro.navigateTo、Taro.redirectTo 或 Taro.switchTab 后，到页面触发 componentWillMount 会有一定延时。因此一些网络请求可以提前到发起跳转前一刻去请求。

image.png

传参：

this.$preload({
  x: 1,
  y: 2
})
Taro.navigateTo({ url: '/pages/B/B' })

（也能够绕过 componentWillMount 延时）

接收componentWillMount () {
  console.log('preload: ', this.$router.preload)
}

7异步编程以及接口请求

$ yarn add @tarojs/async-await
import '@tarojs/async-await'
异步dispatch，action.js:

import '@tarojs/async-await'
import {
  ADD,
  MINUS,
  ASYNC,
  ASYNC_BEFORE
} from './action-type';
import Http from '../../api/Server'
import Url from '../../api/url';

export const add = () => {
  return {
    type: ADD
  }
}
export const minus = () => {
  return {
    type: MINUS
  }
}

export const asyncAdd = (params) => {
  // 返回函数，异步dispatch
  return async dispatch => {
    try{
      dispatch({
        type: ASYNC_BEFORE,
      })
      let result = await Http.request('post',Url.lineRecommendQuery,params);
      // 如果不成功，则将不成功的信息打印出来
      if(result){
        if(!result.success) console.error(result.message);
        dispatch({
          type: ASYNC,
          response: result,
        })
      }
    }catch(err){
      console.error(err);
    }
  }
}

Http 请求工具类：api.js

import Taro from '@tarojs/taro'

class Http {
  constructor(){
    const HOSTNAME = process.env.API_HOSTNAME
    this.url={
    
   }
  }
  request(method = 'post', url, params) {
    console.log(process.env.TARO_ENV)
    Taro.showNavigationBarLoading();
    return new Promise((resolve, reject) => {
      Taro.request({
        url,
        method,
        data: params,
        header: {
          'Content-Type': 'application/x-www-form-urlencoded',
          'Accept': '*/*'
        }
      }).then(res => {
        Taro.hideNavigationBarLoading()
        resolve(typeof res.data === 'object' ? res.data : JSON.parse(res.data))
      }, err => {
        Taro.hideNavigationBarLoading()
        reject(err)
      })
    })
  }
}

export default new Http();

Taro微信小程序开发

Taro微信小程序开发

一.什么是taro？

二.如何安装taro？

三、开发前注意

四、项目说明

五、开发中的问题

1.静态资源的引入

2.jsx的支持程度：

3.组件化 & props &state

state：

5.事件

6.路由

7异步编程以及接口请求

推荐阅读更多精彩内容

Taro微信小程序开发

一.什么是taro？

二.如何安装taro？

三、开发前注意

四、项目说明

五、开发中的问题

1.静态资源的引入

2.jsx的支持程度：

3.组件化 & props &state

state：

5.事件

6.路由

7异步编程 以及 接口请求

推荐阅读更多精彩内容

7异步编程以及接口请求