小程序模板網(wǎng)

微信小程序?qū)崙?zhàn)源碼解析:廁所雷達(附demo下載)

發(fā)布時間:2017-11-23 17:48 所屬欄目:小程序開發(fā)教程

緊急情況~ 找不到廁所? 晴天霹靂 褲衩一聲? 完嘍~~快來用廁所雷達吧~~~。作為一個優(yōu)秀的樓主,胖子我不僅寫了代碼,連廣告次都想好了,哇咔咔咔~~~~“廁所找的快,排的才痛快”。 練習(xí)區(qū)里看到一個“廁所雷達”就 ...

 
 
 
緊急情況~ 找不到廁所? 晴天霹靂 褲衩一聲? 完嘍~~快來用廁所雷達吧~~~。
作為一個優(yōu)秀的樓主,胖子我不僅寫了代碼,連廣告次都想好了,哇咔咔咔~~~~  “廁所找的快,排的才痛快”。

練習(xí)區(qū)里看到一個“廁所雷達”就來做了下,主要還是為了練習(xí)小程序“控件的基本用法”和“頁面間的交互”,CSS依舊讓我感到頭疼,不過比上次的demo“石頭剪刀布”好了很多了HOHO。(PS:頁面有好幾個,就先貼上首頁的代碼吧,想看的小伙伴就下載一下然后咱們互相交流哦,注釋都寫好了的說。哦對了,新的分享功能也加進去了,當然廣告詞已經(jīng)寫在分享里了。)

下面直接上圖:
1.png

2.png

3.png

4.png

js:


 
//index.js

var app = getApp()

var winHeight = 0

var winWidth = 0

Page({

  data: {

      //背景圖片,現(xiàn)在沒有

      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':'雪姐專用坑','img':'/pages/image/4.png'}]

  },



  //進頁面后獲取數(shù)據(jù)

  onLoad: function () {

    console.log('onLoad')

    var that = this

    //調(diào)用應(yīng)用實例的方法獲取全局數(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,通過 canvasId 指定在哪張畫布上繪制,通過 actions 指定繪制行為

    wx.drawCanvas({

      canvasId: 'radar',

      actions: context.getActions() // 獲取繪圖動作數(shù)組

    })

  },

  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;
}
 

 

小程序-廁所雷達.zip
雷達的背景圖是沒有的,只能用畫板自己手動畫了一個。


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/17939.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢