企业🤖AI Agent构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
[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/) 库。