小程序

微信小程序

小程序知识点

1. 微信小程序（wei xin xiao cheng xu），简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是无需安装，用完即走，实际上是需要安装的，只不过小程序的体积特别小， 下载速度很快，用户感觉不到下载的过程 )

2. 小程序刚发布的时候要求压缩包的体积不能大于1M,，否则无法通过，在2017年4月做了改进，由原来的1M提升到2M；

3. 2017年1月9日0点，万众瞩目的微信第一批小程序正式低调上线。

小程序可以干什么？

1. 同App进行互补，提供同app类型的功能，比app使用方便简洁

2. 通过扫一扫或者在微信搜索即可下载

3. 用户使用频率不高，但又不得不用的功能软件，目前看来小程序是首选

4. 连接线上线下

5. 开发门槛低， 成本低

小程序开发工具

下载地址

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

小程序特点概述

1. 没有DOM

2. 组件化开发

3. 体积小，单个压缩包体积不能大于2M，否则无法上线

4. 小程序的四个重要的文件

a) *.js

b) *.wxml —> view结构 ----> html

c) *.wxss —> view样式 -----> css

d) *. json ----> view 数据 -----> json文件

5. 小程序适配方案: rpx (responsive pixel响应式像素单位)

a) 小程序适配单位： rpx

b) 规定屏幕宽度为750rpx

c) Iphone6下： 1rpx = 1物理像素 = 0.5css

布局视口等于视觉视口（屏幕）就为理想视口

在小程序中把屏幕分成750份 布局视口/750 所以iPhone6中1px=2rpx

App

app结构

app.js 全局逻辑
app.json 全局配置
app.wxss 全局样式

文件介绍

project.config.json -> 项目配置(修改APPID,ES6能否使用等)
sitemap.json -> 页面索引规则
app.js -> 页面"行为" -> App(配置对象) ->注册小程序,有且只能调用一次,只能在app.js中
app.json -> 页面配置
window -> 用于设置导航条样式,小程序背景色等
pages -> 注册页面 -> 声明注册页面
注意:1.小程序首次显示的是pages数组中的第一个页面
2.注册页面路径,不需要写后缀名,他会自动引入目录下的四类文件
app.wxss -> 页面"外貌" -> 公共样式,全局样式
app.wxml(不存在这个文件,因为app代表整个小程序,他自身没有wxml结构)

页面
index.js -> Page() -> 注册页面

常用标签组件

1. view 这个标签相当于div(它的特点就是在没有其他样式影响的情况下，宽度100%)；
2. text 这个标签相当于span(它的特点就是在没有其他样式影响的情况下，不会独占一行，宽和高由内容撑开，这个时候你设置宽高是没有用的)；
3. image 这个标签比较重要，图片组件。src里面可以放网络地址和本地图片地址。
4. button 这个是按钮组件。
5. input 这个是输入框组件。
6. navigator 这个是导航组件。

wxml语法

数据绑定

初始化数据

​ 1. 页面.js的data选项中

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bY0uQR3g-1610172427263)(C:\Users\宋文现\AppData\Roaming\Typora\typora-user-images\image-20201108211445381.png)]

使用数据

1. 模板结构中使用双大括号 插值语法{{message}}

2. 注意事项: 小程序中为单项数据流 model —> view

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-57NIVxO7-1610172427270)(C:\Users\宋文现\AppData\Roaming\Typora\typora-user-images\image-20201108211453815.png)]

修改数据

1. this.setData({message: ‘修改之后的数据’}, callback)

2. 特点：

同步修改： this.data值被同步修改

异步更新： 异步将setData 函数用于将数据从逻辑层发送到视图层（异步

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h6lTrF4w-1610172427273)(C:\Users\宋文现\AppData\Roaming\Typora\typora-user-images\image-20201108211001434.png)]

事件绑定

事件分类

1. 冒泡事件

a) 定义：冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。

2. 非冒泡事件

a) 定义：当一个组件上的事件被触发后，该事件不会向父节点传递。

b) 非冒泡事件：表单事件和自定义事件通常是非冒泡事件

绑定事件

1.冒泡事件绑定

​ 绑定事件的关键字是:bind+事件名称=“事件回调函数名称”

2.非冒泡事件绑定

​ 绑定事件的关键字是:catch+事件名称=“事件回调函数名称”

3.捕获事件绑定

​ 绑定事件的关键字是:capture:bind+事件名称=“事件回调函数名称”

4.非捕获事件绑定

​ 绑定事件的关键字是:capture:catch+事件名称=“事件回调函数名称”

注意:事件回调函数注册的位置跟react相似,与生命周期函数同级

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UmgtBacm-1610172427278)(C:\Users\宋文现\AppData\Roaming\Typora\typora-user-images\image-20201108213230973.png)]

列表渲染wx:for

类似于v-for 直接wx:for="{{arr}}",便可以遍历数组

得到数组中的每一项下标默认为index,每一项为item,即可以直接使用index和item

  <view class="Item" wx:for="{{recommend}}" wx:key="id">
  </view>

wx:key 唯一标识，可以直接用每一项item中的id,无需再item.id

wx:for-item

因为wx:for的到数组中的每一项下标和当前项变量名默认为index和item

如果两个wx:for嵌套的话，那么使用起来不太方便

所以可以用wx:for-item和wx:for-index来重新指定当前项和下标的变量名

<swiper-item wx:for="{{topList}}" wx:for-item="musicItem" wx:for-index="musicIndex" wx:key="musicIndex">

条件渲染（wx-if）

类似于v-if

1. wx:if=’条件’

2. wx:elif=’条件’

3. wx:else

<block wx:if='{{length > 5}}'>
  <text>1</text>
</block>
<block wx:elif='{{length > 2}}'>
  <text>2</text>
</block>
<block wx:else>
  <text>3</text>
</block>

**😗*并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,值接收控制属性,不占地方,不消耗内存

路由跳转配合自定义属性跨页面传递数据

wx.navigateTo({
	url:'xxxxx' //  /pages里面的路径
})

wx.navigateTo(类似于push方法)

​ 1.保留当前页面,保留当前页面对应的实例对象,隐藏页面(keep-alive)
​ 2.用该API跳转页面,会触发当前页面的onHide生命周期
​ 3.小程序的页面栈最多十层(早期最多五层)

​ 4.会触发当前页面的onHide生命周期

​ 5.url写相对路径也可以使用,最好写绝对路径

​ 6.这个只会挂载触发一次onLoad生命周期

wx.redirectTo(类似于replace方法)
1.关闭当前页面,卸载当前页面
2.用该API跳转页面,会触发当前页面的onUnload生命周期

​ 3.这个跳转每次跳转都会重新挂载，然后再次触发onLoad生命周期

wx.switchTab

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

wx.switchTab({
  url: '/pages/personal/personal'
})

路由传参跨页面传递数据

A页面HTML+JS

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FuvuaxKw-1610172427282)(C:\Users\宋文现\AppData\Roaming\Typora\typora-user-images\image-20201114005639446.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MWUgywV0-1610172427283)(C:\Users\宋文现\AppData\Roaming\Typora\typora-user-images\image-20201114005729885.png)]

B页面在onLoad的钩子函数的options中获取id

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Fe2YPe1x-1610172427285)(C:\Users\宋文现\AppData\Roaming\Typora\typora-user-images\image-20201114005915756.png)]

通过js代码设置当前页面导航栏的标题

// 通过js代码设置当前页面导航栏标题
wx.setNavigationBarTitle({
  title: this.data.songObj.name
})

wxss

1. 比之前的css多了两个概念
   1. 尺寸单位
      1. IPhone6中 1px=2rpx
      2. 设计稿一般以iPhone6来做视觉稿的标准
      3. 设置rpx时只要用设计稿的尺寸乘2就行了
   2. 样式导入
      1. 在主wxss中输入@import "./xxx.wxss"

生命周期

1. onLoad(Object query)

a) 页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。

b) 参数：

名称	类型	说明
query	Object	打开当前页面路径中的参数

2. onShow()

a) 页面显示/切入前台时触发

b) 会执行多次

3. onReady()

a) 页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。

4. onHide()

a) 页面隐藏/切入后台时触发。 如 wx.navigateTo 或底部 tab 切换到其他页面，小程序切入后台等。

5. onUnload()

a) 页面卸载时触发。如wx.redirectTo或wx.navigateBack到其他页面时。

首次渲染过程:onLoad->onShow->onReady
onLoad->页面开始加载 -> created
onShow->页面开始显示
onReady->页面首次渲染结束 -> mounted+$nextTick

onHide ->页面隐藏
onUnload ->页面卸载

用户首次登录授权功能和二次免登录授权

button组件配合open-type，再bind绑定getuserinfo事件

<button  open-type="getUserInfo" bindgetuserinfo="userinfo" wx:else>点击获取用户信息</button>

事件回调从data中获取用户信息再保存到本地展示

userinfo(data) {
  console.log(data)
  if (data.detail.rawData) {
    this.setData({
      userInfo:data.detail.userInfo
    })
  } else {
    console.log("shibai")
  }
},

二次免登录，在onLoad生命周期函数中使用wx.getUserInfo（）方法获取用户信息

// 如果读取到用户信息，会通过成功的回调返回给我们
onLoad(){
  wx.getUserInfo({
    success:(detail)=>{
      this.setData({
        userInfo: detail.userInfo
      })
    }
  })
}

网络请求

wx.request(Object object)

发起 HTTPS 网络请求，一般在onLoad生命周期钩子里发请求

默认get请求

index.js的onLoad中

wx.request({
  url:"http://localhost:3000/banner", //地址
  data:{
    type:2                  // 参数
  },
  success:(res)=>{   // 成功的请求回调
    console.log(res)
    this.setData({
      banners:res.data.banners
    })
  }
})

在微信小程序中，data里面原本可以没有banners这个数据，但是通过this.setData方法，就可以后面加入进去。

需要设置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3eyHoVw4-1610172427289)(C:\Users\宋文现\AppData\Roaming\Typora\typora-user-images\image-20201109211104403.png)]

封装请求函数

新建一个utils文件夹，里面新建两个js文件，Ajax.js和config.js

config.js里面写默认配置，相同的路径之类的

export default{
  host:"http://localhost:3000"
}

ajax.js文件

// 封装网络请求
// 引入配置
import config from './config.js'
// 设置的默认值
export default function(url,data={},method="GET"){
  return new Promise((resolve,reject)=>{
    wx.request({
      url: config.host+url,
      data,
      method,
      // 成功的回调得到数据，resolve传出去，外部可以.then获取
      success: (res) => {
        //成功了改变状态
        resolve(res.data)
      }
    })
  })
}

index.js的onLoad生命周期中使用

// 引入封装的网络请求
import ajax from '../../utils/ajax.js'

ajax('/banner', {
    type: 2
  }).then((data) => {
    console.log(data)
    // 将数据保存在本地，wxml中可以直接使用banners
    this.setData({
      banners: data.banners
    })
  })

因为Ajax返回的是promise所以可以配合async和await使用

轮播图组件和滑块组件（swiper和scroll-view）

swiper滑块视图容器。其中只可放置swiper-item组件

swiper-item宽高自动设置100%

相关属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q2rlBT6E-1610172427290)(C:\Users\宋文现\AppData\Roaming\Typora\typora-user-images\image-20201109203939507.png)]

<swiper indicator-dots indicator-color="ivory" indicator-active-color="#d43c33" circular>

next-margin 用于露出后一项的一小部分，效果如图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5y9O2z6o-1610172427293)(C:\Users\宋文现\AppData\Roaming\Typora\typora-user-images\image-20201109204306091.png)]

scroll-view

可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

一定要设置高度，不然会影响下面的元素

需要添加enable-flex才能开启flex布局

<scroll-view class="todayBanner" enable-flex scroll-x>
  <view class="Item" wx:for="{{recommend}}" wx:key="id">
    <image src="{{item.picUrl}}"></image>
    <view class="info">{{item.name}}</view>
  </view>
</scroll-view>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zbe6T4Pq-1610172427295)(C:\Users\宋文现\AppData\Roaming\Typora\typora-user-images\image-20201111204931210.png)]

实现scroll-into-view功能（横向滑动点击谁，谁就到最前面）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0JqtoAyr-1610172427297)(C:\Users\宋文现\AppData\Roaming\Typora\typora-user-images\image-20201111231045680.png)]

组件属性:scroll-into-view="某个标签的id"
id要求必须以字母开头 -> 修改了所有元素的id,添加了nav前缀
changeId函数中 -> 将id获取改为从自定义属性id上获取
通过data控制scroll-into-view到底显示谁

开启动画 -> 组件属性:scroll-with-animation

<scroll-view class="navScroll" enable-flex scroll-x scroll-into-view="nav{{currentId}}" scroll-with-animation>

封装组件（component）

1.新建一个pages同级别的components文件夹，在里面再新建一个组件名的文件夹

2.文件夹新建component (就会新建4个文件)

3.把组件的样式和HTML代码放到对应的组件wxss和wxml中去

4.组件的Js文件中的properties属性里面书写props接收的数据

写法一：
properties: {
    title: String,
    context: String
},
写法二：默认值
properties: {
  title:{
    type:String,
    value:"0" // 默认内容
  },
  contentTitle: {
    type: String,
    value: "1"
  }
},

5.需要使用这个组件的页面的json文件中引入注册

{
  "usingComponents": {
    "navHeader":"/components/navHeader/navHeader"
    // 组件名：组件路径
  }
}

6.页面中使用

<navHeader title="推荐歌曲" context="为你精心推荐" />

底部的页面跳转tabBar

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RQl19DvR-1610172427300)(C:\Users\宋文现\AppData\Roaming\Typora\typora-user-images\image-20201109210142859.png)]

最少2个最多5个`

1.在pages里面新建几个供跳转的页面

2.全局配置app.json中tabBar属性(里面的图标不能用网络的，要下载下来)

"tabBar": {
  "color": "#333", 						// 未选中的字体颜色
  "selectedColor": "#d43c33", // 选中的字体颜色
  "list": [
    {
      "pagePath": "pages/index/index", //跳转的页面路径，在pages中有
      "text": "首页", 									//文字内容
      "iconPath": "/images/tabs/tab-home.png",								// 未选中的图标
      "selectedIconPath": "/images/tabs/tab-home-current.png" //选中时的图标
    },
    {
      "pagePath": "pages/video/video",
      "text": "视频",
      "iconPath": "/images/tabs/select.png",
      "selectedIconPath":"/images/tabs/selected.png"
    },
    {
      "pagePath": "pages/personal/personal",
      "text": "个人",
      "iconPath": "/images/tabs/tab-my.png",
      "selectedIconPath": "/images/tabs/tab-my-current.png"
    }
  ]
},

event事件对象

event.touches ->收集屏幕上所有的手指

event.changedTouches ->收集屏幕上所有正在变化的手指

event.touches[0].clientY ->手指与屏幕顶端的距离

收集表单用户数据（自定义属性传值）

问题:无法像Vue或者React一样,往事件回调中传参

解决:通过自定义属性解决->event.currentTarget.dataset

event.target和event.currentTarget
event.target -> 触发者
event.currentTarget -> 事件源

let id = event.currentTarget.id;（获取自定义属性值）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2tGfPhMZ-1610172427302)(C:\Users\宋文现\AppData\Roaming\Typora\typora-user-images\image-20201110192700908.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UNSoyAjU-1610172427305)(C:\Users\宋文现\AppData\Roaming\Typora\typora-user-images\image-20201110193023298.png)]

弹出提示框（API组件wx.showToast和wx.showLoading）

wx.showToast

wx.showToast({
		title:"提示内容",
		icon:"none"//图标
	})
	
icon的值	->success/loading/none
		->none可以显示两行文本,success只能显示一行(7个汉字)

值	说明	最低版本
success	显示成功图标，此时 title 文本最多显示 7 个汉字长度
loading	显示加载图标，此时 title 文本最多显示 7 个汉字长度
none	不显示图标，此时 title 文本最多可显示两行，1.9.0及以上版本支持

wx.showLoading(Object object)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0wIm02B8-1610172427306)(C:\Users\宋文现\AppData\Roaming\Typora\typora-user-images\image-20201111202449491.png)]

wx.showLoading({
  title: '加载中',
})

注意

• wx.showLoading 和 wx.showToast 同时只能显示一个
• wx.showLoading 应与 wx.hideLoading配对使用（wx.hideLoading（）直接调用隐藏提示框）

数据缓存（实现页面数据通信）

• wx.setStorageSync 同步设置缓存
• wx.setStorage 异步设置缓存
• wx.getStorage 异步读取缓存
• wx.clearStorageSync 同步读取缓存

A页面设置

wx.setStorage({
  key:"key",
  data:"value"
})
// 设置对象
wx.setStorage({
  key: 'userInfo', // 缓存的标识
  data: JSON.stringify(obj)
})

B页面读取缓存

 onLoad(){
  	// 将保存在本地存储里面的个人信息数据同步读取出来
    let userInfo = JSON.parse(wx.getStorageSync('userInfo') || '{}');
 }

小程序下拉刷新和上拉加载更多(两种方式)

需求:当用户下拉页面或者某块区域,刷新当前页面数据(重新请求)

方法一：全局的下拉刷新和上拉加载

在app.json全局配置中的window属性里面添加一个enablePullDownRefresh属性，值为true

然后就开启了全局的下拉刷新和上拉加载，这两个行为会触发相对应的.js页面里的两个监听事件onPullDownRefresh和onReachBottom,然后把下拉上拉之后需要执行的逻辑代码写在这两个事件中（发请求重新请求数据）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ospzBOTp-1610172427309)(C:\Users\宋文现\AppData\Roaming\Typora\typora-user-images\image-20201111200926003.png)]

方法二：scroll-view组件实现下拉刷新上拉加载

下拉刷新

给scroll-view标签设置refresher-enabled属性开启自定义下拉刷新，绑定bindrefresherrefresh事件，自定义下拉刷新触发

问题:最新数据回来之后,下拉刷新的C3效果不消失

解决方法:通过data定义状态 -> 控制组件属性refresher-triggered属性 ->设置为false可以关闭动画效果

上拉加载更多(scroll-view)

给scroll-view标签绑定bindscrolltolower事件，监听用户上拉触底操作触发对应回调函数

<scroll-view class="videoList" scroll-y bindrefresherrefresh="handlePullDown" refresher-enabled bindscrolltolower="handleScrollToLower" refresher-triggered="{{trigger}}">

小程序设置cookie

如果用户通过浏览器访问服务器网站，那么我们可以使用cookie，每次服务器通过cookie中的sessionid来识别当前用户。

可惜的是，小程序是不支持cookie的，那么我们如果有这种需求怎么办呢？别着急，小程序通过wx.request()发送请求的时候可以自定义header头呀！

1，首先在请求头中设置读取cookie，刚开始没有，是空的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fNGqzWQS-1610172427311)(C:\Users\宋文现\AppData\Roaming\Typora\typora-user-images\image-20201111203517216.png)]

2.然后给登录请求携带一个特殊的标识

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fStTltwr-1610172427313)(C:\Users\宋文现\AppData\Roaming\Typora\typora-user-images\image-20201111203730244.png)]

3.在网络请求成功的回调当中查看有没有这个标识，有的话就是登录请求，此时我们要把登录请求携带的cookie读取出来保存到本地存储中去

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ld7aQvCu-1610172427315)(C:\Users\宋文现\AppData\Roaming\Typora\typora-user-images\image-20201111204014912.png)]

4.然后下次请求的时候就会在请求头中读取cookie来识别当前用户

播放一个视频时关掉上一个正在播放的视屏

1.给video标签绑定bindplay事件，（视屏开始播放/继续播放触发的事件），还要添加id属性

2.回调里先拿到本次播放视频的id

3.判断逻辑

4.把本次播放视频的ID保存到this上面，下次播放其他视频的时候，再获取就是上次播放视频的ID了

HTML：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XnK6wN7f-1610172427317)(C:\Users\宋文现\AppData\Roaming\Typora\typora-user-images\image-20201112005746480.png)]

js:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EROBurWU-1610172427320)(C:\Users\宋文现\AppData\Roaming\Typora\typora-user-images\image-20201112010036099.png)]

video组件

bindplay	eventhandle		否	当开始/继续播放时触发play事件
poster	string		否	视频封面的图片网络资源地址或云文件ID。若 controls 属性值为 false 则设置 poster 无效

wx.createVideoContext（string id）

string id就是想要被操控的video组件的 id，wx.createVideoContext返回一个视屏上下文的实例对象，对象上的方法如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gYsYhbew-1610172427322)(C:\Users\宋文现\AppData\Roaming\Typora\typora-user-images\image-20201112010559401.png)]

性能优化（image列表替代video列表）

这也可以实现播放一个视频的时候关掉上一个视屏的效果

问题:由于页面中的video组件过多,导致项目性能较差,加载资源过多
需求:使用image列表替代video列表
解决:使用image标签替换video标签

1.写一个image标签，样式和video标签一样，设置相同的id

2.给image标签绑定点击事件，回调里获取当前点击image标签的id

3.通过wx.createVideoContext（id）创建当前id的image标签对应的视屏资源的上下文实例对象，控制其播放

4.由于view层会发生变化,所以说明有data的参与，把当前的id保存到data数据中去（currentVideoId）

5.通过wx:if和wx:else完成image和video标签的切换，条件为data中的currentVideoId等于当前的id

html:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VqZyly4N-1610172427324)(C:\Users\宋文现\AppData\Roaming\Typora\typora-user-images\image-20201112004647705.png)]

js: data里面书写 currentVideoId: null

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gN6F92ZL-1610172427326)(C:\Users\宋文现\AppData\Roaming\Typora\typora-user-images\image-20201112004837068.png)]

wx.getBackgroundAudioManager()音频

获取全局唯一的背景音频管理器。 小程序切入后台，如果音频处于播放状态，可以继续播放。但是后台状态不能通过调用API操纵音频的播放状态

注意: 如果想要实现进入后台之后还能播放歌曲, 需要在app.json中配置

"requiredBackgroundModes": [
    "audio",
    "location"
  ]

wx.getBackgroundAudioManager() -> 得到BackgroundAudioManager(全局唯一的背景音频管理器实例) -> 给实例对象添加src属性, 就能自动播放音频

如果多次用到就在onLoad中获取，然后添加到当前页面实例this上面，之后this.backgroundAudioManager调用

// 获取全局唯一的背景音频管理器对象，放到this上面
this.backgroundAudioManager = wx.getBackgroundAudioManager();

// 播放音频
this.backgroundAudioManager.src = this.data.musicUrl;
//音乐标题
this.backgroundAudioManager.title = this.data.songObj.name;

上面还有很多关于音乐的方法，比如监听音乐的是播放状态还是暂停状态

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pM40fNpo-1610172427328)(C:\Users\宋文现\AppData\Roaming\Typora\typora-user-images\image-20201114011041327.png)]

小程序使用NPM

找到项目文件，打开CMD ,先npm init -y 初始化一个仓库，生成package.json文件

npm i 下载插件

小程序开发工具设置勾选使用NPM模块

小程序开发工具里的工具选项里面点构建NPM

然后就可以引入使用了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kNiGro6K-1610172427331)(C:\Users\宋文现\AppData\Roaming\Typora\typora-user-images\image-20201114012309467.png)]

get APP

获取小程序全局唯一实例，可以存放数据，然后所有页面都能以对象方式读取和修改

app.js里以属性的方式写入，名字可以不叫globalData,可以自己取

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UNfNRBH5-1610172427332)(C:\Users\宋文现\AppData\Roaming\Typora\typora-user-images\image-20201114012438796.png)]

页面JS里

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zpsg4Fwr-1610172427334)(C:\Users\宋文现\AppData\Roaming\Typora\typora-user-images\image-20201114012559503.png)]

以对象的方式读取修改就好

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XQ5rzON6-1610172427337)(C:\Users\宋文现\AppData\Roaming\Typora\typora-user-images\image-20201114012641079.png)]

总结小程序跨页面的通信

wx.setStorage storage缓存

主要用来存放重要数据，容量有限，一般不用

路由跳转query传参+自定义属性

自定义属性，回调事件对象获取属性拼接在路由跳转的地址后面，另一页面的onLoad钩子中的options中获取

pubsub

下载插件，一般要设置勾选使用NPM模块，然后再工具里构建NPM

get App()

小程序全局唯一实例,在app.js里面以属性的方式存入数据，所有页面都能读取到，也可以直接以对象的方式修改