微信小程序?qū)崙?zhàn)源碼解析：廁所雷達(dá)（附demo下載）
發(fā)布時(shí)間：2017-11-23 17:48 所屬欄目：小程序開(kāi)發(fā)教程
緊急情況~ 找不到廁所？ 晴天霹靂 褲衩一聲？ 完嘍~~快來(lái)用廁所雷達(dá)吧~~~。作為一個(gè)優(yōu)秀的樓主，胖子我不僅寫(xiě)了代碼，連廣告次都想好了，哇咔咔咔~~~~“廁所找的快，排的才痛快”。 練習(xí)區(qū)里看到一個(gè)“廁所雷達(dá)”就 ...
作為一個(gè)優(yōu)秀的樓主，胖子我不僅寫(xiě)了代碼，連廣告次都想好了，哇咔咔咔~~~~ “廁所找的快，排的才痛快”。
練習(xí)區(qū)里看到一個(gè)“廁所雷達(dá)”就來(lái)做了下，主要還是為了練習(xí)小程序“控件的基本用法”和“頁(yè)面間的交互”，CSS依舊讓我感到頭疼，不過(guò)比上次的demo“石頭剪刀布”好了很多了HOHO。（PS：頁(yè)面有好幾個(gè)，就先貼上首頁(yè)的代碼吧，想看的小伙伴就下載一下然后咱們互相交流哦，注釋都寫(xiě)好了的說(shuō)。哦對(duì)了，新的分享功能也加進(jìn)去了，當(dāng)然廣告詞已經(jīng)寫(xiě)在分享里了。）
下面直接上圖：
js:
練習(xí)區(qū)里看到一個(gè)“廁所雷達(dá)”就來(lái)做了下，主要還是為了練習(xí)小程序“控件的基本用法”和“頁(yè)面間的交互”，CSS依舊讓我感到頭疼，不過(guò)比上次的demo“石頭剪刀布”好了很多了HOHO。（PS：頁(yè)面有好幾個(gè)，就先貼上首頁(yè)的代碼吧，想看的小伙伴就下載一下然后咱們互相交流哦，注釋都寫(xiě)好了的說(shuō)。哦對(duì)了，新的分享功能也加進(jìn)去了，當(dāng)然廣告詞已經(jīng)寫(xiě)在分享里了。）
下面直接上圖：
js:
//index.js var app = getApp() var winHeight = 0 var winWidth = 0 Page({ data: { //背景圖片，現(xiàn)在沒(méi)有 img:'/pages/image/123.png', //確定左邊距距離，上邊距距離，廁所title，頭像 dataArr:[{'left':200,'top':100,'title':'我家?guī)詈?#39;,'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':'雪姐專(zhuān)用坑','img':'/pages/image/4.png'}] }, //進(jìn)頁(yè)面后獲取數(shù)據(jù) onLoad: function () { console.log('onLoad') var that = this //調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù) app.getUserInfo(function(userInfo){ console.log(userInfo) //更新數(shù)據(jù) that.setData({ userInfo:userInfo }) }) //獲取數(shù)據(jù) 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() // 調(diào)用 wx.drawCanvas，通過(guò) canvasId 指定在哪張畫(huà)布上繪制，通過(guò) actions 指定繪制行為 wx.drawCanvas({ canvasId: 'radar', actions: context.getActions() // 獲取繪圖動(dòng)作數(shù)組 }) }, onShareAppMessage: function() { // 用戶點(diǎn)擊右上角分享 return { title: '廁所雷達(dá)', // 分享標(biāo)題 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; }
小程序-廁所雷達(dá).zip雷達(dá)的背景圖是沒(méi)有的，只能用畫(huà)板自己手動(dòng)畫(huà)了一個(gè)。
易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開(kāi)源
碼云倉(cāng)庫(kù):
本文地址：http://m.chqfk.com/wxmini/doc/course/17939.html 復(fù)制鏈接
如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢(xún)： 點(diǎn)擊咨詢(xún)
