使用Taro开发小程序的踩坑总结

时间 2019-11-09

标签使用 taro 开发程序总结繁體版

原文原文链接

第一次使用Taro，把遇到的坑罗列一遍，给后继踩坑者作参考吧。javascript

开发环境

taro版本：v1.3.0-beta.5
nodejs版本：v8.11.4

使用铁律

静态资源404，
检查静态资源引用是否使用ES6的import引入
检查访问文件有没有使用下划线链接多个单词
路径不对，找不到Js文件，
删除dist文件夹，从新编译

踩过的坑

1. 实现小程序的slot的功能，开发工具翻译的wxml结果是slot内容和组件是同级，而非嵌套关系。《Children 与组合》Taro官方文档

这是小程序开发工具的bug, 最后视图窗口显示是正确的，实际是正确的，github.com/NervJS/taro…css

编译前组件代码html

// component.js
<View className={'must-login-btn ' + className} hoverClass='btn-hover' onClick={this.onClick}>
{
  !userToken
  ? <Button className='user-info-btn' openType='getUserInfo' onGetuserinfo={handleGetUserInfo} /> : '' } { this.props.children } </View>
复制代码

// page.js
<MustLoginBtn className='scan-btn' onClick={this.doScan}>
    <View className='scan-btn-inner'> <View className='scan-icon' /> <Text className='btn-text'>扫小程序码</Text> </View> </MustLoginBtn>
复制代码

开发工具中看到的wxml以下： java

2. 使用externalClasses，为组件定义外部样式失效。《组件模板和样式》小程序官方文档,《组件的外部样式和全局样式》Taro官方文档

使用全局样式类，放弃使用externalClasses。
在component文件内设置 addGlobalClass: true, 同时使用props获取外部定义的className
在page.js文件内使用自定义组件式时，设置className属性
在page.scss样式文件设置外部样式在组件内调用组件的状况，外部样式也须要写在page的样式文件才有效（想哭）node

/* CustomComp.js */
export default class CustomComp extends Component {
  // 设置全局样式
  static options = {
    addGlobalClass: true
  }
  // 使用prop设置自定义className
  static defaultProps = {
    className: ''
  }

  render () {
    return <View className={this.props.className}>这段文本的颜色不会由组件外的 class 决定</View>
  }
}
复制代码

/* MyPage.js */
import './MyPage.scss';
export default class MyPage extends Component {
  render () {
    return <CustomComp className="red-text" /> } } 复制代码

/* MyPage.scss */
.red-text {
  color: red;
}
复制代码

3. 在component文件内使用“函数式组件”出错了

函数的命名必须以 render 开头，render 后的第一个字母须要大写。《类函数组件》Taro官方文档git

错误表现：

这个不该该算是坑，是阅读文档不够深入。github

4. 编译后，静态资源图片老是404, 没有被复制到dist目录

taro中静态资源引入须要直接经过ES6的import语法引入《静态资源引用》Taro官方文档shell

如下引入方式被直接忽略资源引入：小程序

<Image className='comp-checkbox__icon-inner' src='./assets/checked_icon.png' />
复制代码

5.‘生成类函数式组件的函数’内部再次调用‘生成类函数式组件的函数’出错了

官方给出的限制：
函数的命名必须以 render 开头，render 后的第一个字母须要大写
函数的参数不得传入 JSX 元素或 JSX 元素引用
函数不能递归地调用自身数组

虽然我没有哦调用自身，可是显然也是不能调用其余的‘生成类函数式组件的函数’
解决办法：
方法1：新建独立的组件文件ComponentA 和 ComponentB，而后在ComponentA中引入ComponentB，并render函数中使用
方法2：把jsx尽可能写在一个类函数式组件内

错误的写法

class MainPage extends Component {
    renderB () {
        return <View>B</View>
    }
    renderA () {
        return (
            <View> {this.renderB()} </View>
        )
    }
    render () {
        ...
        return (
            ...
            {this.renderA()}
            ...
        )
    }
}

复制代码

TypeError: Property right of Ass ignnent Expression expected node to be of a type[ "Expression"] but  instead got null
复制代码

正确写法

class MainPage extends Component {
    renderA () {
        return (
            <View> {/* renderB 内容 start */} <View>B</View> {/* renderB 内容 end */} </View>
        )
    }
    render () {
        ...
        return (
            ...
            {this.renderA()}
            ...
        )
    }
}

复制代码

6. 父组件经过props传递函数给子组件，子组件触发函数后，this指向了子组件的props

被传递的函数，在jsx代码中作绑定

出现错误的代码：

// Parent
class Parent extends Component {
  constructor (props) {
    super(props)
    this.onTabClick.bind(this); // 绑定this
  }
  onTabClick () {
    console.log(this) // this指向child.props，而不是指向Parent的实例
  }
  render () {
    return <Child onClick={this.onTabClick}/> } } // Child class Child extends Component { constructor (props) { super(props) this.handleClick.bind(this); // 绑定this指向 } handleClick () { ... this.props.onClick(); } render () { return ( ... <View onClick={this.handleClick}></View> ... ) } } 复制代码

this指向正确的代码:

// 仅仅修改的父组件onTabClick.bind(this)的位置
// Parent
class Parent extends Component {
  constructor (props) {
    super(props)
    /*修改 start*/
    // this.onTabClick.bind(this); // 绑定this
    /*修改 end*/
  }
  onTabClick () {
    console.log(this) // this指向Parent的实例
  }
  render () {
    /*修改 start*/
    return <Child onClick={this.onTabClick.bind(this)}/> /*修改 end*/ } } 复制代码

缘由：尚未找出来，正在学习中，请指教