本文共 2758 字,大约阅读时间需要 9 分钟。
在 “” 看到了一个小demo,今天做来试试,主要还是为了练习一下 , “控件的基础使用” 和 “页面间的交互” ,创意很好玩,我就也写的比较带劲了,因为页面有好几个所以只上第一页的代码好了,想看全部的小伙伴可以直接下demo来交流哦。(还有上个版本新加的分享功能,也使用了一下哦!)
下面先上图:
js:
-
- var app = getApp()
- var winHeight = 0
- var winWidth = 0
- Page({
- data: {
-
- img:'/pages/image/123.png',
-
- 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;
- }
- })
-
-
- 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: 'radar',
- actions: context.getActions()
- })
- },
- onShareAppMessage: function() {
-
- return {
- title: '厕所雷达',
- desc: '厕所找的快,排的才痛快',
- path: 'path'
- }
- }
- })
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:
-
- 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地址: 密码: 4wnf