Beispiel für die Entwicklung kleiner Toilettenradarprogramme-Mini-Programmentwicklung-php.cn

Beispiel für die Entwicklung kleiner Toilettenradarprogramme

高洛峰

Freigeben： 2017-03-22 17:11:00

Original

1810 Leute haben es durchsucht

Notfall~ Sie können die Toilette nicht finden? Ein Blitz aus heiterem Himmel, ein Hosenknall? Das ist es~~ Kommen Sie und nutzen Sie das Toilettenradar~~~. Als ausgezeichneter Poster, Fatty, habe ich nicht nur den Code geschrieben, sondern auch über die Anzahl der Anzeigen nachgedacht. „Je schneller du die Toilette findest, desto schneller stellst du dich an.“
Ich habe im Übungsbereich ein „Toilettenradar“ gesehen und es ausprobiert. Es diente hauptsächlich dazu, die „grundlegende Verwendung von Steuerelementen“ und die „Interaktion zwischen Seiten“ des Miniprogramms zu üben, aber es bereitete mir immer noch Kopfschmerzen war besser als beim letzten Mal. Die Demo „Stein, Papier, Schere“ ist viel besser, HOHO. (PS: Es gibt mehrere Seiten. Fügen Sie einfach zuerst den Code der Homepage ein. Freunde, die ihn sehen möchten, können ihn herunterladen und dann können wir miteinander kommunizieren. Kommentare wurden geschrieben. Ach übrigens, eine neue Sharing-Funktion wurde auch hinzugefügt. Die Werbewörter wurden natürlich auch in das Teilen geschrieben)
Das Bild ist direkt unten:

Beispiel für die Entwicklung kleiner Toilettenradarprogramme

js:

//index.js
var app = getApp()
var winHeight = 0
var winWidth = 0
Page({
  data: {
      //背景图片，现在没有
      img:&#39;/pages/image/123.png&#39;,
      //确定左边距距离，上边距距离，厕所title，头像
      dataArr:[{&#39;left&#39;:200,&#39;top&#39;:100,&#39;title&#39;:&#39;我家厕所最好&#39;,&#39;img&#39;:&#39;/pages/image/1.png&#39;},
      {&#39;left&#39;:20,&#39;top&#39;:400,&#39;title&#39;:&#39;amis的小屋&#39;,&#39;img&#39;:&#39;/pages/image/2.png&#39;},
      {&#39;left&#39;:540,&#39;top&#39;:440,&#39;title&#39;:&#39;老丁的宝盆&#39;,&#39;img&#39;:&#39;/pages/image/3.png&#39;},
      {&#39;left&#39;:240,&#39;top&#39;:800,&#39;title&#39;:&#39;雪姐专用坑&#39;,&#39;img&#39;:&#39;/pages/image/4.png&#39;}]
  },
  //进页面后获取数据
  onLoad: function () {
    console.log(&#39;onLoad&#39;)
    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(&#39;red&#39;)
    context.setLineWidth(1)
    context.stroke()
    // 调用 wx.drawCanvas，通过 canvasId 指定在哪张画布上绘制，通过 actions 指定绘制行为
    wx.drawCanvas({
      canvasId: &#39;radar&#39;,
      actions: context.getActions() // 获取绘图动作数组
    })
  },
  onShareAppMessage: function() {
    // 用户点击右上角分享
    return {
      title: &#39;厕所雷达&#39;, // 分享标题
      desc: &#39;厕所找的快，排的才痛快&#39;, // 分享描述
      path: &#39;path&#39; // 分享路径
    }
  }
})
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;
}

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonBeispiel für die Entwicklung kleiner Toilettenradarprogramme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!