微信小程序支付、地图、动态扫描进入-总结

说明

在充电桩的项目中有用到这些功能，以前没有解除，现在做完了进行总结；

小程序内的支付功能非常简单，调用后台提供的接口即可；当时做这个项目的时候数字藏品有个h5调用微信支付的需求就比较复杂。

地图功能难度也一般，主要就是地图搜索，展示地图点及点信息，不涉及路线规划；项目是原生的微信小程序，如果是uniapp的且需要多种小程序运行，则需要注意的是地图的选型，因为截至目前有了解到支付宝小程序等支持的地图只有自家的。

动态扫描的功能也简单，主要是在微信后台需要配置一下。

支付

项目中的支付是先调用后端接口，告诉他需要支付的金额；后端返回wx.requestPayment调用所需要的字段；微信小程序内调用wx.requestPayment即可。

地图

项目中的地图用的是map组件，画地图上的标记主要使用了markers属性与自定义气泡插槽slot="callout"。气泡的样式不宜太过复杂，需要用cover-view标签，另外做完后记得去真机上看一下样式，有时编辑器与真机不一致。

抽出部分代码作为示例：

<map
  id="map"
  class="map-container"
  longitude="{{longitude}}"
  latitude="{{latitude}}"
  show-location
  show-scale
  show-compass
  scale="{{scale}}"
  markers="{{markers}}"
  bindcallouttap="callouttap"
  bindregionchange="regionchange"
>

    <!-- 自定义气泡 -->
    <cover-view slot="callout" wx:for="{{markers}}" wx:key="id">
        <cover-view class="marker-item" marker-id="{{item.id}}">
            <cover-view class="quantity">
                <cover-view>{{item.idleQuantity}}</cover-view>
                <cover-view style="font-size: 20rpx;">空闲</cover-view>
            </cover-view>
            <cover-view class="price">
                {{item.price}}
            </cover-view>
        </cover-view>
    </cover-view>

</map>

动态扫描

在微信公众平台的开发设置中有扫普通链接二维码打开小程序，在此进行配置即可。在小程序代码中使用wx.scanCode这个api即可拿到扫码信息。