使用taro开发小程序，我遇到的坑 (欢迎各位大侠补充...）

在开发小程序的技术选型上，我选择了taro + taro ui + typescript, 整理了一下我在开发小程序时候遇到的一些问题，后续持续更新，也欢迎大家补充
taro 官网
taro-ui 官网

一: 怎么加入第三方字体库？
在这里我使用的是阿里的iconfont
1）在iconfont官网新建自己的项目,并且将需要的字体加入到新建的项目中，查看该项目，可以看到如下页面：

2）点击下载到本地,解压后我们选择iconfont.css加入到自己的开发项目中

3）修改.css后缀为.scss(因为项目中用的是scss), 打开iconfont.scss文件，我们可以看到以下内容

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1560144283341'); /* IE9 */
  src: url('iconfont.eot?t=1560144283341#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
  url('iconfont.woff?t=1560144283341') format('woff'),
  url('iconfont.ttf?t=1560144283341') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1560144283341#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.iconzhaobudaojieguo:before {
  content: "\e668";
}

为了项目结构的干净，我把icon单独抽成了一个文件夹

所以iconfont.scss文件需要修改一下文件路径

@font-face {font-family: "iconfont";
  src: url('../icon/iconfont.eot?t=1554886899411'); /* IE9 */
  src: url('../icon/iconfont.eot?t=1554886899411#iefix') format('embedded-opentype'), /* IE6-IE8 */
  // url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALAAAsAAAAABoAAAAJyAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqBEIEuATYCJAMICwYABCAFhG0HLBvQBcgekiRFQsR4BEHFAzBCPPy3xu++2fmqSUS7mKCNxKF0sRIp6VOKaPYS9n/nMjlEYaKmjuWQ1Vj18Kfl9KUZs5o6oQdsJLDdhJtcHWYeXE5/FFAg84BymWPymIBRmgY61qCIBknkDWMXuITDBGr1yMAbg+NTKCCzRgXiqSpXUSDnkWUWrxYqaxZm8U6F6vQ8PUPeht+P/0oRIKkoWEUnTwYaqPvXjZ1UbJVbHvgILwEtr0CBKUgmLmojR9yCkdxqIx4D0L7yg19zZenrxF7Vgv11Vm496IKce+K6vFvNTSDH3bOQ3VGXkQYjLIS/fJn9/Hnm48epT5+mhV683zoPh3nk00uM60zbF7SRVc2CG3z+/PhEqibXzjC4eLPJXTbTd7o4htIb1aR0mN4yLShakfEYwBjGHQB4LP0d1A2hvCtixRrCCH6eL30/bmr/D9Rl8PXrA4eu8i6jfjak+lTW4JdxezZknW9pU1a5tbZkdtTIhFq1KGFHq9+xio77M4XqHJdBUqUbCtWG0Eycggp1lqBStWWoNWloeZ02nFvkGkzYBxCa3ULS6AMUmr2gmfgDFTr9QaXmcEOtq0hvWGck1FAfh6qABqktE7XOLOroRSjKnwB53qjyLD8kzwB3VD8p5grF+BBYwOeY4izIJSEooZyZZBAcB4bBiM2ZBnWRU4SwW/N5WveiXJ2ZKGQdB6oE0EDULCNUdYyF+u2FUOnzE4BsnqGKt5TUGGcAzqH2ThTlFHqgQxKrV8m9PONYICsRBIqgOMZEDIJ+wGBgCLu+nwbUCTnKiJCtVd5uRftKcuvLzA/IZhVYyhR2eiE9W0AIAAA=') format('woff2'),
  url('../icon/iconfont.woff?t=1554886899411') format('woff'),
  url('../icon/iconfont.ttf?t=1554886899411') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('../icon/iconfont.svg?t=1554886899411#iconfont') format('svg'); /* iOS 4.1- */
}


.icon {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-nv1:before {
  content: "\e639";
}

icon文件夹下的文件就从刚才下载的压缩包里面找

4） 使用(分为prefixClass & value,分别对应.icon(prefixClass)-nv1(value))

<AtIcon className="sex-icon" prefixClass='icon' value='nv1' size='18' color={this.state.femaleIconC}></AtIcon>

二: 路由跳转的几种方式？

微信开发文档-路由跳转
写的很详细，可以根据自己的需求去调用相关的方法，注意跳转到tabbar页面要用switchTab

三: 调用switchTab返回页面后，当前页面怎么刷新？
例如: 详情页 跳转到 列表页（tabbar页面），在详情页我们判断

Taro.switchTab({
  url: '/pages/reservation/index'
}).then(() => {
  let page: any = Taro.getCurrentPages().pop()
  if (page === undefined || page === null) return
  page.onLoad()
})

四: 页面绑定this的几种操作？
taro不像Vue一样帮我们解决了一些this的绑定问题，所以我们在编写事件的时候要注意一下，有两种方式：

<View onClick={this.msgDetail.bind(this, otherParams)}>您有{ noReadMsg }条未读消息</View>
msgDetail (otherParams) {
   dosomething...
}

<View onClick={this.msgDetail(otherParams)}>您有{ noReadMsg }条未读消息</View>
msgDetail = (otherParams) => {
   dosomething...
}

五: components引入flex布局？
为了组件的智能化，我们也习惯拆分智能木偶组件,将某些组件拆分到components后就傻了，样式全乱了,搜了下资料，原来必须要在components中手动引入flex布局。
components下的某index.scss文件

.pre-news-comp {
   ******
}
@import "~taro-ui/dist/style/components/flex.scss";

六: 文字可复制？
某天测试提了一个建议，要文字可复制，我？？？ 文字难道不能复制？我试了试果真不行，于是我又去搜了一下，发现要实现文字可复制功能，要加一个属性selectable={true}

<Text className="answer-text" selectable={true}>{ item.content }</Text>

七: 小程序嵌套公众号文章？
小程序提供了一个组件叫 WebView
比如我们要从某文章列表页，点击文章进入到文章详情页
index.tsx

<View onClick={this.publicArticle.bind(this, outerUrl)}></View>

atricleDetail.tsx

import Taro, { Component, Config } from '@tarojs/taro'
import { WebView } from '@tarojs/components'

export default class Index extends Component {
  config: Config = {
    navigationBarTitleText: ''
  }
  props = {
    outerUrl: ''
  }
  render () {
    return (
      <WebView src={ this.props.outerUrl }></WebView>
    )
  }
}

八: 手机注册验证码倒计时？

interface IState{
 countdown: number 
}
state = { 
  countdown: 60
}
setTime (time: any) {
    let countdown = time
    if (countdown === 0) {
      this.setState({
        verCodeText: '获取验证码',
        countDisabled: false
      })
      countdown = 60
    } else {
      this.setState({
        verCodeText: '重新发送(' + countdown + 's)',
        countDisabled: true
      })
      countdown--
      setTimeout(() => {
          this.setTime(countdown)
      }, 1000)
    }
  }

---

持续更新~ 如果您遇到了其他问题，欢迎留言