小程序-廁所雷達

緊急狀況~ 找不到廁所？ 晴天霹靂 褲衩一聲？ 完嘍快來用廁所雷達吧~。做爲一個優秀的樓主，胖子我不只寫了代碼，連廣告次都想好了，哇咔咔咔~~~~ 「廁所找的快，排的才痛快」。

練習區裏看到一個「廁所雷達」就來作了下，主要仍是爲了練習小程序「控件的基本用法」和「頁面間的交互」，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
雷達的背景圖是沒有的，只能用畫板本身手動畫了一個。

來自：微信小程序聯盟