微搭使用笔记(六) 通过源码组件实现小程序端地图-Toy模板网

这篇具有很好参考价值的文章主要介绍了微搭使用笔记(六) 通过源码组件实现小程序端地图。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

微搭官方提供了大量常用组件，但由于微搭本身也是在不断地完善过程中，有些组件还是没有提供，但同时微搭允许用户自定义组件并在应用中使用。

实际场景是这样的，我们需要一个地图页面在上面展示已知设备的信息和位置，这个需求需要用到地图和地图上的markers，而目前微搭提供的地图组件只是表单中的地图定位，并不能在上面覆盖markers及配置。

本文我们结合这个场景完成小程序中自定义组件的流程和使用过程，作为记录的同时也希望能对大家使用微搭有所帮助。

需要注意的是，微搭中的自定义组件或者叫源码组件分为web侧和小程序侧，二者对应组件需要单独开发，官方并没有做两端的适配。

本文我们演示的是小程序源码组件的开发和使用过程。

环境准备

1. 腾讯云账号、开通微搭

2. 本地开发环境准备

主要是安装node和tcb客户端，可以参考微搭使用笔记(一) win10环境下搭建微搭本地开发环境_泽济天下的博客-CSDN博客

3. 控制台新建组件库

在控制台点击组件库-新建组件库，完成组件库的创建。
地图标注源码,微信小程序,微搭,源码组件,自定义组件

TIPS:

远程组件库和本地组件库是通过组件库标识来关联的，所以本地组件库的文件夹的名称需要和控制台的组件库标识一致。

安装组件开发模板

1. 命令行执行tcb login

执行完成后会在浏览器打开到腾讯云的登录页面，扫码登录后会进入到授权页面，点击确认授权即可
地图标注源码,微信小程序,微搭,源码组件,自定义组件
点击确认授权后会在下方列表中添加一条记录。

2. 新建本地组件库

进入本地开发目录，执行tcb lowcode create [你的控制台组件库标识]，如tcb lowcode create my_custom_component

执行后会让我们选择组件库模板，根据喜好选择即可，我们这里选择vue
地图标注源码,微信小程序,微搭,源码组件,自定义组件
接下来会安装模板及依赖库，但是我这里报错了，可以看到是权限问题。

一种解决办法是以管理员身份运行命令行，我们尝试下。

切换后，可以删除掉之前新建的那个目录，也可以进入到那个目录下执行npm install安装依赖。
地图标注源码,微信小程序,微搭,源码组件,自定义组件
安装完成后，我们可以通过喜欢的开发工具打开对于目录，看下目录结构。

3. 主要目录说明

.
├── .storybook              # storybook 配置目录
└── src
   ├── test                # 测试目录
   ├── configs             # 组件类型申明目录
   │  ├── actions         # 组件库方法类型申明
   │  └── components      # 组件目录类型申明
   ├── mp                  # 小程序组件
   │  ├── actions         # 小程序组件方法实现
   │  └── components      # 小程序组件实现
   ├── stories             # 组件 story / 测试
   └── web                 # web 组件
       ├── actions         # web 组件方法实现
       └── components      # web 组件实现

模板中提供了Button和Counter两个示例组件供参考。

小程序源码组件开发

通过上面主要目录可以看到，小程序相关源码组件代码主要是在src/mp中，配置文件在configs目录中。

1. 组件定义

在src/mp/components目录下新建map目录，map目录下添加四个文件，index.js, index.json, index.wxml, index.wxss

熟悉小程序开发的人都知道这个目录的内容和小程序原生开发的结构一模一样，没错，就是这样的。

看下具体内容:

index.wxml

<map 
  style="{{style}}" 
  latitude="{{latitude}}" 
  longitude="{{longitude}}"
  markers="{{markers}}"
  scale="{{scale}}">  
</map>

index.js

Component({
  properties: {
    style: {
      type: String,
      value: '',
    },
    latitude: {
      type: Number,
      value: '30.51667',
    },
    longitude: {
      type: Number,
      value: '114.31667',
    },
    markers: {
      type: Array,
      value: [],
    },
    scale: {
      type: Number,
      value: 9,
    },
  },
  data: {},
  methods: {
    
  },
});

index.json

{
  "component": true
}

index.wxss目前是空的，并没有添加自定义的样式。

关于以上代码的几点说明:

wxml文件用于页面布局
js文件用于完成方法调用和变量定义
json文件用于配置声明
wxss文件用于自定义样式

index.wxml文件使用了原生小程序的map组件，相关属性及api可以参考微信开发文档: map | 微信开放文档 (qq.com)
示例代码中定义的变量及含义在文档中均有提及，这里再说明下:
- lantitude和longtitude: 中心点经纬度
- markers: 覆盖点信息，类型为数组，具体可配置属性如下:

2. 配置相关

在src/map/index.json文件中添加map组件的引用

{
  "components": {
    "Button": "components/button/index",
    "Counter": "components/counter/index",
    "Map": "components/map/index"
  },
  "actions": {
    "showToast": "actions/showToast/index"
  }
}

在src/configs/components目录下添加map.json，内容如下

{
  "$schema": "https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json",
  "data": {
    "type": "object",
    "properties": {
      "latitude": {
        "title": "经度",
        "default": 30.51667,
        "type": "number"
      },
      "longitude": {
        "title": "纬度",
        "default": 114.31667,
        "type": "number"
      },
      "markers": {
        "title": "标注点",
        "type": "array",
        "default": []
      },
      "scale": {
        "title": "缩放级别",
        "default": 9,
        "type": "number"
      }
    }
  },
  "events": [],
  "meta": {
    "title": "地图",
    "description": "可展示markers的地图组件",
    "icon": "../icons/button.svg",
    "category": "布局",
    "componentOrder": 1
  }
}

这个文件定义了Map组件在编辑器中展示的形式和配置项信息，根据具体情况修改即可(如备注和初始值等属性)。

在src/configs/index.js中添加Map相关内容

import Button from './components/button';
import Counter from './components/counter.json';
import showToast from './actions/showToast';
import Map from './components/map.json';

export const components = {
  Button,
  Counter,
  Map
};

export const actions = {
  showToast,
};

export default {
  components,
  actions,
};

到这里，所有的组件定义和配置工作均已完成。

TIPS:
1. 由于没有涉及到事件相关内容，就没有在actions中添加内容
2. 如果需要支持web端需要在web文件夹再做一次适配web的实现。

3. 组件调试和发布

以上内容完成后，在根目录命令行执行tcb lowcode debug即可进行本地调试，会打开一个本地网页，展示当前目录下所有自定义组件，和正常的编辑器差不多，只是组件都是自定义的组件。

在根目录下执行tcb lowcode publish命令，会提交当前文件夹下的自定义组件到远端，也就是控制台。

需要注意的是tcb lowcode publish 命令并不能真正的完成发布，而是需要执行完成后在微搭控制台组件库页面找到对应组件库点击后面的发布组件库才真正完成发布。

4. 组件使用

发布完成后我们在应用编辑器页面上可以在组件区域看到我们自定义的组件，如果不好找的话可以输入关键字快捷搜索。

需要注意的是在编辑器里面使用的是适配web的组件，如果没有做这部分的话，在网页上看到的是找不到组件一类的提示，不过在小程序里是可以正常展示的。

拖拽该组件到页面对应位置，在右侧可以看到我们定义的配置项，配置完成后可以通过发布到小程序实现效果预览和体验。

部分截图如下:

编辑器组件及配置:
地图标注源码,微信小程序,微搭,源码组件,自定义组件
标注点的配置json如下：

[
   //貘科动物馆
   {
     id: 0,
     iconPath: "https://lowcode-4go779jxdd4a0508-1258463370.tcloudbaseapp.com/resources/2022-09/lowcode-813417",
     latitude: 39.941386,
     longitude: 116.336655,
     width: 15,  //图片显示宽度
     height: 15,//图片显示高度
     title:'貘科动物馆',
   },
   //犀鸟馆
   {
     id: 1,
     iconPath: "https://lowcode-4go779jxdd4a0508-1258463370.tcloudbaseapp.com/resources/2022-09/lowcode-813417",
     latitude: 39.940826,
     longitude: 116.335109,
     width: 30,  
     height: 30,
     title:'犀鸟馆'
   },
   //火烈鸟馆
   {
     id: 2,
     iconPath: "https://lowcode-4go779jxdd4a0508-1258463370.tcloudbaseapp.com/resources/2022-09/lowcode-813417",
     latitude: 39.940578,
     longitude: 116.335977,
     width: 30,
     height: 30,
     title: '火烈鸟馆'
   },
   //鹦鹉馆
   {
     id: 3,
     iconPath: "https://lowcode-4go779jxdd4a0508-1258463370.tcloudbaseapp.com/resources/2022-09/lowcode-813417",
     latitude: 39.941573,
     longitude: 116.335544,
     width: 30,
     height: 30,
     title: '鹦鹉馆'
   }]