微信小程序—— 2 基础

1. 背景音乐播放

1. 申明需要后台运行的能力，类型为数组。目前支持以下项目：

   • audio: 后台音乐播放
   • location: 后台定位

   如：

     },
     "requiredBackgroundModes": ["audio"]
   }
   

   注：在此处申明了后台运行的接口，开发版和体验版上可以直接生效，正式版还需通过审核

   注意："requiredBackgroundModes"这行放在“tabBar"同级

2. 默认后台播放

   onReady: function () {
     this.bgm = wx.getBackgroundAudioManager()
     this.bgm.onCanplay(()=> {
       this.bgm.pause()
     })
     this.bgm.src = this.music_url
   },
   

3. js代码部分：

   Page({
     data: {
   
       isPlayingMusic: true
     },
     bgm: null,
     music_url :'http://m7.music.126.net/20201001183250/42c9fa63827089ed56abb3d9efccfe09/ymusic/0758/550f/545f/028d3b9421be8425d60dc57735cf6ebc.mp3',
     music_coverImgUrl : 'http://p4.music.126.net/diGAyEmpymX8G7JcnElncQ==/109951163699673355.jpg?param=300y300',
     onReady: function () {
       this.bgm = wx.getBackgroundAudioManager()
       this.bgm.title = '起风了'
       this.bgm.epname = '流行音乐'
       this.bgm.singer = "买辣椒也用卷"
       this.bgm.coverImgUrl = this.music_coverImgUrl
       this.bgm.onCanplay(() => {
         this.bgm.pause()
       })
   
       this.bgm.src = this.music_url
     },
   
   
     play: function () {
       if(this.data.isPlayingMusic){
         this.bgm.pause()
       }else{
         this.bgm.play()
       }
   
       this.setData(
         { isPlayingMusic: !this.data.isPlayingMusic }
       )
     }
   
   })
   

4. wxml部分：

   <view class="player player-{{isPlayingMusic ? 'play' : 'pause'}}" bindtap="play">
     <image src="/images/music_icon.png"></image>
     <image src="/images/music_play.png"></image>
   </view>
   

5. wxss部分：

   .player{
     position:fixed;
     top:20rpx;
     right: 20rpx;
     /* 提高堆叠顺序*/
     z-index: 1;
   }
   
   .player > image:first-child{
     width: 80rpx;
     height: 80rpx;
     /* 为唱片图标设置旋转动画*/
     animation: musicRotate 3s linear infinite;
   }
   
   .player > image:last-child{
     width: 28rpx;
     height: 80rpx;
     margin-left: -5px;
   
   }
   
   
   @keyframes musicRotate{
     from{
       transform: rotate(0deg);
     }
     to{
       transform: rotate(360deg);
     }
   }
   
   .player-pause > image:first-child{
     animation-play-state: paused;
   }
   
   .player-pause > image:last-child{
     animation: musicStop 0.2s linear forwards;
   }
   
   

6. 旋转图：

   [站外图片上传中...(image-2f42e0-1601808787453)]

   [站外图片上传中...(image-865808-1601808787453)]

2. 页面结构和样式

1. 页面内各元素的高度应满屏显示，为此，推荐使用viewport单位，即通过vw和vh表示宽度和高度，确保.content内部的元素高度加起来不超过100

3. 一键拨打电话

wx:wx.makePhoneCall({
      phoneNumber: '13800000000',
      complete: (res) => {},
      fail: (res) => {},
      success: (res) => {},
    })

4.swiper****组件**

设置swiper****组件属性：指示点默认颜色为白色，当前指示点颜色为#ff4c91，轮播图方向通过vertical设置为纵向，autoplay开启自动轮播，circular开启无缝轮播，duration滑动动画时长为1秒，interval自动切换时间为3.5秒、

5. video****组件常用属性

名称	类型	说明
src	String	视频的资源地址
loop	Boolean	是否循环播放，默认为false
controls	Boolean	是否显示默认播放控件（播放/暂停按钮、播放进度、时间），默认为true
danmu-list	Object	弹幕列表
danmu-btn	Boolean	是否显示弹幕显示/隐藏按钮，只在初始化时有效，不能动态变更，默认为false
enable-danmu	Boolean	是否展示弹幕，只在初始化时有效，不能动态变更，默认为false
autoplay	Boolean	是否自动播放，默认为false
poster	String	视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置poster无效
bindplay	EventHandle	当开始/继续播放时触发play事件
bindpause	EventHandle	当暂停播放时触发pause事件

VideoContext****对象常用方法如下:

名称	说明
play()	播放视频
pause()	暂停视频
stop()	停止视频
seek(number)	跳转到指定的位置
playbackRate(number)	设置倍速播放
requestFullScreen()	进入全屏
exitFullScreen()	退出全屏

6. 腾讯视频插件

7.利用****WXS****增强页面功能

WXS应用场景举例：
页面中data数据来自服务器端，但可能不适合直接显示到页面中，需要对数据进行转换后才能显示。
例如接收到的时间字段为时间戳。
假设在本项目中，视频列表数据是从服务器获取的，服务器返回的create_time是一个时间戳，下面在pages/video/video.js文件中模拟这一情况，将create_time改为时间戳

8.map****组件常用属性

名称	类型	说明
longitude	Number	经度
latitude	Number	纬度
scale	Number	缩放级别，取值范围是5~18，默认为16
markers	Array	标记点
polyline	Array	路线
circles	Array	圆
show-location	Boolean	显示带有方向的当前定位点
bindmarkertap	EventHandle	单击标记点时触发，会返回marker的id
bindregionchange	EventHandle	视野发生变化时触发
bindtap	EventHandle	单击地图时触发
bindupdated	EventHandle	在地图渲染更新完成时触发

markers 标记点属性:

名称	类型	必填	说明
id	Number	否	标记点id ，marker单击事件回调会返回此id
longitude	Number	是	经度，浮点数，范围-180~180
latitude	Number	是	纬度，浮点数，范围-90~90
title	String	否	标注点名
zIndex	Number	否	显示层级
iconPath	String	是	显示的图标，使用项目目录下的图片路径
rotate	Number	否	顺时针旋转的角度，范围0 ~ 360，默认为0
alpha	Number	否	透明度，范围 0~1，默认为1（不透明）
width	Number	否	图片宽度，默认为图片实际宽度
height	Number	否	图片高度，默认为图片实际高度
id	Number	否	标记点id ，marker单击事件回调会返回此id

points	Array	是	经纬度数组，如[{latitude: 0, longitude: 0}]
color	String	否	线的颜色，8位十六进制表示，后两位表示alpha值，如：#000000AA
width	Number	否	线的宽度
dottedLine	Boolean	否	是否虚线，默认为false

circles 圆的属性

名称	类型	必填	说明
latitude	Number	是	纬度，浮点数，范围-90~90
longitude	Number	是	经度，浮点数，范围-180~180
color	String	否	描边的颜色，8位十六进制表示，后两位表示alpha值，如：#000000AA
fillColor	String	否	填充颜色，8位十六进制表示，后两位表示alpha值，如：#000000AA
radius	Number	是	半径
strokeWidth	Number	否	描边的宽度

小程序提供了打开微信内置地图的API和定位用户位置的API，需要用户授权才能使用，也就是会自动提示用户“是否同意获取您的位置”，同意后即可获取。

9. picker****组件

默认：普通选择器（mode=“selector”） 。
多列选择器（mode=“multiSelector”）。
时间选择器（mode=“time”）。
日期选择器（mode=“date”）。
省市区选择器（mode=“region”）

range属性表示显示在底部选择器的列表数组，数组中的每一个元素对应列表中的每一项；value属性表示当前选择了range数组中的某个元素的下标，默认值为0。bindchange用于绑定change事件，该事件会在value改变时触发。

10. 模板消息使用

1. 进入小程序管理后台，单击左侧菜单中的“模板消息”，然后单击“添加”按钮添加模板

2. 在模板库中搜索模板，例如，搜索“婚礼”，

3. 在搜索结果列表中，选择“婚礼请帖回复通知”，单击“选用”，即可选用该模板。选用成功后，可以查看该模板的ID和关键词

4. 发送婚礼请帖回复通知

   发送模板消息功能涉及到3个角色的参与，分别是小程序、服务器和微信接口，具体交互流程如下：
   用户在小程序中填写表单，需要附加上formId和code，提交给服务器。
   服务器收到表单后，使用自己的appid、secret和code请求微信接口，获openid。
   服务器向用户发送模板消息，先用自己的appid、secret请求微信接口，获取access_token，然后使用access_token和openid、formId，以及模板的id和消息内容请求微信接口，发送模板消息。
   微信接口将模板消息推送给用户，用户就会在微信的“服务通知”中看到消息