• home > webfront > AppDev > taro >

    taro自学笔记:从零开始搞多小程序开发

    Author:zhoulujun Date:

    taro-ui TypeError: Super expression must either be null or a function


    跨平台开发

    为了更好的实现跨平台开发,Taro 中提供了如下的解决方案

    内置环境变量 process.env.TARO_ENV

    用于判断当前编译类型,目前有 weapp / swan / alipay / h5 / rn / tt / qq / quickapp 八个取值,可以通过这个变量来书写对应一些不同环境下的代码,在编译时会将不属于当前编译类型的代码去掉,只保留当前编译类型下的代码,例如想在微信小程序和 H5 端分别引用不同资源

    if (process.env.TARO_ENV === 'weapp') {
      require('path/to/weapp/name')
    } else if (process.env.TARO_ENV === 'h5') {
      require('path/to/h5/name')
    }
    render () {
      return (
        <View>
          {process.env.TARO_ENV === 'weapp' && <ScrollViewWeapp />}
          {process.env.TARO_ENV === 'h5' && <ScrollViewH5 />}
        </View>
      )
    }


    app.js 中使用不同的 pages

    根据不同环境返回不同的 pages,可以这么写

    let pages = []
    if (process.env.TARO_ENV === 'weapp') {
      pages = [
        '/pages/index/index'
      ]
    }
    if (process.env.TARO_ENV === 'swan') {
      pages = [
        '/pages/indexswan/indexswan'
      ]
    }
    export default {
      pages
    }


    多端组件

    开发者可以通过将文件修改成 原文件名 + 端类型 的命名形式,不同端的文件代码对外保持统一接口,而引用的时候仍然是 import 原文件名的文件,Taro 在编译时,会跟根据需要编译平台类型,将加载的文件变更为带有对应端类型文件名的文件,从而达到不同的端加载对应文件的目的。

    假如有一个 Test 组件存在微信小程序、百度小程序和 H5 三个不同版本,那么就可以像如下组织代码

    • test.js 文件,这是 Test 组件默认的形式,编译到微信小程序、百度小程序和 H5 三端之外的端使用的版本

    • test.h5.js 文件,这是 Test 组件的 H5 版本

    • test.weapp.js 文件,这是 Test 组件的 微信小程序 版本

    • test.swan.js 文件,这是 Test 组件的 百度小程序 版本

    • test.qq.js 文件,这是 Test 组件的 QQ 小程序 版本

    • test.quickapp.js 文件,这是 Test 组件的 快应用 版本

    四个文件,对外暴露的是统一的接口,它们接受一致的参数,只是内部有针对各自平台的代码实现

    import Test from '../../components/test'
    <Test argA={1} argA={2} />


    多端脚本逻辑

    例如微信小程序上使用 Taro.setNavigationBarTitle 来设置页面标题,H5 使用 document.title,那么可以封装一个 setTitle 方法来抹平两个平台的差异。

    //set_title.h5.js
    export default function setTitle (title) {
      document.title = title
    }
    // set_title.weapp.js
    import Taro from '@tarojs/taro'
    export default function setTitle (title) {
      Taro.setNavigationBarTitle({
        title
      })
    }
    // 调用的时候,如下使用
    import setTitle from '../utils/set_title'
    setTitle('页面标题')


    多端同步调试

    ,可以在 dist 目录下创建一个与编译的目标平台名同名的目录,并将结果放在这个目录下,例如编译到微信小程序,最终结果是在 dist/weapp 目录下,这样做的好处是,各个平台使用独立的目录互不影响,从而达到多端同步调试的目的,在 config/index.js 配置如下:

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


    从旧版本迁移到 Taro Next

    Taro Next 大部分用法还是和旧版本一样的。更新到 Taro Next 首先需要更新项目依赖:

    # 更新 CLI
    $ npm i -g @tarojs/[email protected]
    # 在项目目录更新项目依赖
    $ npm i @tarojs/[email protected] @tarojs/[email protected] @tarojs/[email protected] @tarojs/[email protected]
    $ npm i react @tarojs/[email protected] # 如果使用 React
    $ npm i nervjs # 如果使用 Nerv
    # CLI 命令和以前一模一样
    $ taro build --type weapp --watch


    区别

    类组件 ——属于框架本身的 API 从框架自己的包中引入,其它的 API 仍然从 @tarojs/taro 引入。

    • 旧:import Taro, { Component } from '@tarojs/taro'

    • 新:import React, { Component }  from 'react' // Component 是来自于 React 的 API


    问题

    taro-ui报错

    1、taro-ui TypeError: Super expression must either be null or a function

    "@tarojs/taro": "3.3.9",就会报这个错误

    npm i —save taro-ui,会安装2.3.0,就报这个错

    使用

    npm i —save [email protected],安装 "taro-ui": "^3.0.0-alpha.10",就不报错了

    而且使用2.3.0,按需引入scss,也报错

    具体如下:https://github.com/NervJS/taro-ui/issues/1185#issuecomment-937624436


    eslint报错

    Error: Failed to load plugin '@typescript-eslint/eslint-plugin' declared in '--config » eslint-config-taro/react#overrides[0]': Cannot find module '@typescript-eslint/eslint-plugin' Require stack:

    搜索了一下,网上都说,安装这个两个包:

     "@typescript-eslint/eslint-plugin": "^5.0.0",

    "@typescript-eslint/parser": "^5.0.0",

    实际并没有卵用

    解决问题是:降级eslint,从eslint6.8.0,降级到6.1.0

    https://github.com/webpack-contrib/eslint-loader/issues/287#issuecomment-547864352


    微信小程序中使view占满整个屏幕高度的实现方法

    微信小程序中使view占满整个屏幕高度的实现方法 https://blog.csdn.net/houruoyu3/article/details/108363254


    @tarojs/taro": "3.3.9对echarts 周边生态不兼容

    就是taro-echarts不兼容最新版本的。各种头疼

    "techarts": "^3.0.3" 对于demo的版本是

    "@tarojs/cli": "3.0.7",
    "@tarojs/components": "3.0.7",
    "@tarojs/react": "3.0.7",
    "@tarojs/runtime": "3.0.7",
    "@tarojs/taro": "3.0.7",

    现在最新的版本是

    "@babel/runtime": "^7.7.7",
    "@tarojs/components": "3.3.9",
    "@tarojs/react": "3.3.9",
    "@tarojs/runtime": "3.3.9",
    "@tarojs/taro": "3.3.9",

    最的新版本,techarts 图表不展示

    换成 echarts-for-taro3 还是报错


    taro3.0.7与3.3.9最新版的坑爹之处

    在3.0.7 ,如要想运行h5成功,则需要在组件中导入React (react实际没有用,而eslint报错)

    import React, { Component } from "react";

    在最新版本的3.3.9,则不需要

    import { Component } from "react";




    转载本站文章《taro自学笔记:从零开始搞多小程序开发》,
    请注明出处:https://www.zhoulujun.cn/html/webfront/AppDev/taro/8686.html