微信小程序云开发教程——墨刀原型工具入门(添加交互事件)

news2024/10/1 23:39:09

 

引言

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

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

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

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

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

软件介绍

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

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

 官网下载地址:墨刀 - 在线一体化产品设计协作平台 (modao.cc)https://modao.cc/

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

创建交互事件

要添加一个交互事件,需要设置触发事件以及行为。

1、新建事件

有两种操作方法为原型添加交互事件。
1.选中需要添加交互的页面/元素组件,点击右侧的设置面板-事件-添加事件。

2.选中需要添加交互的元素组件,拖动左侧的【闪电】图标,即可快速创建事件。
-拖动至左侧页面列表中的某一页面,默认快速创建【单击切换页面】事件。
-拖动至目标元素组件,会弹出行为菜单,选择需要的行为即可快速创建事件;如果当前状态仅支持一种行为,则会直接创建事件。

-拖动至编辑区左上角的【返回来源页面】菜单,可快速创建返回链接,运行时点击即可回到当前页面的前一页。

2、选择触发动作

选择触发动作,可使交互事件生效。

3、选择事件行为

包括跳转页面、跳转超链接、切换页面/组件状态、滚动到和显示/隐藏。触发事件后原型会发生对应的交互行为。

设置好以上几点后,还需进一步选择产生事件的目标元素,和具体的事件发生方式。这样在预览时就能进行高保真的交互体验了。

使用tips: 同一元素的同类型事件支持多个行为。如单击一个组件,可切换多个动态组件的状态。

部分同类行为可能会产生冲突导致事件失效,请检查后重新设置。

交互事件介绍

1、跳转页面/超链接

跳转页面:支持跳转至该原型文件内的其他页面。
跳转超链接:支持跳转至其他网页网站。

2、切换页面/组件状态

若页面或组件具有多个状态,支持进行状态切换。
ps:仅支持当前页面或当前页面内的动态组件。

3、滚动到

触发【滚动到】事件后,当前页面可以滚动至所选目标元素位置。

使用【滚动到】交互效果时,页面内画布需拉长至超过当前原型设定屏幕长度。

添加事件后,目标元素顶部会生成滚动参考线。可以使用鼠标上下拖动调整具体位置,也可在右侧面板设置【偏移目标】数值进行微调。

4、显示/隐藏

【显示/隐藏】事件可以快速切换目标元素的显示状态。
在右侧事件面板,可选【显示/隐藏/切换】三种类型,其中切换是指多次触发可切换显示/隐藏状态。

您也可以使用动态组件来实现显示/隐藏效果。具体方法请查看小北的动态组件微信小程序云开发教程——墨刀原型工具入门(动态组件)-CSDN博客icon-default.png?t=N7T8https://blog.csdn.net/Zhiyilang/article/details/136413594?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22136413594%22%2C%22source%22%3A%22Zhiyilang%22%7D

5、定时器

【定时器】可定时触发事件,注意:定时器仅能触发全局事件,需先在图层中选中页面。

随后在右侧栏中选择【全局事件】——【定时器】,即可创建定时器事件。

在事件编辑栏中选定事件及目标元素后,可选择事件的动效以及定时器的时长。

动态组件的交互事件

墨刀支持为动态组件中的元素添加交互事件,如切换页面状态、其他组件状态等。能够实现丰富的动态效果。

删除交互事件

有两种操作方法删除已添加的交互事件。
1.选中已添加交互的页面/元素组件,点击右侧的设置面板-事件-删除按钮。

2.当显示事件链接线时,选中已添加交互的页面/元素组件,点击链接线上的【剪刀】按钮,即可快速删除事件。

事件相关偏好设置

在左上角【更多】下拉菜单-偏好设置,或【事件】面板-设置,可以打开偏好设置弹窗。

与事件相关的设置包括:
1.常用-链接:可以设置添加事件后,页面中的标识方式,可选择不显示/只显示角标/显示线+角标。

2.动效:可设置切换页面/组件状态时的默认动效为无动效/智能动画效果。

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

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

相关文章

13-微服务初探-自研微服务框架

微服务初探 1. 架构变迁之路 1.1 单体架构 互联网早期,一般的网站应用流量较小,只需要一个应用,将所有的功能代码都部署在一起就可以,这样可以减少开发,部署和维护的成本。 比如说一个电商系统,里面包含…

Linux网络编程——socket 通信基础

Linux网络编程——socket 通信基础 1. socket 介绍2. 字节序2.1 简介2.2 字节序举例2.3 字节序转换函数 3. socket 地址3.1 通用 socket 地址3.2 专用 socket 地址 4. IP地址转换(字符串ip -> 整数,主机、网络字节序的转换 )5. TCP 通信流…

Linux线程【控制】

目录 前言: 正文: 1、线程知识补充 1.1、线程私有资源 1.2线程的共享资源 1.3原生线程库 2. 线程控制接口 2.1线程创建 2.1.1一批线程 2.2线程等…

Spring学习笔记(六)利用Spring的jdbc实现学生管理系统的用户登录功能

一、案例分析 本案例要求学生在控制台输入用户名密码,如果用户账号密码正确则显示用户所属班级,如果登录失败则显示登录失败。 (1)为了存储学生信息,需要创建一个数据库。 (2)为了程序连接数…

python 基础知识点(蓝桥杯python科目个人复习计划56)

今日复习内容:做题 例题1:最小的或运算 问题描述:给定整数a,b,求最小的整数x,满足a|x b|x,其中|表示或运算。 输入格式: 第一行包括两个正整数a,b; 输出格式&#…

VBA数据库解决方案第九讲:打开数据库记录集,所得数据回填

《VBA数据库解决方案》教程(版权10090845)是我推出的第二套教程,目前已经是第二版修订了。这套教程定位于中级,是学完字典后的另一个专题讲解。数据库是数据处理的利器,教程中详细介绍了利用ADO连接ACCDB和EXCEL的方法…

【Vue3】全局切换字体大小

VueUse 先安装VueUse <template><header><div class"left">left</div><div class"center">center</div><div class"right">right</div></header><div><button click"cha…

对象变更记录objectlog工具(持续跟新)

文章目录 前言演示代码参考仓库 前言 对于重要的一些数据&#xff0c;我们需要记录一条记录的所有版本变化过程&#xff0c;做到持续追踪&#xff0c;为后续问题追踪提供思路。 演示代码 下面我们通过一段代码演示代码&#xff0c;展示如何自动将枚举字段&#xff0c;主键关…

计算机网络-下一代互联网

1.IPV6概念&#xff1a; 下一代网络NGI&#xff0c;目前是第6版。IPV6分组有1个固定头部和n个扩展头部&#xff08;任选&#xff09;以及上层协议的负载组成。如下图&#xff1a; 2.IPV6固定头部&#xff1a;各字段解释含义。 版本0110&#xff0c;4位&#xff0c;代表IPV6通…

Unity TMP文字移动效果

前言 看见很多游戏有很特殊的波浪形文字效果&#xff0c;于是来尝试一下控制TMP文字顶点的方式达到类似效果。 原理 挂载tmp text&#xff0c;在里面随便放入非空格字符。 tmp text组件开放了textInfo接口&#xff0c;也就是GetComponent<TextMeshProUGUI>().textInfo…

使用R语言进行Logistic回归分析(2)

一、数据集描述&#xff0c;问题要求 下表是40位肺癌病人的生存资料&#xff0c;X1表示生活行为能力平分&#xff08;1到100&#xff09;&#xff0c;X2为病人的年龄&#xff08;年&#xff09;&#xff0c;X3由诊断到进入研究的时间&#xff08;月&#xff09;&#xff0c;X4…

VMwareWorkstation17.0虚拟机搭建WindowsXP虚拟机(完整安装步骤详细图文教程)

VMwareWorkstation17.0虚拟机搭建WindowsXP虚拟机&#xff08;完整安装步骤详细图文教程&#xff09; 一、Windows XP1.Windows XP简介2.Windows XP 的下载地址 二、配置 Windows XP 虚拟机运行环境1.新建虚拟机2.选择类型配置3.插入WinXP光盘映像文件(ISO)4.选择操作系统5.命名…

【MCAL】TC397+EB-tresos之CAN配置实战 - (CAN/CANFD)

本篇文章介绍了在TC397平台使用EB-tresos对CAN驱动模块进行配置的实战过程,不仅介绍了标准CAN的发送与接收&#xff0c;还介绍了CANFD的实现与调试以及扩展帧的使用。M_CAN是德国博世公司开发的IP&#xff0c;因为英飞凌的芯片完整的集成了这个IP&#xff0c;所以整体的配置都比…

【电路笔记】-RC网络-时间常数

时间常数 文章目录 时间常数1、概述2、RC 电路的时间常数3、示例14、示例25、RC瞬态放电曲线6、示例37、总结Tau τ \tau τ 是 RC 电路在阶跃变化输入条件下从一种稳态条件变为另一种稳态条件所需的时间常数。 1、概述 Tau,符号 τ \tau τ,是电气和电子计算中使用的希腊字…

C++_数据结构_数据的输入

作用 用于从键盘获取数据 关键字 cin >> 变量示例

Jenkins的Pipeline概念

文章目录 Pipeline什么是Jenkins Pipeline声明式和脚本式Pipeline语法为何使用PipelinePipeline概念PipelineNodeStageStep Pipeline语法概述声明式Pipeline脚本式Pipeline Pipeline示例 参考 Pipeline 什么是Jenkins Pipeline Jenkins Pipeline是一套插件&#xff0c;它支持…

YOLOv9有效改进|使用空间和通道重建卷积SCConv改进RepNCSPELAN4

专栏介绍&#xff1a;YOLOv9改进系列 | 包含深度学习最新创新&#xff0c;主力高效涨点&#xff01;&#xff01;&#xff01; 一、改进点介绍 SCConv是一种即插即用的空间和通道重建卷积。 RepNCSPELAN4是YOLOv9中的特征提取模块&#xff0c;类似YOLOv5和v8中的C2f与C3模块。 …

国内chatgpt写作软件,chatgpt国内使用

随着人工智能技术的不断发展&#xff0c;国内涌现出了一些基于ChatGPT模型的写作软件&#xff0c;这些软件不仅能够实现智能化的文章写作&#xff0c;还支持批量生成各种类型的文章。本文将深入探讨国内ChatGPT写作软件&#xff0c;以及它们在批量文章创作方面的应用与优势。 C…

STM32作为SPI slave与主机异步通信

背景 最近被测试提了个BUG&#xff0c;说某款产品在用户按下前面板的按键后&#xff0c;对应的按键灯没有亮起来。前面板跟主机是通过SPI口通信&#xff0c;前面板是从机&#xff0c;从机想要主动发送消息&#xff0c;需要通过GPIO中断来通知主机&#xff1a; 上图前面板是ST…

php源码 单色bmp图片取模工具 按任意方式取模 生成字节数组 自由编辑点阵

http://2.wjsou.com/BMP/index.html 想试试chatGPT4生成&#xff0c;还是要手工改 php 写一个网页界面上可以选择一张bmp图片&#xff0c;界面上就显示这张bmp图片&#xff0c; 点生成取模按钮&#xff0c;在图片下方会显示这张bmp图片的取模数据。 取模规则是按界面设置的&a…