一、屏幕滑动实例
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;
}
~~~