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

  

引言

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

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

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

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

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

软件介绍

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

墨刀同时也是协作平台,项目成员可以协作编辑、审阅 ,不管是产品想法展示,还是向客户收集产品反馈,向投资人进行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.mzph.cn/news/748559.shtml

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

相关文章

【NC223888】红色和紫色

题目 红色和紫色 博弈论,想得出来思路就简单,想不出来就难。一般使用猜测法。 思路 如果小红随意取一个格子涂色,那么小紫怎么涂色才是她的最优选择呢? 假设小紫只能选择小红涂色的格子的相邻格子或者是最近斜对角的一个格子涂色…

LeetCode 2684.矩阵中移动的最大次数:一列一列处理,只记能到哪行(BFS)

【LetMeFly】2684.矩阵中移动的最大次数:一列一列处理,只记能到哪行(BFS) 力扣题目链接:https://leetcode.cn/problems/maximum-number-of-moves-in-a-grid/ 给你一个下标从 0 开始、大小为 m x n 的矩阵 grid ,矩阵由若干 正 整…

【漏洞复现】大华智慧园区综合管理平台SQL注入漏洞

Nx01 产品简介 大华智慧园区综合管理平台是一款综合管理平台,具备园区运营、资源调配和智能服务等功能。该平台旨在协助优化园区资源分配,满足多元化的管理需求,同时通过提供智能服务,增强使用体验。 Nx02 漏洞描述 大华智慧园区…

Halcon图像预处理、阈值分割

1、blob(Binary Large Object)是指二值图像中连通区域。 预处理通常包括一系列步骤,例如去噪、形态学操作、特征提取等。 read_image(Image,claudia) get_image_size(Image,Width,Height) dev_open_window_fit_size (0, 0, Width, Width, -1,…

如何在iPhone上恢复已删除的微信聊天记录?

你好,我前几天删除了微信聊天记录。有什么办法可以恢复iPhone上已删除的微信聊天记录吗? 有些人每次使用设备时都会遇到在 iPhone 上丢失消息的风险。特别是,由于多种因素,可能会丢失第三方数据,微信消息也是如此。微…

2024Vue高频面试题

前言: Vue 在前端开发领域拥有强劲的发展势头,以下是一些 Vue 的发展趋势: 1.持续增长的用户数量: Vue 作为一款轻量级、易学易用的前端框架,吸引了越来越多的开发者和企业选择使用。其活跃的社区和丰富的资源也促进了用户数量的不断增长。 2.生态系统不断丰富: 随着 V…

远超预期,特效吹爆!《武庚纪》:建议漫改都按这个标准来!

作为《武庚纪》动画党,听闻要改编成真人电视剧时,最害怕的无非五毛钱特效,流水线仙侠,无脑古偶。但在看过《烈焰》(原名:武庚纪)之后,不得不感叹一句:“倒也不用这么还原…

【计算机网络篇】计算机网络的性能指标

文章目录 🍔计算机网络的性能指标🗃️常见的计算机网络性能指标⭐速率⭐带宽⭐吞吐量⭐时延⭐时延带宽积⭐往返时间⭐利用率⭐丢包率 🔎总结 🍔计算机网络的性能指标 计算机网络的性能指标被用来从不同方面度量计算机网络的性能 …

算法的渐进时间复杂度

T(n) = O(F(n)) T(n):Time 渐进时间复杂度 O:正比例关系 F(n):代码执行次数 只要代码执行的次数越来越多 所耗费的时间也就越来越高 常见的5种: O(n^2) O(n logn) O(n) O(logn) O(1):不管重复多少次1次也是这个时间,10次也是这个时间。 时间复杂度排序:由小到…

JAVA22 FFM实战之HelloWorld

前言 JDK22即将发布,Java Foreign Function & Memory API将会退出预览,是时候开始学习一波了。 FFM API介绍 FFM API由两大部分组成,一个是Foreign Function Interface,另一个是Memory API。前者是外部函数接口&#xff0c…

对模型性能进行评估(Machine Learning 研习十五)

在上一篇我们已然训练了一个用于对数字图像识别的模型,但我们目前还不知道该模型在识别数字图像效率如何?所以,本文将对该模型进行评估。 使用交叉验证衡量准确性 评估模型的一个好方法是使用交叉验证,让我们使用cross_val_score…

机器学习-04-分类算法-02贝叶斯算法

总结 本系列是机器学习课程的系列课程,主要介绍机器学习中分类算法,本篇为分类算法与贝叶斯算法部分。 本门课程的目标 完成一个特定行业的算法应用全过程: 懂业务会选择合适的算法数据处理算法训练算法调优算法融合 算法评估持续调优工程…

MySQL大小写敏感、MySQL设置字段大小写敏感

文章目录 一、MySQL大小写敏感规则二、设置数据库及表名大小写敏感2.1、查询库名及表名是否大小写敏感2.2、修改库名及表名大小写敏感 三、MySQL列名大小写不敏感四、lower_case_table_name与校对规则4.1、验证校对规则影响大小写敏感4.1、验证校对规则影响排序 五、设置字段内…

Selenium控制已运行的Edge和Chrome浏览器——在线控制 | 人机交互(详细启动步骤和bug记录)

文章目录 前期准备1. 浏览器开启远程控制指令(1)Edge(2)Chrome 2. 执行python代码(1)先启动浏览器后执行代码(2)通过代码启动浏览器(3)Bug问题记录1&#xff…

蓝桥杯决赛2023 RE CyberChef2

思路很清晰,爆IV 但是题目出的有点屎,六位字符串,62的6次方,要我爆到猴年马月? 就当练习脚本吧 #Cyber2 wp from Crypto.Cipher import DES, AES from Crypto.Util.Padding import pad, unpad key_des b0a0b0c0…

PHP异世界云商系统开源源码

系统更新与修复列表 1. 基于彩虹的二次开发 - 对彩虹系统进行了二次开发,增强了系统的功能和性能。2. 新增自定义输入框提示内容(支持批量修改) - 用户可以自定义输入框的提示内容,并支持批量修改,提升用户体验。3. 新…

TCP相关特性

协议段格式 • 源/⽬的端⼝号:表⽰数据是从哪个进程来,到哪个进程去; • 32位序号/32位确认号:后⾯详细讲; • 4位TCP报头⻓度:表⽰该TCP头部有多少个32位bit(有多少个4字节);所以TCP头部最⼤⻓度是15*460 • 6位标志位: ◦ URG:紧急指针是否有效 ◦ ACK:确认号是否有效…

ARMv8架构特殊寄存器介绍-0

一、zero 寄存器 零寄存器用作源寄存器时读取零,用作目标寄存器时丢弃结果。您可以在大多数指令中使用零寄存器,但不是所有指令。二、sp寄存器 在ARMv8架构中,要使用的堆栈指针的选择在某种程度上与Exception级别。默认情况下,异…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:ScrollBar)

滚动条组件ScrollBar,用于配合可滚动组件使用,如List、Grid、Scroll。 说明: 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 子组件 可以包含单个子组件。 接口 ScrollBar(val…

6、Design Script之列表

Range 在DesignScript中,Range是从起点到终点的一系列数字,使用指定的步距(间距类型),并有以下的初始化方法: start..end..step; start..end..#amount; start..end..~approximate; Range可以是数字的,也可以是字母的。 字母范围因大小写而异。 开始,结束. .#数量范围(…