全栈开发工程师微信小程序-中

标题图

全栈开发工程师微信小程序-中

多媒体及其余的组件

navigator
页面链接

target 在哪个目标上发生跳转，默认当前小程序，可选值self/miniProgramurl 当前小程序内的跳转链接open-type 跳转方式delta 当 open-type 为 'navigateBack' 时有效，表示回退的层数app-id 当target="miniProgram"时有效，要打开的小程序 appIdpath 当target="miniProgram"时有效，打开的页面路径，假如为空则打开首页extra-data 当target="miniProgram"时有效，需要传递给目标小程序的数据，目标小程序可在 App.onLaunch()，App.onShow() 中获取到这份数据hover-class 指定点击时的样式类，当hover-class="none"时，没有点击态效果hover-stop-propagation 指定能否阻止本节点的祖先节点出现点击态hover-start-time 按住后多久出现点击态hover-stay-time 手指松开后点击态保留时间bindsuccess 当target="miniProgram"时有效，跳转小程序成功bindfail 当target="miniProgram"时有效，跳转小程序失败

效果

navigator是页面链接组件,等于html中的a标签.

效果

<view class="btn"> <navigator url="navigator?title=navigate" open-type="navigate" hover-class="navigator-hover">  <button type="default">新窗口打开</button> </navigator>  <navigator url="navigator?title=redirect" open-type="redirect" hover-class="navigator-hover">  <button type="default">在当前页打开</button> </navigator> <navigator url="navigator" open-type="switchTab" hover-class="navigator-hover"> <button type="default">切换tab</button> </navigator> <navigator url="navigator?title=reLaunch" open-type="reLaunch" hover-class="navigator-hover"> <button type="default">重启打开</button> </navigator> <navigator delta="1" open-type="navigateBack">  <button type="default">返回页面</button> </navigator></view>// delta    Number      当 open-type 为 'navigateBack' 时有效，表示回退的层数

<navigator    url="/page/navigate/navigate?title=navigate"    hover-class="navigator-hover"  >    跳转到新页面  </navigator>

<navigator    url="../../redirect/redirect/redirect?title=redirect"    open-type="redirect"    hover-class="other-navigator-hover"  >    在当前页打开  </navigator>

<navigator    target="miniProgram"    open-type="navigate"    app-id=""    path=""    extra-data=""    version="release"  >    打开绑定的小程序  </navigator>

每个open-type都有默认的url属性,open-type为navigateBack时,url无效,delta的属性表示为反退,默认是1.

导航接口

wx.navigateTo(OBJECT):跳转到新页面时保留当前页面wx.redirectTo(OBJECT):关闭当前页面,跳转到新页面wx.switchTab(OBJECT):跳转tabBar页面wx.navigateBack(OBJECT):关闭当前页面,返回上一级页面或者多级页面wx.reLaunch(OBJECT):关闭所有页面

wx.navigateTo({ url: 'newpage?id=1', success:res => {}, fail:err => {}, complete:_ => {}})wx.redirectTo({ url: 'otherpage?id=1',  success:res => {}, fail:err => {}, complete:_ => {}})wx.switchTab({ url: '/index',  success:res => {}, fail:err => {}, complete:_ => {}})wx.navigateBack({ delta: 1})wx.reLaunch({ url: 'homepage',  success:res => {}, fail:err => {}, complete:_ => {}})

audio组件

是音频组件

效果

id  audio 组件的唯一标识符src 要播放音频的资源地址loop 能否循环播放controls 能否显示默认控件poster 默认控件上的音频封面的图片资源地址name 默认控件上的音频名字author 默认控件上的作者名字

效果效果

<audio  poster="{{poster}}"  name="{{name}}"  author="{{author}}"  src="{{src}}"  id="myAudio"  controls  loop></audio><button type="primary" bindtap="audioPlay">播放</button><button type="primary" bindtap="audioPause">暂停</button><button type="primary" bindtap="audio14">设置当前播放时间为14秒</button><button type="primary" bindtap="audioStart">回到开头</button>

// audio.jsPage({  onReady(e) {    // 使用 wx.createAudioContext 获取 audio 上下文 context    this.audioCtx = wx.createAudioContext('myAudio')  },  data: {    poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',    name: '此时此刻',    author: '许巍',    src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',  },  audioPlay() {    this.audioCtx.play()  },  audioPause() {    this.audioCtx.pause()  },  audio14() {    this.audioCtx.seek(14)  },  audioStart() {    this.audioCtx.seek(0)  }})

audio为音频标签,poster属性代表默认控件上音频封面图片地址,name代表控件上的音频名字,author代表默认控件上的作者名字,controls代表能否显示默认控件,src要播放音频资源地址,loop能否循环.id是audio组件的唯一标识.

onReady函数,wx.createAudioContext接口,音频对象audioCtx,对象存储在this对象上.

AudioContext对象是和audio组件进行绑定的.wx.createAudioContext接口.

this.audioCtx = wx.createAudioContext('myAudio')

image
图片

src 图片资源地址mode 图片裁剪、缩放的模式lazy-load 图片懒加载

效果

https://developers.weixin.qq.com/miniprogram/dev/component/image.html

// mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。缩放  scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素缩放  aspectFit   保持纵横比缩放图片，可以完整地将图片显示出来缩放  aspectFill  保持纵横比缩放图片，图片通常只在水平或者垂直方向是完整的，另一个方向将会发生截取

video
视频

src 要播放视频的资源地址initial-time 指定视频初始播放位置duration 指定视频时长controls 能否显示默认播放控件danmu-list 弹幕列表danmu-btn 能否显示弹幕按钮，只在初始化时有效，不能动态变更enable-danmu 能否展现弹幕，只在初始化时有效，不能动态变更autoplay 能否自动播放loop 能否循环播放muted 能否静音播放page-gesture 在非全屏模式下，能否开启亮度与音量调节手势direction 设置全屏时视频的方向show-fullscreen-btn 能否显示全屏按钮show-play-btn 能否显示视频底部控制栏的播放按钮show-center-play-btn 能否显示视频中间的播放按钮enable-progress-gesture 能否开启控制进度的手势

效果

// 主要src: 要播放视频的资源地址duration: 指定的视频时长controls: 能否显示默认播放控件danmu-list: 弹幕列表danmu-btn: 能否显示弹幕按钮enable-danmu: 能否展现弹幕autoplay: 能否自动播放loop: 能否循环播放muted: 能否静音

案例:

<video src="{{src}}" controls></video><video    id="myVideo"    src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"    danmu-list="{{danmuList}}"    enable-danmu    danmu-btn    controls  ></video>

camera
系统相机

扫码二维码功能，需更新微信用户端至6.7.3

效果

案例:

<camera  device-position="back"  flash="off"  binderror="error"  style="width: 100%; height: 300px;"></camera><view>预览</view><image mode="widthFix" src="{{src}}"></image>// camera.jsPage({  takePhoto() {    const ctx = wx.createCameraContext()    ctx.takePhoto({      quality: 'high',      success: (res) => {        this.setData({          src: res.tempImagePath        })      }    })  },  error(e) {    console.log(e.detail)  }})

地图

map
地图

latitude: 代表中心纬度longitude: 代表中心经度markers: 标记点数组circles: 在地图上显示圆圈所使用的数据,是一个数组scale: 缩放级别polyline: 用两个以上的坐标点show-location: 显示带有方向的当前定位点include-points: 缩放视野需要包含的精卫坐标点

注意: covers 属性即将移除，请使用 markers 替代

markers
标记点用于在地图上显示标记的位置

<!-- map.wxml --><map  id="map"  longitude="113.324520"  latitude="23.099994"  scale="14"  controls="{{controls}}"  bindcontroltap="controltap"  markers="{{markers}}"  bindmarkertap="markertap"  polyline="{{polyline}}"  bindregionchange="regionchange"  show-location  style="width: 100%; height: 300px;"></map>

// markers元素id: 标记点idlatitude: 纬度longitude: 经度title: 标注点iconPath: 显示图标路径alpha: 标注的透明度label: 为标记点旁边添加标签

// circleslatitude: 纬度longitude: 经度color: 描边的颜色fillColor: 填充颜色radius: 半径strokeWidth: 描边的宽度points: 经纬度数组color: 线的颜色width: 线的宽度arrowLine: 能否带箭头borderColor: 线的边框颜色borderWidth: 线的厚度

画布

canvas作用实现基本的二维几何图形.

canvas-id canvas 组件的唯一标识符disable-scroll 当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新bindtouchstart 手指触摸动作开始bindtouchmove 手指触摸后移动bindtouchend 手指触摸动作结束bindtouchcancel 手指触摸动作被打断bindlongtap 手指长按 500ms 之后触发binderror 当发生错误时触发 error 事件

效果

案例:

<canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas"></canvas><canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas"></canvas><canvas  style="width: 400px; height: 500px;"  canvas-id="secondCanvas"  binderror="canvasIdErrorCallback"></canvas>onReady(e) {    // 使用 wx.createContext 获取绘图上下文 context    const context = wx.createCanvasContext('firstCanvas')    context.setStrokeStyle('#00ff00')    context.setLineWidth(5)    context.rect(0, 0, 200, 200)    context.stroke()    context.setStrokeStyle('#ff0000')    context.setLineWidth(2)    context.moveTo(160, 100)    context.arc(100, 100, 60, 0, 2 * Math.PI, true)    context.moveTo(140, 100)    context.arc(100, 100, 40, 0, Math.PI, false)    context.moveTo(85, 80)    context.arc(80, 80, 5, 0, 2 * Math.PI, true)    context.moveTo(125, 80)    context.arc(120, 80, 5, 0, 2 * Math.PI, true)    context.stroke()    context.draw()  }

效果

假如看了觉得不错

点赞！转发！

达叔小生：往后余生，唯独有你
You and me, we are family !
90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通
简书博客： 达叔小生
https://www.songma.com/u/c785ece603d1

结语

• 下面我将继续对 其余知识 深入讲解 ，有兴趣可以继续关注
• 小礼物走一走 or 点赞

上一篇 目录 已是最后