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

news2025/1/31 3:05:56

前言

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

实际场景是这样的，我们需要一个地图页面在上面展示已知设备的信息和位置，这个需求需要用到地图和地图上的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目前是空的，并没有添加自定义的样式。

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

  1. 目录结构和小程序原生开发一模一样
  • wxml文件用于页面布局
  • js文件用于完成方法调用和变量定义
  • json文件用于配置声明
  • wxss文件用于自定义样式

  1. index.wxml文件使用了原生小程序的map组件，相关属性及api可以参考微信开发文档: map | 微信开放文档 (qq.com)

  2. 示例代码中定义的变量及含义在文档中均有提及，这里再说明下:

    • 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: '鹦鹉馆'
   }]

小程序端效果展示:
在这里插入图片描述
如上可以在小程序端看到正确的地图和标注点，本文最开始的目标也就实现了。

结语

上文简单展示了一个自定义小程序侧地图组件的过程，整体过程相对来说还是比较清晰简单的，使用起来也比较方便。

针对以上内容有任何疑问欢迎评论区留言或者私信。

创作不易，如果方便的话也欢迎一键三连~~~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/413415.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

CentOS7 虚拟机 双网卡绑定

CentOS7 虚拟机 双网卡绑定

一、网卡绑定模式 模式类型特点mode0round-robin&#xff08;平衡轮询策略&#xff09;基于per packet方式&#xff0c;轮询往每条链路发送报文。提供负载均衡和容错的能力&#xff0c;当有链路出问题&#xff0c;会把流量切换到正常的链路上。交换机端需要配置聚合口。mode1a…
阅读更多...
Linux网络编程（四）——UDP通信

Linux网络编程（四）——UDP通信

目录 0x01 UDP协议 一、UDP通信简介以及接口 二、UDP的接口 三、UDP收发例程 0x02 广播 一、设置广播数据函数接口 二、广播代码实现 0x03 组播&#xff08;多播&#xff09; 一、组播地址 二、设置组播函数接口 三、代码实现 0x01 UDP协议 一、UDP通信简介以及接口…
阅读更多...
《Netty》从零开始学netty源码（三十六）之ChannelConfig

《Netty》从零开始学netty源码（三十六）之ChannelConfig

ChannelConfig 在前面创建NioServerSocketChannel的 构造函数中&#xff0c;最后一步创建了channel属性的配置类NioServerSocketChannelConfig&#xff0c;本文详细分析下该类&#xff0c;先看下其类结构图。 类结构图 服务端使用的NioServerSocketChannelConfig&#xff0c;…
阅读更多...
ELK日志分析系统+zookeeper

ELK日志分析系统+zookeeper

ELK日志分析系统zookeeper一、zookeeper简介1、zookeeper概念2、zookeeper数据结构二、zookeeper工作机制1、zookeeper特点2、zookeeper应用场景三、zookeeper集群部署1、安装前先关闭防火墙 核心防护2、安装JDK3、安装zookeeper4、修改配置文件5、创建数据目录和日志目录&…
阅读更多...
JavaEE-网络原理之UDP协议

JavaEE-网络原理之UDP协议

目录UDP报文结构UDP的特点无连接不可靠面向数据报缓冲区基于UDP的应用层协议UDP报文结构 报头大小为8个字节. 16位源端口号与16位目的端口号: 16个比特位可表示65536个端口号,分别为0-65535,其中1-1023为为专属端口号,用来为一些知名服务器提供服务,例如: HTTP服务器专属端口号…
阅读更多...
【CSS】课程网站 网格商品展示 模块制作 ③ ( 清除浮动需求 | 没有设置高度的盒子且内部设置了浮动 | 使用双伪元素清除浮动 )

【CSS】课程网站 网格商品展示 模块制作 ③ ( 清除浮动需求 | 没有设置高度的盒子且内部设置了浮动 | 使用双伪元素清除浮动 )

文章目录一、清除浮动需求 ( 没有设置高度的盒子且内部设置了浮动 )二、清除浮动代码示例一、清除浮动需求 ( 没有设置高度的盒子且内部设置了浮动 ) 如果盒子没有设置高度 , 并且盒子中还设置了浮动 , 如上一篇博客 【CSS】课程网站 网格商品展示 模块制作 ② ( 网格商品展示盒…
阅读更多...
溯源反制（windows）

溯源反制（windows）

痛点&#xff1a; windows服务器被恶意入侵出现遭受挖矿&#xff0c;在没有专业的安全溯源反制的工具如何排查系统异常文件精准找出异常程序呢&#xff1f; 这样的吗 使用开源火绒、后门工具、D_盾_web查杀工具、360安全卫士进行全局查杀搜寻异常文件程序。 在应急响应中&am…
阅读更多...
SpringBoot默认包扫描机制与默认配置文件

SpringBoot默认包扫描机制与默认配置文件

文章目录一、SpringBoot默认包扫描机制 - 示例二、SpringBoot默认扫描包机制 - 原理三、SpringBoot手动扫描包机制 - 原理&示例四、ComponentScan与MapperScan五、SpringBoot默认配置文件一、SpringBoot默认包扫描机制 - 示例 默认情况下&#xff0c;扫描启动类同级及其子…
阅读更多...
护眼灯到底有没有用？盘点口碑销量好的护眼台灯

护眼灯到底有没有用？盘点口碑销量好的护眼台灯

有一定的护眼作用。很多人认为护眼灯是智商税&#xff0c;想法并不正确&#xff0c;市面上品质好的护眼灯&#xff0c;光线是通过特殊处理过的&#xff0c;色温、亮度、光线均匀度、显色性都贴合人眼&#xff0c;并且能够护眼的效果。 我们在挑选护眼灯时&#xff0c;在室内环…
阅读更多...
【MyBatis Plus】003 -- 配置（基本、进阶、DB策略） 条件构造器

【MyBatis Plus】003 -- 配置（基本、进阶、DB策略） 条件构造器

目录 4、配置 4.1 基本配置 4.1.1 configLocation &#xff08;MyBatis 配置文件位置&#xff09; 4.1.2 mapperLocations&#xff08;MyBatis Mapper 所对应的 XML 文件位置&#xff09; 4.1.3 typeAliasesPackage &#xff08;别名包扫描路径&#xff09; 4.2 进阶配置 4.2.1…
阅读更多...
代码随想录算法训练营第五十七天 | 647. 回文子串、516. 最长回文子序列、动态规划总结

代码随想录算法训练营第五十七天 | 647. 回文子串、516. 最长回文子序列、动态规划总结

647. 回文子串 动规五部曲 1、确定dp数组&#xff08;dp table&#xff09;以及下标的含义 在判断字符串S是否为回文时&#xff0c;如果知道 s[1]&#xff0c;s[2]&#xff0c;s[3] 这个子串是回文的&#xff0c;那么只需要比较 s[0]和s[4]这两个元素是否相同&#xff0c;如果…
阅读更多...
NodeJS Cluster模块基础教程

NodeJS Cluster模块基础教程

Cluster简介 默认情况下&#xff0c;Node.js不会利用所有的CPU&#xff0c;即使机器有多个CPU。一旦这个进程崩掉&#xff0c;那么整个 web 服务就崩掉了。 应用部署到多核服务器时&#xff0c;为了充分利用多核 CPU 资源一般启动多个 NodeJS 进程提供服务&#xff0c;这时就…
阅读更多...
【java】面向对象的编程基础

【java】面向对象的编程基础

文章目录面向对象的编程基础定义方法重载执行顺序静态变量和方法加载顺序包和访问控制类的封装object类方法重写抽象类接口枚举类面向对象的编程基础 定义 public class person { String name; int age; char sex; person(String name,int age,char sex) {this.ageage;this.…
阅读更多...
【华为OD机试】1043 - 从单向链表中删除指定值的节点

【华为OD机试】1043 - 从单向链表中删除指定值的节点

文章目录一、题目&#x1f538;题目描述&#x1f538;输入输出&#x1f538;样例1&#x1f538;样例2二、代码参考作者&#xff1a;KJ.JK&#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &am…
阅读更多...
计算机网络笔记（横向）

计算机网络笔记（横向）

该笔记也是我考研期间做的整理。一般网上的笔记是按照章节纪录的&#xff0c;我是按照知识点分类纪录的&#xff0c;大纲如下&#xff1a; 文章目录1. 各报文1.1 各报文头部详解1.2 相关口诀2. 各协议2.1 各应用层协议使用的传输层协议与端口2.2 各协议的过程2.2.1 数据链路层的…
阅读更多...
零死角玩转stm32中级篇2-IIC总线

零死角玩转stm32中级篇2-IIC总线

本篇博文目录:一.IIC基础知识1.什么是IIC总线2.IIC总线和串口有什么区别3.IIC总线是怎么实现多机通信4.仲裁是什么5.如果当前有一个从机进行了IIC通信又来了一个优先级高的从机&#xff0c;这时会打断前一个通信吗?6.IIC是怎么保证地址的唯一性7.在IIC总线协议中&#xff0c;规…
阅读更多...
走进小程序【六】微信小程序架构之【视图层】万字详解

走进小程序【六】微信小程序架构之【视图层】万字详解

文章目录&#x1f31f;前言&#x1f31f;小程序架构&#x1f31f;视图层 View&#x1f31f;WXML&#x1f31f;数据绑定&#x1f31f;列表渲染&#x1f31f;条件渲染&#x1f31f;模板&#x1f31f;WXSS&#x1f31f;尺寸单位&#x1f31f;样式导入&#x1f31f;内联样式&#x…
阅读更多...
VIM 编辑器使用教程

VIM 编辑器使用教程

我们如果要在终端模式下进行文本编辑或者修改文件就可以使用 VI/VIM 编辑器&#xff0c;Ubuntu 自带了 VI 编辑器&#xff0c;但是 VI 编辑器对于习惯了 Windows 下进行开发的人来说不方便&#xff0c;比如竟然 不能使用键盘上的上下左右键调整光标位置。因此我推荐大家使用 V…
阅读更多...
PADS-按键、蜂鸣器、继电器PCB封装设计

PADS-按键、蜂鸣器、继电器PCB封装设计

1 按键PCB封装设计 1.1 查看元件手册, 得知焊盘尺寸&#xff0c;同时需要观察按键&#xff0c;用丝印来进行表示。 1.2 进入PADS-Layout 无模命令UMM G0.254 GD0.254进行设计 放置一个表贴端点&#xff0c;更改矩形尺寸&#xff0c;同时计算与原点的距离&#xff0c;这里我们按…
阅读更多...
流量整形（GTS和LR）

流量整形（GTS和LR）

Generic Traffic Shaping通用流量整形 通用流量整形（简称GTS）可以对不规则或不符合预定流量特性的流量进行整形，以保证网络上下游之间的带宽匹配，避免拥塞发生。 GTS与CAR一样，都采用了令牌桶技术来控制流量。GTS与CAR的主要区别在于：利用CAR进行报文流量控制时，…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023