微信小程序云开发教程——墨刀原型工具入门(表单组件)

news2024/12/28 3:00:29

  

引言

作为一个小白,小北要怎么在短时间内快速学会微信小程序原型设计

时间紧,任务重”,这意味着学习时必须把握微信小程序原型设计中的重点、难点,而非面面俱到。

要在短时间内理解、掌握一个工具的使用,最有效的方式莫过于临摹

看实例视频教程,并跟着教程在实例素材上操作。

基于以上两点,小北根据学长和老师们的推荐,选择了先上入手“墨刀”这个软件!

软件介绍

墨刀是一款在线原型设计与协同工具,借助墨刀,产品经理、设计师、开发、销售、运营及创业者等用户群体,能够搭建为产品原型,演示项目效果。

墨刀同时也是协作平台,项目成员可以协作编辑、审阅 ,不管是产品想法展示,还是向客户收集产品反馈,向投资人进行Demo展示,或是在团队内部协作沟通、项目管理。

 官网下载地址:墨刀 - 在线一体化产品设计协作平台 (modao.cc)icon-default.png?t=N7T8https://modao.cc/

墨刀支持为页面或组件添加交互跳转事件,模拟用户使用产品交互时的真实体验,让你的原型“动”起来。

表单组件

表单组件位于【组件】-【内置】中,双击或拖拽至画布即可使用。

单行/多行输入

使用【单行/多行输入】组件工具,可以在原型中添加一个在预览演示时,可以输入文字的输入框。查看/使用文件的人点击此组件即可输入内容。

1、单行输入与多行输入的区别:

  • 单行输入中,无论输入内容多长,始终以一行显示,不会自动换行,可以左右滑动查看所有输入内容;
  • 多行输入中,在输入内容长度超过输入框宽度时,会进行自动换行,可以上下滑动查看所有输入内容。

2、输入框内的文案修改:

双击组件,即可对输入框中的起始文案进行编辑。

drawing

3、弹出键盘样式设置

单行输入组件可以设置点击输入框时弹出键盘,键盘样式设置路径: 右侧【外观】面板——【外观】——键盘样式。

下拉选择器

下拉选择器支持点击右侧的下拉箭头弹出多个选项,点击选项即可选择。
下拉选择器默认3个选项,可以修改选项的文本内容。

1、添加选项:

双击该组件,在最后一个选项后点击enter,即可输入新的选项内容。

2、删除选项:

双击该组件,将多余的选项行删除即可。

drawing

3、设置默认选项:

默认选项为第一个选项,如需更改,只需更改第一个选项即可。

drawing

下拉选择器为一整个组件,目前本组件不支持选项触发交互事件。

选择文件

使用这一组件,文件运行时可以点击左侧【选择文件】按钮,出现文件选择弹窗,选择文件后会在右侧名称栏中显示名称。

drawing

单选/复选

单选/复选组件可实现选择的操作。 【单选】只能选择一个选项,【复选】则能选择多个选项。在右侧的外观设置面板可以对这两个组件进行具体的设置。

1、【类型】部分

  • 可以设置选项的样式;
  • 打开「禁用」按钮,则整个组件会成为灰色,不支持进行选择操作;
  • 修改下方「尺寸」,可以调整选项的字号和整体大小;
  • 支持两种对齐方式:选项等间距列表等间距,最右侧的数值框可以调整等间距的具体间距大小。

2、【选项】部分

  • 点击右上角的「加号」按钮,可以添加选项;
  • 点击选项框右侧的「减号」按钮,可以删除此选项;

drawing

  • 选项框中可以修改选项文本;

drawing

  • 鼠标置于选项框上,拖动左侧出现的按钮,可以修改选项的顺序;

drawing

  • 鼠标置于选项框上,点击右侧的「闪电」按钮,可以为选项添加事件,选中时进行跳转交互,具体步骤可参考添加交互事件;
  • 闪电按钮右侧的「圆点」,点击可以切换选项的选中/未选中状态。

drawing

3、【按钮】部分

  • 可以修改未选中项的按钮颜色及文字颜色;

4、【选中项】部分

  • 可以修改选中项的按钮颜色及文字颜色。

开关组件

从「组件-内置-表单组件」内拖拽到画布内即可直接使用。

  • 右侧属性面板可设置禁用开关、开启样式和关闭样式;
  • 点击禁用后,组件将无法进行点击,同时会增加一定的蒙层效果。

滑动条

滑动条是用于选择数值区间的一种常见组件,常用场景为调节音量、亮度或各种效果参数等。
但需要注意的是,滑动条与滚动条不同,不能作为滑动页面等效果展示

  • 右侧属性面板可以设置滑动条的轨道及滑块设置。轨道可设置圆角、独立圆角、轨道线条粗细、颜色填充等,滑块可设置位置、大小、填充色等;
  • 轨道宽度限制为2-20,属性面板下拉框只显示2-20的偶数数字,但支持自定义输入数字;滑块直径限制为8-80,滑块描边最大限制为9,支持自定义输入数字。

数字步进器

当你想对数值进行小幅度的调整时,可以使用此组件。
比如:购物车数量由1增加到2,百分比从10%调整到11%等。

  • 右侧属性面板可修改数字步进器的文本样式、数值及按钮;
  • 数值可选择的最大/最小值无上下限,也可设置为负数,默认区间为0-10;默认值为1,当前区间变动超出默认值后,自动变更为当前区间的边界值。

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

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

相关文章

deepin23beta中SQLite3数据库安装与使用

SQLite 是一个嵌入式 SQL 数据库引擎,它实现了一个自包含、无服务器、零配置、事务性 SQL 数据库引擎。 SQLite 的代码属于公共领域,因此可以免费用于任何商业或私人目的。 SQLite 是世界上部署最广泛的数据库,其应用程序数量之多&#xff0c…

编译原理-实现识别标识符的词法分析器——沐雨先生

实验任务: 实现识别标识符的词法分析器 实验要求: 根据编译原理理论课教材中图2.3“标识符的转换图”,用C语言编写识别标识符的词法分析器,以文本文件为输入,控制台(或文件)输出识别出的每个…

别忽视平台的重要性

目录 前言: 与谁在一起,真的很重要 别把运气当才华,别把平台当本事 珍惜平台,用好平台 前言: 对于做技术开发的人来说,一头扎进技术里面去固然重要,但是很多时候,也要看看人际交…

springboot“爱相连”儿童慈善管理系统的设计与实现

摘要 随着网络科技的不断发展以及人们经济水平的逐步提高,网络技术如今已成为人们生活中不可缺少的一部分,而信息管理系统是通过计算机技术,针对用户需求开发与设计,该技术尤其在各行业领域发挥了巨大的作用,有效地促…

webpack5零基础入门-8清空前次打包文件与处理图标字体资源

1.配置output中的clean属性为true output: {/**文件输出路径 绝对路径*///__dirname 表示当前文件的文件夹目录path: path.resolve(__dirname, dist),//所有文件的输出目录/**文件名 */filename: static/js/dist.js,//入口文件输出文件名clean: true,//在打包前将path整个目录内…

Cesium 显示实时鼠标位置和视角信息

根据鼠标移动的位置计算鼠标所在位置的经纬度 监听视角变化情况显示视高、方位角、俯仰角 监测底图切片等级来显示当前地图缩放等级 showMapData() {let _this thislet handler new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)handler.setInputAction(function (mo…

Soft Robotics 变结构手掌和变刚度手指的仿人软体手的人机交互操作-武科大ESIR课题组师兄成果

一、引言 在当今的机器人技术领域,人类对机器人的需求日益增长,涉及到工业生产、医疗护理、服务业等各个领域。然而,由于任务的多样性和复杂性,单独依靠自主机器人操作往往难以满足实际需求。为了解决这一问题,人机协作…

软件设计和体系结构

软件设计和体系结构 一、引言 软件 定义:一系列按照特定顺序组织的计算机数据、指令的集合 特点: 软件不是生产制造,是设计开发软件不会磨损和老化软件需要根据实际情况进行定制开发 软件设计的基本原则 抽象方法 过程抽象:是指…

【物联网】Modbus 协议及Qinghub物联网平台应用

Modbus 协议简介 QingHub设计器在设计物联网数据采集时不可避免的需要针对Modbus协议的设备做相关数据采集,这里就我们的实际项目经验分享Modbus协议 你可以通过QingHub作业直接体验试用,也可以根据手册开发相应的代码块。 qinghub项目已经全面开源。 …

从 VNCTF2024 的一道题学习QEMU Escape

说在前面 本文的草稿是边打边学边写出来的,文章思路会与一个“刚打完用户态 pwn 题就去打 QEMU Escape ”的人的思路相似,在分析结束以后我又在部分比较模糊的地方加入了一些补充,因此阅读起来可能会相对轻松。(当然也不排除这是…

数据结构知识点总结00-知识点目录

专栏主页: 数据结构算法程序设计基础C语言知识点总结https://blog.csdn.net/seeker1994/category_12585732.html C语言知识点总结00-C语言知识点目录 最优算法100例00-最优算法100例目录 ...... 数据结构知识点目录 要求: (1&#xff…

什么蓝牙耳机最好?2024年五大优质品牌机型,真实评测助你决策

​随着科技的进步,无线蓝牙耳机已经取代了传统的有线耳机,成为新的趋势。尽管无线蓝牙耳机种类繁多,挑选合适的款式并不容易。我整理了几款表现不错的蓝牙耳机,希望这篇文章能帮助你找到适合自己的真无线蓝牙耳机。 一、挑选蓝牙耳…

C语言中,可以在子函数中动态申请一个指向二维数组的内存给调用函数使用么——看ChatGPT的回答——

下面是ChatGPT的回答&#xff0c;太专业了&#xff0c;比网上查的资料都好很多可能。 是的&#xff0c;可以在子函数中动态申请一个指向二维数组的内存&#xff0c;然后将其传递给调用函数使用。在C语言中&#xff0c;可以通过以下方式实现&#xff1a; #include <stdio.h…

英国伦敦交易所股票清单列表数据API接口

# Restful API https://tsanghi.com/api/fin/stock/XLON/list?token{token}更新时间&#xff1a;收盘后3~4小时。 更新周期&#xff1a;每天。 请求方式&#xff1a;GET。 # 测试&#xff1a;返回不超过10条数据&#xff08;2年历史&#xff09; https://tsanghi.com/api/fin/…

IO Watch:用 Arduino UNO 制造的可编程手表

MAKER:mblaz/译:趣无尽 Cherry(转载请注明出处) 关于手表的项目,之前我们已经介绍过一款《Arduino + 3D 打印 DIY 电子手表》。本期的项目同样的一款基于 Arduino UNO 的可编程的手表,相比之下制造门槛更高一些。同时它更成熟、实用,外形也很有设计感,非常的漂亮! 这…

TEAM标签管理体系是什么?如何进行数据权益的保护?

TEAM标签管理体系是什么&#xff1f;如何进行数据权益的保护&#xff1f; 导读一、数据权益保护的难点及解决思路二、数据权益保护的“TEAM”管理体系1、Tagging&#xff08;打标&#xff09;&#xff1a;为数据资源提供全生命周期跟踪保护2、Ensuring&#xff08;保障&#xf…

将复数的实部和虚部或数值的符号都取反operator.neg(num)

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 将复数的实部和虚部 或数值的符号都取反 operator.neg(num) [太阳]选择题 关于operator.neg()的功能说法正确的是&#xff1f; import operator print("【执行】operator.neg(34j)"…

无硫防静电手指套:高科技产业的纯净与安全新选择

随着科技的飞速发展&#xff0c;高科技产业对于生产环境的纯净度和产品的防静电要求日益严格。为了满足这一高标准的需求&#xff0c;无硫防静电手指套应运而生&#xff0c;以其独特的无硫特性和出色的防静电功能&#xff0c;迅速成为了高科技产业中的纯净与安全新选择。 无硫手…

react中JSX的详解

目录 JSX的本质及其与JavaScript的关系探究 一、JSX的本质 二、JSX与JavaScript的关系 三、为什么要使用JSX 四、不使用JSX的后果 五、JSX背后的功能模块 JSX的本质及其与JavaScript的关系探究 在React开发中&#xff0c;JSX是一个不可或缺的部分。那么&#xff0c;JSX的…

C++:函数传参到函数执行结束发生了什么

首先要明确两个概念 函数实参的入栈从右向左栈区从高地址向低地址偏移 接下来看下面一段代码 void fun(int a,int b,int c){std::cout<<&a<<" "<<&b<<" "<<&c<<std::endl; } int main(){fun(1,2,3); }…