Sharing of toilet radar examples for mini-program development

This article introduces the example of mini-program-developed restroom radar to share emergencies ~ Can't find the restroom? A blue ray in the sky? Hello ~~ Use the restroom radar ~~~. As a good landlord, I have not only written code, but even thought about ads. wow ~~~~ "The restroom is looking fast, and the arrangement is good ".
I saw a "toilet radar" in the exercise area. I mainly tried to practice the Applets "basic usage of controls" and "interaction between pages". CSS still gave me a headache, but HOHO is much better than the previous demo "stone scissors cloth. (PS: There are several pages. paste the code on the homepage first. if you want to see it, download it and then let's talk to each other. all the comments have been written. By the way, the new sharing function has been added. of course, the advertisement word has been written in the sharing .)
Directly:

Js:

// Index. jsvar app = getApp () var winHeight = 0var winWidth = 0 Page ({data: {// background image, no img: '/pages/image/123.png ', // Determine the left margin, top margin, toilet title, profile dataArr: [{'left': 200, 'top': 100, 'Title ': 'Best bathroom in my house', 'IMG ':'/pages/image/1.png '}, {'left': 20, 'top': 400, 'Title ': 'Amis hut ', 'IMG': '/pages/image/2.png'}, {'left': 540, 'top': 440, 'Title ': 'Old taobaotaobao', 'IMG ':'/pages/image/3.png '}, {'left': 240, 'top': 800, 'Title ': 'xuejie private pit', 'IMG ':'/pages/image/4.png '}]}, // obtain the data onLoad: function () {console after entering the page. log ('onload') var that = this // call the method of the application instance to obtain the global data app. getUserInfo (function (userInfo) {console. log (userInfo) // update the data that. setData ({userInfo: userInfo})} // Get the data wx. getSystemInfo ({success: function (res) {console. log (res) winHeight = res. optional wheight; winWidth = res. required wwidth ;}}) // use wx. createContext: obtain the drawing context. 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 () // call wx. drawCanvas: specifies on which canvas the painting is based on canvasId, and specifies the draw behavior wx through actions. drawCanvas ({canvasId: 'radar ', actions: context. getActions () // Get the drawing action array})}, ondeskappmessage: function () {// the user clicks share return {title: 'restroom radar 'in the upper right corner, // share the title desc: 'You can find the restroom quickly and arrange the restroom for a good times', // share the description path: 'path' // share the path}) wxml:
 
 
  
      
           
                
                 
     
      
{Item. title }}
             
       
   
  
 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 ;}

The above is the details shared by the mini-program-developed toilet radar instance. For more information, see other related articles in the first PHP community!