全棧開發工程師微信小程式-中
阿新 • • 發佈：2019-01-13
全棧開發工程師微信小程式-中
多媒體及其他的元件
navigator
頁面連結
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標籤.
<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.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介面.
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.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()
}
如果看了覺得不錯
點贊！轉發！
達叔小生：往後餘生，唯獨有你
You and me, we are family !
90後帥氣小夥，良好的開發習慣；獨立思考的能力；主動並且善於溝通
簡書部落格： 達叔小生
https://www.jianshu.com/u/c785ece603d1
結語
- 下面我將繼續對 其他知識 深入講解 ，有興趣可以繼續關注
- 小禮物走一走 or 點贊