当前位置： 首页>移动开发>正文

微信小程序——2 基础

移动开发2024-10-16 17:50:00

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和消息内容请求微信接口，发送模板消息。
微信接口将模板消息推送给用户，用户就会在微信的“服务通知”中看到消息

https://www.xamrdz.com/mobile/4d61994122.html

相关文章：