代码规范

很多公司借鉴的代码规范：https://github.com/airbnb/javascript

《音乐》页面开发

1
2
3
4
5
6
7
8
9
<!-- 轮播图组件 参数：indicator-dots 小圆点，autoplay 自动播放, interval 间隔时间，duration 动画时长 -->
<swiper indicator-dots="true" circular="true" interval="3000" duration="500">
  <block wx:for="{{swiperImgUrls}}" wx:key="{{index}}">
    <!-- 空节点 -->
    <swiper-item>
      <image src="{{item.url}}" mode="widthFix" class="img"></image>
    </swiper-item>
  </block>
</swiper>

自定义组件

创建组件

创建目录 components > 组件目录名称 > 右键 新建Component

引入组件

在 page 的 json 文件中：

1
2
3
4
5
{
  "usingComponents": {
    "x-playlist": "/components/playlist/playlist"
  }
}

在 page 的 wxml 中：

1
<x-playlist> </x-playlist>

页面引入组件以及组件内部在引用子组件的方法是一样的，同样需要设置 json 文件。

组件传值

父组件中：在引入组件的时候自定义属性名称，并把数据传入子组件

1
2
<!-- 参数：playlist 自定义名称，传入组件的数据 -->
<x-playlist playlist="{{传入的数据}}"></x-playlist>

子组件中：
子组件的 js 文件：

1
2
3
4
5
6
7
8
9
10
 /**
  * 组件的属性列表
  */
 properties: {
   playlist:{ // 接收父组件传输的数据
     type: Object // 数据类型
   }
  },

//子组件的wxml文件可直接引入数据{{playlist}}

wx:key 的使用

key 的值不建议使用 index，因为当数据发生变化会 dom 结构产生变化时，使用 index 的地方不会随之变化。

可以使用数据内部每项不一样的一个数值，如 id

1
2
3
4
5
6
7
8
9
10
11
12
13
<block wx:for="{{swiperImgUrls}}" wx:key="url">
  这里url不需要双大括号，如使用index则需要{{}}
  <view>
    <image src="{{item.url}}" mode="widthFix" class="img"></image>
  </view>
</block>

<view class="playlist-container">
  <block wx:for="{{playlist}}" wx:key="_id">
    <!-- 参数：playlist 自定义名称，传入组件的数据 -->
    <x-playlist playlist="{{item}}"></x-playlist>
  </block>
</view>

async/await 语法

目前，在云函数里，由于 Node 版本最低是 8.9，因此是天然支持 async/await 语法的。而在小程序端则不然。在微信开发者工具里，以及 Android 端手机（浏览器内核是 QQ 浏览器的 X5），async/await 是天然支持的，但 iOS 端手机在较低版本则不支持，因此需要引入额外的 文件。

可把这个 runtime.js 文件引用到有使用 async/await 的文件当中。

1
2
// 注意，必须命名为 regeneratorRuntime
import regeneratorRuntime from "../../utils/runtime.js";

定时触发云函数

如果云函数需要定时 / 定期执行，也就是定时触发，我们可以使用云函数定时触发器。配置了定时触发器的云函数，会在相应时间点被自动触发，函数的返回结果不会返回给调用方

云函数目录下新建 config.json

API

1
2
3
4
5
6
7
8
9
{
  "triggers": [
    {
      "name": "myTriggers",
      "type": "timer",
      "config": "0 0 10,14,16,20 * * * *" //表示每天的10点、14点、16点、20点触发一次
    }
  ]
}

编辑好触发器之后，要在云函数目录 > 右键 > 上传触发器

配置云函数超时时间

当云函数比较复杂的时候，默认的超时时间 3 秒可能不能够满足需求，可以适当的设置更为合理的时间

云开发控制台 > 云函数 > 配置 > 超时时间