点击item播放音乐

这里设置data-mid={{item.id}}传到list.js里点击事件里，利用打印找到结构，用参数res将mid传给play页面。

数据走play的时候必定调用onload方法，同时赋值给options，

最直接写options.mid可拿到

“我的”页面实现

页面顶部设置块，放用户头像和基础个人信息。

open-data

用于展示微信开放的数据。

type 的合法值

值	说明	最低版本
groupName	拉取群名称	1.4.0
userNickName	用户昵称	1.9.90
userAvatarUrl	用户头像	1.9.90
userGender	用户性别	1.9.90
userCity	用户所在城市	1.9.90
userProvince	用户所在省份	1.9.90
userCountry	用户所在国家	1.9.90
userLanguage	用户的语言	1.9.90

lang 的合法值

值	说明	最低版本
en	英文
zh_CN	简体中文
zh_TW	繁体中文

示例代码

(https://developers.weixin.qq.com/s/vbdmRcmV67YB)

<open-data type="groupName" open-gid="xxxxxx"></open-data>
<open-data type="userAvatarUrl"></open-data>
<open-data type="userGender" lang="zh_CN"></open-data>

基本设计

页面顶部设置块，放用户头像和基础个人信息。

<view class="my"><view class="myimg"><!-- 头像 --><open-data type="userAvatarUrl"></open-data></view><view class="myinfo"><view><!-- 昵称 --><open-data type="userNickName"></open-data></view><view><!-- 省市 --><open-data type="userProvince" lang="zh_CN"></open-data><open-data type="userCity" lang="zh_CN"></open-data></view></view>
</view>

css

position：absolutev相对定位

https://blog.csdn.net/xiaobing_hope/article/details/53609658

无论父级盒子是正常显示还是以border-box显示，在没有规定left和top的属性值时，都呈现在父级盒子的内容区（不包含padding）左上角
若规定了left：0；top：0；则统一相对父级盒子的左上角显示

overflow:hidden 溢出隐藏

给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。

搜索音乐

点击按钮获得搜索框内容，通过按钮单击事件，通过data属性传值

把值传递给搜索接口

搜索接口

limit子句用于限制查询结果返回的数量。即查询到10条音乐结果。

页面传值

search这是系统自动传值

   search:function(p){//搜索按钮绑定的单击事件console.log(p.currentTarget.dataset.song)}

这里是setData是手动传值

获取用户输入得值，现在需要把值传给按钮页面

 input:function(p){ //输入框的绑定事件//获取用户输入得值，需要把值传给按钮//  console.log(p.detail.value)this.setData({song:p.detail.value})// 将值设置到前端页面},

搜索功能实现

这里发送请求又用到wx.request{}

请求网址给lists赋值

注意：这里自己写的信息结构必须和源网址上的结构名称一致，不然会导致信息传递不对等或缺失的结果。

比如原网页上歌手上一级信息目录是数组，定义到下面具体的一个信息值时，也要写明其路径。

  <text class="name">{{item.artists[0].name}}

具体代码：

 search:function(p){//搜索按钮绑定的单击事件let t = thislet ids= [] //数组放搜索结果id  局部变量 每次都初始化了。// 拿到用户输入的结果console.log(p.currentTarget.dataset.song)//发送请求，搜索歌曲wx.request({url: 'https://music.163.com/api/search/get?s='+ p.currentTarget.dataset.song  +'&type=1&limit=10',success:function(res){// console.log(res)t.setData({// lists:res.data.result.songs})console.log(res.data.result.songs)// 数组：  是个数据的容器。  let ids = []// for(let i = 0 ; i < 10;i++){//     console.log(res.data.result.songs[i].id)  //数组索引0--9，，，// }res.data.result.songs.forEach(function (params) {// console.log(params.id)ids.push(params.id)});// 根据 这个ids去查询每个歌曲的信息t.loadInfos(ids)}})},

数据传递思路分析

用input获取内容，通过p.detail.value将内容传给前端（song）。

song传给search方法，给了p，再通过信息接口拿到信息

又有succee存在res，最终给lists

获取搜索的结果id

得到songs之后console.log(res.data.result.songs)要去遍历这个数组

for

for(let i = 0 ; i < 10;i++){

​ // console.log(res.data.result.songs[i].id) //数组索引0–9，，，

forEach

array.forEach(Element=>{})

原写法为array.forEach(funtions（params）{ })

方法对数组的每个元素执行一次给定的函数。

可将数组读到的每一个元素赋给params

这里可以写成res.data.result.songs.forEach(Element=>{})

这里写作箭头函数，其表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。

console.log(res.data.result.songs)// 数组：  是个数据的容器。  let ids = []// for(let i = 0 ; i < 10;i++){//     console.log(res.data.result.songs[i].id)  //数组索引0--9，，，// }res.data.result.songs.forEach(function (params) {// console.log(params.id)ids.push(params.id)});// 根据 这个ids去查询每个歌曲的信息t.loadInfos(ids)}

主页优化

抽取一个loadInfos方法，根据id查询歌曲信息

  // 就是根据id查询歌曲信息loadInfos:function (xx) {let t = this;wx.request({url: 'https://music.163.com/api/song/detail/?ids=['+xx+']',success:function (res) {console.log(res)t.setData({lists:res.data.songs})}})},

不用输入太多的歌曲信息，直接通过ids可以获得此歌所有信息

细节优化处理

给播放页标题添加样式，在middle.song里面

当一首歌是多人唱，要使所有人名显示并在狭小的的框内滚动播放，方法如下

<view class="middle"><text class="song">{{item.name}}</text><text class="name">{{item.artists[0].name}}{{item.artists[1]?"&"+item.artists[1].name:""}}</text></view>

overflow:scroll

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

手机后台播放

除了在app.json里定义"requiredBackgroundModes":[“audio”]，这里也设置返回标签

除了在app.json里定义"requiredBackgroundModes":[“audio”]，这里也设置返回标签

play直接复制粘贴到wx.request里面，以直接获得歌曲信息显示