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

86次阅读

共计 6704 个字符，预计需要花费 17 分钟才能阅读完成。

在开发小程序的技术选型上，我选择了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,d09GMgABAAAAAAaQAAsAAAAADRwAAAZEAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDQAqMcIpAATYCJAMYCw4ABCAFhG0HfRsTC1FUbfJkPzV5ggizAQXawIIgxu1RDgAAgAQFIC0AxMP/r/1+n3vHmId4U2vQPWoiRBKLRCIkSBC9UTolE4r+/uv8ufb2CkCqKUhiXEg2+ZTFIrtONaCjO3bHek84VECy9jr/Otv/EdpYPZVTm1BtUEnSFnFtwRvwyLlN4A1i07lPvBuxBEbmvn6/Vk81NGzxdqUQ43vfFxVLLkmn3xCSuKSIV0Kjdhada8KcpYAzYqxx7MueT6A1LYPXYVPHAAQq1IEBtS6ZIkDgRpRiwR6a0IrYtxAP4KdJd942gHvz/vEP8iKQpMzqC51dNMpQ85XznfqsP6ybyOuwLpeA8CAyNoGCuCaTrvhMuGmCWmplX/tAq5EkqZYV3zu/04eOlUIRnyikbdjbilYI/fOiUgf1g/qouOQrp/Mn8VXBUsGdEKGAYAUiZAimwH+lsEqwYB6kdYx+hNq0ablaqU+lXlySVtuaTMwkjGFYliFd7miaUg1YHKeNMXTMgddyCZWf4/CiL+nMm0+xIKhIGoSlPUvpn10JWEn3EkbTQiq5Q9LO6bAcVKhdK6WgJHfa19Mj9vb6uruFri4eoj1N6Rbd9yAYCDtFNVQnsYISrD5GhtWQRlFSa+8PF3odOVKRUpSgTJJHI2qDzKm/hmR3ZVR3nTeDcF9YhTCkSQoA6zKzpt+qppT1LksTXrfF7Kl4hYSFHdNprI8VtE8zv+uMR5NTn8VDdelMRY0HM1XWnghWp5A4JdWA44+7o6BQLs0F1bADiKrsAA/jlNJCThLqxLAMKG+SyycoLBkKtEoHLx5P+whSfq5g4Y0omBB+larl5foy6S8f4UV+nk/wbYCkz1T+0T0h51MqE5lPG8xIFYXmfvbTIKxoJ5ML6RMvby0B8uICwTfvGP32OyXNoKTnbFRe7cZyalKZjVDqjbbPa1bVReO5tWlIv20Rlv9xOw0svy98jtt97vOi/JaD814YgWu/ZX/r8DHUf78EdbCJ0G060YRwnPWl1cvZHtu8UxNrsNZWR0i36IT7RF0V8F6OalQ5tszQND88fx4GoF9n+JEAktr8MFA+AIHuhYGB9BLnLeMFHPAHIAe9isBK4P4lnXPsWI4nOcqTPagPPiRlGXWrbsRlU1et3mR4iC5ZMnFgIkaiXydsuJllaomGxWDrVrjka0uG5MVgYOOkj7Lmrd6Xu2L2+ti/GX9vaoROhIiINaKn6r+M6cudfHgyQhw0bdrYvjVYa60jtn7Vww4SETClg5v4wr0/OP6UGOuN+59eNrL3O3a56tnIwvGFtdiwZ2Fk0AEnneiZyOqOyxn4eXzN9I3TDAmnDedJF+nvKf6vz+P7s9cWu4q9Sd5ipyaQsBbfzyu3XybSY/lm++knYchtOUtuzCI499I0a1q/N8FlUaWk5az72MN75DA7TAYxxKW1krbeHuai/4ym3l7wv03fsWuXqgwf9IBNTl7tfz4/f/sWzqcEQ7t1/upHMQNY+Y8QHOfT/7iaADX8PIAjSO5c6eDAu5dcAQVxdfO8D/D+/dupraovXtjAd84jba93XnZkT8B++H5AT871S0+8zjkvokbRbjfk8UtBNV5wjV2S4PkWsHpM/m/XhjR1n4t6VIARWingFpYBOqI/rwHozoc+SQBd+dynhCIa1w3natez/P4zaTqi4j6Q+ifP+kwPPsLMTgF81ukFyzk3yjG7FIVQY1X2qmNZ7pVHEJSScJDt3GbaqC9SsRNkS0JjYgVJbQqyxqK8UG9CqWcbKo0daG1oPrhnjM5HFH1Yt6MgDHsMyaAPyIZ9lBfqz1Ca9A8qw+EDrfOIOWbPcrDgeh0LJpaRuICYxD2kjTWDx9p9WLFcgr4uGJchrBssF+Vm5WyXNmMP1iV2MGaVPNMkiOjcjZrUxbDLxZGqcweWzCxqmmpZdjahdsySuBuCHdBhAlP7lCGiBUdGwnmQmU3BO2/fB1NYXAT6Qqe54xBMZ2BLR3JlyWHIm4M8rE7vpaFhliKPiQkE6lrqODekCRMwV1PEISq9lgMmMWWhFgWqMtnYE+EGZV0/xP0rL4JWfcwqUuQooowqakM3VOCiJfcRDvadKvCQRWoJ8SrEmrOCPHjOmP446yaqmC1SRrFEBQ6KFi2ZwEMNbhmWXSQA') 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)
    }
  }

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

正文完
taro typescript 小程序
发表至：无分类
2019-06-10
 0