微信小程序_厕所雷达
来源:互联网 发布:加拿大数据分析专业 编辑:程序博客网 时间:2024/03/29 21:04
在 “微信小程序联盟” 看到了一个小demo,今天做来试试,主要还是为了练习一下 , “控件的基础使用” 和 “页面间的交互” ,创意很好玩,我就也写的比较带劲了,因为页面有好几个所以只上第一页的代码好了,想看全部的小伙伴可以直接下demo来交流哦。(还有上个版本新加的分享功能,也使用了一下哦!)
下面先上图:
js:
//index.jsvar app = getApp()var winHeight = 0var winWidth = 0Page({ 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;}
demo地址:厕所雷达 密码: 4wnf
感谢观看,学以致用更感谢!
1 0
- 微信小程序_厕所雷达
- 微信小程序_厕所雷达
- 微信小程序实战:厕所雷达
- 小程序周边厕所
- 微信小程序 canvas绘制雷达图
- 厕所
- 厕所
- 厕所
- 雷达
- 微信小程序_电商小程序
- 微信小程序_资源
- 微信小程序_初章
- 微信小程序_仿微信
- 微信小程序_经验
- 微信小程序_经验
- 关于Mscomm串口雷达测速程序笔记
- 微信小程序_简单页面
- 微信小程序_贪吃蛇
- Docker 入门基础
- 算法6.分支限界法下的迷宫游戏
- 排序算法汇总
- 疯狂复习
- STM32基础知识
- 微信小程序_厕所雷达
- Hive面试题考点-整理
- Luabit的位运作简介
- Cloud9 ide使用phpmyadmin
- 如何获取iphone基带芯片工作时候获取到的一些参数呢,如信号强度,小区,周围小区以及一些更深入的参数,有人了解吗
- go语言学习笔记之环境搭建(一)
- “hello world” 开始c语言之旅
- ThreadLocal内存泄露(上)
- 函数柯里化