全棧開發工程師微信小程序-中

時間 2019-11-19

標籤開發工程師微信程序简体版

原文原文鏈接

全棧開發工程師微信小程序-中html

多媒體及其餘的組件

navigator
頁面連接git

target 在哪一個目標上發生跳轉，默認當前小程序，可選值self/miniProgram
url 當前小程序內的跳轉連接
open-type 跳轉方式
delta 當 open-type 爲 'navigateBack' 時有效，表示回退的層數
app-id 當target="miniProgram"時有效，要打開的小程序 appId
path 當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標籤.web

<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.canvas

導航接口

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.js
Page({
  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接口.app

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

image
圖片ide

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.js
Page({
  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: 標記點id
latitude: 緯度
longitude: 經度
title: 標註點
iconPath: 顯示圖標路徑
alpha: 標註的透明度
label: 爲標記點旁邊增長標籤

// circles
latitude: 緯度
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()
  }

若是看了以爲不錯

點贊！轉發！