Heim > WeChat-Applet > Mini-Programmentwicklung > Beispiel für die Entwicklung kleiner Toilettenradarprogramme

Beispiel für die Entwicklung kleiner Toilettenradarprogramme

高洛峰
Freigeben: 2017-03-22 17:11:00
Original
1793 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

Beispiel für die Entwicklung kleiner Toilettenradarprogramme

Beispiel für die Entwicklung kleiner Toilettenradarprogramme

Beispiel für die Entwicklung kleiner Toilettenradarprogramme

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage