记过多天的学习与实践做出了一款微信小程序其名曰《U智能水族箱》，虽最终结果不尽如人意，但起码做出来了一个实质性的小程序不是吗！且最终通过了审核成功上线，其中虽然有些功能好像有BUG，但感觉上来说页面制作的几个Demo还是值得仔细玩味，现在把它贴出来满足满足我的虚荣心。
就这个状态页面嘞，下面贴WXml代码：
<!--pages/state/state.wxml-->
<view class='conten'>
<dl class='menu'>
<dt data-index='0' class="{{flag==0?'select':'normal'}} "bindtap='tapMainMenu'>灯光</dt>
<dd class="{{subMenuDisplay[0]}}">
<view class='pic'>
<image src="{{led}}" ></image>
</view>
<switch bindchange="switchChange"/>开
<switch bindchange="switch1Change" color='black'/>关
<switch class='theSwitch2' bindchange="lanya" >蓝牙</switch>
</dd>
<dt data-index='1' class="{{flag==1?'select':'normal'}}"bindtap='tapMainMenu'>温度</dt>
<dd class="{{subMenuDisplay[1]}}">
<view class='pic1'>
<image src="../../images/bq.png" mode='top left' ></image>
</view>
<text class='t1'>templature</text>
<form bindsubmit='submitFun'>
<view class='ipt'>
<text> 当前温度:</text>
<text>{{temp}}℃</text>
</view>
<button class='theBtn' form-type='submit' type='primary'>刷新</button>
</form>
</dd>
<dt data-index='2' class="{{flag==2?'select':'normal'}}" bindtap='tapMainMenu'>打氧</dt>
<dd class="{{subMenuDisplay[2]}}">
<view class='pic'>
<image src="{{water}}" ></image>
</view>
<button class='theBtn' bindtap='waterplay' type='primary'>{{play}}</button>
</dd>
<dt data-index='3' class="{{flag==3?'select':'normal'}} "bindtap='tapMainMenu'>换水</dt>
<dd class="{{subMenuDisplay[3]}}">
<view class='pic1'>
<image src="../../images/text.png" mode='top left' ></image>
</view>
<view class='t2'>注意：我们已为您设置好了换水时间，但您同样可以选择手动换水</view>
<button class='theBtn3' bindtap='watertransform' >{{transform}}</button>
</dd>
</dl>
</view>
接下来时本页面的WXSS代码：
/* pages/state/state.wxss */
.conten{
width: 100%;
}
.menu{
display: block;
height: 38px;
}
.select{
font-size: 13px;
float: left;
width: 24.7%;
height: 38px;
border-right: 1px solid #f2f2f2;
border-bottom: 2px solid #ff0000;
text-align: center;
line-height: 38px;
background-color: #fafafa;
color: #666666;
}
.normal{
font-size: 13px;
float: left;
width: 24.7%;
height: 38px;
border-right: 1px solid #f2f2f2;
border-bottom: 1px solid #f2f2f2;
text-align: center;
line-height: 38px;
background-color: #fafafa;
color: #666666;
}
.menu dd{
position: absolute;
width: 100%;
top: 40px;
left: 0;
z-index: 999;
background-color: #fafafa;
}
.show{
display: block;
}
.hidden{
display: none;
}
.pic{
width:300px;
height:260px;
margin:0px auto;
position:relative;
}
.pic image{
text-align: center;
}
.swi{
display: flex;
align-items: center;
text-align: center;
}
.pic1{
width:20px;
height:35px;
margin-left:0px auto;
position:relative;
background-color: #ffffff;
}
.t1{
display: block;
text-align: right;
}
.t2{
display: block;
color: #cccccc;
font-size: 12px;
padding-top: 10px;
line-height: 20px;
text-align: right;
}
.ipt{
margin: 10rpx;
margin-bottom: 450rpx;
padding: 10rpx;
border-bottom: 1px solid #cccccc;
}
.theBtn{
margin-top: 100rpx;
height: 70rpx;
font-size: 29rpx;
}
.theBtn3{
width: 100%;
position:fixed;
bottom:350rpx;
}
.theSwitch2{
position:fixed;
bottom:0;
right: 0;
}最后自然就是JS代码：
// pages/state/state.js
var app = getApp();
function initSubMenuDisplay(){
return ['hidden', 'hidden', 'hidden', 'hidden'];
}
Page({
/**
* 页面的初始数据
*/
data: {
subMenuDisplay:initSubMenuDisplay(),
flag:0,
led:"../../images/led1.png",
water:"../../images/water.jpg",
play:"开",
temp:12,
bug:1,
transform:"开",
bug2:1,
dasi:1
},
waterplay:function(){
var that=this
this.data.bug++;
if (this.data.bug%2==0)
{
that.setData({
play:"关",
water: "../../images/O2.gif",
})
that.lanya8(0x1f)
}else{
that.setData({
play: "开",
water: "../../images/water.jpg",
})
that.lanya8(0x2f)
}
},
watertransform: function () {
var that = this
this.data.bug2++;
if (this.data.bug2 % 2 == 0) {
that.setData({
transform: "关",
})
that.lanya8(0x5f)
} else {
that.setData({
transform: "开",
})
that.lanya8(0x6f)
}
},
tapMainMenu:function(e){
var index=parseInt(e.currentTarget.dataset.index);
var newSubMenuDisplay=initSubMenuDisplay();
if(this.data.subMenuDisplay[index]=='hidden'){
newSubMenuDisplay[index]='show';
}else{
newSubMenuDisplay[index]='hidden';
index=-1;
}
this.setData({
subMenuDisplay:newSubMenuDisplay,
flag:index
})
},
switchChange:function(){
this.setData({
led: "../../images/led.png"
})
this.lanya8(0x3f)
},
switch1Change:function(){
this.setData({
led: "../../images/led1.png"
})
this.lanya8(0x4f)
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
submitFun:function(){
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
onShow:function(){
if(app.globalData.key){
}else{
wx.showModal({
title: '提示',
content: '您尚未登陆',
})
}
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
lanya:function(){
wx.navigateTo({
url: '../lanya/lanya',
})
},
lanya8: function (str) {
var that = this;
// 这里的回调可以获取到 write 导致的特征值改变
wx.onBLECharacteristicValueChange(function (characteristic) {
console.log('characteristic value changed:1', characteristic)
})
//var buf = new ArrayBuffer(16)
let buf = this.hexStringToArrayBuffer(str);
console.log(buf);
wx.writeBLECharacteristicValue({
// 这里的 deviceId 需要在上面的 getBluetoothDevices 或 onBluetoothDeviceFound 接口中获取
deviceId: app.globalData.conne,
// 这里的 serviceId 需要在上面的 getBLEDeviceServices 接口中获取
serviceId: app.globalData.write,
// 这里的 characteristicId 需要在上面的 getBLEDeviceCharacteristics 接口中获取
characteristicId: app.globalData.writechar,
// 这里的value是ArrayBuffer类型
value: buf,
success: function (res) {
console.log('writeBLECharacteristicValue success', res.errMsg)
}
})
},
hexStringToArrayBuffer: function (str) {
if (!str) {
return new ArrayBuffer(0);
}
var buffer = new ArrayBuffer(str.length);
let dataView = new DataView(buffer)
let ind = 0;
for (var i = 0, len = str.length; i < len; i += 2) {
let code = parseInt(str.substr(i, 2), 16)
dataView.setUint8(ind, code)
ind++
}
return buffer;
},
})