智能小程序小部件(Widget)导航、地图、画布等组件,以及开放能力、原生组件说明

智能小程序小部件(Widget)导航、地图、画布等组件,以及开放能力、原生组件说明。

导航组件 

navigator

页面链接,控制小程序的跳转。navigator 子节点的背景色应为透明色。

属性说明

属性名类型默认值必填说明
urlstring跳转地址
deltanumber1当 open-type 为 'navigateBack' 时有效,表示回退的层数
open-typestringnavigate跳转方式,详情参见后面的说明
hover-classstringnavigator-hover指定点击时的样式类,当 hover-class="none"时,没有点击态效果类
hover-start-timenumber50按住后多久出现点击态,单位毫秒
hover-stay-timenumber400手指松开后点击态保留时间,单位毫秒

open-type 取值范围:

说明
navigate对应 ty.navigateTo
redirect对应 ty.redirectTo
switchTab对应 ty.switchTab
navigateBack对应 ty.navigateBack
reLaunch对应 ty.reLaunch

示例代码

TYML
<view class="page-head"><view class="page-head-title">navigator</view><view class="page-head-line"></view>
</view><view class="btn-area l-r-padding"><button class="navigator-btn"><navigator url="pages/components/button/index" class="link" hover-class="navigator-hover">跳转到新页面 button</navigator></button><button class="navigator-btn"><navigator url="pages/components/view/index" class="link" open-type="redirect" hover-class="other-navigator-hover">在当前页打开 view</navigator></button><button class="navigator-btn"><navigator  class="link" open-type="navigateBack" hover-class="other-navigator-hover">返回</navigator></button><button class="navigator-btn"><navigator url="pages/components/index" class="link" open-type="switchTab" hover-class="other-navigator-hover">切换到tab</navigator></button><button class="navigator-btn"><navigator url="pages/components/input/index" class="link" open-type="reLaunch" hover-class="other-navigator-hover">reLaunch 打开 input</navigator></button>
</view>

地图组件 

map

基础库 2.0.12 开始支持, 低版本需做兼容处理。

依赖 MapKit 插件, 插件版本 >= 2.2.2。

Tuya MiniApp Tools 上是通过 WebView 模拟的与真机存在差异,请以真机效果为主。

地图。相关 API:ty.createMapContext。
这是基于异层渲染的原生组件, 请注意原生组件使用限制

属性说明

属性名类型默认值必填说明
longitudenumber中心经度
latitudenumber中心纬度
scalenumber16缩放级别,取值范围为 4-19
min-scalenumber4最小缩放级别
max-scalenumber19最大缩放级别
markersArray<marker>标记点
polylineArray.<polyline>路线。IDE不支持, 请真机查看
circlesArray.<circle>圆。IDE不支持, 请真机查看
polygonsArray.<polygon>多边形。 IDE不支持, 请真机查看
border-widthnumber0边框的宽度, 单位 px
border-stylestringsolid边框的样式, 可选值: solid 和 dashed
border-colorstring#ffffff边框的颜色, 必须为十六进制格式
border-radiusnumber0边框的圆角, 单位 px
border-radius-top-leftnumber边框的左上角圆角大小, 单位 px
border-radius-top-rightnumber边框的右上角圆角大小, 单位 px
border-radius-bottom-leftnumber边框的左下角圆角大小, 单位 px
border-radius-bottom-rightnumber边框的右下角圆角大小, 单位 px
background-colorstring#ffffff背景颜色, 必须为十六进制格式
bind:markertapeventhandle点击标记点时触发,e.detail = {markerId}
bind:callouttapeventhandle点击标记点对应的气泡时触发 e.detail = {markerId}
bind:regionchangeeventhandle视野发生变化时触发。IDE不支持, 请真机查看
bind:initdoneeventhandle初始化完成时触发。IDE不支持, 请真机查看

regionchange 返回值

视野改变时,regionchange 会触发两次,返回的 type 值分别为 begin 和 end。

marker

标记点用于在地图上显示标记的位置。

属性名说明类型必填备注
id标记点 IDnumbermarker 点击事件回调会返回此 id。
longitude经度number浮点数,范围 -180 ~ 180
latitude纬度number浮点数,范围 -90 ~ 90
title标注点名string点击时显示,callout 存在时将被忽略
styleId气泡样式类型 IDstring由原生实现的 marker 样式类型 id
callout标记点上方的气泡窗口数据源object支持的属性见下表,可识别换行符。存在 styleId 时,根据所选样式类型传入属性
iconPath显示的图标string项目目录下的图片路径,支持网络路径、代码包路径
rotate旋转角度number顺时针旋转的角度,范围 0 ~ 360,默认为 0
width标注图标宽度number/string默认为图片实际宽度
height标注图标高度number/string默认为图片实际高度

marker 上的气泡 callout

属性名说明类型
content文本string
color文本颜色string
fontSize文字大小number
borderRadius边框圆角number
borderWidth边框宽度number
borderColor边框颜色string
bgColor背景色string
padding文本边缘留白number
textAlign文本对齐方式。有效值: left, right, centerstring
anchorX横向偏移量,向右为正数number
anchorY纵向偏移量,向下为正数number

polyline

指定一系列坐标点,从数组第一项连线至最后一项。

属性名说明类型必填备注
points经纬度数组array[{latitude: 0, longitude: 0}]
color线的颜色string十六进制
width线的宽度number
dottedLine是否虚线boolean默认 false

circle

在地图上显示圆

属性名说明类型必填备注
latitude纬度number浮点数,范围 -90 ~ 90
longitude经度number浮点数,范围 -180 ~ 180
color描边的颜色string十六进制
fillColor填充颜色string十六进制
radius半径number
strokeWidth描边的宽度number

polygon

指定一系列坐标点,根据 points 坐标数据生成闭合多边形

属性名说明类型必填备注
points经纬度数组array[{latitude: 0, longitude: 0}]
strokeColor描边的颜色string十六进制
fillColor填充颜色string十六进制
strokeWidth描边的宽度number

Bug & Tip

  1. tip:地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬度。
  2. tip:Tuya MiniApp Tools 上是通过 WebView 模拟的与真机存在差异,请以真机效果为主。
  3. tip:相关原理请参考 基于异层渲染的原生组件。
  4. tip:请注意 原生组件使用限制。

示例代码

TYML
 
<view class="container"><mapid="myMap"class="myMap"style="border:10px solid red;padding: {{tagTop}}px;marginTop: {{marginTop}}px;"latitude="{{latitude}}"longitude="{{longitude}}"scale="{{scale}}"markers="{{markers}}"polyline="{{polyline}}"circles="{{circles}}"polygons="{{polygons}}"border-width="{{2}}"border-style="solid"border-color="#007aff"background-color="#ffc300"border-radius="{{10}}"data-map="{{value}}"bind:tap="handleTap"bind:markertap="handleMarkertap"bind:callouttap="handleCallouttap"bind:regionchange="handleRegionchange"><view class="tag1" bindtap="clickTag">标签一</view></map><view class="btn-box"><button class="btn" bindtap="changeLngLat" type="primary">设置经纬度</button><button class="btn" bindtap="apiMoveToLocation" type="primary">moveToLocation</button><button class="btn" bindtap="apiAddMarkers" type="primary">addMarkers</button><button class="btn" bindtap="apiRemoveMarkers" type="primary">removeMarkers</button><button class="btn" bindtap="scaleIn" type="primary">scale 放大</button><button class="btn" bindtap="scaleOut" type="primary">scale 缩小</button><button class="btn" bindtap="openConfirm" type="primary">显示弹窗</button><mpdialog title="标题" show="{{dialogShow}}" bindbuttontap="tapDialogButton" buttons="{{buttons}}"><view>这里是内容,超过部分会自动换行换行。这里是内容,超过部分会自动换行换行</view></mpdialog></view>
</view>
JS
const markers = [{id: 1,latitude: 39.908775,longitude: 116.406315,name: '王府井',iconPath: '/assets/images/marker.png',callout: {content: '王府井',color: '#ffffff',fontSize: 12,bgColor: '#5C91F6',padding: 4,borderRadius: 35,anchorY: -8,},},{id: 2,latitude: 39.927761,longitude: 116.391467,name: '北海公园',iconPath: '/assets/images/marker.png',callout: {content: '北海公园',color: '#ff0000',fontSize: 12,bgColor: '#fff',padding: 4,borderRadius: 35,anchorY: -8,},},{id: 3,latitude: 39.918203,longitude: 116.396923,name: '故宫',iconPath: '/assets/images/marker.png',callout: {content: '故宫',color: '#ffffff',fontSize: 12,bgColor: '#5C91F6',padding: 4,borderRadius: 35,anchorY: -8,},},
];Page({data: {latitude: 39.908775,longitude: 116.406315,scale: 12,markers: markers.slice(0, 2),tagTop: 20,height: 40,isShow: false,showDialog: false,buttons: [{text: '取消',},{text: '确定',},],marginTop: 10,value: 10,polyline:[{points:[{  latitude: 39.907689,longitude: 116.16366,},{latitude: 39.91890,longitude: 116.193488},{  latitude: 39.90900,longitude: 116.397787}],width: 2,borderColor:"#008000", // 绿色color:"#0000FF", // 蓝色dottedLine: false}],circles:[{latitude: 39.927761,longitude: 116.391467,color: "#800080", // 紫色fillColor: "#cccccccc",radius: 1000,strokeWidth: 2}],polygons:[{points:[{ latitude: 39.908775,longitude: 116.406315,},{ latitude: 39.927761,longitude: 116.481667},{ latitude: 39.918203,longitude: 116.396923}],strokeWidth: 2,strokeColor:"#FF0000", // 红色fillColor:"#FFFF00", // 黄色}]},onReady: function () {this.mapCtx = ty.createMapContext('myMap');},openConfirm: function () {ty.nativeDisabled(true);this.setData({dialogShow: true,value: this.data.value + 10,});},changeLngLat: function (e) {if (this.data.latitude === 39.908775) {this.setData({latitude: 39.97334,longitude: 116.417403,});} else {this.setData({latitude: 39.908775,longitude: 116.406315,});}},scaleIn: function () {this.setData({scale: this.data.scale + 1,});},scaleOut: function () {this.setData({scale: this.data.scale - 1,});},changeMarkers: function () {this.setData({markers: markers,});},apiAddMarkers: function () {this.mapCtx.addMarkers({markers: [markers[2]],clear: false,success: (res) => {console.log('success addMarkers', res);},});},apiRemoveMarkers: function () {this.mapCtx.removeMarkers({markerIds: [1, 2, 3],success: (res) => {console.log('success removeMarkers', res);},});},apiMoveToLocation: function (e) {this.mapCtx.moveToLocation({longitude: '121.138398',latitude: '30.972688',success: (res) => {console.log('demo moveToLocation success 回调函数触发', res);},});},clickTag: function (e) {console.log('demo 热区标签 tap 事件触发', e);},handleMarkertap: function (e) {console.log('demo 地图 markertap 事件触发', e);},handleCallouttap: function (e) {console.log('demo 地图 callouttap 事件触发', e);},handleRegionchange: function (e) {console.log(e);},tapDialogButton(e) {ty.nativeDisabled(false);this.setData({dialogShow: false,});},
});
JSON
{"navigationBarTitleText": "map","usingComponents": {"mpdialog": "@tuya-miniapp/miniapp-components-plus/dialog/index"}
}
TYSS
.container {display: flex;align-items: center;flex-direction: column;padding: 0 20px 20px;
}.scrollBox {width: 100%;border: 2px solid green;overflow: hidden;padding: 10px;
}.myMap {height: 300px;width: 100%;margin-top: 50px;position: relative;
}.tag1 {width: 80px;height: 40px;background: yellowgreen;display: flex;justify-content: center;align-items: center;
}.btn-box {width: 100%;margin-top: 20px;display: flex;justify-content: space-between;flex-wrap: wrap;
}.btn {width: 160px;margin-bottom: 20px;display: inline-block;padding: 10px 20px;
}.box {background-color: darkorange;height: 200px;width: 100px;position: absolute;top: 150px;display: flex;justify-content: center;align-items: center;
}

画布组件 

canvas 

相关 api: Canvas

画布。使用 JS 操作 Canvas 上下文进行绘制。

属性说明

属性名类型默认值必填说明
typestring指定 canvas 类型,有效值值为 2d
canvas-idstringcanvas 组件的唯一标识符,必须设置该属性
disable-scrollbooleanfalse当在 canvas 中移动时且有绑定手势事件时,禁止屏幕滚动以及下拉刷新
bind:touchstarteventhandle手指触摸动作开始
bind:touchmoveeventhandle手指触摸后移动
bind:touchendeventhandle手指触摸动作结束
bind:touchcanceleventhandle手指触摸动作被打断,如来电提醒,弹窗
bind:longtapeventhandle手指长按 500ms 之后触发,触发了长按事件后进行移动不会触发屏幕的滚动
bind:erroreventhandle当发生错误时触发 error 事件,detail = {errMsg}

使用方法

  • 方法一: 使用 rjs 进行绘制, 可以获取到 canvas 节点, 可以绘制图表, 动画和各种图形等。

  • 方法二: 在逻辑层 js 中配合 ty.createCanvasContext API 使用, 此方法获取不到 canvas node 节点。

推荐使用 方法一 rjs 进行绘制, 性能更好。

示例代码

TYML
<canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas"></canvas>
JS
Page({onReady: function () {// 使用 ty.createCanvasContext 获取绘图上下文 contextconst context = ty.createCanvasContext('firstCanvas');context.setStrokeStyle('#00ff00');context.setLineWidth(5);context.rect(0, 0, 200, 200);context.stroke();context.setStrokeStyle('#ff0000');context.setLineWidth(2);context.moveTo(160, 100);context.arc(100, 100, 60, 0, 2 * Math.PI, true);context.moveTo(140, 100);context.arc(100, 100, 40, 0, Math.PI, false);context.moveTo(85, 80);context.arc(80, 80, 5, 0, 2 * Math.PI, true);context.moveTo(125, 80);context.arc(120, 80, 5, 0, 2 * Math.PI, true);context.stroke();context.draw();},
});

开放能力 

web-view

基础库 2.6.0 开始支持, 低版本需做兼容处理。

Tuya MiniApp Tools 上是通过 WebView 模拟的与真机存在差异,请以真机效果为主。

功能描述

承载网页的容器。会自动铺满整个小程序页面。

注意:当页面存在 web-view 标签时,其他标签将不展示,且不支持设置任何样式!

属性说明

属性名类型默认值必填说明
srcstringwebview 指向网页的链接。需登录小程序管理后台配置业务域名。
bind:messageeventhandle网页向小程序 postMessage 时,触发并收到消息。e.detail = { data }
bind:loadeventhandle网页加载成功时候触发此事件。e.detail = { src }
bind:erroreventhandle网页加载失败的时候触发此事件。e.detail = { url, fullUrl },其中 fullUrl 为加载失败时的完整 url

网页向小程序 postMessage 时,请使用 @tuya-miniapp/jssdk 进行操作,详细用法请查看 [jssdk 文档](@tuya-miniapp/jssdk](https://www.npmjs.com/package/@tuya-miniapp/jssdk)

示例代码

TYML
<web-view src="{{src}}" bind:message="message" bind:load='load' bind:error="error"></web-view>
JS
Page({data: {src: 'https://www.your-domain.com',},message(e) {console.log('bind:message', e);},load(e) {console.log('bind:load', e);},error(e) {console.log('bind:error', e);},
});

原生组件说明

native-component

小程序中的部分组件是基于异层渲染的,由客户端创建的原生组件。

原生组件

小程序中基于异层渲染的原生组件,这些组件有:

  • map
  • ipc-player
  • camera
  • native-video
  • web-view

注意事项

原生组件在开发使用时最好通过真机调试来查看,因为 Tuya MiniApp Tools 中是通过 WebView 来模拟的原生组件,所以与真机的原生组件会有些差异,因此,开发者需要在真机上查看下功能样式,确保上线后运行效果正确。

原生组件异层渲染

异层渲染是为了解决 WebView 中一些复杂组件(如地图, 视频)的渲染性能比较差的问题。异层渲染是在 WebView 层之下再渲染一层 Native 层,通过配合通信来达到目的。

在上层的 WebView 层我们会空出一个区域让视觉穿透到下面的 Native 层,另外如果是覆盖在上面的元素,我们通过计算来获取到热区的占位区域。然后是经过计算来分发事件。

原生组件的使用限制

由于异层渲染模式下,页面分为上下两层,上层是 WebView 层渲染 WebView 组件节点及其子节点,下层是 Native 层渲染原生组件,因此在使用时有以下限制:

  1. 基于异层渲染的原生组件及其父节点不能设置背景色、背景图等, 如果设置则会导致底层原生视图被遮挡。
  2. 如果需要设置背景色和边框,请通过 background-color 和 border 相关属性进行设置,请参考下图以 <map/> 组件为例进行样式设置。因为原生组件区域是由 Natvie 层原生渲染的,所以背景色和边框样式需要传给 Native 层由原生来处理渲染。原生组件可设置的样式属性如下:
属性名类型默认值必填说明
border-widthnumber0边框的宽度, 单位 px
border-stylestringsolid边框的样式, 可选值: solid 和 dashed
border-colorstring#ffffff边框的颜色, 必须为十六进制格式
border-radiusnumber0边框的圆角, 单位 px
border-radius-top-leftnumber边框的左上角圆角大小, 单位 px
border-radius-top-rightnumber边框的右上角圆角大小, 单位 px
border-radius-bottom-leftnumber边框的左下角圆角大小, 单位 px
border-radius-bottom-rightnumber边框的右下角圆角大小, 单位 px
background-colorstring#ffffff背景颜色, 必须为十六进制格式
  1. 需要覆盖在地图上的节点必须作为原生组件的子节点,弹窗类型除外。因为只有原生组件的子节点会作为异层渲染的热区,热区内的手势事件由 WebView 层接管,原生组件标签内除热区外的其它区域手势事件都由 Native 层处理,原生组件标签外的节点不会作为热区,这样覆盖到原生组件上的 WebView 手势就会失效。
  2. 需要覆盖在地图上并且需要监听手势事件的弹窗,在显示时需要调用 ty.nativeDisabled(true) 使地图不接管手势事件,在收起时需要调用 ty.nativeDisabled(false) 使地图继续接管手势事件。因为弹窗是在显示和隐藏之间切换,调用手势接管 API 来控制,这样会减少对弹窗热区的监听,性能比作为原生组件子节点热区会好。
  3. 需要修改布局样式或者是通过 ty:if 切换显示隐藏时,需要把变化的属性加在原生组件本身才能生效,因为原生组件只有在自身组件上的属性发生变化才会发送消息到 Native 层,触发 Native 层视图同步变化。
  4. 不能将原生组件放在局部滚动区域中,外层不能嵌套如 scroll-viewswiper等可滚动的组件。因为 Native 层无法监听到局部滚动事件,无法实时更新组件视图位置。

cover-view

为了解决覆盖在原生组件之上的其它组件手势被原生拦截的限制。小程序专门提供了 cover-view 组件,可以覆盖在部分原生组件上面。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

npm run dev 启动vue的时候指定端口

使用的是 Vue CLI 来创建和管理 Vue 项目&#xff0c; 可以通过设置 --port 参数来指定启动的端口号。以下是具体的步骤&#xff1a; 打开命令行终端 进入您的 Vue 项目目录 运行以下命令&#xff0c;通过 --port 参数指定端口号&#xff08;例如&#xff0c;这里设置端口号…

力扣 | 11. 盛最多水的容器

双指针解法–对撞指针 暴力解法public int maxArea1(int[] height) {int n height.length;int ans 0;for (int i 0; i < n; i) {for (int j i 1; j < n; j) {int area Math.min(height[i], height[j]) * (j - i);ans Math.max(ans, area);}}return ans;}双指针解法…

VUE组件--动态组件、组件保持存活、异步组件

动态组件 有些场景可能会需要在多个组件之间进行来回切换&#xff0c;在vue中则使用<component :is"..."> 来实现组件间的来回切换 // App.vue <template><component :is"tabComponent"></component><button click"change…

windows安装mysql5.7

看了如何学习mysql后&#xff0c;就开始本地安装mysql&#xff0c;开始学习了。 1.官网下载 官网地址&#xff1a; https://dev.mysql.com/downloads/mysql/ 选择5.7版本 点击 “No thanks, just start my download”开始下载 下载64位的压缩包版 解压下载好的.zip文件&#xf…

各省快递量数据, shp+excel,2001-2021年,已实现数据可视化

基本信息. 数据名称: 各省快递量数据 数据格式: shpexcel 数据时间&#xff1a;2001-2021年 数据几何类型: 面 数据坐标系: WGS84 数据来源&#xff1a;网络公开数据 数据字段&#xff1a; 序号字段名称字段说明1a_2001快递量/万件_2001年2a_2002快递量/万件_2002年3…

Scrcpy:掌握你的Android设备

Scrcpy&#xff1a;掌握你的Android设备 本文将介绍Scrcpy工具&#xff0c;它是一种强大的安卓设备控制工具&#xff0c;可以实现屏幕镜像、操作控制等功能。我们将探讨Scrcpy的基本原理和工作方式&#xff0c;并介绍如何使用Scrcpy连接和控制安卓设备。此外&#xff0c;我们还…

机器学习---特征选择与稀疏学习

1. 特征 特征&#xff1a;描述物体的属性。 特征的分类&#xff1a;相关特征: 对当前学习任务有用的属性&#xff1b;无关特征: 与当前学习任务无关的属性 特征选择&#xff1a;从给定的特征集合中选出任务相关特征子集&#xff1b;必须确保不丢失重要特征。 原因&#xff…

分享一个基于easyui前端框架开发的后台管理系统模板

这是博主自己在使用的一套easyui前端框架的后台管理系统模版&#xff0c;包含了后端的Java代码&#xff0c;已经实现了菜单控制、权限控制功能&#xff0c;可以直接拿来使用。 springboot mybatis mybatis-plus实现的增删查改完整项目&#xff0c;前端使用了easyui前端框架。…

【Java】HttpServlet类中前后端交互三种方式(query string、form表单、JSON字符串)

在前后端的交互中&#xff0c;前端通过以下三种方式来与后端进行交互&#x1f31f; ✅query string ✅form表单 ✅JSON字符串 下面我们将书写这三种方式的后端代码并进行讲解 1、Query String QueryString即在url中写入键值对&#xff0c;一般用doGet方法进行交互 代码如下 …

Cleanmymac for mac 4.14.7无弹窗注册版

Cleanmymac for mac是一款先进的、集所有功能于一身的实用系统清理工具&#xff0c;删除系统缓存文件 , 多余的应用程序语言包 , 它能帮助保持您的Mac保持清洁。只需两个简单的点击&#xff0c;就可以删除无用的文件&#xff0c;以节省您宝贵的磁盘空间。 对于很多喜爱摄影朋友…

【LeetCode: 215. 数组中的第K个最大元素 + 堆】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

linux|操作系统|centos7物理机安装网卡驱动8188gu(内核升级,firmware固件,USB设备管理,module管理)

前言&#xff1a; 目前服务器领域centos7基本是主流的操作系统&#xff0c;而linux相对于Windows来说&#xff0c;软硬件方面的支持是差很多的&#xff0c;在硬件方面来说&#xff0c;以一个免驱的网卡为例&#xff0c;window xp可能不会自动识别到&#xff0c;但Windows10基本…

DAY04_Spring—Aop案例引入代理机制

目录 1 AOP1.1 AOP案例引入1.1.1 数据库事务说明 1.2 Spring实现事务控制1.2.1 代码结构如下1.2.2 编辑User1.2.3 编辑UserMapper/UserMapperImpl1.2.4 编辑UserService/UserServiceImpl1.2.5 编辑配置类1.2.6 编辑测试类 1.3 代码问题分析1.4 代理模式1.4.1 生活中代理案例1.4…

vue3 实现简单计数器示例——一个html文件展示vue3的效果

目的&#xff1a;作为一个新手开发&#xff0c;我想使用 Vue 3 将代码封装在 HTML 文件中时&#xff0c;进行界面打开展示。 一、vue计数示例 学了一个简单计数器界面展示&#xff0c;代码如下&#xff1a; <!DOCTYPE html> <html lang"en"><head&…

R语言【paleobioDB】——pbdb_temporal_resolution():展示化石数据的时空分辨率

Package paleobioDB version 0.7.0 paleobioDB 包在2020年已经停止更新&#xff0c;该包依赖PBDB v1 API。 可以选择在Index of /src/contrib/Archive/paleobioDB (r-project.org)下载安装包后&#xff0c;执行本地安装。 Usage pbdb_temporal_resolution (data, do.plotTRUE…

uniapp + node.js 开发问卷调查小程序

前后端效果图 后端&#xff1a;nodejs 12.8 ; mongoDB 4.0 前端&#xff1a;uniapp 开发工具&#xff1a;HBuilderX 3.99 前端首页代码 index.vue <!-- 源码下载地址 https://pan.baidu.com/s/1AVB71AjEX06wpc4wbcV_tQ?pwdl9zp --><template><view class&q…

十二、Qt 操作PDF文件(2)

一、在《十、Qt 操作PDF文件-CSDN博客》中我们用Poppler类库打开了PDF文件&#xff0c;并显示到窗体上&#xff0c;但只能显示一页&#xff0c;功能还没完善&#xff0c;在本章节中&#xff0c;加入了&#xff1a; 通过选择框选择PDF文件并打开&#xff0c;默认打开第一页。通…

Spring Boot 配置文件和日志

目录 配置文件格式 properties配置文件说明 1.properties基本语法 2.读取配置文件 3.properties缺点 yml配置文件说明 1.yml基本语法 2.配置不同数据类型 3.字符串特殊情况 4.配置对象 properties和yml对比 日志 日志的使用 日志级别 日志持久化 Lombok Lombo…

C++大学教程(第九版)5.18进制表

目录 题目 代码 运行截图 题目 &#xff08;进制表&#xff09;编写一个程序要求打印一张表&#xff0c;内容是1~256范围内每个十进制数对应的二进制、八进制和十六进制形式。如果还不熟悉这些计数系统&#xff0c;可先阅读附录 D。提示:可以使用流操纵符dec、oct 和 hex来…

网络部署实战具体学习内容总结

网络部署实战具体学习内容总结 &#x1f4bb;网络部署实战课程通常旨在教授学生如何规划、配置、维护和优化计算机网络。这些课程涵盖了广泛的主题&#xff0c;以确保学生具备网络部署和管理所需的技能。 网络部署实战课程具体学习内容&#x1f447; 1️⃣网络架构设计及网络原…