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

 

引言

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

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

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

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

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

软件介绍

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

墨刀同时也是协作平台,项目成员可以协作编辑、审阅 ,不管是产品想法展示,还是向客户收集产品反馈,向投资人进行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.动效:可设置切换页面/组件状态时的默认动效为无动效/智能动画效果。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

13 双口 RAM IP 核

双口 RAM IP 核简介 双口 RAM IP 核有两个端口,它又分为伪双端口 RAM 和真双端口 RAM,伪双端口 RAM 一个端口只能读,另一个端口只能 写,真双端口 RAM 两个端口都可以进行读写操作。同时对存储器进行读写操作时就会用到双端口 RAM…

LeetCode受限条件下可到达节点的数目

题目描述 现有一棵由 n 个节点组成的无向树,节点编号从 0 到 n - 1 ,共有 n - 1 条边。 给你一个二维整数数组 edges ,长度为 n - 1 ,其中 edges[i] [ai, bi] 表示树中节点 ai 和 bi 之间存在一条边。另给你一个整数数组 restr…

决策树实验分析(分类和回归任务,剪枝,数据对决策树影响)

目录 1. 前言 2. 实验分析 2.1 导入包 2.2 决策树模型构建及树模型的可视化展示 2.3 概率估计 2.4 绘制决策边界 2.5 决策树的正则化(剪枝) 2.6 对数据敏感 2.7 回归任务 2.8 对比树的深度对结果的影响 2.9 剪枝 1. 前言 本文主要分析了决策树的分类和回…

matplotlib——散点图和条形图(python)

散点图 需求 我们获得北京2016年三月和十月每天白天最高气温,我们现在需要找出气温随时间变化的某种规律。 代码 # 导入库 from matplotlib import pyplot as plt import random# 解决中文乱码 import matplotlib matplotlib.rc("font",family"F…

详细讲解Docker架构的原理、功能以及如何使用

一、简介 1、了解docker的前生LXC LXC为Linux Container的简写。可以提供轻量级的虚拟化,以便隔离进程和资源,而且不需要提供指令解释机制以及全虚拟化的其他复杂性。相当于C中的NameSpace。容器有效地将由单个操作系统管理的资源划分到孤立的组中&…

如何解决线程安全问题(synchronized、原子性、产生线程不安全的原因,锁的特性,加锁的方式等等干货)

文章目录 💐线程不安全的示例💐锁的特性💐产生线程不安全的原因:💐加锁的三种方式 💐线程不安全的示例 对于线程安全问题,这里用一个例子进行讲解👇: 我现在定义一个变…

Image Fusion via Vision-Language Model【文献阅读】

阅读目录 文献阅读AbstractIntroduction3. Method3.1. Problem Overview3.2. Fusion via Vision-Language Model 4. Vision-Language Fusion Datasets5. Experiment5.1Infrared and Visible Image Fusion 6. Conclusion个人总结 文献阅读 原文下载:https://arxiv.or…

串及BF朴素查找算法(学习整理):

关于串的相关定义: 串:用‘ ’表示的字符序列空串:包含零个字符的串子串:包含传本身和空串的子串 eg: abc(,a,b,c,ab,bc,ac,abc)共7个:串的长度的阶乘1(空串)真子串:不包含自身的所…

Java进阶-IO(3)

话接上回,继续java IO的学习。上一次说完了字符流的读写数据,这次将基础部分剩余的一点内容看完。 一、流按功能分类 1、系统流 1.1 概述 系统流的类为 java.lang.System。Sytem 类封装了 Java 程序运行时的 3 个系统流。 System.in:标…

腾讯云幻兽帕鲁服务器中,如何检查并确保所有必要的配置文件(如PalWorldSettings.ini和WorldOption.sav)正确配置?

腾讯云幻兽帕鲁服务器中,如何检查并确保所有必要的配置文件(如PalWorldSettings.ini和WorldOption.sav)正确配置? 登录腾讯云控制台:登录轻量云控制台,找到部署了幻兽帕鲁的服务器,单击实例卡片…

基于BP-Adaboost的预测与分类,附MATLAB代码免费获取

今天为大家带来一期基于BP-Adaboost的预测与分类。代码中的BP可以替换为任意的机器学习算法。 原理详解 BP-AdaBoos模型先通过 AdaBoost集成算法串行训练多个基学习器并计算每个基学习 器的权重系数,接着将各个基学习器的预测结果进行线性组合,生成最终的预测结果。关于更多的原…

关于编写测试用例的一些思考

测试用例是QA同学的基本功,每个人都有一套编写测试用例的体系,本文是作者结合自身的工作经验以及阅读一些测试相关的书籍后的一些看法,欢迎大家一起讨论学习。 测试设计 测试用例格式 面试中一些常见的问题 1.APP测试与服务端测试的区别&am…

计算机设计大赛 深度学习火车票识别系统

文章目录 0 前言1 课题意义课题难点: 2 实现方法2.1 图像预处理2.2 字符分割2.3 字符识别部分实现代码 3 实现效果4 最后 0 前言 🔥 优质竞赛项目系列,今天要分享的是 🚩 图像识别 火车票识别系统 该项目较为新颖,适…

StarRocks实战——首汽约车实时数仓实践

目录 前言 一、引入背景 二、OLAP引擎选型 三、架构演进 四、实时数仓构建 五、业务实践价值未来规划 原文大佬的这篇首汽约车实时数仓实践有借鉴意义,这里摘抄下来用作学习和知识沉淀。 前言 首汽约车(以下简称“首约”)是首汽集团打造…

滑动窗口问题

日升时奋斗,日落时自省 目录 一、长度最小的子数组 二、无重复字符的最长子串 三、最大连续1的个数III 四、将x减到0的最小操作数 五、水果成篮 六、找到字符串中所有字母异位词 七、串联所有单词的⼦串 八、最小覆盖子串 注:滑动窗口其实很类似…

图片按照宽度进行居中裁剪,缩放大小

要求 文件存放在img_folder_path中 裁剪要求: 图片大小以高度为基准。居中裁剪 缩放要求: 图片缩放到512大小 图片另存到save_file_path路径中 代码 import numpy as np import cv2 import os from tqdm import tqdm#原图片存放位置 img_folder_p…

操作系统原理与实验——实验三优先级进程调度

实验指南 运行环境: Dev c 算法思想: 本实验是模拟进程调度中的优先级算法,在先来先服务算法的基础上,只需对就绪队列到达时间进行一次排序。第一个到达的进程首先进入CPU,将其从就绪队列中出队后。若此后队首的进程的…

Spring重点记录

文章目录 1.Spring的组成2.Spring优点3.IOC理论推导4.IOC本质5.IOC实现:xml或者注解或者自动装配(零配置)。6.hellospring6.1beans.xml的结构为:6.2.Spring容器6.3对象的创建和控制反转 7.IOC创建对象方式7.1以有参构造的方式创建…

【硬件相关】RDMA网络类别及基础介绍

文章目录 一、前言1、RDMA网络协议2、TCP/IP网络协议 二、RDMA类别1、IB2、RoCE3、iWARP 三、RDMA对比1、优缺点说明a、性能b、扩展性c、维护难度 2、总结说明 一、前言 roce-vs-infiniband-vs-tcp-ip RoCE、IB和TCP等网络的基本知识及差异对比 分布式存储常见网络协议有TCP/IP…

【【C语言简单小题学习-1】】

实现九九乘法表 // 输出乘法口诀表 int main() {int i 0;int j 0;for (i 1; i < 9; i){for (j 1; j < i;j)printf("%d*%d%d ", i , j, i*j);printf("\n"); }return 0; }猜数字的游戏设计 #define _CRT_SECURE_NO_WARNINGS 1 #include<stdi…