Partage d'exemples de radar de toilettes pour le développement de petits programmes

Urgence~ Vous ne trouvez pas les toilettes ? Un coup de tonnerre, un coup de pantalon ? C'est tout~~Venez utiliser le radar des toilettes~~~. En tant qu'excellente affiche, Fatty, j'ai non seulement écrit le code, mais j'ai aussi pensé au nombre de publicités ~~~~ "Plus vite vous trouvez les toilettes, plus vite vous faites la queue."
J'ai vu un "radar de toilettes" dans la zone d'entraînement et je l'ai essayé. C'était principalement pour pratiquer "l'utilisation de base des contrôles" et "l'interaction entre les pages" du mini programme CSS, mais cela me donnait encore mal à la tête. C'était mieux que la dernière fois. La démo "rock paper Scissors" est bien meilleure HOHO. (PS : Il y a plusieurs pages. Il suffit de coller d'abord le code de la page d'accueil. Les amis qui veulent le voir peuvent le télécharger et nous pourrons ensuite communiquer entre eux. Des commentaires ont été écrits. Oh, au fait, une nouvelle fonction de partage a également été ajouté. Bien sûr, les mots publicitaires ont été écrits dans le partage)
La photo est directement en dessous :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!