const paymentUrl = require('../../../../config').paymentUrlvar app = getApp()Page({onLoad: function() {},requestPayment: function() {var self = thisself.setData({loading: true})// 此处需要先调用wx.login方法获取code，然后在服务端调用微信接口使用code换取下单用户的openId// 具体文档参考https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html?t=20161230#wxloginobjectapp.getUserOpenId(function(err, openid) {if (!err) {wx.request({url: paymentUrl,data: {openid},method: 'POST',success: function(res) {console.log('unified order success, response is:', res)var payargs = res.data.payargswx.requestPayment({timeStamp: payargs.timeStamp,nonceStr: payargs.nonceStr,package: payargs.package,signType: payargs.signType,paySign: payargs.paySign})self.setData({loading: false})}})} else {console.log('err:', err)self.setData({loading: false})}})}
})

{"navigationBarTitleText": "发起支付"
}

<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" /><view class="container"><template is="head" data="{{title: 'requestPayment'}}"/><view class="page-body"><view class="page-section"><view>支付金额</view><view class="price">0.01</view><view class="desc">实际接口应用中可自定义金额</view><view class="btn-area"><button type="primary" bindtap="requestPayment" loading="{{loading}}">支付</button></view></view></view><template is="foot" />
</view>

.page-section{width: auto;margin: 30rpx;padding: 64rpx 30rpx;background-color: #fff;text-align: center;font-size: 28rpx;
}
.desc{color: #B2B2B2;
}
.price{margin-top: 30rpx;margin-bottom: 25rpx;position: relative;display: inline-block;font-size: 78rpx;line-height: 1;
}
.price:before{content: "¥";position: absolute;font-size: 40rpx;top: 8rpx;left: -40rpx;
}

Page({showNavigationBarLoading: function () {wx.showNavigationBarLoading()},hideNavigationBarLoading: function () {wx.hideNavigationBarLoading()}
})

{"navigationBarTitleText": "标题栏加载动画"
}

<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" /><view class="container"><template is="head" data="{{title: 'navigationBarLoading'}}"/><view class="page-body"><view class="btn-area"><button type="primary" bindtap="showNavigationBarLoading">显示加载动画</button><button bindtap="hideNavigationBarLoading">隐藏加载动画</button></view></view><template is="foot" />
</view>

Page({data: {systemInfo: {}},getSystemInfo: function () {var that = thiswx.getSystemInfo({success: function (res) {that.setData({systemInfo: res})that.update()}})}
})

{"navigationBarTitleText": "获取手机系统信息"
}

<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" /><view class="container"><template is="head" data="{{title: 'getSystemInfo'}}"/><view class="page-body"><view class="page-section"><view class="weui-cells weui-cells_after-title"><view class="weui-cell weui-cell_input"><view class="weui-cell__hd"><view class="weui-label">手机型号</view></view><view class="weui-cell__bd"><input class="weui-input" type="text" disabled="{{true}}" placeholder="未获取" value="{{systemInfo.model}}"></input></view></view><view class="weui-cell weui-cell_input"><view class="weui-cell__hd"><view class="weui-label">微信语言</view></view><view class="weui-cell__bd"><input class="weui-input" type="text" disabled="{{true}}" placeholder="未获取" value="{{systemInfo.language}}"></input></view></view><view class="weui-cell weui-cell_input"><view class="weui-cell__hd"><view class="weui-label">微信版本</view></view><view class="weui-cell__bd"><input class="weui-input" type="text" disabled="{{true}}" placeholder="未获取" value="{{systemInfo.version}}"></input></view></view><view class="weui-cell weui-cell_input"><view class="weui-cell__hd"><view class="weui-label">屏幕宽度</view></view><view class="weui-cell__bd"><input class="weui-input" type="text" disabled="{{true}}" placeholder="未获取" value="{{systemInfo.windowWidth}}"></input></view></view><view class="weui-cell weui-cell_input"><view class="weui-cell__hd"><view class="weui-label">屏幕高度</view></view><view class="weui-cell__bd"><input class="weui-input" type="text" disabled="{{true}}" placeholder="未获取" value="{{systemInfo.windowHeight}}"></input></view></view><view class="weui-cell weui-cell_input"><view class="weui-cell__hd"><view class="weui-label">DPI</view></view><view class="weui-cell__bd"><input class="weui-input" type="text" disabled="{{true}}" placeholder="未获取" value="{{systemInfo.pixelRatio}}"></input></view></view></view><view class="btn-area"><button type="primary" bindtap="getSystemInfo">获取手机系统信息</button></view></view></view><template is="foot" />
</view>

@import "../../../common/lib/weui.wxss";

const qcloud = require('../../../../vendor/qcloud-weapp-client-sdk/index')
const loginUrl = require('../../../../config').loginUrl
const tunnelUrl = require('../../../../config').tunnelUrlfunction showModal(title, content) {wx.showModal({title,content,showCancel: false})
}function showSuccess(title) {wx.showToast({title,icon: 'success',duration: 1000})
}Page({data: {socketStatus: 'closed'},onLoad: function() {var self = thisqcloud.setLoginUrl(loginUrl)qcloud.login({success: function(result) {console.log('登录成功', result)self.setData({hasLogin: true})},fail: function(error) {console.log('登录失败', error)}})},onUnload: function() {this.closeSocket()},toggleSocket: function(e) {const turnedOn = e.detail.valueif (turnedOn && this.data.socketStatus == 'closed') {this.openSocket()} else if (!turnedOn && this.data.socketStatus == 'connected') {var showSuccess = truethis.closeSocket(showSuccess)}},openSocket: function() {var socket = this.socket = new qcloud.Tunnel(tunnelUrl)socket.on('connect', () => {console.log('WebSocket 已连接')showSuccess('Socket已连接')this.setData({socketStatus: 'connected',waitingResponse: false})})socket.on('close', () => {console.log('WebSocket 已断开')this.setData({ socketStatus: 'closed' })})socket.on('error', error => {showModal('发生错误', JSON.stringify(error))console.error('socket error:', error)this.setData({loading: false})})// 监听服务器推送消息socket.on('message', message => {showSuccess('收到信道消息')console.log('socket message:', message)this.setData({loading: false})})// 打开信道
    socket.open()},closeSocket: function(showSuccessToast) {if (this.socket) {this.socket.close()}if (showSuccessToast) showSuccess('Socket已断开')this.setData({ socketStatus: 'closed' })},sendMessage: function() {if (this.socket && this.socket.isActive()) {this.socket.emit('message', {'content': 'Hello, 小程序!'})this.setData({loading: true})}},
})

{"navigationBarTitleText": "Web Socket"
}

<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" /><view class="container"><template is="head" data="{{title: 'WebSocket'}}"/><view class="page-body"><view class="page-section"><view class="weui-cells weui-cells_after-title"><view class="weui-cell weui-cell_switch"><view class="weui-cell__bd">Socket状态</view><view class="weui-cell__ft"><switch bindchange="toggleSocket" disabled="{{!hasLogin}}"/></view></view><view class="weui-cell"><view class="weui-cell__bd">消息</view><view class="weui-cell__ft">Hello, 小程序!</view></view></view></view><view class="btn-area"><button type="primary" size="40" bindtap="sendMessage" disabled="{{socketStatus != 'connected'}}" loading="{{loading}}">点我发送</button></view></view><template is="foot" />
</view>

@import "../../../common/lib/weui.wxss";

var util = require('../../../../util/util.js')
var playTimeInterval
var recordTimeIntervalPage({data: {recording: false,playing: false,hasRecord: false,recordTime: 0,playTime: 0,formatedRecordTime: '00:00:00',formatedPlayTime: '00:00:00'},onHide: function() {if (this.data.playing) {this.stopVoice()} else if (this.data.recording) {this.stopRecordUnexpectedly()}},startRecord: function () {this.setData({ recording: true })var that = thisrecordTimeInterval = setInterval(function () {var recordTime = that.data.recordTime += 1that.setData({formatedRecordTime: util.formatTime(that.data.recordTime),recordTime: recordTime})}, 1000)wx.startRecord({success: function (res) {that.setData({hasRecord: true,tempFilePath: res.tempFilePath,formatedPlayTime: util.formatTime(that.data.playTime)})},complete: function () {that.setData({ recording: false })clearInterval(recordTimeInterval)}})},stopRecord: function() {wx.stopRecord()},stopRecordUnexpectedly: function () {var that = thiswx.stopRecord({success: function() {console.log('stop record success')clearInterval(recordTimeInterval)that.setData({recording: false,hasRecord: false,recordTime: 0,formatedRecordTime: util.formatTime(0)})}})},playVoice: function () {var that = thisplayTimeInterval = setInterval(function () {var playTime = that.data.playTime + 1console.log('update playTime', playTime)that.setData({playing: true,formatedPlayTime: util.formatTime(playTime),playTime: playTime})}, 1000)wx.playVoice({filePath: this.data.tempFilePath,success: function () {clearInterval(playTimeInterval)var playTime = 0console.log('play voice finished')that.setData({playing: false,formatedPlayTime: util.formatTime(playTime),playTime: playTime})}})},pauseVoice: function () {clearInterval(playTimeInterval)wx.pauseVoice()this.setData({playing: false})},stopVoice: function () {clearInterval(playTimeInterval)this.setData({playing: false,formatedPlayTime: util.formatTime(0),playTime: 0})wx.stopVoice()},clear: function () {clearInterval(playTimeInterval)wx.stopVoice()this.setData({playing: false,hasRecord: false,tempFilePath: '',formatedRecordTime: util.formatTime(0),recordTime: 0,playTime: 0})}
})

{"navigationBarTitleText": "录音"
}

<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" /><view class="container"><template is="head" data="{{title: 'start/stopRecord、play/stopVoice'}}"/><view class="page-body"><view class="page-section"><block wx:if="{{recording === false && playing === false && hasRecord === false}}"><view class="page-body-time"><text class="time-big">{{formatedRecordTime}}</text></view><view class="page-body-buttons"><view class="page-body-button"></view><view class="page-body-button" bindtap="startRecord"><image src="/image/record.png"></image></view><view class="page-body-button"></view></view></block><block wx:if="{{recording === true}}"><view class="page-body-time"><text class="time-big">{{formatedRecordTime}}</text></view><view class="page-body-buttons"><view class="page-body-button"></view><view class="page-body-button" bindtap="stopRecord"><view class="button-stop-record"></view></view><view class="page-body-button"></view></view></block><block wx:if="{{hasRecord === true && playing === false}}"><view class="page-body-time"><text class="time-big">{{formatedPlayTime}}</text><text class="time-small">{{formatedRecordTime}}</text></view><view class="page-body-buttons"><view class="page-body-button"></view><view class="page-body-button" bindtap="playVoice"><image src="/image/play.png"></image></view><view class="page-body-button" bindtap="clear"><image src="/image/trash.png"></image></view></view></block><block wx:if="{{hasRecord === true && playing === true}}"><view class="page-body-time"><text class="time-big">{{formatedPlayTime}}</text><text class="time-small">{{formatedRecordTime}}</text></view><view class="page-body-buttons"><view class="page-body-button" bindtap="stopVoice"><image src="/image/stop.png"></image></view><!-- <view class="page-body-button" bindtap="pauseVoice"><image src="/image/pause.png"></image></view> --><view class="page-body-button" bindtap="clear"><image src="/image/trash.png"></image></view></view></block></view></view><template is="foot" />
</view>

image {width: 150rpx;height: 150rpx;
}.page-body-wrapper {justify-content: space-between;flex-grow: 1;margin-bottom: 300rpx;
}
.page-body-time {display: flex;flex-direction: column;align-items: center;
}
.time-big {font-size: 60rpx;margin: 20rpx;
}
.time-small {font-size: 30rpx;
}.page-body-buttons {margin-top: 60rpx;display: flex;justify-content: space-around;
}
.page-body-button {width: 250rpx;text-align: center;
}
.button-stop-record {width: 110rpx;height: 110rpx;border: 20rpx solid #fff;background-color: #f55c23;border-radius: 130rpx;margin: 0 auto;
}

var util = require('../../../../util/util.js')
var formatLocation = util.formatLocationPage({data: {hasLocation: false,},getLocation: function () {var that = thiswx.getLocation({success: function (res) {console.log(res)that.setData({hasLocation: true,location: formatLocation(res.longitude, res.latitude)})}})},clear: function () {this.setData({hasLocation: false})}
})

{"navigationBarTitleText": "获取位置"
}

<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" /><view class="container"><template is="head" data="{{title: 'getLocation'}}"/><view class="page-body"><view class="page-section"><view class="page-body-info"><text class="page-body-text-small">当前位置经纬度</text><block wx:if="{{hasLocation === false}}"><text class="page-body-text">未获取</text></block><block wx:if="{{hasLocation === true}}"><view class="page-body-text-location"><text>E: {{location.longitude[0]}}°{{location.longitude[1]}}′</text><text>N: {{location.latitude[0]}}°{{location.latitude[1]}}′</text></view></block></view><view class="btn-area"><button type="primary" bindtap="getLocation">获取位置</button><button bindtap="clear">清空</button></view></view></view><template is="foot" />
</view>

.page-body-info {height: 250rpx;
}
.page-body-text-small {font-size: 24rpx;color: #000;margin-bottom: 100rpx;
}
.page-body-text-location {display: flex;font-size: 50rpx;
}
.page-body-text-location text {margin: 10rpx;
}