[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/) 庫。