一、从0构建项目

打开微信公众平台 -> 注册账号 -> 下载开发工具 -> 创建项目

1. 创建项目

2. 开通云开发

项目创建完成之后，在调试器里会报一个错误：云开发初始化错误

点击云开发按钮，不断下一步

输入环境信息，点击确定（当我们创建环境的时候，每个环境会对应一套云开发资源，每个环境是独立的）

等待 10 - 30min 之后，重启开发工具

3. 代码结构初始化

基础结构
app.js 文件配置云开发环境，填写环境 id

  wx.cloud.init({
    // env 参数说明：
    // env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源
    // 此处请填入环境 ID, 环境 ID 可打开云控制台查看
    // 如不填则使用默认环境（第一个创建的环境）
    env: 'dev-f2y9s',
    // 是否在云开发控制台中记录访问过我们小程序的用户
    traceUser: true,
  })

配置页面 & 配置tabBar

"pages": [
    "pages/playlist/playlist",
    "pages/blog/blog",
    "pages/profile/profile"
],
"tabBar": {
    "color": "#8a8a8a",
    "selectedColor": "#d43c43",
    "list": [
        {
          "pagePath": "pages/playlist/playlist",
          "text": "音乐",
          "iconPath": "./images/playlist.png",
          "selectedIconPath": "./images/playlist_active.png"
        },
        {
          "pagePath": "pages/blog/blog",
          "text": "发现",
          "iconPath": "./images/blog.png",
          "selectedIconPath": "./images/blog_active.png"
        },
        {
          "pagePath": "pages/profile/profile",
          "text": "我的",
          "iconPath": "./images/profile.png",
          "selectedIconPath": "./images/profile_active.png"
        }
    ]
},

4. 代码规范

借鉴的规范：github.com/airbnb/java…

5. 调用云函数

首先看一下当前拥有的云函数

由于当前云函数还未上传，直接使用的话会报如下错误：

上传云函数

右键云函数 -> 创建并部署：云端安装依赖（不上传 node_modules）

使用云函数

  onLoad: function (options) {
    wx.cloud.callFunction({
      name: 'login'
    }).then((res) => {
      console.log(res)
    })
  },

二、播放列表功能实现

1. 轮播图组件 Swiper

资源地址： github.com/xiecheng328…

1）数据

资源地址：github.com/xiecheng328…

  data: {
    swiperImages: [{
        url: 'http://p1.music.126.net/oeH9rlBAj3UNkhOmfog8Hw==/109951164169407335.jpg',
      },
      {
        url: 'http://p1.music.126.net/xhWAaHI-SIYP8ZMzL9NOqg==/109951164167032995.jpg',
      },
      {
        url: 'http://p1.music.126.net/Yo-FjrJTQ9clkDkuUCTtUg==/109951164169441928.jpg',
      }
    ]
  },

2）结构

在这里，循环写到了<block>标签内；在DOM中<block>不会渲染出来

<!-- 轮播图 -->
<swiper class="swiper" indicator-dots="{{ true }}" autoplay="{{ true }}" interval="{{ 2000 }}" circular="{{ true }}">
  <block wx:for="{{swiperImages}}" wx:key="{{ index }}">
    <swiper-item>
      <image class="bannerImg" src="{{item.url}}" mode="widthFix"></image>
    </swiper-item>
  </block>
</swiper>

2. 组件化开发

新建组件

组件位置：miniprogram/components

新建组件：新建目录 -> 新建component

使用组件

注册组件

<!--
"usingComponents": {
  "组件名": "组件路径"
}
-->
{
  "usingComponents": {
    "gx-playlist": "/components/playlist/playlist"
  }
}

使用组件

<gx-playlist></gx-playlist>

3. 自定义歌单组件 playlist

初始化组件

新建组件 - 注册组件 - 初始化数据

给组件传值

<gx-playlist playItem="{{ item }}"></gx-playlist>

组件中 - 接收父级传入的数据

  /**
   * 组件的属性列表
   */
  properties: {
    playItem: {
      type: Object
    }
  },

** 使用父级传入的数据 **

<view class="playlist-container">
  <image class="playlist-image" src="{{ playItem.picUrl }}"></image>
  <text class="playlist-count">{{ playItem.playCount }}</text>
  <view class="playlist-name">{{ playItem.name }}</view>
</view>

4. 通过 base64 的方式，使用 `svg` 图片

搜索：在线制作base64
随便找一个，打开，上传svg图片，生成 base64 字符串
使用将生成的字符串放到background: url() 里

  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMiAyMCI+PGcgb3BhY2l0eT0iLjE1Ij48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiMwNDAwMDAiIGQ9Im0yMiAxNi43NzdjMCAxLjIzMy0xLjEyMSAyLjIzMy0yLjUwNiAyLjIzMy0xLjM4NCAwLTIuNTA2LTEtMi41MDYtMi4yMzN2LTIuNTUzYzAtMS4yMzQgMS4xMjItMi4yMzMgMi41MDYtMi4yMzMuMTc0IDAgLjM0My4wMTcuNTA2LjA0NnYtMS4zN2gtLjAzM2MuMDE3LS4yMi4wMzMtLjQ0MS4wMzMtLjY2NiAwLTQuNDE4LTMuNTgyLTgtOC04LTQuNDE4IDAtOCAzLjU4Mi04IDggMCAuMjI1LjAxNi40NDYuMDM0LjY2NmgtLjAzNHYxLjM3Yy4xNjMtLjAyOS4zMzMtLjA0Ni41MDUtLjA0NiAxLjM4NCAwIDIuNTA2Ljk5OSAyLjUwNiAyLjIzM3YyLjU1M2MwIDEuMjMzLTEuMTIyIDIuMjMzLTIuNTA2IDIuMjMzcy0yLjUwNS0uOTk5LTIuNTA1LTIuMjMzdi0yLjU1M2MwLS4yNTguMDU5LS41MDEuMTQ4LS43My0uMDg1LS4xNDgtLjE0OC0uMzEtLjE0OC0uNDkzdi0yLjY2N2MwLS4wMjMuMDEyLS4wNDMuMDEzLS4wNjctLjAwNC0uMDg4LS4wMTMtLjE3Ni0uMDEzLS4yNjYgMC01LjUyMyA0LjQ3Ny0xMCAxMC0xMCA1LjUyMyAwIDEwIDQuNDc3IDEwIDEwIDAgLjA5LS4wMDkuMTc4LS4wMTQuMjY2LjAwMi4wMjQuMDE0LjA0NC4wMTQuMDY3djJjMCAuMzA2LS4xNDUuNTY5LS4zNi43NTMuMjI0LjMzNC4zNi43Mi4zNiAxLjEzOHYyLjU1MiIvPjwvZz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNmZmYiIGQ9Im0yMCAxNi43NzdjMCAxLjIzMy0xLjEyMSAyLjIzMy0yLjUwNiAyLjIzMy0xLjM4NCAwLTIuNTA2LTEtMi41MDYtMi4yMzN2LTIuNTUzYzAtMS4yMzQgMS4xMjItMi4yMzMgMi41MDYtMi4yMzMuMTc0IDAgLjM0My4wMTcuNTA2LjA0NnYtMS4zN2gtLjAzM2MuMDE3LS4yMi4wMzMtLjQ0MS4wMzMtLjY2NiAwLTQuNDE4LTMuNTgyLTgtOC04LTQuNDE4IDAtOCAzLjU4Mi04IDggMCAuMjI1LjAxNi40NDYuMDM0LjY2NmgtLjAzNHYxLjM3Yy4xNjMtLjAyOS4zMzMtLjA0Ni41MDUtLjA0NiAxLjM4NCAwIDIuNTA2Ljk5OSAyLjUwNiAyLjIzM3YyLjU1M2MwIDEuMjMzLTEuMTIyIDIuMjMzLTIuNTA2IDIuMjMzcy0yLjUwNS0uOTk5LTIuNTA1LTIuMjMzdi0yLjU1M2MwLS4yNTguMDU5LS41MDEuMTQ4LS43My0uMDg1LS4xNDgtLjE0OC0uMzEtLjE0OC0uNDkzdi0yLjY2N2MwLS4wMjMuMDEyLS4wNDMuMDEzLS4wNjctLjAwNC0uMDg4LS4wMTMtLjE3Ni0uMDEzLS4yNjYgMC01LjUyMyA0LjQ3Ny0xMCAxMC0xMCA1LjUyMyAwIDEwIDQuNDc3IDEwIDEwIDAgLjA5LS4wMDkuMTc4LS4wMTQuMjY2LjAwMi4wMjQuMDE0LjA0NC4wMTQuMDY3djJjMCAuMzA2LS4xNDUuNTY5LS4zNi43NTMuMjI0LjMzNC4zNi43Mi4zNiAxLjEzOHYyLjU1MiIvPjwvc3ZnPg==);

5. async / await

说明：async / await 是 Es7 的语法，如果在云函数中使用，云函数默认是支持的，因为云函数要求，node版本最低是 8.9，所以在云函数端async / await是默认支持的；但是在小程序端，默认是不支持async / await的，所以需要引入额外的文件，才能使小程序端支持；

说明：当我写这篇博客的时候，小程序已经支持 async / await语法了

下面还是记录一下，如果不支持，我们该怎么处理；

1. 下载文件

地址：github.com/xiecheng328… 将tuntime.js 文件，放到/miniprogram/utils中

2. 引入文件

// 注意 regeneratorRuntime 不要变
import regeneratorRuntime from '../../utils/runtime.js'

然后就可以使用 async / await 语法了；

6. 读取歌单数据并插入云数据库

1. 创建云函数

右键 cloudfunctions
->
新建 Node.js 云函数
->
getPlayList

2. 发送网络请求

借助第三方工具，这里使用的是 request/promise

github 搜索： request/promise
地址：https://github.com/request/request-promise

使用命令行工具找到新建的这个云函数库 getPlayList
> D:\DemoWork\music-app\cloudfunctions\getPlayList (develop -> origin) (getPlayList@1.0.0)
> λ

分别执行如下命令
cnpm install --save request
cnpm install --save request-promise

引入
const rp = require('request-promise');  // 引入 request-promise
使用
const res = await rp(URL)

注意：每次修改完云函数之后都要再次提交

3. 插入数据库

const db = cloud.database();  // 初始化云数据库

// 插入数据库需要单条插入，所以将读取到的数据循环插入，记得加上 await
// 云函数入口函数
exports.main = async(event, context) => {
  try {
    const res = await rp(URL)
    const playlist = JSON.parse(res).result
    for (let i=0; i< playlist.length; i++) {
      await db.collection('playlist').add({
        data: {
          ...playlist[i],
          createTime: db.serverDate()
        }
      }).then((res) => {
        console.log('插入成功')
        console.log(res)
      }).catch((err) => {
        console.log('插入失败')
        console.log(err)
      })
    }
    return JSON.parse(res).result
  } catch (err) {
    console.log(err);
  }
}

小程序云开发