緊急情況~ 找不到廁所？ 晴天霹靂 褲衩一聲？ 完嘍~~快來用廁所雷達吧~~~。作爲一個優秀的樓主，胖子我不僅寫了代碼，連廣告次都想好了，哇咔咔咔~~~~ “廁所找的快，排的才痛快”。
練習區裏看到一個“廁所雷達”就來做了下，主要還是爲了練習小程序“控件的基本用法”和“頁面間的交互”，CSS依舊讓我感到頭疼，不過比上次的demo“石頭剪刀布”好了很多了HOHO。（PS：頁面有好幾個，就先貼上首頁的代碼吧，想看的小夥伴就下載一下然後咱們互相交流哦，註釋都寫好了的說。哦對了，新的分享功能也加進去了，當然廣告詞已經寫在分享裏了。）
下面直接上圖：
js:
//index.js
var app = getApp()
var winHeight = 0
var winWidth = 0
Page({
data: {
//背景圖片，現在沒有
img:'/pages/image/123.png',
//確定左邊距距離，上邊距距離，廁所title，頭像
dataArr:[{'left':200,'top':100,'title':'我家廁所最好','img':'/pages/image/1.png'},
{'left':20,'top':400,'title':'amis的小屋','img':'/pages/image/2.png'},
{'left':540,'top':440,'title':'老丁的寶盆','img':'/pages/image/3.png'},
{'left':240,'top':800,'title':'雪姐專用坑','img':'/pages/image/4.png'}]
},
//進頁面後獲取數據
onLoad: function () {
console.log('onLoad')
var that = this
//調用應用實例的方法獲取全局數據
app.getUserInfo(function(userInfo){
console.log(userInfo)
//更新數據
that.setData({
userInfo:userInfo
})
})
//獲取數據
wx.getSystemInfo({
success: function(res) {
console.log(res)
winHeight = res.windowHeight;
winWidth = res.windowWidth;
}
})
// 使用 wx.createContext 獲取繪圖上下文 context
var context = wx.createContext()
context.arc(winWidth/2, winHeight/2, 50, 0, 2 * Math.PI, true)
context.arc(winWidth/2, winHeight/2, 100, 0, 2 * Math.PI, true)
context.arc(winWidth/2, winHeight/2, 150, 0, 2 * Math.PI, true)
context.arc(winWidth/2, winHeight/2, 200, 0, 2 * Math.PI, true)
context.arc(winWidth/2, winHeight/2, 250, 0, 2 * Math.PI, true)
context.arc(winWidth/2, winHeight/2, 300, 0, 2 * Math.PI, true)
context.setStrokeStyle('red')
context.setLineWidth(1)
context.stroke()
// 調用 wx.drawCanvas，通過 canvasId 指定在哪張畫布上繪製，通過 actions 指定繪製行爲
wx.drawCanvas({
canvasId: 'radar',
actions: context.getActions() // 獲取繪圖動作數組
})
},
onShareAppMessage: function() {
// 用戶點擊右上角分享
return {
title: '廁所雷達', // 分享標題
desc: '廁所找的快，排的才痛快', // 分享描述
path: 'path' // 分享路徑
}
}
})
wxml:
<!--index.wxml-->
<canvas canvas-id="radar">
<image class="userinfo" src="`userInfo`.`avatarUrl`"></image>
<block wx:for="`dataArr`">
<navigator url="../logs/logs?title=`item`.`title`&img=`item`.`img`">
<view class="toiletView" style="left:`item`.`left`rpx;top:`item`.`top`rpx" bindtap="toiletDetails" id="`index`">
<image class="toiletView-image" src="`item`.`img`"></image>
<text class="toiletView-text">`item`.`title`</text>
</view>
</navigator>
</block>
</canvas>
wxss:
/**index.wxss**/
page{
background: black;
height: 100%;
}
canvas{
width: 100%;
height: 100%;
}
.userinfo {
position:absolute;
top: 561rpx;
left:311rpx;
width: 128rpx;
height: 128rpx;
border-radius: 50%;
}
.toiletView{
position:absolute;
width: 180rpx;
height: 180rpx;
}
.toiletView-image{
position:absolute;
left: 13px;
top: 0px;
width: 128rpx;
height: 128rpx;
border-radius: 50%;
}
.toiletView-text{
position:absolute;
bottom: 10rpx;
font-size: 30rpx;
color: orangered;
width: 180rpx;
text-align: center;
}
Demo：http://pan.baidu.com/s/1pKUpRYV
雷達的背景圖是沒有的，只能用畫板自己手動畫了一個。