在开发小程序的技术选型上,我选择了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) } }
持续更新~ 如果您遇到了其他问题,欢迎留言