微信小程序 + Go 开发《共享遛狗》（第一篇）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

第一篇(项目初始化+初试地图组件开发)

创建微信小程序

引入样式库

ColorUI 是一个css库，在你引入样式后可以根据 class 来调用组件。下载源码解压，复制根目录的 /colorui 文件夹到你的根目录。

app.wxss

@import "colorui/main.wxss";
@import "colorui/icon.wxss";

测试

index.wxml

<view class="container">
  <button style="width:80%" class="bg-grey lg" bindtap="onUnlockTap">立即开锁</button>
</view>

这样就是页面引入成功了。

地图组件

developers.weixin.qq.com/miniprogram…

文档中已经介绍了，这边我们直接使用就好了。

<!--page/index/index.wxml-->
<map id="map" latitude="{{location.latitude}}" longitude="{{location.longitude}}" scale="{{scale}}" setting="{{setting}}" enable-overlooking="{{isOverLooking}}" enable-3D="{{is3D}}" markers="{{markers}}">
  <cover-view slot="callout">
    <cover-view marker-id="1"></cover-view>
    <cover-view marker-id="2"></cover-view>
  </cover-view>
</map>

page {
  width: 100%;
  height: 100%;
}

#map {
  width: 100%;
  height: 100%;
}

提供 setting 对象统一设置地图配置。

const initialLat = 29
const initialLng = 126

Page({
  data: {
    setting: {
      skew: 0,
      rotate: 0,
      showLocation: true,
      showScale: true,
      subKey: '',
      layerStyle: -1,
      enableZoom: true,
      enableScroll: true,
      enableRotate: false,
      showCompass: false,
      enable3D: false,
      enableOverlooking: false,
      enableSatellite: false,
      enableTraffic: false,
    },
    location: {
      latitude: initialLat,
      longitude: initialLng,
    },
  },
  onLoad() {
  },
})

模拟经纬度

调试器中的 Sensor，可以设置经纬度

设置 makers

我们先来使用模拟的数据

data 中定义

markers: [
  {
    iconPath: "images/dog.jpeg",
    id: 0,
    latitude: 23.099994,
    longitude: 113.324520,
    width: 50,
    height: 50,
  },
  {
    iconPath: "images/dog.jpeg",
    id: 1,
    latitude: 25,
    longitude: 123,
    width: 50,
    height: 50
  }
]

Tip: 如果出现[渲染层错误]，这个报错，我这边的解决方法是降低基础库的版本。在详情/本地设置中将基础库的版本设置为2.9.5

cover-view

覆盖在原生组件之上的文本视图。

<!--index.wxml-->
<map>
  <cover-view class="icon-container">
    <cover-image class="round" src="images/account.png"></cover-image>
    <cover-image src="images/my_location.png"></cover-image>
  </cover-view>
</map>

再编写一些其他的样式，来进行大小的控制。

点击按钮，定位当前位置

在 icon 图标上写上事件。

<cover-image src="images/my_location.png" bindtap="onMyLocationTap"></cover-image>

type: wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标

developers.weixin.qq.com/miniprogram…

onMyLocationTap() {
  wx.getLocation({
    type: 'gcj02',
    success: res => {
      this.setData({
        location: {
          latitude: res.latitude,
          longitude: res.longitude,
        },
      })
    }, 
    // 处理失败的情况
    fail: () => {
      wx.showToast({
        icon: 'none',
        title: '请前往设置页授权',
      })
    }
  })
}

点击编译

在 app.json 中进行配置

{
	// ....
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  }
}

点击允许，地图将定位到目前所在地。

加个按钮

<cover-view class="btn-container bg-red round" bindtap="onScanTap">
  <cover-view>扫码遛狗</cover-view>
</cover-view>

我们来模拟一下，当前位置的移动

MapContext wx.createMapContext(string mapId, Object this)。创建 map 上下文 MapContext 对象。

MapContext.translateMarker(Object object)。平移marker，带动画。（developers.weixin.qq.com/miniprogram…

const moveDog = () => {
  map.translateMarker({
    destination: {
      latitude: dest.latitude + 0.001,
      longitude: dest.longitude + 0.001
    },
    markerId: 0,
    autoRotate: false,
    rotate: 0,
    duration: 10000,
    animationEnd: moveDog
    }
  })
}
moveDog()

嘿嘿，咱们可爱的小狗开始动起来了。