uniapp,vue,支付宝小程序,map踩坑记

api:

  1. my.getAccountInfoSync()
    该api与uni中的就前缀不同,返回参数一致,目前uni暂未支付支付宝
  2. uni.getSystemInfoSync()
    该api中返回的参数与微信有差异,去过需要区分ios/android可以使用osName,该字段在微信/支付宝端是一致的
  3. navigateBack略有区别,问题不大
  4. 定位的api
  5. 获取手机号的授权的,可以结合看下https://www.jianshu.com/p/3f05f0b51ccb

map地图

  1. 更新地图 MapContext.updateComponents
    微信端直接动态更新路线或者markers地图会进行更新,但在支付宝端会出现时而更新时而不更新,需要改api进行更新
  2. 地图尺寸
    微信端直接给map组件高度就行,支付宝端需要再map组件外部套一个view组件给定高度,这样动态改变时地图才会正常,否则地图可能消失看不到
  3. 地图缩放
    微信端的使用 MapContext.includePoints,很好使,无论怎么调用都可以。支付宝端MapContext.includePoints该api时好时坏,后来使用的map组件上放入两个属性同时设置 include-points,include-padding
  4. 地图路线
  • 使用polyline,支付宝可以设置路线纹理icon,微信端直接字段属性控制
  • 支付宝端提供路线规划api, MapContext.showRoute,该api的使用坑还不少
    1. 设置路线后的边距设置,需要 include-points,include-padding,而且确保很短时间内只能执行一次,否则include-points,include-padding会失效(我的代码中通过监听三个属性来画线,只要连续执行超过一次就会失效
    2. 初次进入页面使用时,include-points,include-padding可以生效,当数据动态发生变化时,再去执行 MapContext.showRoute时,需要将include-points,include-padding初始化,再MapContext.showRoute执行成功后再调用include-points,include-padding
    3. 目前MapContext.showRoute规划路线,默认的会带markers起点,终点;官方文档中无去除属性,但经我与客服墨迹好几天后,给了一个属性可以去除markers,就此满足需求了嘻嘻,美滋滋。。这个属性就是showMarkers: false
 this.mapContext.showRoute({
          searchType: 'drive',
          startLat: Number(origin.split(',')[1]),
          startLng: Number(origin.split(',')[0]),
          endLat: Number(destination.split(',')[1]),
          endLng: Number(destination.split(',')[0]),
          throughPoints,
          routeColor: '#FFB90F',
          iconWidth: 10,
          routeWidth: 10,
          zIndex: 4,
          mode: 0,
          iconPath: '/pages/newOrder/static/img/polyline_icon.png',
          showMarkers: false,
          success(res) {
            console.log(res, `总路程 ${res.distance} 米, 预计耗时 ${res.duration} 秒`)
            that.includePoints = pointss
            that.includePadding = {
              left: 120,
              right: 120,
              top: 160,
              bottom: 100
            }
            that.mapContext.updateComponents({
              markers: that.markers,
              polyline: [{}],
              'include-points': pointss,
              'include-padding': { left: 120, right: 120, top: 160, bottom: 100 }
            })
          },
          fail(e) {
            console.log('失败', e)
          }
        })
  1. 路线缩放支付宝端(ios/android)也有差异
    单单像第2条中的android是可以的,但是ios还是不行。需要用以下写法才行
 that.mapContext.updateComponents({
     markers: that.markers,
     polyline: [{}],
     'include-points': pointss,
     'include-padding': { left: 120, right: 120, top: 160, bottom: 100 }
})
  1. 地图的markers的显示
  • 目前label,style都挺好使,
  • callout/customCallout则只能有一个,但社区已有解决办法,再markers专栏的qa可以看到
  • 自定义高级渲染组件,uniapp目前使用有点问题,但已解决,可以看我的这篇文章:https://www.jianshu.com/p/3f000aaa4071
  1. 自定义大头针覆盖物在地图上
    微信端直接使用slot="callout",配合cover-view在map里进行开发就行,支持多个customCallout
    支付宝端则需要写在与map组件同级,然后进行定位,(最好再最外层套一层cover-view,否则可能会出现问题)

组件样式

  1. 再使用第三方组件组件时,切勿直接在组件上直接改类名啥的,样式会失效
  2. 图片注意使用mode
  3. 组件内文本对齐方式,默认居中的
  4. input组件注意单独设置样式,放全局就行,幕刃会有白底

其他

  1. 事件有可能会失效在某些组件上,如text组件
  2. 不是首页,再自定义页面头部时返回按钮不能去除,无解
  3. 支付宝的n多种东西在开发者工具都不支持,需要真机调试这个真的狗,难受的一批
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容