一、屏幕滑動實例
wxml
~~~
<view id="id" class = "ball" bindtouchmove="handletouchmove" >
{{text}}
</view>
~~~
wxjs
~~~
//js
Page({
data: {
lastX: 0, //滑動開始x軸位置
lastY: 0, //滑動開始y軸位置
text: "沒有滑動",
currentGesture: 0, //標識手勢
},
//滑動移動事件
handletouchmove: function (event) {
var currentX = event.touches[0].pageX
var currentY = event.touches[0].pageY
var tx = currentX - this.data.lastX
var ty = currentY - this.data.lastY
var text = ""
//左右方向滑動
if (Math.abs(tx) > Math.abs(ty)) {
if (tx < 0)
text = "向左滑動"
else if (tx > 0)
text = "向右滑動"
}
//上下方向滑動
else {
if (ty < 0)
text = "向上滑動"
else if (ty > 0)
text = "向下滑動"
}
//將當前坐標進行保存以進行下一次計算
this.data.lastX = currentX
this.data.lastY = currentY
this.setData({
text: text,
});
},
//滑動開始事件
handletouchtart: function (event) {
this.data.lastX = event.touches[0].pageX
this.data.lastY = event.touches[0].pageY
},
//滑動結束事件
handletouchend: function (event) {
this.data.currentGesture = 0;
this.setData({
text: "沒有滑動",
});
},
})
~~~
wxss
~~~
.ball {
margin: 0 auto;
text-align: center;
width:100%;
padding-top:500rpx;
padding-bottom:500rpx;
display: block;
}
~~~
二、掃條碼實例
wxml
~~~
<!--index.wxml-->
<view class="container">
<view bindtap="bindViewTap" class="userinfo">
<image class="userinfo-avatar" src="../img/ocode.png"></image>
<text class="userinfo-nickname">掃碼</text>
</view>
<block wx:if="{{barcodeData}}">
<view class="usermotto">
<text>{{barcodeData.code}} 的查詢結果：</text>
<text style="margin-top:20px;font-size:16px;">名稱: {{barcodeData.name}}</text>
<text style="margin-top:10px;font-size:16px;">商標: {{barcodeData.brand}}</text>
<text style="margin-top:10px;font-size:16px;">廠家: {{barcodeData.manufacturers}}</text>
<text style="margin-top:10px;font-size:16px;">規格尺寸: {{barcodeData.specifications}}</text>
<text style="margin-top:10px;font-size:16px;">條碼狀態: {{barcodeData.status}}</text>
<text style="margin-top:10px;font-size:16px;">描述: {{barcodeData.description}}</text>
</view>
</block>
<block wx:else>
<view class="usermotto">
<text>條形碼演示</text>
</view>
</block>
</view>
~~~
wxjs
~~~
//index.js
//獲取應用實例
var app = getApp()
Page({
data: {},
//事件處理函數
bindViewTap: function() {
var that = this
wx.scanCode({
success: (res) => {
wx.showLoading({});
wx.request({
url: '接口地址', // 做一個自己的專屬接口和后臺管理
data: {
barcode: res.result
},
success: function(res) {
wx.hideLoading()
console.log(res.data)
that.setData({
barcodeData:res.data.data
});
}
})
}
})
},
onLoad: function () {
console.log('onLoad')
}
})
~~~
wxss
~~~
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 100rpx;
margin: 20rpx;
}
.userinfo-nickname {
color: #aaa;
}
.usermotto {
margin-top: 100px;
padding: 20px;
display: flex;
flex-direction: column;
}
~~~
素材：
三、掃二維碼實例
wxjs
~~~
//獲取應用實例
var app = getApp()
Page({
data: {
show: "",
},
onLoad: function () {
console.log('onLoad')
},
click: function () {
var that = this;
var show;
wx.scanCode({
success: (res) => {
that.setData({
show: res
})
wx.showToast({
title: '成功',
icon: 'success',
duration: 2000
})
},
fail: (res) => {
wx.showToast({
title: '失敗',
icon: 'success',
duration: 2000
})
},
complete: (res) => {
}
})
}
})
~~~
wxml
~~~
<!--pages/tcode/index.wxml-->
<view class="container">
<view bindtap="click" class="userinfo">
<image class="userinfo-avatar" src="../img/tcode.png"></image>
<text class="userinfo-nickname">掃碼</text>
</view>
<block wx:if="{{show}}">
<view class="usermotto">
<text>結果：{{show.result}}</text>
<text style="margin-top:20px;font-size:16px;">類型: {{show.scanType}}</text>
<text style="margin-top:20px;font-size:16px;">字符集: {{show.charSet}}</text>
<text style="margin-top:20px;font-size:16px;">路徑: {{show.path}}</text>
</view>
</block>
<block wx:else>
<view class="usermotto">
<text>條形碼演示</text>
</view>
</block>
</view>
~~~
wxss
~~~
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 100rpx;
margin: 20rpx;
}
.userinfo-nickname {
color: #aaa;
}
.usermotto {
margin-top: 100px;
padding: 20px;
display: flex;
flex-direction: column;
}
~~~
素材：
四、剪切板實例
wxjs
~~~
// pages/ shear/index.js
Page({
/**
* 頁面的初始數據
*/
data: {
str:'暫時沒有復制內容'
},
//點擊復制
copyClick:function(e){
var that = this;
var str = e.currentTarget.dataset.str;
//獲取并保存到剪切板
wx.getClipboardData({
success: function (res) {
that.setData({str:str});
}
})
}
})
~~~
wxml
~~~
<!--pages/ shear/index.wxml-->
<view class='page'>
<view class='content'>
<text>內容：{{str}}</text>
</view>
<view class='btn' data-str="這是剪切的新內容" bindtap='copyClick'>
點擊我復制
</view>
</view>
~~~
wxss
~~~
/* pages/ shear/index.wxss */
.page{
margin: 0 auto;
padding: 10rpx;
}
.content{
border: 1rpx solid #ccc;
height: 300rpx;
}
.btn{
background: white;
border: 1rpx solid #ccc;
text-align: center;
margin-top: 10rpx;
}
~~~
五、視頻實例
wxjs
~~~
function getRandomColor() {
let rgb = []
for (let i = 0; i < 3; ++i) {
let color = Math.floor(Math.random() * 256).toString(16)
color = color.length == 1 ? '0' + color : color
rgb.push(color)
}
return '#' + rgb.join('')
}
Page({
onReady: function (res) {
this.videoContext = wx.createVideoContext('myVideo')
},
inputValue: '',
bindInputBlur: function (e) {
this.inputValue = e.detail.value
},
bindSendDanmu: function () {
this.videoContext.sendDanmu({
text: this.inputValue,
color: getRandomColor()
})
}
})
~~~
wxml
~~~
<view class="section tc">
<video id="myVideo"class='video' src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" enable-danmu danmu-btn controls></video>
<view class="btn-area">
<input bindblur="bindInputBlur" class='dm'/>
<button bindtap="bindSendDanmu">發送彈幕</button>
</view>
</view>
~~~
wxss
~~~
/* pages/vidio/index.wxss */
.video{
width: 100%;
}
.dm{
width:100%;border:1rpx solid #ccc;margin-bottom:10rpx;
}
~~~
六、地圖實例
wxjs
~~~
Page({
onReady: function (e) {
// 使用 wx.createMapContext 獲取 map 上下文
this.mapCtx = wx.createMapContext('myMap')
},
getCenterLocation: function () {
this.mapCtx.getCenterLocation({
success: function (res) {
console.log(res.longitude)
console.log(res.latitude)
}
})
},
moveToLocation: function () {
this.mapCtx.moveToLocation()
},
translateMarker: function () {
this.mapCtx.translateMarker({
markerId: 0,
autoRotate: true,
duration: 1000,
destination: {
latitude: 23.10229,
longitude: 113.3345211,
},
animationEnd() {
console.log('animation end')
}
})
},
includePoints: function () {
this.mapCtx.includePoints({
padding: [10],
points: [{
latitude: 23.10229,
longitude: 113.3345211,
}, {
latitude: 23.00229,
longitude: 113.3345211,
}]
})
}
})
~~~
wxml
~~~
<!-- map.wxml -->
<map id="myMap" show-location style="width: 100%; height: 300px;"/>
<button type="primary" bindtap="getCenterLocation" class='btn'>獲取位置</button>
<button type="primary" bindtap="moveToLocation" class='btn'>移動位置</button>
<button type="primary" bindtap="translateMarker" class='btn'>移動標注</button>
<button type="primary" bindtap="includePoints" class='btn'>縮放視野</button>
~~~
wxss
~~~
.btn{
float: left;
width: 230rpx;
margin: 10rpx;
}
~~~