[TOC]
http://superherojs.com/
# 自定义图标
使用 淘宝的 iconfont.cn 生成管理项目图标
在 iconfont.cn 上生成,选择 `Symbol` ,生成 js 链接
## [在微信小程序中引入 Iconfont 阿里巴巴图标库](https://www.cnblogs.com/wisewrong/p/8926849.html)
# 隐藏滚动条
加上以下样式
```css
::-webkit-scrollbar { width: 0; height: 0; color: transparent;}
```
或者 加上
```css
::-webkit-scrollbar { display: none;}
```
# 动画
常规套路:
1.`data` 中声明动画:`animation`。(`animation:{}`)
2.合适的时机创建一个动画实例animation。`this.animation = wx.createAnimation({})`
3.调用实例的方法来描述动画。`简单点说就是设置各种动画属性值`
4.最后通过动画实例的export方法导出动画数据传递给组件的animation。`就是动画输出啦,让他动起来`
注意:export 方法每次调用后会清掉之前的动画操作
[微信小程序实现animation动画](https://www.jb51.net/article/133758.htm)
[小程序动画使用](https://www.jianshu.com/p/3eebef84d988)
# 获取用户信息
首页首次加载获取用户,通常会弹窗提示是否允許獲取用户信息,用户点击允许获取授权,才能成功获取用户信息,展示用户名和用户頭像等,小程序为了优化用户体验,使用 `wx.getUserInfo` 接口直接弹出授权框的开发方式将逐步不再支持。目前开发环境不弹窗了,正式版暂不受影响。提倡使用 `button` 组件,指定 `open-type` 为 `getUserInfo`类型,用户主动点击才弹窗。
```
Page({
data: {
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
onLoad: function() {
// 查看是否授权
wx.getSetting({
success: function(res){
if (res.authSetting['scope.userInfo']) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称
wx.getUserInfo({
success: function(res) {
console.log(res.userInfo)
}
})
}
}
})
},
bindGetUserInfo: function(e) {
console.log(e.detail.userInfo)
}
})
```
另一种方式,如果你仅仅只是想展示用户信息的话,那便使用open-data 吧,不用彈窗提示。如下:
```
<!-- 如果只是展示用户头像昵称,可以使用 <open-data /> 组件 -->
<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>
```
# 页面数据传递
使用 [onfire.js](https://github.com/hustcc/onfire.js/blob/master/README_zh.md)
是一个很简单的事件分发的Javascript库(仅仅 0.9kb),简洁实用。
# 图表插件(wx-charts)
https://www.jianshu.com/p/04ddbabda874
微信小程序图表插件(wx-charts)是基于canvas绘制,体积小巧,支持图表类型饼图、线图、柱状图 、区域图等图表图形绘制,目前wx-charts是微信小程序图表插件中比较强大好使的一个。
# async-await
https://nervjs.github.io/taro/docs/async-await.html
```
$ yarn add @tarojs/async-await
```
项目入口文件`app.js`中直接`import`,就可以开始使用`async functions`功能了
```
// src/app.js
import '@tarojs/async-await'
```
## Promise
查看 Angular 中 的 [$q](https://docs.angularjs.org/api/ng/service/$q) 的实现
原生 Promise
```
new Promise(function (resolve, reject) {
})
```
## [pify](https://github.com/sindresorhus/pify)
## async-await
其实 `async/await` 也是和 `Promise` 配合使用的,要在小程序中使用 `async/await` 的话,靠微信web开发者工具中的Babel转换工具是不够的了,因为需要一些额外的Babel插件来编译使用了`async/await`的代码。所以这次我们得自己写脚本来调用Babel。
在项目中,得先关闭“开启ES6转ES5”这个选项,因为我们现在要自己来做这件事情。
依赖一个regeneratorRuntime,才能支持generator特性。我们可以使用Facebook开源的 [regenerator](http://facebook.github.io/regenerator/) 库。