开心猫猫虫
开心猫猫虫

微信小程序云开发之网易云音乐

这是跟着慕课网谢成老师敲得代码

注意 知识点 疑惑 思路 妙 优化
一个要注意的地方：如果获取歌词的时候会报错（才发现解决办法没传上来 大概就是改变一下请求头数据）

其他：

微信小程序云开发之网易云音乐_第1张图片

第一章课程介绍

云开发（音乐播放器项目）

微信小程序云开发之网易云音乐_第2张图片

微信小程序云开发之网易云音乐_第3张图片

微信小程序云开发之网易云音乐_第4张图片

微信小程序云开发之网易云音乐_第5张图片

微信小程序云开发之网易云音乐_第6张图片

微信小程序云开发之网易云音乐_第7张图片

微信小程序云开发之网易云音乐_第8张图片

微信小程序云开发之网易云音乐_第9张图片

微信小程序云开发之网易云音乐_第10张图片

微信小程序云开发之网易云音乐_第11张图片

第二章云开发介绍以及构建项目

2.1传统开发模式

微信小程序云开发之网易云音乐_第12张图片

什么是serverless(微服务)：他可以打破物理隔离（前端与后端，手机端与服务器）

函数即服务

比较早的是html css后来向dom延伸（jquary）从dom又发展到mvc这种模式 再到现在的mvvm这种模式 同时推出很多框架 （vue react……）

2.2云开发与serverless

微信小程序云开发之网易云音乐_第13张图片

2.3 云开发优势

快速上线

专注核心业务 不需要考虑联调 运维等问题（为什么不用考虑运维呢 因为云开发会弹性伸缩性能）

独立开发出一个小程序

数据安全

其实云函数就相当于nodejs

微信小程序云开发之网易云音乐_第14张图片

2.4开通

微信小程序云开发之网易云音乐_第15张图片

默认情况时有两个环境的 一个是正式环境 就是上线以后的环境 另一个是测试环境也就是开发时候的环境

建议测试环境取名test，正式环境取名release，系统会自动分配环境后缀。

然后过一会文件就变成这样了

在这里插入图片描述

关于费用 https://developers.weixin.qq.com/miniprogram/dev/wxcloud/billing/adjust-payment.html

微信小程序云开发之网易云音乐_第16张图片

2.5初始化

云函数部分：

微信小程序云开发之网易云音乐_第17张图片

前端部分：

微信小程序云开发之网易云音乐_第18张图片

注意填入的是环境id

微信小程序云开发之网易云音乐_第19张图片

那么问题来了，环境id在哪儿找呢

在这里插入图片描述

我们就可以把它填入这里

微信小程序云开发之网易云音乐_第20张图片

到时候正式上线就可以改成正式上线的id

下面的traceUser为true就表示是否把访问的用户记录在控制台中，而且是以倒序的方式显示的

还有这个this.globalData = {}可以设置全局的属性 或者方法

项目配置文件：

微信小程序云开发之网易云音乐_第21张图片

建三个页面：playList，blog，profile

这里我实在不知道哪里错了

微信小程序云开发之网易云音乐_第22张图片

一定要记住是这样写的

微信小程序云开发之网易云音乐_第23张图片

有一个要注意的：.json文件中不能写注释

2.6代码规范

知识点：看一下github开源项目：Airbnb https://github.com/airbnb/javascript

把习惯性的var改成let (作用域的问题) 合理使用const

像这种的

    const obj=new Object()
    const arr=new Array()

就变成 const obj={} const arr=[]

还有建议这样

onReady(){ ……} 而不是 onReady:function(){……}

然后还有简写 比如说 username:username 可以简写成username 还有简写的最好写在上面 下面写非简写的

还有箭头函数比较方便

第三章播放列表

3.1轮播图组件

swiper组件用起来很简单 这里有个知识点：block

老师是这样写的 我也不知道为什么要加一个block

  • image的几个mode属性（没有列全）:

    • scaleToFill :缩放 不保持横纵比例 能让图片填满容器

    • aspectFit 图片按比例 全都显示出来 不覆

         + widthFix 高度自动变化 宽度自己设 宽高比不变（符合当前需求）

3.2组件化开发

很多前端框架都在使用组件化开发

它不是前端特有的

他是在用户界面开发领域，独立的可复用的交互元素的封装

  • 组件化开发的意义
    。组件化是对实现的分层，是更有效地代码组合方式
    。组件化是对资源的重组和优化，从而使项目资源管理更合理

    。组件化有利于单元测试
    。组件化对重构较友好

原则：高内聚 低耦合 单一职责 避免过多参数（一段代码尽量解决一个需求，组件要相对独立，尽量少去依赖其他的组件， ）

我们在项目中用到了哪些组件呢

歌单

微信小程序云开发之网易云音乐_第24张图片

歌曲列表组件微信小程序云开发之网易云音乐_第25张图片

进度条组件微信小程序云开发之网易云音乐_第26张图片

歌词组件微信小程序云开发之网易云音乐_第27张图片

博客卡片组件微信小程序云开发之网易云音乐_第28张图片

博客控制组件微信小程序云开发之网易云音乐_第29张图片

底部弹窗组件微信小程序云开发之网易云音乐_第30张图片

登录组件（因为很多情况都要判断用户是否登录了）

微信小程序云开发之网易云音乐_第31张图片

搜索组件微信小程序云开发之网易云音乐_第32张图片

3.3自定义歌单组件

先举一个例子怎么使用 1.components下的playlist文件：这是一个组件 2.pages下面的playlist的json文件引入 ，要给他起个名字 他的规范一般是XX-XXX然后冒号后面是路径 3.在playlist页面引入名字

微信小程序云开发之网易云音乐_第33张图片

微信小程序云开发之网易云音乐_第34张图片

<view class="playListContainer" wx:for="{{playList}}">
  <s-playList playlist={{item}}>
  s-playList>
view>

这个时候s-playList的属性值playlist如何接收item呢 我们就要学习一下components里面的x-playList的结构

/**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
     //比如说当点击歌单的时候 点击跳转到歌曲列表 就要把处理函数放到这里面
  }

我们重新梳理一下

这里我们如何把一条条数据传入到组件的playlist属性里面呢

<view class="playListContainer" wx:for="{{playList}}">
  <s-playList playlist="{{item}}">
  s-playList>
view>

这样就可以接收到了

  properties: {
    playlist:{
      type:Object
    }
  },

然后呢 在页面上显示出来

我们小程序的背景图片只能用本地的或者是用base64格式

我试过了，把阿里巴巴库的代码复制到app.wxss里面 组件里面是无法使用的 所以我们也是只能用本地图片或者base6格式了 更新，可以直接组件里建一个文件，放组件里

超过两行超出的替换成省略号

.playlist-name{
  width: 220rpx;
  font-size: 26rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

3.4播放数量细节处理

这里用到了observers

注意写法 监听对象下面的属性的话 要写成[ ]

当属性一变化 就自动执行下面的方法

  observers:{
    ['playlist.playCount'](val){
      console.log(val);
    }
  },

method里面：

    // 6位以下  6-8位 8位以上
    // 12345.444   1251232.12  123654789
    // 1 直接取整 
    // 2 小数部分等于字符串的长度-4到长度-4+要保存的长度 然后整数部分就等于数字/10000取整 再拼接一下返回就ok
    //3 小数：长度-8到长度-8+decimal 整数：/100000000
    _tranNumber(num, point) {
      let numStr = num.toString().split('.')[0]
      if (numStr.length < 6) {
        return numStr
      } else if (numStr.length >= 6 && numStr.length <= 8) {
        let decimal = numStr.substring(numStr.length - 4, numStr.length - 4 + point)
        return parseFloat(parseInt(num / 10000) + '.' + decimal) +
          '万'
      } else if (numStr.length > 8) {
        let decimal = numStr.substring(numStr.length - 8, numStr.length - 8 + point)
        return parseFloat(parseInt(num / 100000000) + '.' + decimal) + '亿'
      }
    }

注意看toString substring parseInt parseFloat

微信小程序云开发之网易云音乐_第35张图片

现在我们可以打印出来了 但是如何把它显示到页面上去呢

我们知道有一个setdata可以修改playlist里面的内容，那么可以这样写吗

微信小程序云开发之网易云音乐_第36张图片

答案是不可以 他会形成死循环 开发者工具会卡死的

来解释一下为什么 ，obervers是一个监听器 用来监听playlist这个对象下面的playcount这个属性，当属性发生变化的时候，就会执行对应的方法，当给playcount赋值的时候 第一个playcount的值发生变化，当发生了变化，又触发了函数，一直循环。

那怎么办呢 我们不能给playlist里的playcount赋值了 但是可以给其他的赋值啊 我们可以在data里定义一个count 然后wxml里显示count的值

在这里插入图片描述

注意下划线的意思（一种规范）

3.5wx:key


   {{item}}



  change(){
    let length=this.data.list.length
    for(let i=0;i<3;i++){
      let x=Math.floor(Math.random()*length)
      let y=Math.floor(Math.random()*length)
      let temp=this.data.list[x]
      this.data.list[x]=this.data.list[y]
      this.data.list[y]=temp
    }
    this.setData({
      list:this.data.list
    })
   }

微信小程序云开发之网易云音乐_第37张图片

这时候发现不行 √没有随着我们选中的一起动 这时候我们就可以加一个wx:key=“*this”

如果是对象的话 就可以选一个唯一的属性 比如id 给wx:key 而且注意不用加{{}}

3.6 ,3.7js异步操作管理

promise

举一个例子

//event loop  
onLoad: function (options) {
    setTimeout(() => {
      console.log(1);
    }, 1000);
    console.log("2");
  },  会先打印出2再打印1

event loop

当执行到settimeout的时候他发现是个异步的任务 他就会把这个放到任务队列里面 然后执行主线程的任务（ 输出2）。当发现主线程空闲并且settimeout的时间达到1s的时候，就会执行任务队列

当然不止这一个例子 后面会发请求 ，有的时候网好，有的时候网差，还有服务器处理速度，数据包的大小，都会影响效率，这时候他是异步的，但是后面要用到请求的数据怎么办呢

这里插一个例子：等1s输出1 再等2s输出2 再等3s输出3

    setTimeout(() => {
      console.log(1);
      setTimeout(() => {
        console.log(2); 
        setTimeout(() => {
          console.log(3);
        }, 3000);
      }, 2000);
    }, 1000);

这样写就陷入了回调地狱

然后就出现了异步解决方案：promise 他有三种状态：pending fulfilled rejected pending:一个人过生日了，我要送他礼物，他不知道我是会送礼物呢还是不会送呢
fulfilled:如果我送了 那么他的状态就会变成fulfilled
rejected:我太忙了 没有送
一旦状态变成了其中一个 那么不能改变

https://www.jianshu.com/p/1b63a13c2701

    new Promise((resolve,reject)=>{
      setTimeout(() => {
        console.log("1");
        resolve()
      }, 100);
    }).then(()=>{
      setTimeout(() => {
        console.log("2");
      }, 2000);
    })

知识点：promise.all([ ])

  let p1=new Promise((resolve,reject)=>{
      setTimeout(() => {
        console.log("p1");
        resolve()
      }, 2000);
    })
    
   let p2=new Promise((resolve,reject)=>{
      setTimeout(() => {
        console.log("p2");
        resolve()
      }, 1000);
    })
   let p3=new Promise((resolve,reject)=>{
      setTimeout(() => {
        console.log("p3");
        resolve()
      }, 3000);
    })
  //等三个promise任务都完成 再进行操作
  Promise.all([p1,p2,p3]).then((res)=>{
    console.log("全部完成");
  }).catch((err)=>{
    console.log("失败");
  })
  //输出p2 p1 p3 全部完成

微信小程序云开发之网易云音乐_第38张图片

微信小程序云开发之网易云音乐_第39张图片

有个疑问 如果其中一个失败了会怎么显示呢

微信小程序云开发之网易云音乐_第40张图片

这就表示一个任务失败了 整个任务都失败了 但是他不会阻止下面任务继续执行

还有一个方法叫promise.race

可以看到，有一个任务完成就算完成了 不影响后面执行

微信小程序云开发之网易云音乐_第41张图片

那么这两个方法在什么场景用到呢
比如发博客等照片都上传成功了再执行下面的操作
还有怎么判断超时呢 就可以用到race 开个定时器，如果定时器先执行成功了，还没请求成功的话就可以知道请求超时了

async和await(ES7)

调用foo()
如果没有async awiat的话就会先打印res 但是res还没取到值
有的话会先等待57行执行完

微信小程序云开发之网易云音乐_第42张图片

ES6 generator

https://www.jianshu.com/p/83da0901166f

3.8读取歌单数据并插入云数据库

为什么要放到云数据库呢

我们设一个触发器，每天定时取数据，来保证每天取的都是最新的数据，还要与旧的数据进行比较，把没有的数据插入到数据库中

知识点:定时触发器 云函数 如何向数据库插入数据

发送请求：request request-promise、 axios等第三方库

一个注意事项，如果确定node已经安装过了 但是微信开发者工具安装包的时候显示不是内部命令 那么可以右键管理员打开微信开发者工具

微信小程序云开发之网易云音乐_第43张图片

request-promise库的官方例子

rp('http://www.google.com')
    .then(function (htmlString) {
        // Process html...
    })
    .catch(function (err) {
        // Crawling failed...
    });

我们写的是什么意思呢？

如果请求成功就把res返回给playlist 然后我们打印出playlist

那可以打印到我们平时用调试器吗 是不可以的，云函数代码属于后端的代码，后端的日志不会打印到我们的调试器中，他会打印到云函数日志里面

然后要右键文件夹 上传并部署

微信小程序云开发之网易云音乐_第44张图片

微信小程序云开发之网易云音乐_第45张图片

我们发现传入的是字符串类型的，我们需要的是json格式的

微信小程序云开发之网易云音乐_第46张图片

然后我们就可以学习如何放到数据库中了

先新建一个集合

在这里插入图片描述

然后向数据库插入数据 注意只能单条插入 ，所以我们要遍历数组 然后一条一条插入

  • 补充微信官方参考代码：
    • https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/Database.html
    • https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/Database.collection.html
    • https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/collection/Collection.add.html
    • https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/Database.serverDate.html
  • 三点运算符
    • https://blog.csdn.net/wilie_C/article/details/109133238

完成

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()
const db=cloud.database() //云数据库初始化
const rp=require('request-promise')
const URL = 'http://musicapi.leanapp.cn/top/playlist/highquality/%E5%8D%8E%E8%AF%AD'

// 云函数入口函数
exports.main = async (event, context) => {
  const playlist=await rp(URL).then((res)=>{
    return JSON.parse(res).playlists.splice(0,6) //因为一共有20条 我们只需要6条（写错了 需要不止六条 所以不应该加splice的）
  })
  // console.log(playlist);
  for(let i=0;i<playlist.length;i++){
    await db.collection('playlist').add({    //获取playlist的集合     //注意异步操作
      data:{
        ...playlist[i],          //注意三点运算符的使用
        creatTime:db.serverDate()     //获取服务器时间
      }
    }).then((res)=>{
      console.log("插入成功");
    }).catch((err)=>{
      console.log("插入失败");
    })
  }
}

部署完以后就去数据库看一下 发现有数据了 （不过不是6条 ）不知道为啥 疑惑 更新：确实是6条 可能因为我存太多次了，所以一直在累加

3.9歌单数据去重

如果我们再去读取歌单信息，他会又把这些信息放到数据库，这样数据库东西就会越来越多而且是重复的

这时候我们在传入数据库之前要判断之前存不存在 （根据id判断）
我们来取到之前数据库里面的数据

  const list=db.collection("playlist").get()

但是呢 取到的数据是有限制的 最多只能获取100条； 从小程序端获取数据，最多获取20条 如何突破限制呢 我们下节课学（我去看了 更新了现在是1000条，不过还是学习一下）

思路：首先拿到数据库里面的歌单（list）和发请求得到的歌单(playlist) 并且定义一个数组newData来存放新的数据

云函数入口之前：const playlistCollection = db.collection('playlist')

const list = await playlistCollection.get() //得到数据库歌单已有数据 用来去重
const playlist = await rp(URL).then((res) => { //得到请求数据
   return JSON.parse(res).playlists.splice(0, 6) //因为一共有20条 我们只需要6条
  })
  // console.log(playlist);
const newData = [] //存放新的数据
  for (let i = 0; i < playlist.length; i++) {
    let flag=true   //判断是否重复的标志 true表示不重复
    for (let j = 0; j <list.data.length;j++ ){     //注意这里是data      
      if(playlist[i].id===list.data[j].id){
        flag=false
        break
      }
    }
    if(flag){
      newData.push(playlist[i])
    }
  }

所以插入数据库的时候要把 playlist改成newData，…playlist[i]改成…newData[i]

3.10突破获取数据条数的限制

  • 微信官方文档

    • limit:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/collection/Collection.limit.html
    • skip:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/collection/Collection.skip.html
    • 定时触发器 https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/functions/triggers.html
    • 取到数据库条数 https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/collection/Collection.count.html

  • reduce:

    • https://www.cnblogs.com/amujoe/p/11376940.html

    • https://www.liaoxuefeng.com/wiki/1022910821149312/1024322552460832

      一个例子

    var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
    return x + y;
}); // 25

  • concat

我们最多获取云数据库100条数据 如何优化呢

const list = await playlistCollection.get() 需要更改

  1. 获取总数据条数 不要忘记是异步操作 因为后面需要这个值进行计算
  2. playlistConllection.count()得到的是个对象 取到条数还要.total
    https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/collection/Collection.count.html
  3. 然后要判断要取几次 先在上面定义一个常量 MAX_LIMIT=100 如果total是221条的话 需要取3次 我们定义一个batchTimes=total/MAX_LIMIT 然后向上取整 得到取的次数
  4. 然后push到一个数组里 这样tasks里面就有多个promise对象
for(let i=0;i

  1. 然后定义一个list 里面有个数组data[] 注意为什么要定义一个data数组呢 因为上一节课我们也看到了，其实返回的是data里面的东西（ if(playlist[i].id===list.data[j].id)） 一开始我们就是传入数据库的data data下面有请求网络的数据还有一个系统时间

  if(task.length>0){
      //都执行完了再执行下面的
    list=(await Promise.all(task)).reduce((acc,cur)=>{
      return {
        data:acc.data.concat(cur.data)
      }
    })
  }
  1. 回顾：首先取的集合里总的条数，但是返回的是一个对象，所以通过对象.total的方式取到当前数据的总的条数，然后总条数/最大次数向上取整，得到分次取的次数，然后定义一个任务，放的是每个promise的集合，当取的时候，通过i*最大数据的方式每次跳过相应的数据，分次去取，当所有任务都执行完成以后，迭代数据，把数据给list；后面读取链接获取数据，然后对比进行去重操作，然后将相应数据插入到数据库中

条数限制代码完成

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()
const db = cloud.database() //云数据库初始化
const rp = require('request-promise')
const URL = 'http://musicapi.leanapp.cn/top/playlist/highquality/%E5%8D%8E%E8%AF%AD'
const playlistCollection = db.collection('playlist')
const MAX_LIMIT = 10//最大获取信息数量

// 云函数入口函数
exports.main = async (event, context) => {
  // const list = await playlistCollection.get() //得到数据库歌单已有数据 用来去重
  // 因为获取数据库最多100条数据的限制 我们需要优化
  const countResult = await playlistCollection.count() //这是一个对象
  const total = countResult.total //这样才是数字 得到了数据库信息个数
  const batchTimes = Math.ceil(total / MAX_LIMIT) //取数据的次数
  const task = []       //放promise对象的一个数组
  for(let i=0;i<batchTimes;i++){
    let promise=playlistCollection.skip(i*MAX_LIMIT).limit(MAX_LIMIT).get()
    task.push(promise)
  }
  //注意这里为什么这样写
  let list={
    data:[]
  }

  if(task.length>0){
      //都执行完了再执行下面的
    list=(await Promise.all(task)).reduce((acc,cur)=>{
      return {
        data:acc.data.concat(cur.data) //还是不懂这里 这个意思是list=data的值呢还是list下面有个data呢
      }
    })
  }

  const playlist = await rp(URL).then((res) => { //得到请求数据
   // return JSON.parse(res).playlists.splice(0, 6) //因为一共有20条 我们只需要6条(收回这句话 还是要数据多一点)
       return JSON.parse(res).playlists
  })
  // console.log(playlist);
  const newData = [] //存放新的数据
  for (let i = 0; i < playlist.length; i++) {
    let flag = true //判断是否重复的标志 true表示不重复
    for (let j = 0; j < list.data.length; j++) { //注意这里是data      
      if (playlist[i].id === list.data[j].id) {
        flag = false
        break
      }
    }
    if (flag) {
      newData.push(playlist[i])
    }
  }
  for (let i = 0; i < newData.length; i++) {
    await playlistCollection.add({
      data: {
        ...newData[i], //注意三点运算符的使用
        creatTime: db.serverDate() //获取服务器时间
      }
    }).then((res) => {
      console.log("插入成功");
    }).catch((err) => {
      console.log("插入失败");
    })
  }
  return newData.length
}

定时触发云函数

官方文档：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/functions/triggers.html

在config.json里写

{
 "triggers":[
   {
     "name":"myTrigger",
     "type":"timer",
     "config":"0 0 10,14,16 * * * *"
   }
 ]
}

一定注意要上传触发器

可以把云函数超时时间设长一点

微信小程序云开发之网易云音乐_第47张图片

3.11上拉加载下拉刷新

我们在cloudfunction里面新建一个music文件夹 用来专门供取数据用

我们要知道，新的歌单要排在前面，旧的歌单排在后面，

那么应该用什么排序呢？orderBy(“对应的字段”，“desc”) (desc逆序，默认是正序)

我们要先看懂这个

exports.main = async (event, context) => {
  cloud.database().collection('playlist')
  .skip(event.start).limit(event.count)     //从第几条开始取 取到第几条
  .orderBy("creatTime",'desc')
  .get()
  .then((res)=>{
    return res
  })
}

要知道，这是异步操作 所以cloud.database()……前面还要加个await 然后应该是return await cloud.database().collection(‘playlist’)……

这时候我们要去miniprogram里面的playlist文件夹了 来取出这里面的数据

  onLoad: function (options) {
    wx.cloud.callFunction({
      name:'music',
      data:{
        start:this.data.playList.length,    //这里的用法很妙
        count:MAX_LIMIT                    //这里上面已经定义好了 值为15
      }
    }).then((res)=>{
      console.log(res);
    })
  },

完善

 onLoad: function (options) {
    wx.showLoading({
      title: '加载中',
    })
    wx.cloud.callFunction({
      name:'music',
      data:{
        start:this.data.playList.length,
        count:MAX_LIMIT
      }
    }).then((res)=>{
      console.log(res);
      this.setData({
        playList:res.result.data
      })
      wx.hideLoading()
    })
  },

滑动到底部加载：

写到这个钩子函数里面onReachBottom: function () {},

我们会发现还需要请求，但是呢 需要复制粘贴一份请求的代码，我们需要优化一下把发请求封装成一个函数

但是我们又发现触底函数里面发请求的话 有问题 因为我们请求的是当前长度的后15条数据 我们需要拼接上前15条数据

 _getPlaylist(){
    wx.showLoading({
      title: '加载中',
    })
    wx.cloud.callFunction({
      name:'music',
      data:{
        start:this.data.playList.length,
        count:MAX_LIMIT
      }
    }).then((res)=>{
      console.log(res);
      this.setData({
        playList:this.data.playList.concat(res.result.data)
      })
      wx.hideLoading()
    })
  },

那下拉刷新呢 ？ 先把playlist置空 再发请求 还有个问题 下拉刷新有三个点 ，数据请求完成了 点还在 所以请求数据那里应该再加一句置空的句子

3.12路由优化tcb-router

  • 一个用户在一个云环境中只能创建50个云函数

  • 相似的请求归类到同一个云函数处理

    • 举个例子music里面用来获取歌单信息，这是一个功能，后面的课里面我们还要获取当前歌单里面有哪些歌曲，以及歌曲对应的url地址，我们还要获取歌曲的歌词信息，这些功能我们难道都要独立创建一个文件吗？不是的，类似的可以放在一个文件里面 这些我们都可以放在music文件里面，博客我们就创建一个文件夹专门放博客
    • 这时候就需要tcb-router
    • 相关链接：
      • https://blog.csdn.net/hongxue8888/article/details/104599794/
      • https://github.com/TencentCloudBase/tcb-router
      • https://www.v2ex.com/t/491897

  • tbc-router是一个koa风格（node的一个框架）的云函数路由库

在这里插入图片描述

第一层执行完了执行第二层 第二层执行完了执行第三层 当最后一个中间件执行完以后才会往回执行

现在我们来举个例子 demo里面写两个按钮 当点击的时候，调用同一个云函数 但是一个是获取音乐信息，一个获取movie信息，就是说在同一个云函数里接收两个不同的路由请求， getMusicInfo是获取个人信息，音乐名称和音乐类型，getMovieInfo也是个人信息，电影名称和电影类型

exports.main = async (event, context) => {     
  const app=new TcbRouter({event})
  //这个是适用所有路由的
  app.use(async(ctx,next)=>{
    ctx.data={},
    ctx.data.userInfo=event  //我们要知道 云函数入口函数里面的event里面有个人信息
    await next()
  })
  //这是只适用于music的
  app.router('music',async(ctx,next)=>{
    ctx.data.musicName="数鸭子",
    await next()
  },async(ctx,next)=>{       //musicName得到数据以后执行下面的
    ctx.data.musicType="儿歌" 
  //这时候可以返回数据了
    // ctx.body 返回数据到小程序端
    ctx.body={
      data:ctx.data
    }
  })

  //这是只适用于movie的
  app.router('movie',async(ctx,next)=>{
    ctx.data.movieName="千与千寻",
    await next()
  },async(ctx,next)=>{       //movieName得到数据以后执行下面的
    ctx.data.movieType="儿歌" 
  //这时候可以返回数据了
    ctx.body={
      data:ctx.data
    }
  })

  //最后千万别忘了 return app.serve();
  return app.serve();
}

  //获取音乐信息
  getMusicInfo(){
    wx.cloud.callFunction({
      name:'tcbRouter',  //云函数文件名叫tcbRouter
      data:{
        $url:'music'
      }
    }).then((res)=>{
      console.log(res);
    })
  },
  //获取电影信息同理

所以我们更改一下music下的代码：

// 云函数入口文件
const cloud = require('wx-server-sdk')
const TcbRouter=require('tcb-router')
cloud.init()
//与音乐相关的数据库都放这里面
// 云函数入口函数
exports.main = async (event, context) => {
  const app=new TcbRouter({event})
  app.router('playlist',async(ctx,next)=>{
    ctx.body=await cloud.database().collection('playlist')  //ctx.body后面就是要返回的
    .skip(event.start).limit(event.count)
    .orderBy("creatTime",'desc')
    .get()
    .then((res)=>{
      return res
    })
  })
  return app.serve()
}

微信小程序云开发之网易云音乐_第48张图片

这里data里也要增加一个参数$url因为当时只写了在哪个云函数里，现在我们用了tcbrouter也要指定里面的路由名称

3.13 3.14自定义列表组件

在我们的playlist组件里面,还应该绑定事件：goToMusiclist

然后跳转到musiclist(新建的一个页面，用于点击歌单，跳转到音乐列表页面) 这时候需要传参

url: ‘…/…/pages/musiclist/musiclist?playlistId=’+this.properties.playlist.id,

然后在musiclist的onload里面接收参数

然后我们就要获取playlistid对应的音乐列表

api接口：https://music.163.com/api/playlist/detail?id=歌单里的id 注意不登录没有cookie的话不能拿到全部数据

  music云函数里
    //根据id 获取歌单对应的歌曲
  url='https://music.163.com/api/playlist/detail?id='+parseInt(event.playlistId)
  let options = {
    method:"POST",
    url,
    headers: {
    	cookie:'MUSIC_U=XXXXXX'          //因安全问题不能放出来后续会根据登录获取cookie放到这里面
    },
  }	
  app.router('musiclist',async(ctx,next)=>{
    ctx.body=await rp(options)
    .then((res)=>{
      return JSON.parse(res)
    })
  })
  return app.serve()

//musiclist

  onLoad: function (options) {
    console.log(options);  //得到id
    wx.cloud.callFunction({
      name:'music',
      data:{
        playlistId:options.playlistId,          //把playlistId传入云函数里的event
        $url:'musiclist'
      }
    }).then((res)=>{
      console.log(res);
  })
  },

这样就可以拿到数据了

然后就可以渲染到页面上

这个地方用到了 透明度 filter 层级 还有背景图等知识点

背景是一个高斯模糊的效果，我们把照片平铺，然后做出来模糊效果，然后再盖一层黑色的遮罩

在这里插入图片描述

在这里插入图片描述

然后下面的歌曲 也应该像上次歌单那样写个组件 不过为了展示不止有一种方法，这次用了另一种方法
（上次是什么样呢 是原来的页面进行循环，然后组件页面就相当于是拿到了一条数据，来写一条数据的样式，然后循环到最后，一条条数据最终都去过了组件页面，最后展示出了所有数据都是组件写的样式
这次呢，是我们把所有数据都传到了组件页面，在组件页面循环）

这里有一个坑：flex布局以后 flex:1 但是还是超出了盒子 这时候怎么办呢
https://blog.csdn.net/qq_41075132/article/details/82865248

有一个很妙的地方：如果一个页面是前一个页面跳转过来的，而我们又专注于写后面的那个页面，我们知道可以改编译模式，但是没有参数是不行的 我们可以在下面添加启动参数（不知道为什么后面那个字符串不用加“” 而且注意用的是等号，不是：）

微信小程序云开发之网易云音乐_第49张图片

点击变红 基本操作了 不贴代码了 思路就是点击传参，把参数写data里，然后页面里面判断当前id与data里的id相不相等，相等添加样式 用三元运算符

微信小程序云开发之网易云音乐_第50张图片

有一个知识点以前一直没有注意过： 以前只知道currentTarget比较精确 为什么这里接收参数currentTarget有值而target没有呢？因为事件是绑定在容器上的 当点击某一条歌曲的时候，由于js里面有一条事件机制（冒泡）由于js是从事件源开始逐层向父元素传播，当点击name的时候，就相当于点击了container，触发事件处理函数，但是真正点击的是name

事件三要素:事件源（谁触发） 事件处理函数 事件对象（就像是event） 事件类型（tap）,我们要区分当前的事件源是谁，如果点击了name真正的事件源其实是name target指的就是真正的事件源，但是name上面没有我们的data-XX ,currentTarget指的是绑定事件的元素 就是我们的container元素

3.15总结

微信小程序云开发之网易云音乐_第51张图片

微信小程序云开发之网易云音乐_第52张图片

第四章播放页面

4.1

4.2播放页布局

在这里插入图片描述

我们的musiclist做完后是这样的，然后我们发现 播放页要的数据在musiclist里面都有了（这是老师的那种情况，他的api和我的不一样，所以我是没有音乐的url的），当然我们可以用调用api根据id获取信息（因为比前面那个方法多发了请求，所以用户体验会不好）

我们先看看老师的方法，他这种方法可以用本地存储 然后到播放页再取出来本地缓存，这里不用担心数据会越积越多的情况，因为key相同的话，value值会覆盖掉

知识点，如果页面之间要传递多个参数，可以用&符号连接

这时候我们要把缓存取出来，注意要放在一个全局变量里面因为不需要在界面显示，还有正在播放的index也不需要在页面显示

// pages/player/player.js
let musiclist = []
// 正在播放歌曲的index
let nowPlayingIndex = 0
Page({

  /**
   * 页面的初始数据
   */
  data: {
   
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    console.log(options)
    musiclist = wx.getStorageSync('musiclist')
    nowPlayingIndex:options.options.index
  },

然后就可以专门定义一个方法来取当前的信息，写完了放onload里面

微信小程序云开发之网易云音乐_第53张图片

看到这里发现没有api实在是不好弄 我找不到可以播放音乐的接口了 我想自己买一个服务器学着怎么搭建，然后就可以畅通无阻了

插播：服务器

微信小程序云开发之网易云音乐_第54张图片

注册完以后

微信小程序云开发之网易云音乐_第55张图片

重置实例密码

微信小程序云开发之网易云音乐_第56张图片

微信小程序云开发之网易云音乐_第57张图片

安全组规则：

在这里插入图片描述

微信小程序云开发之网易云音乐_第58张图片

微信小程序云开发之网易云音乐_第59张图片

老师加了这三个

微信小程序云开发之网易云音乐_第60张图片

安装ssh客户端软件

客户端：filezilla： 终端：xshell

微信小程序云开发之网易云音乐_第61张图片

我又在网上找到api了 …… 先不学建服务器了

4.2接着上面的4.2

一些东西我喜欢往data里面放，一些关于界面显示的可以往data里面放，有些东西直接放在最外面也可以在任意函数里面用，没必要放data

我们在列表页点击的时候要传到player页面两个参数，一个index一个id id的话是为了得到歌曲播放的url和歌词，index的话是为了判断取缓存里的哪一条数据

我的疑问，为什么要放缓存呢，难道不能跳转的时候直接传参（歌曲名，歌手，封面）吗？

学习一下图片撑满整个屏幕

微信小程序云开发之网易云音乐_第62张图片

我们的模糊效果：

.container{
  /* background: url(http://p4.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg); */
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  filter: blur(40rpx);
  opacity: 0.7;
  z-index: -1;
}
.mask{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #222;
  z-index: -2;
}

这里的唱臂是用::after添加上去的

微信小程序云开发之网易云音乐_第63张图片

4.3iconfont字体图标

注意微信小程序云开发之网易云音乐_第64张图片

4.4音乐控制面板功能实现

注意使用BASE_URL来简化代码

获取全局唯一的背景音乐播放器（关键词：唯一）：相当于js里面的单例模式

本来是在player.js里请求数据的，后来看老师的是在云函数里请求的，我觉得很有道理，然后再云函数同时请求了url和lyric，都成功了才返回，但是我觉得下次再遇到这样的不能这样写了，因为这两个有的返回时长慢有的返回时长快，url如果已经请求到数据了就没必要等歌词了，不能为了减少代码量而增加等待时间 然后还有个问题，官方有时候歌词是请求不到的，我们要在这时候判断一下有没有歌词，要不然返回的时候回出错，如果没有歌词就返回空就行了。

我以前都没有注意过这个，

注意单引号：

4.5音乐控制面板功能实现（2）

有一个地方很好，我们上个视频是因为当前页面点击上一首下一首，还要用到发布订阅，这个的话因为我们用到了缓存，从缓存里取出来了，所以上一首下一首实现是很方便的

还有细节要注意，比如说一开始是暂停的，获取到数据以后播放，还有播放到最后一首回到第一首，播放第一首点上一曲回到最后一首

4.6进度条组件

一定要记住常用的居中方法

  left: 50%;
  transform: translateX(-50%);

我们的进度条是要自己做的，为什么不用官方给的呢？我们要联系一种案例，比如说左滑，数据的右边显示删除，点击删除，数据就删除掉了（slider适用范围比较少）

这次学了滑动组件和可移动组件

关于可移动动画：

https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html

direction damping x

我们如何在js获取元素的信息呢

    _getMovableDis(){
      //现在是在组件当中，所以用this而不是wx
      const query=this.createSelectorQuery()
      query.select('.movable-area').boundingClientRect()
      query.select('.movable-view').boundingClientRect()
      query.exec((rect)=>{
        console.log(rect);
        movableAreaWidth=rect[0].width
        movableViewWidth=rect[1].width
        console.log(movableAreaWidth,movableViewWidth);
      })
    },

知识点：如何判断是不是undefined？可不可以XXX==undefined? 不可以，因为null也等于undefined 不严格

三等号可以 或者是typeof XXX==‘undefined’

然后是格式化时间

    _dateFormat(second){
      const minute=Math.floor(second/60)
      second= Math.floor(second%60)
      return {
        "min":minute,
        "sec":second
      }
    }

    //格式化时间
    _dateFormat(second){
      const minute=Math.floor(second/60)
      second= Math.floor(second%60)
      return {
        "min":this.parse0(minute),
        "sec":this.parse0(second)
      }
    },
    //补零操作
    parse0(sec){
      return sec<10?'0'+sec:sec
    }

 //进度条的时间
    _setTime(){
      const duration=backgroundAudioManager.duration
      console.log(duration);
      const durationFMT=this._dateFormat(duration)
      console.log(durationFMT);
      this.setData({
        "showTime.totalTime":`${durationFMT.min}:${durationFMT.sec}`
        //这里老师说外面要加中括号,我没加也赋上值了
      })
      console.log(this.data.showTime.totalTime);
    },
    //格式化时间
    _dateFormat(second){
      const minute=Math.floor(second/60)
      second= Math.floor(second%60)
      return {
        "min":this.parse0(minute),
        "sec":this.parse0(second)
      }
    },
    //补零操作
    parse0(sec){
      return sec<10?'0'+sec:sec
    }

4.8进度条与播放时间联动

在这里我们前面获取的宽度就派上用场了

微信小程序云开发之网易云音乐_第65张图片

但是呢，微信小程序云开发之网易云音乐_第66张图片

我们不用setdata那么多次的，一秒触发一次就行了，那么如何变成一秒只触发一次呢 我们可以取到前面的秒数，如果秒数已经设置过，那么就不再对他设置了

      backgroundAudioManager.onTimeUpdate(() => {
        const currentTime=backgroundAudioManager.currentTime
        const duration=backgroundAudioManager.duration
        //变成字符串根据点分割，如果与currentSec不相等，就setdata
        
        if(currentTime.toString().split('.')[0]!=currentSec){
          console.log(currentTime);//测试setdata的次数是不是少了
          const currentTimeFmt=this._dateFormat(currentTime)
          this.setData({
            //正在播放的时间,滑块距离，进度
            "showTime.currentTime":`${currentTimeFmt.min}:${currentTimeFmt.sec}`,
            movableDis: (movableAreaWidth - movableViewWidth) * currentTime / duration,
            progress: currentTime / duration * 100,
          })
          currentSec=currentTime.toString().split('.')[0]
        }

4.9拖拽进度条（小程序组件）

这时候就要在滑块上加上事件处理函数

bindtouchend是在触摸完成的时候触发

我们发现，onChange事件在没有动他的时候，他也会被触发，他有一个source属性，当没动它自己就触发的时候属性是空的，但是拖动触发的时候，source为touch 所以我们就要判断souce是不是touch

    onChange(e){
      // console.log(e);
      //判断是不是拖动触发的
      if(e.detail.source==="touch"){
        console.log(e);
        //注意我们没有setdata 为什么呢 因为如果这样的话，他会频繁setdata给progress和movableDis赋值，小程序带不动，我们应该在用户松手的时候赋值就好了 这里把值保存起来待会给onTouchEnd那个事件处理函数用
        // 疑问：这里的progress和movableDis指的是什么？
        this.data.progress=e.detail.x/(movableAreaWidth-movableViewWidth)*100
        this.data.movableDis=e.detail.x
      }
    },
    onTouchEnd(){
      const currentTimeFmt=this._dateFormat(Math.floor(backgroundAudioManager.currentTime))
      this.setData({
        progress:this.data.progress,
        movableDis:this.data.movableDis,
        "showTime.currentTime":currentTimeFmt.min+':'+currentTimeFmt.sec
      })
      console.log(this.data.progress);
      backgroundAudioManager.seek(duration*this.data.progress/100)
    },

4.10自动播放下一首（有个组件通信）及一些优化

微信小程序云开发之网易云音乐_第67张图片

我们发现 ，播到最后会变成这样 我们应该处理一下，播放完是onEnded

知识点：我们现在应该在组件里调用player里的onNext() 该怎么调用呢

这里就用到了组件通信

triggerEvent(“XXX”) 然后在调用组件那里绑定事件（自定义事件） bindXXX="onNext "

微信小程序云开发之网易云音乐_第68张图片

我们还会发现

他有的时候会往回闪一下 为什么呢

微信小程序云开发之网易云音乐_第69张图片

产生了冲突

怎么解决呢 可以增加一个锁（知识点） 我们全局定义个变量ismoving （标志是否在拖拽） 如果在拖拽 就不执行onTimeUpdate

进入onChange里面设为true 进入onTouchEnd里面设为false 然后再onTimeUpdate里面判断如果是假 就执行我们以前写的代码

但是小程序还有个坑：按照我们的思路我们松开了手以后这个变量应该是false了 ，但是小程序有概率又触发一次onchange把它变成true

那又该怎么解决呢 每次播放都会触发onplay 我们在里面再设置一次false

我们要注意不能再小程序中频繁的setdata 应该多加一些判断避免

4.11-12歌词组件(正则)

注意，我们知道点击显示出歌词组件，但是原来的是用if else 还是用hidden好呢？–频繁切换用hidden好

在这里插入图片描述

一个疑问 为什么要把状态传入到歌词组件里面呢 而不是直接在player里面判断

微信小程序云开发之网易云音乐_第70张图片

我们这样可以监听歌词的信息

在这里插入图片描述

我们要对它处理一下

我们先根据换行进行分割，

微信小程序云开发之网易云音乐_第71张图片

 methods: {
    _parseLrc(sLrc){
      let line=sLrc.split('\n')
      let _lrcList=[]
      // console.log(line);
      line.forEach((elem)=>{
        let time = elem.match(/\[(\d{2,}):(\d{2})(?:\.(\d{2,3}))?]/g)
        if(time!=null){
          // console.log(time); [00:00.39]
          let lrc=elem.split(time)[1]
          // console.log(lrc);   //只留歌词
          let timeReg=time[0].match(/(\d{2,}):(\d{2})(?:\.(\d{2,3}))?/)
          // console.log(timeReg); 
          // 0: "02:03.26"
          // 1: "02"
          // 2: "03"
          // 3: "26
          //把时间转化为秒
          let time2Seconds=parseInt(timeReg[1])*60+parseInt(timeReg[2])+parseInt(timeReg[3])/1000
          //每一行歌词代表的时间和对应的文字
          _lrcList.push({
            lrc,
            time:time2Seconds
          })
        }
      })
      this.setData({
        lrcList:_lrcList
      })
      console.log();
    }
    
  },

4.13歌词联动（组件与组件通信 +scroll-top）

这个的思路是什么样呢？我们要在progressbar的onTimeUpdate里面拿到时间，与我们的歌词组件里面的lrcList的time做匹配，我们就知道对应的歌词了 然后把歌词变成高亮的，

所以我们就要知道如何把一个组件的值传到另外一个组件，又用到了上次的组件通信，但是跟上次的不一样，这次是传的值而且是在组件与组件中的通信 疑问：这个通信和发布订阅模式的区别？

在这里插入图片描述

第三张图是根据class名称选择的

可以看到lyric里面可以打印歌词了

微信小程序云开发之网易云音乐_第72张图片

我们接下来考虑如何匹配

update(currentTime){
      console.log(currentTime);
      let lrcList=this.data.lrcList
      if(lrcList.length==0){
        return 
      }
      for(let i=0,len=lrcList.length;i<len;i++){
        if(currentTime<=lrcList[i].time){
          this.setData({
            nowLyricIndex:i-1
          })
          break
        }
     }
    },

微信小程序云开发之网易云音乐_第73张图片

我们可以看到当播放到一句歌词时，当前歌词会变红，但是我们平常听音乐正在播放的歌词是滚动到页面中间的

这时候用到了scrollview里的scroll-top 而且单位是px 我们的lyric是rpx单位，那么他们俩之间如何换算呢

获取手机信息：

wx.getSystemInfo

然后可以得到手机的px单位 然后除750 得到1rpx的大小 然后乘我们设置的歌词高度 （64）就获得了一句歌词对应的px大小

这里又有一个问题

在这里插入图片描述

拖到后面为什么不动了呢

微信小程序云开发之网易云音乐_第74张图片

如果拖到后面 他会一直大于歌词对应的时间 就不会执行下面的语句了

我们看怎么解决的

  update(currentTime) {
      // console.log(currentTime)
      let lrcList = this.data.lrcList
      if (lrcList.length == 0) {
        return
      }
      //解决进度条拖到最后 歌词不滑到最下面问题
      if (currentTime > lrcList[lrcList.length - 1].time) {
        if (this.data.nowLyricIndex != -1) {
          this.setData({
            nowLyricIndex: -1, //没有歌词要高亮
            scrollTop: lrcList.length * lyricHeight
          })
        }
      }
      for (let i = 0, len = lrcList.length; i < len; i++) {
        if (currentTime <= lrcList[i].time) {
          this.setData({
            nowLyricIndex: i - 1,
            scrollTop: (i - 1) * lyricHeight
          })
          break
        }
      }
    },

然后解决没有歌词的歌曲显示歌词的问题

  observers: {
    lyric(lrc) {
      if (lrc == '暂无歌词') {
        this.setData({
          lrcList: [{
            lrc,
            time: 0,
          }],
          nowLyricIndex: -1
        })
      } else {
        this._parseLyric(lrc)
      }
      // console.log(lrc)
    },
  },

4.14修改亿点点bug

在播放音乐页面点击上一首或者下一首 返回到列表页还是以前点击的歌曲高亮

我们先想一下，高亮是在playlist里面判断index 设置的，上一首下一首是在player里面执行的onNext和onPrev实现的

这时候又要用到传值了 我们这次用到了全局的app.js

思路：在player里面把当前的musicId存下来 然后app.js里面把这个id存下来，然后musicList从app.js里取出来

app,js:

  onLaunch: function () {
    this.globalData={
      playingMusicId:-1
    }
  },
  setPlayingMusicId(musicId){
    this.globalData.playingMusicId=musicId
  },
  getPlayingMUsicId(){
    return this.globalData.playingMusicId
  },

player.js:

  app.setPlayingMusicId(musicId)

musicList:

  pageLifetimes:{
    show(){
      let playingId=app.getPlayingMUsicId()
      this.setData({
        playingId
      })
    }
  },

系统播放暂停与小程序不同步问题

微信小程序云开发之网易云音乐_第75张图片

怎么解决呢 我们发现在点击系统播放暂停时 会触发progress-bar里面的onplay与onpause事件

这时候我们可以去设置player.js里的isplaying 现在问题就变成了如何触发onpaly与onpause以后设置另一个组件isplaying的值 又用到了组件之间通信的知识点

progress-bar:

在这里插入图片描述

微信小程序云开发之网易云音乐_第76张图片

微信小程序云开发之网易云音乐_第77张图片

还可以再完善的

退出再播放同一首音乐会重新播放的bug

插播：听说：微信小程序云开发之网易云音乐_第78张图片

4.15下一章预告

微信小程序云开发之网易云音乐_第79张图片

第五章 发现页面

5.1

5.2 搜索组件

阿里巴巴图标库也可用i标签

细节：图标点击区域小？那就给他个大盒子，点击盒子触发事件

然后在这里插入图片描述

这里我们单独抽出来做组件

微信小程序云开发之网易云音乐_第80张图片

这个搜索组件中的placeholder我们可以直接在页面上写 但是呢我们如果引用到其他地方可能就不适用了 所以我们最好在逻辑层写placeholder

然后呢 我们组件里有一个搜索图标，可以在组件里建一个文件，导入阿里巴巴图标库图标

再介绍一种方法：组件外部样式类

微信小程序云开发之网易云音乐_第81张图片

在这里插入图片描述

但是有个坑要注意，我们发现样式是修改不了的 （样式隔离）我们就可以再添加一个class名称

5.3底部弹出层（有个知识点插槽）

我们再来了解一下第三种引用样式方法

微信小程序云开发之网易云音乐_第82张图片

链接：

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html

组件里传入modalshow data里面是false 然后点击发布按钮以后变成true了 传入到组件里面，组件判断true的话不隐藏，false的话隐藏。 然后就是叉号，点击的话就不显示

然后这个功能是怎么实现的呢微信小程序云开发之网易云音乐_第83张图片

里面的东西不是写死的–用到了插槽slot 相当于占位符

在子组件内占坑，在父组件里填坑。

微信小程序云开发之网易云音乐_第84张图片

微信小程序云开发之网易云音乐_第85张图片

微信小程序云开发之网易云音乐_第86张图片

用了插槽以后，组件的使用会更加的灵活

5.4授权组件

wx.getsetting:

https://developers.weixin.qq.com/miniprogram/dev/api/open-api/setting/wx.getSetting.html

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/authorize.html

通过上面的getsetting判断用户有没有授权，有授权的话就getUserInfo获取用户信息，没有的话就弹出我们的底部弹窗让用户登录。

这个底部弹窗我们专门做一个bottom-modal来放弹窗的壳子，因为不只是这里用到

微信小程序云开发之网易云音乐_第87张图片

我们先再创建一个login组件，传入modalShow 然后里面的父元素是一个组件，里面的子元素是要在底部弹窗组件里面的（填槽），先前底部弹窗组件已经有了一个名字为modal-content的插槽了，我们再login里面写的内容 都会显示在弹窗里面。

再login组件里写一个按钮，通过按钮获得用户信息，

微信小程序云开发之网易云音乐_第88张图片

微信小程序云开发之网易云音乐_第89张图片

5.5编辑页面

微信小程序云开发之网易云音乐_第90张图片

这里有个小功能，输入的时候会有输入字的个数 然后最多的字数为140字，

还有要注意的，我们模拟器是可以看到下面的footer的，但是到真机上，输入法会把footer盖住，我们要解决这个问题

基本布局：

微信小程序云开发之网易云音乐_第91张图片

注意原生组件 如textarea camera 等 原生组件是脱离webView的 他是层级最高的，非原生组件可以用z-index设置层级，调整层级关系，但是原生组件，不管把其他元素z-index设置多大，都覆盖不了原生组件，还有原生组件不能显示在容器里，比如不能放在scroll-view，swiper, movable-view,里面。还有，他是不支持css动画的。

我们这里的textarea是不能设置绝对定位的，还有一个坑 就是不能用bind:tap 可以用bindtap

  onInput(event) {
    // console.log(event.detail.value)
    let wordsNum = event.detail.value.length
    if (wordsNum >= MAX_WORDS_NUM) {
      wordsNum = `最大字数为${MAX_WORDS_NUM}`
    }
    this.setData({
      wordsNum
    })
    content = event.detail.value
  },

然后就解决手机上输入法会遮挡footer的问题了 textarea 有一个属性auto-focus 我们再添加两个属性

微信小程序云开发之网易云音乐_第92张图片

更改footer的bottom 因为他是绝对定位。所以改变bottom的值就行了

微信小程序云开发之网易云音乐_第93张图片

在这里插入图片描述

5.6选择图片逻辑

我们最大图片个数设为9 选满9个加号消失

在选择图片图标上添加一个事件处理函数 里面用到了wx.chooseImage 里面有个count

我们可以定义一个数组，当选择完图片以后就存到数组里，然后根据数组的长度判断还能选择的个数

删除的话用到了splice 那么删除了以后加号应该又要出来了

插播上一节的内容

我们这里的footer没有加高度，直接元素撑起来的

.footer {
  display: flex;
  align-items: center;
  position: fixed;
  bottom: 0;
  padding: 20rpx;
  width: 100%;
  box-sizing: border-box;
  background: #f1f1f1;
}

5.7多文件上传云存储（知识点云存储，正则）

我们把数据放到云数据库里面，

然后我们的图片要放到云存储 云存储会有个fileID 他是我们的唯一标识 云文件的ID

所以我们的数据库存的是内容还有图片的fileId,另外还有用户的openid,昵称，头像，时间，

1.图片->云存储 fileID 云文件ID

2.数据->云数据库

图片上传：

wx.cloud.uploadFile

https://developers.weixin.qq.com/minigame/dev/api/network/upload/wx.uploadFile.html

我们再云存储里新建一个文件blog

微信小程序云开发之网易云音乐_第94张图片

然后

publish(){
   // 因为云存储是单文件上传，我们要多文件上传，所以要加循环
    for (let i = 0, len = this.data.imgArr.length; i < len; i++) {
      let item = this.data.imgArr[i]
      // 文件扩展名
      let suffix = /\.\w+$/.exec(item)[0]
      wx.cloud.uploadFile({
        //这里是防止重名的情况 如果重名的话会覆盖掉以前的图片
        cloudPath: 'blog/' + Date.now() + '-' + Math.random() * 1000000 + suffix,
        filePath: item,
        success: (res) => {
          console.log(res)
          resolve()
        },
        fail: (err) => {
          console.error(err)
          reject()
        }
      })
    }
  },

正则那里 \w:字母数字下划线 +：不止一个 $：以这个结尾

5.8存入到云数据库（知识点 三点运算符）

我们要知道，上传到云存储是个异步过程，存入云数据库又需要云存储返回的fileID

我们要多个图片上传任务都执行完以后，然后把fileId拼接成一个数组，然后把数组存入到数据库

这时候又用到了promise.all

思路：先定义一个promiseArr数组 用来存放每次循环得到的promise对象
循环完了以后，promise.all(promiseArr) 然后.then里面就是存放到数据库的一些操作
这时候我们到数据库新建一个集合blog 然后要到集合里面

  1. 对数据库进行初始化 const db=wx.cloud.database()
  2. 然后在promise.all里面 通过.add的方式往集合里面插入对应的数据（内容 图片 用户id 用户昵称和头像 时间 ）
    内容的话在handleInput里面可以拿到 图片
  3. 微信小程序云开发之网易云音乐_第95张图片这里有个注意的地方就是如果输入是空的话就没必要返回了，直接return
  4. 然后我们的fileID有很多个，我们就把他存在数组里面 用到了concat
  5. openId呢是自带的
  6. 昵称 头像 可以再onload里面拿到 因为userinfo是个对象，想把每个属性都插入进来怎么办呢 用到了三点运算符
  7. 时间：两种方法，一种是获取客户端时间，第二种是获取服务端时间
    客户端时间可能是与网络同步，也可能不同步
    我们应该取服务端时间 db.serverDate()
  8. 然后可以 一开始就loading 然后 .then 弹窗发布成功 并且hideloading 然后.catch 弹窗发布失败 hideloading

在这里插入图片描述

这里的id和openid都是自动生成的

打卡帖个代码

// miniprogram/pages/blog-edit/blog-edit.js
let TEXT_NUM_MAX = 100
let IMG_MAX = 9
const db=wx.cloud.database()
let content='' //输入文字内容
let userInfo={}
Page({

  /**
   * 页面的初始数据
   */
  data: {
    textCount: 0, //计数（输入框）
    imgArr:[],     //图片列表
    showAddIcon: true, //是否显示加号
    footerBottom: 0, //输入时 footer距底部高度

  },
  //输入字数显示
  handleInput(e) {
    let textCount = e.detail.value.length
    this.setData({
      textCount
    })
    if (textCount >= TEXT_NUM_MAX) {
      this.setData({
        textCount: `最多输入${TEXT_NUM_MAX}个字`
      })
    }
    content=e.detail.value
  },
  //添加图片
  addImg() {
    //存放图片的数组
    let count = 0
    let imgArr = []
    wx.chooseImage({
      count: IMG_MAX - this.data.imgArr.length,
      success: (e) => {
        console.log(e);
        imgArr = e.tempFilePaths
        this.setData({
          imgArr: this.data.imgArr.concat(imgArr)
        })
        let length = this.data.imgArr.length
        if (length >= IMG_MAX) {
          this.setData({
            showAddIcon: false
          })
        }
      },

    })

  },
  //删除图片
  deleteImg(e){
    let index=e.currentTarget.dataset.index
    let imgArr=this.data.imgArr
    imgArr.splice(index,1)
    this.setData({
      imgArr
    })
    this.setData({
      showAddIcon:true
    })
    
  },
  // 更改footer距底部高度
  onFocus(e) {
    console.log(e.detail.height);
    let height = e.detail.height
    this.setData({
      footerBottom: height
    })
  },
  onBlur() {
    this.setData({
      footerBottom: 0
    })
  },
  // 发布按钮
  send(){
    let promiseArr=[] //保存promise每个对象
    let fileIds=[] //保存fileId
    for(let i=0;i<this.data.imgArr.length;i++){
      //每次循环都new一个新的promise对象
      let p=new Promise((resolve,reject)=>{
        let item=this.data.imgArr[i]
        wx.cloud.uploadFile({
          cloudPath:"blog/"+Date.now()+'.jpg',
          filePath:item,
          success:(res)=>{
            console.log(res);
            fileIds=fileIds.concat(res.fileID)
            resolve()
          },
          fail:(err)=>{
            console.log(err);
            reject()
          }
        })
      })
     promiseArr.push(p)
    }
    Promise.all(promiseArr).then((res)=>{
      // 存放到数据库
      db.collection("blog").add({
        data:{
          ...userInfo,
          content,
          img:fileIds,
          creatTime:db.serverDate()
        }
      }).then((res)=>{
        wx.showToast({
          title: '发布成功',
        })
      })
    })
   
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options);
    // 这里暂时不用 我们先写布局和样式
    userInfo=options
  },

})

5.9博客卡片组件

这里就要取出数据库内容了，

这个跟以前的歌单有点像，先来回顾一下歌单是怎么做的

在这里插入图片描述

微信小程序云开发之网易云音乐_第96张图片

我们在云函数接收 start和count start就是date里面存放playlist数组的长度，count就是每次加载多少条
然后onload里面触发一次 每次触底也触发

  1. 创建一个博客的云函数 然后安装一个tcb-router

  2. 准备工作

    // 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()
const TcbRouter=require("tcb-router")
const db=cloud.database()   //引入数据库
// 云函数入口函数
exports.main = async (event, context) => {
  const app=new TcbRouter({
    event
  })

  return app.serve()
}

  3. 云函数里面

    // 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
const TcbRouter=require("tcb-router")
const db=cloud.database()   //引入数据库
const blogCollection= db.collection("blog")
// 云函数入口函数
exports.main = async (event, context) => {
  const app=new TcbRouter({
    event
  })
  app.router("list", async(ctx,next)=>{
   let blogList=await blogCollection.skip(event.start)
    .limit(event.count)
    .orderBy("date",'desc')
    .get()
    .then((res)=>{
      return res
    })
    ctx.body=blogList
  })
  return app.serve()
}

  4. 回到pages里的blog.js
    自己封装一个_loadBlogList方法

     _loadBlogList(){
    console.log(111);
    wx.cloud.callFunction({
      name:"blog",
      data:{
        $url:'list',
        start:this.data.blogList.length,
        count:1     //因为数据少，所以每次下拉刷新就加载一个
      }
    }).then((res)=>{
      let data=res.result.data

      this.setData({
        blogList:this.data.blogList.concat(data)
      })
    })
  },

  5. 卡片组件

5.10时间格式化处理

注意，因为我们的数据库的数据传入到组件里面 这时候时间是服务器端时间，长这样
Mon Feb 08 2021 00:11:07 GMT+0800 (中国标准时间)(云数据库类型)
我们new Date(Mon Feb 08 2021 00:11:07 GMT+0800)他就会变成js类型的时间
结果：2021-02-07T16:11:07.000Z

然后我们要在组件对他处理：又用到了observers监听 我们可以

微信小程序云开发之网易云音乐_第97张图片

但是呢，我们这个可以通用，所以可以放到utils里面

 observers:{
    ["blog.date"](val){
      let time=formatTime(val)
      // console.log(time);
      this.setData({
        time
      })
    }
  }

注意这里为什么新定义了一个time
因为是监听blog.date的变化 如果改变date会造成死循环

5.11细节处理(知识点 子页面如何调用父页面方法)

上次是根据数组长度赋给start的 现在第二种思路：

微信小程序云开发之网易云音乐_第98张图片

 onLoad: function(options) {
    console.log(options.scene)
    this._loadBlogList()  //不传值默认是0
    }
 onPullDownRefresh: function() {
    this.setData({
      blogList: []
    })
    this._loadBlogList(0)
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {
    this._loadBlogList(this.data.blogList.length)
  },

还有点击图片放大 用到了onPreviewImg

点击进入详情页 点击跳转
然后新建一个blog-comment

然后有个bug 我们点图片的时候 会发现他也跳转了 这样是不行的，点击图片应该是放大图片才对，为什么呢，我们的组件是用的bindtap 有个冒泡机制 ，我们要把他改成bindcatch

还有个要注意的，如果我们发布的时候想在下面加个蒙版，为了防止用户乱点，怎么办呢 可以在showloading里面加个mask

编辑完跳回blog页面并刷新 在navigateback下面写相应的代码 那么如何在blog-edit页面控制blog页面的onPullDownRefresh呢
这几涉及到知识点，如何在子界面调用父界面的功能

https://developers.weixin.qq.com/miniprogram/dev/reference/api/getCurrentPages.html getCurrentPage

微信小程序云开发之网易云音乐_第99张图片

插播：这里发现上古时期的bug

微信小程序云开发之网易云音乐_第100张图片

这个是给第一次登陆和以后登陆跳转到编辑页面用的
所以他们两个传入的值都应该相同 我当时组件里是这样写的

微信小程序云开发之网易云音乐_第101张图片

然后微信小程序云开发之网易云音乐_第102张图片

这样的话他俩就能调用这个函数了

在这里插入图片描述

但是呢组件里的e打印出来是这样的，我还以为当时没看清 应该userInfo再.detail呢

微信小程序云开发之网易云音乐_第103张图片

然后我就组件里

在这里插入图片描述

但是其实并不是这样，这个detail是自动加上去的， 所以我们

在这里插入图片描述

应该先取到userinfo（里面有昵称等）（e.detail） 然后再调用loginSuccess

这是一种方法，

还有一种
在这里插入图片描述

5.12模糊查询

这里我们为了搜索组件有更高的复用性，就不在组件里操作了
把组件里输入的字符串传给blog 放在一个全局变量里
然后triggerevent 把keywords传出去 传到哪儿呢 传到调用组件的地方
在blog页面的search函数里把keywords存到一个全局变量
我们再search里面调用这个函数，但是呢 我们要改一下 应该再传入一个keywords

微信小程序云开发之网易云音乐_第104张图片

然后云函数里面就可以接收到keywords了

微信小程序云开发之网易云音乐_第105张图片

正则：
i 大小写不敏感
m 跨行匹配；让开始匹配符 ^ 或结束匹配符 $ 时除了匹配字符串的开头和结尾外，还匹配行的开头和结尾
s 让 . 可以匹配包括换行符在内的所有字符

云数据库查询知识点（正则）：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/Database.RegExp.html

app.router("list",async(ctx,next)=>{
    const keywords = event.keywords
    let w={}
    if(keywords.trim()!=''){
      w={
        content:new db.RegExp({
          regexp: keywords,
          options: 'i',
        })
      }
    }
    let blog=await blogList.where(w).skip(event.start)
      .limit(event.count)
      .orderBy("date",'desc')   //时间倒序
      .get() 
      .then((res)=>{
        return res
      })
    ctx.body=blog
  })

为了让效率更高，我们可以建个索引，用空间换时间

微信小程序云开发之网易云音乐_第106张图片

5.13云数据库权限

我们发现 音乐，博客查询数据库操作都是在云函数进行的

为什么在云函数里而不是小程序呢

  1. 代码方便管理

关于音乐的内容都是在音乐云函数里面的，这样代码管理起来就比较容易
如果不这样的话 就要创建三个云函数 代码不好管理
微信小程序云开发之网易云音乐_第107张图片

  1. 小程序端对数据库请求有20条次数限制 而云函数端是1000条 突破：多次查询再拼接

  2. 在小程序端查询的话，我们得到的结果只有自己发布的 不过可以去数据库改权限

  3. 在小程序端读取数据库时间是个对象
    在这里插入图片描述

    解决办法：变成字符串微信小程序云开发之网易云音乐_第108张图片

5.14小结

微信小程序云开发之网易云音乐_第109张图片

微信小程序云开发之网易云音乐_第110张图片

微信小程序云开发之网易云音乐_第111张图片

https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/Database.RegExp.html](https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/Database.RegExp.html)

app.router("list",async(ctx,next)=>{
    const keywords = event.keywords
    let w={}
    if(keywords.trim()!=''){
      w={
        content:new db.RegExp({
          regexp: keywords,
          options: 'i',
        })
      }
    }
    let blog=await blogList.where(w).skip(event.start)
      .limit(event.count)
      .orderBy("date",'desc')   //时间倒序
      .get() 
      .then((res)=>{
        return res
      })
    ctx.body=blog
  })

为了让效率更高，我们可以建个索引，用空间换时间

微信小程序云开发之网易云音乐_第112张图片

5.13云数据库权限

我们发现 音乐，博客查询数据库操作都是在云函数进行的

为什么在云函数里而不是小程序呢

  1. 代码方便管理

关于音乐的内容都是在音乐云函数里面的，这样代码管理起来就比较容易
如果不这样的话 就要创建三个云函数 代码不好管理
微信小程序云开发之网易云音乐_第113张图片

  1. 小程序端对数据库请求有20条次数限制 而云函数端是1000条 突破：多次查询再拼接

  2. 在小程序端查询的话，我们得到的结果只有自己发布的 不过可以去数据库改权限

  3. 在小程序端读取数据库时间是个对象
    在这里插入图片描述

    解决办法：变成字符串微信小程序云开发之网易云音乐_第114张图片

5.14小结

微信小程序云开发之网易云音乐_第115张图片

微信小程序云开发之网易云音乐_第116张图片

微信小程序云开发之网易云音乐_第117张图片

第六章 评论

6.1，6.2博客控制组件

微信小程序云开发之网易云音乐_第118张图片
微信小程序云开发之网易云音乐_第119张图片

知识点：组件引入iconfont三种方式https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E5%A4%96%E9%83%A8%E6%A0%B7%E5%BC%8F%E7%B1%BB

  1. 直接放到组件内部
  2. 外部样式类
  3. 样式隔离

微信小程序云开发之网易云音乐_第120张图片

然后到组件里把这三个都放到externalClasses

微信小程序云开发之网易云音乐_第121张图片

点击评论的逻辑：
先在博客控制组件里面添加login和bottom-modal组件
点击判断没有登录的话就显示login组件
没有登录后来点了授权就要隐藏login组件，显示bottom-modal（以后要用插槽插入输入框）
没有登录后来拒绝授权 就提示要授权才能评论
已经登录的话就显示bottom-modal组件（以后要用插槽插入输入框）

这是两个控制login和bottom-modal是否显示的

  // 登录组件是否显示
    loginShow: false,
    // 底部弹出层是否显示
    modalShow: false,

点击的时候
getSetting判断是否已经登录过，能找到authSetting[‘scope.userInfo’] 能的话就用getUserInfo获取用户信息存到全局变量userInfo里，并且令modalShow为真（以后要用插槽插入输入框）
然后没有登录的话就显示login组件
还没有登录，弹出授权框，怎么判断有没有授权呢 用到了

微信小程序云开发之网易云音乐_第122张图片

如果成功的话就把userInfo传给全局变量 并且把loginShow关掉（这个在组件里我已经实现了），把modalShow打开，
如果失败了就提醒授权了才能评价

不完善

// components/blog-ctrl/blog-ctrl.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    showLogin:false,
    showModal:false
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onComment(){
      //判断以前有没有授权登录
      var that=this
      wx.getSetting({
        success(res){
          console.log(res);
          //授权过
          if(res.authSetting["scope.userInfo"]){
            that.setData({
              showModal:true
            })
            console.log(res.authSetting["scope.userInfo"]);
          }
          else{
            that.setData({
              showLogin:true
            })
          }
        }
      })
    }
  }
})

可以看到上面贴的代码 点击授权以后，需要再次点击评论而不是直接跳出来
所以我们又用到了微信小程序云开发之网易云音乐_第123张图片

刚点击授权的话我们的个人信息是login组件里传入进来的
然后

还要把userinfo存起来

    loginSuccess(e){
      userInfo=e.detail
      console.log(userInfo);
      this.setData({
        showModal:true
      })
    }

微信小程序云开发之网易云音乐_第124张图片

还要用slot把输入框还有发送按钮写出来 这里有个问题

微信小程序云开发之网易云音乐_第125张图片

6.3 数据库1-N关系设计方式

—取决于N有多大

  1. 几个，十几个，最多几十个： 存在数组里，比如说
    比如说还有住址之类的

  2. 几十，几百个 比如说产品的零件之类的 缺点是需要两次查询
    这种情况可以1和N存在两个不同的集合
    微信小程序云开发之网易云音乐_第126张图片

然后把这些零件id存到product里面

微信小程序云开发之网易云音乐_第127张图片

  1. 像微博这样的评论条数有几千个上万个：在n的一方存储1的一方的id(因为如果像前两个那样的话 数组长度可能会有限制)

    微信小程序云开发之网易云音乐_第128张图片

我们评论的功能适用于第三种

6.4 评论功能实现

点击发送以后 就可以取到输入框里的内容了
首先 先判断一下输入内容是否为空

  if (content.trim() == '') {
        wx.showModal({
          title: '评论内容不能为空',
          content: '',
        })
        return
      }

然后呢 我们要还要把内容，时间，个人信息，博客id存到数据库
这里插入数据库有两种情况，可以在云函数端也可以在小程序端
云函数端就是类似长这样：微信小程序云开发之网易云音乐_第129张图片

这里是在小程序端完成的
首先初始化const db = wx.cloud.database()
然后新建一个集合微信小程序云开发之网易云音乐_第130张图片

博客id怎么获得呢
在博客页面存了blogList 在这里插入图片描述

然后就可以在组件里接收了 然后可以存到数据库了（这里的content是输入框里面的value值）

微信小程序云开发之网易云音乐_第131张图片

微信小程序云开发之网易云音乐_第132张图片

6.5云调用实现模板消息推送

https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/openapi/openapi.html#%E4%BA%91%E8%B0%83%E7%94%A8

什么是云调用呢 是通过云函数去调用服务端的开放接口 推送的话要使用form表单
所以我们的slot插槽里面应该是个form表单

在这里插入图片描述

然后要怎样取到content呢
微信小程序云开发之网易云音乐_第133张图片

这个formId测试的时候显示是这个，真机调试的话会显示真正的formID

formId是有有效期的 （7天） 每次提交一个表单就生成一个formId
然后可以选用模板了
微信小程序云开发之网易云音乐_第134张图片

微信小程序云开发之网易云音乐_第135张图片

然后可以拿到模板id
微信小程序云开发之网易云音乐_第136张图片

微信小程序云开发之网易云音乐_第137张图片

新建一个云函数 再在里面新建一个config.json文件在这里插入图片描述

注意名字不能乱起

微信小程序云开发之网易云音乐_第138张图片

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async(event, context) => {
  const {
    OPENID
  } = cloud.getWXContext()

  const result = await cloud.openapi.templateMessage.send({
    touser: OPENID,
    page: `/pages/blog-comment/blog-comment?blogId=${event.blogId}`,
    data: {
      keyword1: {
        value: '评价完成'
      },
      keyword2: {
        value: event.content
      }
    },
    templateId: 'PjUkFDsOsC3ktzUATsIVy0t1D4RlL-aKbuhGUb7TLS0',
    formId: event.formId
  })
  return result
}

   db.collection('blog-comment').add({
        data: {
          content,
          createTime: db.serverDate(),
          blogId: this.properties.blogId,
          nickName: userInfo.nickName,
          avatarUrl: userInfo.avatarUrl
        }
      }).then((res) => {
        // 推送模板消息
        wx.cloud.callFunction({
          name: 'sendMessage',
          data: {
            content,
            formId,
            blogId: this.properties.blogId
          }
        }).then((res) => {
          console.log(res)
        })

6.6博客详情功能

https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/collection/Collection.get.html

app.router('detail',async(ctx,next)=>{
    let blogId=event.blogId
    let detail=await blogList.where({
      _id:blogId
    }).get().then((res)=>{
      return res.data
    })

    let batchTimes=await blogComment.count()
    const total=batchTimes.total
    let task=[]
    let commentList={
      data:[]
    }
    batchTimes=Math.ceil(total/MAX_LIMIT)
    for(let i=0;i<batchTimes;i++){
      let promise=blogComment.skip(i*MAX_LIMIT).limit(MAX_LIMIT)
      .where({
        blogId
      })
      .get()
      task.push(promise)
    }
    if(task.length>0){
      commentList=(await Promise.all(task)).reduce((acc,cur)=>{
        return {
          data:acc.data.concat(cur.data)}
      })
    }
    ctx.body={
      detail,
      commentList,
    }
  })

_getDetail(){
    wx.cloud.callFunction({
      name:"blog",
      data:{
        $url:"detail",
        blogId:this.data.blogId,
      }
    }).then((res)=>{
      console.log(res);
      this.setData({
        blogContent:res.result[0]
      })
    })
  },

写好页面之后，评论了要自动刷新，要在blog-ctrl里面的send里面写一个triggerEvent 调用_getDetail()

后面都没记 不难的

第七章 我的功能实现

7.1获取用户信息的方式

不同方式获取用户信息–btn触发 云函数获取 api接口：wx.login/wx.getUserInfo

那么多方法，我们都是在什么情况下用呢


<open-data type="userAvatarUrl">open-data>
<open-data type="userNickName">open-data>

那这时候我想把信息写入数据库里面 或者说可能在后面的开发当中会用到头像或者昵称–wx.getUserInfo 他的作用就是获取用户信息 当获取成功以后就会进入success回调函数 这个是在已授权的情况下才能获取用户信息

来复习一下以前写的 使用这个方法的前提是用户已经授权过了

微信小程序云开发之网易云音乐_第139张图片


<button open-type="getUserInfo" bindgetuserinfo="onGetUserInfo"> 点击登录button>

我们发现上面的方法都没有openId这个属性

微信小程序云开发之网易云音乐_第140张图片

传统的方式需要前后端配合

云开发的话直接在云函数端就可以获取了

微信小程序云开发之网易云音乐_第141张图片


<button bindtap="getOpenId">点击登录button>

getOpenId(){
    wx.cloud.callFunction({
      name:'login'
    }).then((res)=>{
      console.log(res);
    })
  },
  
  exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}

这样就能获取openid了

有个问题 我们能根据openid获取用户其他信息呢 比如说昵称啊 头像啊的 是不支持的 因为我们获取openid的时候不需要用户去授权，在用户不授权的情况下我得到了openid,又在用户不知情的情况下就得到了用户的信息，对于用户信息不安全
用户只有主动允许的情况下才能获取对应的这些信息

微信小程序云开发之网易云音乐_第142张图片

我们看他自带的代码还有个unionid 那这个unionid跟openid有什么区别吗

当前的小程序是微信开放平台的，微信开放平台的应用不止有小程序比如说还有微信公众号 openid的话对于每一个应用都是不一样的 unionid的话都是一样的 只有unionid有效的情况下才返回

7.2页面布局与base64

我们使用base64格式有什么好处呢

当我们请求网络路径的话 我们的小程序端要向服务端发送请求，需要请求图片才行 如果用base64的话就可以减少http请求，注意一下把图片转化成base64的时候图片不要太大（转化出来会很长）

7.3播放历史页面

我们可以把记录存在数据库里，这样在不同的手机上查看小程序的时候都能得到当前的播放历史，优点是在任何设备上看到的都是一样的数据 缺点是每一次请求都需要去读取数据库 这样相对来讲效率会低一些

第二种方案就是可以把每次播放的历史存在当前手机的本地 好处就是每次读取的速度会快，缺点就是如果换另外一台手机，另外一个手机上就没有播放历史

在这个项目里采取第二种方案

我们的key可以用openid 来标识唯一用户

可以在这时候获取

微信小程序云开发之网易云音乐_第143张图片

getOpenid(){
    wx.cloud.callFunction({
      name:"login"
    }).then((res)=>{
      this.globalData.openId=res.result.openid
      console.log(this.globalData.openId);
    })
  },

getOpenid(){
    wx.cloud.callFunction({
      name:"login"
    }).then((res)=>{
      //注意这里要考虑到是否之前已经存在openId 如果已经存在了的话就不用执行（否则本来是有数据的后来让空数组给覆盖了），如果不存在（以前没有打开过）就要把openId放到缓存
      const openId=res.result.openid
      this.globalData.openId=openId
      // console.log(this.globalData.openId);
      if(wx.getStorageSync(openId)===''){
        wx.setStorageSync(openId, [])
        console.log('初始化了');
      }
     
    })
  },

微信小程序云开发之网易云音乐_第144张图片

可以看到第一次被初始化了 第二次没有，因为判断缓存里openId已经存在了

player.js
//保存播放历史
  savePlayHistory(){
    let music=musicInfo[nowPlayingIndex]  //回顾一下 这里的musicInfo保存的是对应歌单的所有音乐数据，nowPlayingIndex是保存的当前播放的下标，这样就可以取到当前播放音乐的数据了
    let openid=app.globalData.openId
    let history=wx.getStorageSync(openid)
    let bhave=false    //用来判断是不是已经存进缓存了
    for(let i=0,len=history.length;i<len;i++){
      if(history[i].id===music.id){
        console.log("重复了");
        bhave=true
        break
      }
    }
    console.log(bhave);
    if(!bhave){
      console.log("添加");
      history.unshift(music) 
      wx.setStorageSync(openid, history)
    }
  },

然后呢 我们就可以在我们新建的文件夹取出数据 然后传入到组件里，对应的列表就出来了

微信小程序云开发之网易云音乐_第145张图片

现在觉得组件这个东西是真的妙啊 省去了好多代码

而且组件里面还能进行跳转在这里插入图片描述

点一下直接就能进到播放页面了 真的太方便了

所以在写代码前就要规划好，应该做哪些组件，传给组件的值应该是什么，还有跳转的问题，要不要用组件进行跳转

还有，他自己播放完了会自动播放下一首，这时候播放的是歌单里面的下一首

所以我们要在我们新建的文件夹里面吧musiclist替换成播放历史的歌单

onLoad: function (options) {
    let openid=app.globalData.openId
    let musicHistory= wx.getStorageSync(openid)
    wx.setStorageSync("musiclist", musicHistory)
    console.log(musicHistory);
    this.setData({
      musicHistory
    })
  },

有bug:变红问题 这应该是上古时期的bug了就先不管了

还有比如在这里插入图片描述

如果再回到歌单播放coldest winter 他应该跑到最上面，我们这个

7.4我的博客页面

有两种方案，一种是在云函数里面获取一种是在小程序中查询数据库

第一种：

现在博客云函数定义一个路由

微信小程序云开发之网易云音乐_第146张图片

微信小程序云开发之网易云音乐_第147张图片

大概就是长这样吧，这样就能取到评论的数据了

这时候可以引用blog-card和blog-ctrl组件了

然后下拉刷新 上拉加载啊都可以写上去了 还有点击跳转到blog-comment页面可以参考blog页面写

还有一种是在小程序端获取，两种方法各有利弊 云函数端的话能很容易的获取openid而且便于管理

小程序端的话可以通过设置权限 就可以不用openid查询了 这里时间的处理有个坑 需要注意一下

7.5获取小程序码

扫描小程序码可以直接进入小程序对应的页面

微信小程序云开发之网易云音乐_第148张图片

我们新建一个云函数：getQrCode

然后要建一个config.json来配置权限

{
	"permission"：{
		...具体去官网看
	}
}

我们按照官网给的例子来写代码

微信小程序云开发之网易云音乐_第149张图片

这个scene是怎么用的呢

比如说电商的小程序，有个分销，用户a给b分享，用户b扫描a的小程序码，产生了消费行为，会给a反佣，那他怎么知道用户b扫描的是a的码呢，说明a的码里面有对应的参数，参数里面会存储a的信息，扫描完以后就知道扫的是谁分享的码

那可不可以把openid放到参数里面呢？当用户扫描小程序码的时候，通过码里面的openid就能知道当前的码是由哪个用户分享出去的

那当前可以用openid来放到scene里 但是注意 openid的长度是28位，整个的参数只能传32位，如果传openid的话其他的参数就会传的很少了

微信小程序云开发之网易云音乐_第150张图片

注意page里面不能携带参数，要携带参数的话可以放到scene里面

因为小程序还没有发布，所以就先不写了

我们这里的代码是粘贴小程序官方的代码 就是scene传递的参数不一样了 我们用的是openid

const cloud = require('wx-server-sdk')
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV,
})
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  try {
    const result = await cloud.openapi.wxacode.getUnlimited({
        scene: wxContext.OPENID
      })
   console.log(result);
  } catch (err) {
    console.log(err);
  }
}

微信小程序云开发之网易云音乐_第151张图片

返回的结果是buffer类型的 但是我们要的是一张图片该怎么做呢

我们可以把它上传到云存储

const cloud = require('wx-server-sdk')
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV,
})
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  try {
    const result = await cloud.openapi.wxacode.getUnlimited({
        scene: wxContext.OPENID
      })
  //  console.log(result);
    const upload=await cloud.uploadFile({
        cloudPath:'qrcode/'+Date.now()+'-'+Math.random()+'.png',
        fileContent:result.buffer
      })
      return upload.fileID
  } catch (err) {
    console.log(err);
  }
}

这样我们在云存储就能看到二维码了

我们在小程序页面接收

然后怎么看图呢 可以用wx.previewImage

 wx.previewImage({
        urls: [res.result],
        current:res.result
      })

那如何获取到传递的openid值呢

可以直接onload里面获取 直接options.sence就ok了

第八章 小程序高级知识

8.1小程序渲染层与逻辑层交互原理

微信小程序云开发之网易云音乐_第152张图片

网页开发的时候渲染层和逻辑层是互斥的，比如说，渲染界面的时候，脚本不会执行，脚本执行的时候不会渲染界面
如果做很长的运算的时候，页面可能就会失去响应

微信小程序云开发之网易云音乐_第153张图片

微信小程序云开发之网易云音乐_第154张图片

微信小程序云开发之网易云音乐_第155张图片

微信小程序云开发之网易云音乐_第156张图片

微信小程序云开发之网易云音乐_第157张图片

我们不能频繁的setdata 还有数据不在界面上显示的话就不应该定义在data里面，因为如果这样的话他都会从逻辑层再到系统层再到渲染层 这样很消耗资源

8.2小程序的运行机制与更新机制

冷启动与热启动： 当第一次打开小程序叫做冷启动，还有一种虽然打开过，但是小程序被微信主动销毁过，这种情况如果打开小程序的话也属于冷启动的情况 热启动的话就是当前的用户已经打开过某个小程序，在一定时间内再次打开小程序（5分钟左右）这时候不需要重新启动，只需要将后台的小程序切换到前台，这个过程叫做热启动。

什么是前台和后台呢：当小程序在运行，我们叫做小程序当前在前台,

在这里插入图片描述

小程序销毁：当小程序进入后台以后小程序并不是马上销毁，而是会维持一段存活时间，这段时间一般是5分钟，5分钟以后就会被小程序主动销毁，如果小程序占用系统资源非常高，就会被微信客户端主动回收

小程序的更新机制：微信小程序云开发之网易云音乐_第158张图片

检查版本 更新

微信小程序云开发之网易云音乐_第159张图片

8.3小程序性能与体验优化

  • 合理设置可点击元素的响应区域大小

  • 避免渲染页面耗时过长

  • 避免执行脚本耗时过长

  • 对网络请求做必要的缓存以避免多余的请求

  • 不要引入未被使用的wxss样式

  • 文字颜色和背景颜色要搭配好

  • 所有资源请求都使用https (http有被篡改内容的风险)

  • 不使用废用接口

  • 避免过大的wxml节点数目

    • 一个页面少于1000个wxml节点
    • 节点数深度小于30层
    • 子节点数不大于60个

  • 避免将不可能访问到的页面打包到小程序包里面（比如说自己实验的demo页面）

  • 及时回收定时器 小程序中定时器是全局的，当页面被销毁的时候，我们应该手动销毁定时器

  • 避免使用：active伪类来实现点击态 他可以实现按钮的点击状态或者文本框的点击状态来实现效果，但是在小程序使用这个语法体验是比较差的，因为滑动或者滚动的时候点击态是不会消失的，那我们还想实现点击态的效果应该怎么做呢，可以用小程序里面的hover来实现这样的功能，比如说在我的界面中，使用了navigator组件，在默认情况下会有个点击态样式，我们给他设置了hover-class属性，给他赋值为null,来解决点击态的问题，

  • 滚动区可以开启惯性滚动来增强用户体验

  • 避免出现js异常 如果出现异常会导致交互无法进行下去

  • 所有请求的相应都正常 某个请求失败的话也会导致交互无法进行下去

  • 所有请求的耗时不应太久 而且每次请求都应该加一个showloading,让用户知道程序没有假死，如果真的请求耗时太长，我们应该适当优化服务器处理的逻辑

  • 避免短时间内发起太多图片请求，我们应该适量控制请求图片的数量 字体图标

  • 避免短时间内发起太多请求，会导致小程序加载的很慢

关于setData

  • 避免setdata的数据过大（超过1M） 每次都会从逻辑层到系统层 再从系统层发送到视图层
  • 避免setdata过于频繁
  • 避免未绑定在wxml的变量传入setdata

可以用audits来体验评分

8.4详解setdata

先看看官方文档怎么说的

Page.prototype.setData(Object data, Function callback)

setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）

微信小程序云开发之网易云音乐_第160张图片

8.5scene的作用与应用场景

场景值就是用来描述用户是通过什么方式进入到小程序的

比如说可以扫描小程序码，可以打开微信的搜索 ，下拉聊天菜单，公众号，

那场景值有什么用呢 --他可以为用户进行行为的埋点 可以记录用户的行为，可以为以后产品的更新提供行为的数据，可以根据场景值进行分流，比如说做的是一个外卖小程序，假设是通过二维码进入，很有可能用户是在店里面，可以进入点餐模式。如果是通过公众号进入，很有可能用户不在店里面，可能在家里面或者公司，通过公众号点击公众号的菜单打开对应小程序，这样可以进入一个预定的模式。这就是场景分流。

如何获取

在这里插入图片描述

点击切后台就能模拟当前用户通过哪个场景值进入到小程序

还有

当用到这上面的场景值

微信小程序云开发之网易云音乐_第161张图片这里就会有数据

场景值在运营还有营销方面有很大的应用

8.6页面收录sitemap.json的作用和使用方法

在微信当中有搜索功能，可以查询到跟关键字关联的公众号啊聊天记录啊小程序信息啊这些东西

有了这个以后可以根据小程序的内容查询，很像网页的seo搜索引擎优化

微信小程序云开发之网易云音乐_第162张图片

微信小程序云开发之网易云音乐_第163张图片

后面还有很多，用到了再学吧

8.7上线

微信小程序云开发之网易云音乐_第164张图片

微信小程序云开发之网易云音乐_第165张图片

第九章 后台管理系统

我们可以改数据库 但是运营人员不了解，这样就需要给后台管理员提供一个具有界面的系统

9.1后台管理系统与前后端分离架构

轮播图换图片，更改数目

新建歌单，在歌单里关联歌曲，对歌单管理

发布博客若违规，就删除博客

微信小程序云开发之网易云音乐_第166张图片

微信小程序云开发之网易云音乐_第167张图片

微信小程序云开发之网易云音乐_第168张图片

微信小程序云开发之网易云音乐_第169张图片

微信小程序云开发之网易云音乐_第170张图片

我们用到了vue-admin-template

微信小程序云开发之网易云音乐_第171张图片

9.2vue-admin-template构建管理系统前端

git clone一下 https://github.com/PanJiaChen/vue-element-admin.git

我们这里只需要基础版本就行了 地址https://panjiachen.github.io/vue-admin-template/#/dashboard

微信小程序云开发之网易云音乐_第172张图片

微信小程序云开发之网易云音乐_第173张图片

npm install来安装这些依赖

建议在做项目的时候尽量不要使用cnpm

然后可以启动服务

这时候他会跳到这里

微信小程序云开发之网易云音乐_第174张图片

看地址发现是运行在我们电脑的本地的

但是左侧导航栏很多东西我们用不到所以先把代码删一下

微信小程序云开发之网易云音乐_第175张图片

老师说vue里面只留个login和404.vue

在这里插入图片描述

但是我这里提示有些文件要管理员才能删 先不管了

然后要创建一个文件夹 playlist 里面新建一个list.vue

还有blog和swiper

可能是因为我在文件资源管理器里面删的时候还在vscode里面打开着 所以删不了 现在把vscode关了可以删了

微信小程序云开发之网易云音乐_第176张图片

把这个填进去 这就是页面的基本结构

把剩下那俩也改成这样

他是如何管理的呢 打开router

发现是用vuerouter管理的 import Router from 'vue-router'

怎么把这些显示到页面呢 打开router下面有个

在这里插入图片描述

在vue里面每一个vue文件都应该看做是一个组件

这个@符号是指的src这个文件夹

微信小程序云开发之网易云音乐_第177张图片

微信小程序云开发之网易云音乐_第178张图片

9.3koa2构建后端

前端工程师不仅要完成前端界面的部分 同时nodejs也是我们要会的技能，所以我们选用使用nodejs的koa框架

微信小程序云开发之网易云音乐_第179张图片

20210610-104231-0210.png

新建文件夹 之后npm init
之后npm i koa
新建文件 app.js

const Koa=require('koa')
const app=new Koa()
app.use(async (ctx)=>{
  ctx.body="你好，世界"
})
app.listen(3000,()=>{
  console.log("已经开启在3000端口了");
})

9.4 access token

path :http://nodejs.cn/api/path.html#path_path_resolve_paths
writefile:http://nodejs.cn/api/fs.html#fs_fs_writefile_file_data_options_callback
getTime方法 https://www.runoob.com/jsref/jsref-gettime.html

access_token的缓存与更新

https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/access-token/auth.getAccessToken.html

微信小程序云开发之网易云音乐_第180张图片

详细信息

https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html

我们的代码再后端写 因为在后端发起请求，在后端进行缓存的刷新

在很多的方法都调用到了access_token 所以可以把它封装成一个公共方法

然后新建一个utils文件夹 新建一个方法 getAccessToken

npm i request
npm i request-promise

const rp=require('request-promise')
const APPID=''   //填自己的
const APPSECRET='' //填自己的
const URL=`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${APPID}&secret=${APPSECRET}`
const updateAccessToken=async()=>{
  const resStr=await rp(URL)
  const res=JSON.parse(resStr)
  console.log(res);
}

updateAccessToken()

返回内容：

{
  access_token: '45_joRjJGQLnlq9QRopUYx2WNkurpeT3y7rKkEUoHSfuL4xTwn4tZ829uStaE-uHt4zp56dhGK0C_pGerhw0A2PDq7Pxk5-WB10phG97ttAdsnOdqVJc4PeFEEgp0Hnm2mNfG8lktTLnt0lFMy6ZMCbAAAKXN',
  expires_in: 7200
}

这个需要妥善保存，那么保存到哪里呢
如果项目比较复杂，可以用redis储存
也可以存在数据库
我们保存在json文件当中

如何写文件呢 --fs模块

writefile是异步的 writefilesync是同步的
路径一种是相对路径，一种是绝对路径
在node里 如何获取一个文件的绝对路径？

我们还需要token的创建时间，因为后面要判断当前的token是否过期

const rp=require('request-promise')
const fs=require('fs')
const path=require('path')
const fileName=path.resolve(__dirname,'./access_token.json')
console.log(fileName);
const APPID='aaa'
const APPSECRET='b6c1bbb'
const URL=`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${APPID}&secret=${APPSECRET}`
const updateAccessToken=async()=>{
  const resStr=await rp(URL)
  const res=JSON.parse(resStr)
  console.log(res);
  // 写文件
  if(res.access_token){
    fs.writeFileSync(fileName,JSON.stringify({
      access_token:res.access_token,
      createTime:new Date()
    }))
  }
}
updateAccessToken()

const rp=require('request-promise')
const fs=require('fs')
const path=require('path')
const fileName=path.resolve(__dirname,'./access_token.json')
console.log(fileName);
const APPID='aaa'
const APPSECRET='b6c1bbb'
const URL=`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${APPID}&secret=${APPSECRET}`
const updateAccessToken=async()=>{
  const resStr=await rp(URL)
  const res=JSON.parse(resStr)
  console.log(res);
  // 写文件
  if(res.access_token){
    fs.writeFileSync(fileName,JSON.stringify({
      access_token:res.access_token,
      createTime:new Date()
    }))
  }else{
    //并没有得到返回值 再次获取一次
    await updateAccessToken()
  }
}
const getAccessToken=async()=>{
  // 读取文件
  const readRes=fs.readFileSync(fileName,'utf8')
  const readObj=JSON.parse(readRes)
  console.log(readObj);
}

updateAccessToken()
getAccessToken()  // 这里能取到 是因为以前存在 如果项目是第一次运行呢

不存在的话读取能成功吗 --不能 先运行的getAccessToken再运行的update…

那如何解决呢

改一下读取文件方法

const getAccessToken = async () => {
  // 读取文件
  try {
    const readRes = fs.readFileSync(fileName, 'utf8')
    const readObj = JSON.parse(readRes)
    console.log(readObj);
  } catch (error) {
    await updateAccessToken()
    await getAccessToken()
  }

}

或者这样改成同步的也可以

const rp=require('request-promise')
const fs=require('fs')
const path=require('path')
const fileName=path.resolve(__dirname,'./access_token.json')
console.log(fileName);
const APPID='aaa'
const APPSECRET='b6c1bbb'
const URL=`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${APPID}&secret=${APPSECRET}`
const updateAccessToken=async()=>{
  const resStr=await rp(URL)
  const res=JSON.parse(resStr)
  console.log(res);
  // 写文件
  if(res.access_token){
    fs.writeFileSync(fileName,JSON.stringify({
      access_token:res.access_token,
      createTime:new Date()
    }))
  }else{
    //并没有得到返回值 再次获取一次
    await updateAccessToken()
  }
}
const getAccessToken=async()=>{
  // 读取文件
  const readRes=fs.readFileSync(fileName,'utf8')
  const readObj=JSON.parse(readRes)
  console.log(readObj);
}

const launch=async ()=>{
  await updateAccessToken()
  await getAccessToken()
}
launch()

获取操作完成

const rp=require('request-promise')
const fs=require('fs')
const path=require('path')
const fileName=path.resolve(__dirname,'./access_token.json')
console.log(fileName);
const APPID='wxc0101e15f32abc6a'
const APPSECRET='b6c1798730d84949ba7bab467fbd03bc'
const URL=`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${APPID}&secret=${APPSECRET}`
const updateAccessToken=async()=>{
  const resStr=await rp(URL)
  const res=JSON.parse(resStr)
  console.log(res);
  // 写文件
  if(res.access_token){
    fs.writeFileSync(fileName,JSON.stringify({
      access_token:res.access_token,
      createTime:new Date()
    }))
  }else{
    //并没有得到返回值 再次获取一次
    await updateAccessToken()
  }
}
const getAccessToken=async()=>{
  // 读取文件
  try {
    const readRes=fs.readFileSync(fileName,'utf8')
    const readObj=JSON.parse(readRes)
    console.log(readObj);
    return readObj.access_token
  } catch (error) {
    await updateAccessToken()
    await getAccessToken()    
  }
}

// updateAccessToken()   // 其实这里直接get就行了  get不到会执行catch里面的语句

console.log(getAccessToken());

定时刷新–两个小时再次获取一次 获取新的token

开启定时器–setinterval settimeout只能循环一次，setinterval可以循环获取多次

定时功能完成

setInterval(()=>{
 await updateAccessToken()
},7200*1000)

这样还不够，需要提前五分钟刷新

access_token 的有效期通过返回的expires_in 来传达，目前是7200秒之内的值，中控服务器需要根据这个有效时间提前去刷新。在刷新过程中，中控服务器可对外继续输出的老 access_token，此时公众平台后台会保证在5分钟内，新老access_token都可用，这保证了第三方业务的平滑过渡﹔

setInterval(()=>{
  await updateAccessToken()
},(7200-300)*1000)

为了测试方便 改成每五秒更新一次

再完善

正常情况 我们的定时任务可以执行，是没有问题的， 但是假设由于某些情况，服务器可能宕机了 那我们的任务可能不会执行也就不会定时更新token 如果宕机时间超过两个小时 我们文件里的token就是过期的，如果服务器又重新启动 token就是旧的 所以我们读取token的时候还应该有个判断 – 当前时间和创建时间的时间差是否超过2h 如果超过两小时了就要更新一下 那么问题来了 如何判断呢 可以用getTime方法来转化成毫秒数，然后来判断是否大于2h

完整版

const rp=require('request-promise')
const fs=require('fs')
const path=require('path')
const fileName=path.resolve(__dirname,'./access_token.json')
console.log(fileName);
const APPID='wxc0101e15f32abc6a'
const APPSECRET='b6c1798730d84949ba7bab467fbd03bc'
const URL=`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${APPID}&secret=${APPSECRET}`
const updateAccessToken=async()=>{
  const resStr=await rp(URL)
  const res=JSON.parse(resStr)
  console.log(res);
  // 写文件
  if(res.access_token){
    fs.writeFileSync(fileName,JSON.stringify({
      access_token:res.access_token,
      createTime:new Date()
    }))
  }else{
    //并没有得到返回值 再次获取一次
    await updateAccessToken()
  }
}
const getAccessToken=async()=>{
  // 读取文件

  try {
    const readRes=fs.readFileSync(fileName,'utf8')
    const readObj=JSON.parse(readRes)
    // console.log(readObj);
    const createtime=new Date(readObj.createTime).getTime()
    const nowTime=new Date().getTime()
    if((nowTime-createtime)/1000/60/60>=2){
      await updateAccessToken()
      await getAccessToken()     
    }

    return readObj.access_token
  } catch (error) {
    await updateAccessToken()
    await getAccessToken()    
  }

}

setInterval(async()=>{
  await updateAccessToken()
},(5)*1000)

// updateAccessToken()   // 其实这里直接get就行了  get不到会执行catch里面的语句

console.log(getAccessToken());

module.exports=getAccessToken

9.5 触发云函数获取歌单列表

koa-router使用 https://github.com/koajs/router/blob/HEAD/API.md

MVC模式

model 模型
view 视图 前端的项目就相当于我们的view层
control 控制器

M层一般是和数据打交道的
V层 就相当于前端的项目
C层 是MV层之间的桥梁纽带 控制跳转 处理业务逻辑
我们新建一个controller文件夹
我们会把前端的请求都发到controller 然后通过controller去调用云开发里的内容 并且把结果返回到前端展示
controller再新建一个文件playlist.js

get是在请求头里 长度是有限制的
post是在请求体里的 能传递的参数会多一些，并且 get传递参数是明文的 并不安全 post相对安全

controller下新建一个playlist文件

const Router=require('koa-router')
const router =new Router()

//get  post
router.get('/list',async(ctx,next)=>{
  //查询歌单列表
  
})
module.exports=router   //导出

app.js里面引入它

const playlist=require(’./controller/playlist’)

导入完成以后还需要一个router.use 声明一个路由的名称

const playlist=require('./controller/playlist')
router.use('/playlist',playlist.routes())

定义好playlist这样一个路由以后，我们还需要一个方法，这个方法需要把当前的router下面的routes进行声明

还有，我们还要允许这些方法使用

现在app.js里的代码：

const Koa=require('koa')
const Router = require('koa-router')
const app=new Koa()
const router =new Router()  // 接下来就可以在对象的下面定义相应的路由

const playlist=require('./controller/playlist')
router.use('/playlist',playlist.routes())

app.use(router.routes())
app.use(router.allowedMethods())

app.use(async (ctx)=>{
  ctx.body="你好，世界"
})
app.listen(3000,()=>{
  console.log("已经开启在3000端口了");
})

现在再playlist.js文件下写点东西看看能不能用

微信小程序云开发之网易云音乐_第181张图片

微信小程序云开发之网易云音乐_第182张图片

那么现在我们只要在这个里面写对应的获取歌单的相关代码就ok了

微信小程序云开发之网易云音乐_第183张图片

那现在的问题就是如何调用小程序的列表了–调用云函数

微信小程序云开发之网易云音乐_第184张图片

那么如何调用playlist云函数实现相应的功能

https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-http-api/functions/invokeCloudFunction.html

POST https://api.weixin.qq.com/tcb/invokecloudfunction?access_token=ACCESS_TOKEN&env=ENV&name=FUNCTION_NAME

playlist代码

const Router=require('koa-router')
const router =new Router()
const rp=require('request-promise')
const getAccessToken=require('../utils/getAccessToken')
//get  post
router.get('/list',async(ctx,next)=>{
  // const accessToken=await getAccessToken()
  let accessToken=await getAccessToken()
  accessToken=accessToken.access_token
  // console.log(accessToken,typeof(accessToken));
  //查询歌单列表
  const env='test-9gp1l80316116bb7'
  const name='music'
  const url=`https://api.weixin.qq.com/tcb/invokecloudfunction?access_token=${accessToken}&env=${env}&name=${name}`
  var options={
    method:'POST',
    uri:url,
    body:{
      $url:'playlist',
      start:0,
      count:50
    },
    json:true
  }

  // console.log(accessToken);
  await rp(options).then((res)=>{
    console.log(res);

  }).catch((e)=>{
    console.log(e);
  })
  ctx.body="aaa"
})
module.exports=router   //导出~

const Router=require('koa-router')
const router =new Router()
const rp=require('request-promise')
const getAccessToken=require('../utils/getAccessToken')
//get  post
router.get('/list',async(ctx,next)=>{
  // const accessToken=await getAccessToken()
  let accessToken=await getAccessToken()
  accessToken=accessToken.access_token
  // console.log(accessToken,typeof(accessToken));
  //查询歌单列表
  const env='test-9gp1l80316116bb7'
  const name='music'
  const url=`https://api.weixin.qq.com/tcb/invokecloudfunction?access_token=${accessToken}&env=${env}&name=${name}`
  var options={
    method:'POST',
    uri:url,
    body:{
      $url:'playlist',
      start:0,
      count:50
    },
    json:true
  }

  // console.log(accessToken);
 ctx.body= await rp(options).then((res)=>{
    console.log(res);
    return JSON.parse( res.resp_data).data

  }).catch((e)=>{
    console.log(e);
  })
  // ctx.body="aaa"
})
module.exports=router   //导出~

你可能感兴趣的:(小程序,vue.js,前端,javascript)

  • element实现动态路由+面包屑 软件技术NINI vue案例vue.js前端
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • 店群合一模式下的社区团购新发展——结合链动 2+1 模式、AI 智能名片与 S2B2C 商城小程序源码 说私域 人工智能小程序
    摘要：本文探讨了店群合一的社区团购平台在当今商业环境中的重要性和优势。通过分析店群合一模式如何将互联网社群与线下终端紧密结合，阐述了链动2+1模式、AI智能名片和S2B2C商城小程序源码在这一模式中的应用价值。这些创新元素的结合为社区团购带来了新的机遇，提升了用户信任感、拓展了营销渠道，并实现了线上线下的完美融合。一、引言随着互联网技术的不断发展，社区团购作为一种新兴的商业模式，在满足消费者日常需
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
    加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • 广州会刊小程序开发公司哪家好｜开发多少钱费用｜专业外包服务 红匣子实力推荐
    在选择广州会刊小程序开发公司时，有几个关键因素需要考虑。首先，您应该确定自己的需求和目标，以便找到最合适的开发公司。其次，您需要考虑公司的经验和专业知识。最后，您还应该考虑公司的信誉和口碑。开发-联系电话：13642679953（微信同号）首先，您应该明确自己的需求和目标。会刊小程序是一种用于展示会议信息和日程安排的应用程序。在选择开发公司之前，您应该明确自己的需求，包括功能要求、设计风格和用户体
  • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • 博客网站制作教程 2401_85194651 javamaven
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
  • 进销存小程序源码 PHP网络版ERP进销存管理系统 全开源可二开 摸鱼小号 php
    可直接源码搭建部署发布后使用：一、功能模块介绍该系统模板主要有进，销，存三个主要模板功能组成，下面将介绍各模块所对应的功能；进：需要将产品采购入库，自动生成采购明细台账同时关联财务生成付款账单；销：是指对客户的销售订单记录，汇总生成产品销售明细及回款计划；存：库存的日常盘点与统计，库存下限预警、出入库台账、库存位置等。1.进购管理采购订单：采购下单审批→由上级审批通过采购入库；采购入库：货品到货>
  • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
  • 最简单将静态网页挂载到服务器上(不用nginx) 全能全知者 服务器nginx运维前端html笔记
    最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
  • 补充元象二面 Redstone Monstrosity 前端面试
    1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
  • 微信小程序开发注意事项 jun778895 微信小程序小程序
    微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
  • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
  • python爬取微信小程序数据,python爬取小程序数据 2301_81900439 前端
    大家好，小编来为大家解答以下问题，python爬取微信小程序数据，python爬取小程序数据，现在让我们一起来看看吧！Python爬虫系列之微信小程序实战基于Scrapy爬虫框架实现对微信小程序数据的爬取首先，你得需要安装抓包工具，这里推荐使用Charles，至于怎么使用后期有时间我会出一个事例最重要的步骤之一就是分析接口，理清楚每一个接口功能，然后连接起来形成接口串思路,再通过Spider的回调
  • 字节二面 Redstone Monstrosity 前端面试
    1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
  • 前端代码上传文件 余生逆风飞翔 前端javascript开发语言
    点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
  • uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
    第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
  • 高性能javascript--算法和流程控制 海淀萌狗
    -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • Vue + Express实现一个表单提交 九旬大爷的梦
    最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
  • JavaScript中秋快乐！ Q_w7742 javascript开发语言ecmascript
    我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
  • Nginx从入门到实践(三) 听你讲故事啊
    动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
  • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
  • 前端知识点 ZhangTao_zata 前端javascriptcss
    下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
  • 第三十一节:Vue路由:前端路由vs后端路由的了解 曹老师
    1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访
  • js动画html标签（持续更新中） 843977358 htmljs动画mediaopacity
    1.jQuery 效果 - animate() 方法    改变 "div" 元素的高度：    $(".btn1").click(function(){      $("#box").animate({height:"300px
  • springMVC学习笔记 caoyong springMVC
    1、搭建开发环境    a>、添加jar文件，在ioc所需jar包的基础上添加spring-web.jar,spring-webmvc.jar    b>、在web.xml中配置前端控制器       <servlet>     &nbs
  • POI中设置Excel单元格格式 107x poistyle列宽合并单元格自动换行
    引用：http://apps.hi.baidu.com/share/detail/17249059 POI中可能会用到一些需要设置EXCEL单元格格式的操作小结： 先获取工作薄对象: HSSFWorkbook wb = new HSSFWorkbook(); HSSFSheet sheet = wb.createSheet(); HSSFCellStyle setBorder = wb.
  • jquery 获取A href 触发js方法的this参数 无效的情况 一炮送你回车库 jquery
    html如下：  <td class=\"bord-r-n bord-l-n c-333\"> <a class=\"table-icon edit\" onclick=\"editTrValues(this);\">修改</a> </td>"   j
  • md5 3213213333332132 MD5
    import java.security.MessageDigest; import java.security.NoSuchAlgorithmException; public class MDFive { public static void main(String[] args) { String md5Str = "cq
  • 完全卸载干净Oracle11g sophia天雪 orale数据库卸载干净清理注册表
    完全卸载干净Oracle11g A、存在OUI卸载工具的情况下：     第一步：停用所有Oracle相关的已启动的服务；     第二步：找到OUI卸载工具：在“开始”菜单中找到“oracle_OraDb11g_home”文件夹中         &
  • apache 的access.log 日志文件太大如何解决 darkranger apache
    CustomLog logs/access.log common  此写法导致日志数据一致自增变大。 直接注释上面的语法 #CustomLog logs/access.log common 增加： CustomLog "|bin/rotatelogs.exe -l logs/access-%Y-%m-d.log 
  • Hadoop单机模式环境搭建关键步骤 aijuans 分布式
            Hadoop环境需要sshd服务一直开启，故，在服务器上需要按照ssh服务，以Ubuntu Linux为例，按照ssh服务如下： sudo apt-get install ssh sudo apt-get install rsync 编辑HADOOP_HOME/conf/hadoop-env.sh文件，将JAVA_HOME设置为Java
  • PL/SQL DEVELOPER 使用的一些技巧 atongyeye javasql
    1 记住密码 这是个有争议的功能，因为记住密码会给带来数据安全的问题。 但假如是开发用的库，密码甚至可以和用户名相同，每次输入密码实在没什么意义，可以考虑让PLSQL Developer记住密码。 位置：Tools菜单－－Preferences－－Oracle－－Logon HIstory－－Store with password 2 特殊Copy 在SQL Window
  • PHP：在对象上动态添加一个新的方法 bardo 方法动态添加闭包
    有关在一个对象上动态添加方法，如果你来自Ruby语言或您熟悉这门语言，你已经知道它是什么...... Ruby提供给你一种方式来获得一个instancied对象，并给这个对象添加一个额外的方法。   好！不说Ruby了，让我们来谈谈PHP   PHP未提供一个“标准的方式”做这样的事情，这也是没有核心的一部分...   但无论如何，它并没有说我们不能做这样
  • ThreadLocal与线程安全 bijian1013 javajava多线程threadLocal
    首先来看一下线程安全问题产生的两个前提条件：  1.数据共享，多个线程访问同样的数据。  2.共享数据是可变的，多个线程对访问的共享数据作出了修改。    实例：         定义一个共享数据： public static int a = 0;        
  • Tomcat 架包冲突解决 征客丶 tomcatWeb
    环境： Tomcat 7.0.6 win7 x64 错误表象：【我的冲突的架包是：catalina.jar 与 tomcat-catalina-7.0.61.jar 冲突，不知道其他架包冲突时是不是也报这个错误】 严重: End event threw exception java.lang.NoSuchMethodException: org.apache.catalina.dep
  • 【Scala三】分析Spark源代码总结的Scala语法一 bit1129 scala
    Scala语法 1. classOf运算符 Scala中的classOf[T]是一个class对象，等价于Java的T.class,比如classOf[TextInputFormat]等价于TextInputFormat.class    2. 方法默认值 defaultMinPartitions就是一个默认值，类似C++的方法默认值    
  • java 线程池管理机制 BlueSkator java线程池管理机制
    编辑 Add Tools   jdk线程池   一、引言 第一：降低资源消耗。通过重复利用已创建的线程降低线程创建和销毁造成的消耗。第二：提高响应速度。当任务到达时，任务可以不需要等到线程创建就能立即执行。第三：提高线程的可管理性。线程是稀缺资源，如果无限制的创建，不仅会消耗系统资源，还会降低系统的稳定性，使用线程池可以进行统一的分配，调优和监控。  
  • 关于hql中使用本地sql函数的问题（问-答） BreakingBad HQL存储函数
    转自于：http://www.iteye.com/problems/23775 问： 我在开发过程中，使用hql进行查询（mysql5）使用到了mysql自带的函数find_in_set()这个函数作为匹配字符串的来讲效率非常好，但是我直接把它写在hql语句里面（from ForumMemberInfo fm,ForumArea fa where find_in_set(fm.userId,f
  • 读《研磨设计模式》-代码笔记-迭代器模式-Iterator bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.util.Arrays; import java.util.List; /** * Iterator模式提供一种方法顺序访问一个聚合对象中各个元素，而又不暴露该对象内部表示 * * 个人觉得，为了不暴露该
  • 常用SQL chenjunt3 oraclesqlC++cC#
    --NC建库 CREATE TABLESPACE NNC_DATA01 DATAFILE 'E:\oracle\product\10.2.0\oradata\orcl\nnc_data01.dbf' SIZE 500M AUTOEXTEND ON NEXT 50M EXTENT MANAGEMENT LOCAL UNIFORM SIZE 256K ; CREATE TABLESPA
  • 数学是科学技术的语言 comsci 工作活动领域模型
      从小学到大学都在学习数学，从小学开始了解数字的概念和背诵九九表到大学学习复变函数和离散数学，看起来好像掌握了这些数学知识，但是在工作中却很少真正用到这些知识，为什么？    最近在研究一种开源软件-CARROT2的源代码的时候，又一次感觉到数学在计算机技术中的不可动摇的基础作用，CARROT2是一种用于自动语言分类（聚类）的工具性软件，用JAVA语言编写，它
  • Linux系统手动安装rzsz 软件包 daizj linuxszrz
    1、下载软件 rzsz-3.34.tar.gz。登录linux，用命令 wget http://freeware.sgi.com/source/rzsz/rzsz-3.48.tar.gz下载。 2、解压 tar zxvf  rzsz-3.34.tar.gz 3、安装  cd rzsz-3.34 ; make posix 。注意：这个软件安装与常规的GNU软件不
  • 读源码之:ArrayBlockingQueue dieslrae java
        ArrayBlockingQueue是concurrent包提供的一个线程安全的队列,由一个数组来保存队列元素.通过 takeIndex和 putIndex来分别记录出队列和入队列的下标,以保证在出队列时 不进行元素移动. //在出队列或者入队列的时候对takeIndex或者putIndex进行累加,如果已经到了数组末尾就又从0开始,保证数
  • C语言学习九枚举的定义和应用 dcj3sjt126com c
    枚举的定义 # include <stdio.h> enum WeekDay { MonDay, TuesDay, WednesDay, ThursDay, FriDay, SaturDay, SunDay }; int main(void) { //int day; //day定义成int类型不合适 enum WeekDay day = Wedne
  • Vagrant 三种网络配置详解 dcj3sjt126com vagrant
    Forwarded port Private network Public network Vagrant 中一共有三种网络配置，下面我们将会详解三种网络配置各自优缺点。 端口映射(Forwarded port)，顾名思义是指把宿主计算机的端口映射到虚拟机的某一个端口上，访问宿主计算机端口时，请求实际是被转发到虚拟机上指定端口的。Vagrantfile中设定语法为： c
  • 16.性能优化-完结 frank1234 性能优化
    性能调优是一个宏大的工程，需要从宏观架构(比如拆分，冗余，读写分离，集群，缓存等)， 软件设计（比如多线程并行化，选择合适的数据结构）， 数据库设计层面（合理的表设计，汇总表，索引，分区，拆分，冗余等） 以及微观（软件的配置，SQL语句的编写，操作系统配置等）根据软件的应用场景做综合的考虑和权衡，并经验实际测试验证才能达到最优。 性能水很深， 笔者经验尚浅 ，赶脚也就了解了点皮毛而已，我觉得
  • Word Search hcx2013 search
    Given a 2D board and a word, find if the word exists in the grid. The word can be constructed from letters of sequentially adjacent cell, where "adjacent" cells are those horizontally or ve
  • Spring4新特性——Web开发的增强 jinnianshilongnian springspring mvcspring4
    Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新
  • CentOS安装配置tengine并设置开机启动 liuxingguome centos
    yum install gcc-c++  yum install pcre pcre-devel  yum install zlib zlib-devel  yum install openssl openssl-devel Ubuntu上可以这样安装 sudo aptitude install libdmalloc-dev libcurl4-opens
  • 第14章 工具函数（上） onestopweb 函数
    index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
  • Xelsius 2008 and SAP BW at a glance blueoxygen BOXelsius
    Xelsius提供了丰富多样的数据连接方式，其中为SAP BW专属提供的是BICS。那么Xelsius的各种连接的优缺点比较以及Xelsius是如何直接连接到BEx Query的呢？ 以下Wiki文章应该提供了全面的概览。   http://wiki.sdn.sap.com/wiki/display/BOBJ/Xcelsius+2008+and+SAP+NetWeaver+BW+Co
  • oracle表空间相关 tongsh6 oracle
    在oracle数据库中，一个用户对应一个表空间，当表空间不足时，可以采用增加表空间的数据文件容量，也可以增加数据文件，方法有如下几种： 1.给表空间增加数据文件    ALTER TABLESPACE "表空间的名字" ADD DATAFILE    '表空间的数据文件路径' SIZE 50M;   &nb
  • .Net framework4.0安装失败 yangjuanjava .netwindows
    上午的.net framework 4.0，各种失败，查了好多答案，各种不靠谱，最后终于找到答案了 和Windows Update有关系，给目录名重命名一下再次安装，即安装成功了！ 下载地址：http://www.microsoft.com/en-us/download/details.aspx?id=17113 方法： 1.运行cmd，输入net stop WuAuServ 2.点击开
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他