微信小程序云开发教程——墨刀原型工具入门(编辑页面)

news2024/11/6 7:09:38

  引言

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

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

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

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

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

软件介绍

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

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

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

编辑页面

添加页面及页面文件夹

在编辑区左侧的页面列表区域,您可以点击顶部的「+」为原型添加新页面。

在编辑区左侧的页面列表区域,您可以点击顶部的「页面文件夹」为原型添加新的页面文件夹。

页面文件夹能够有效的梳理页面逻辑,具体设置方法如下:
鼠标将页面拖拽放入文件夹中(IE浏览器不支持页面拖动,建议使用谷歌浏览器/墨刀客户端)

页面标识

在左侧的页面列表区域,可以为页面及文件夹修改标识样式,便于区分各页面的类型或状态,提升您的工作效率。

设置页面文件夹标识

点击页面文件夹前的「文件夹」图标会弹出切换颜色菜单,点击就能为文件夹图标修改颜色。
点击最右侧的「恢复默认」按钮,即还原为默认颜色。

点击空白区域,颜色菜单即会隐藏。
页面文件夹仅支持修改颜色。

设置页面标识

点击页面名称前的「页面」图标会弹出切换图标面板,共有最近使用、符号及表情三个板块。
最近使用:这里会记录并显示您最近使用过的页面标识,方便您快速复用。

符号:提供了进度标志以及符号标识,能够清晰地标明页面的类型、修改状态及操作等。

表情:提供了丰富的表情符号,可以任意修改切换。

恢复默认:设置页面标志后,如您想删掉标志,点击面板右上角的「重置」按钮,即可使页面标识恢复默认状态。

设置页面/组件外观

在工作区左侧栏中选中某个页面,将会在右侧栏弹出【页面设置】板块,您可以在右侧的外观设置面板中设置页面画板的外观(尺寸、背景色)。

选中某个组件时,您可以在右侧的外观设置面板中设置组件的外观(如位置、大小、颜色、透明度、阴影、动效等)。

页面列表/元素组件列表多选

墨刀支持页面列表/元素列表多选,具体操作如下,

  • 页面列表:
    点击某个页面,按住shift单击另一个页面,则可以选中这两个页面中的所有页面(包括这两个页面),接着可以对其进行统一的移动/删除操作;
    按住command(Mac)/ ctrl(Windows),则可逐个页面进行选择。

  • 元素组件列表:
    按住shift,单击首尾两个元素组件即可选中列表中两组件中间的所有元素,然后右键进行组合/图层调整等操作;
    按住command(Mac)/ ctrl(Windows),即可逐个元素组件进行选择,然后右键进行组合/图层调整等操作。

删除页面

选中具体页面,点击「更多」图标,即可删除页面。

如果您要删除的页面含有子页面,您可以选择只删除父页面或删除父页面与子页面。

删除页面找回

误删或删除的页面可以通过以下2种方式找回:

  • 1、 在文件名称旁的菜单栏内选择页面回收站找回。

  • 2、在页面栏旁边的菜单栏内选择页面回收站进行找回.

注:页面删除14天后将会被系统自动清空,如误删页面请您及时在页面回收站中找回。系统清空后无法找回页面,当前不支持手动清理页面回收站。

调整页面顺序

鼠标悬浮在页面上直接往上或往下拖拽即可调整页面顺序。

注:IE浏览器不支持页面拖动,建议使用谷歌浏览器/墨刀客户端

上传图片创建页面

如果您需要批量上传图片创建页面,可以在电脑桌面多选这些图片,然后拖拽到页面列表区域,图片就会自动上传并创建一个新的页面。 上传完成后,可以直接添加交互,便捷演示。

设置页面横屏

1、在工作台左侧选中页面

2、设置横竖屏

选中画布时,您可以在右侧的外观设置面板中设置页面画布为横屏或者竖屏。
需要注意的是,只有手机文件才可以设置横竖屏,网页尺寸文件默认横屏,无竖屏选项。

设置页面高度(长页面)

选中页面画布后,鼠标悬浮在页面画布底部,按住向下拖拽即可调整页面高度(拉长页面)。如果需要精确设置页面高度的值,可以在右侧的页面外观设置中输入数值设置。
拉长页面高度超过一屏后,在运行时会以滚动的形式展示。

修改页面/页面文件夹名称

在页面列表双击某个页面的页面名称,即可修改它的页面名称。
文件夹与页面的重命名操作一样,双击名称即可修改。

展开、折叠页面

选中一个多级页面的父页面,点击页面左上角的小三角形按钮即可展开、折叠页面。

您也可以使用快捷方式操作:

展开 - Ctrl+; 折叠 - Ctrl+’

批量导入图片生成页面

如果您需要批量上传图片创建页面,您可以在电脑桌面多选这些图片,然后拖拽到文件编辑区的页面列表区域,图片就会自动上传并创建页面。 上传完成后,您可以直接添加交互,进行演示。

合并文件

把几个文件的页面合并成一个,可以通过「转移页面」功能来实现:
在文件A中选择所需页面,点击页面右侧的「更多」-「转移至」按钮,在弹出的面板中选择需要移入的空间-文件夹-文件B,就可以将文件A的页面转移(合并)到文件B中了。
需要注意的是:
1、文件不能没有页面,因此如果需要转移所有页面,得先新建一个一级空白页面。
2、相互转移的两个文件需为同一个版本,比如V8原型中的页面无法转移至V7原型中。

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

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

相关文章

CTFHUB 命令执行

命令执行 原理: 在编写程序的时候,当碰到要执行系统命令来获取一些信息时,就要调用外部命令的函数,比如php中的exec()、system()等,如果这些函数的参数是由用户所提供的,那么恶意用户就可能通过构造命令拼…

python统计分析——泊松回归

参考资料:用python动手学统计学 概率分布为泊松分布、联系函数为对数函数的广义线性模型叫作泊松回归。解释变量可以有多个,连续型和分类型的解释变量也可以同时存在。 1、案例说明 分析不同气温与啤酒销量的关系。构造不同气温下的销量的数学模型&…

LeetCode 热题 HOT 100(P1~P10)

🔥 LeetCode 热题 HOT 100 这里记录下刷题过程中的心得,其实算法题基本就是个套路问题,很多时候你不知道套路或者模板,第一次尝试去做的时候就会非常懵逼、沮丧和无助。而且就算你一时理解并掌握了,过一段时间往往会绝…

Unity--自动版面(Horizontal Layout Croup)||Unity--自动版面(Vertical Layout Group)

Unity--自动版面(Horizontal Layout Croup) Horizontal Layout Croup: “水平布局组”组件将其子布局元素并排放置。它们的宽度由各自的最小,首选和灵活的宽度决定,具体取决于以下模型: 所有子布局元素的…

【数据结构】知识点一:线性表之顺序表

内容导航 一、什么是线性表?二、什么是顺序表?1、顺序表的概念2、顺序表的结构a. 静态顺序表:使用定长数组存储元素。b. 动态顺序表:使用动态开辟的数组存储。 三、顺序表的接口实现精讲1.接口一:打印数据2.接口二&…

Vue组件置底方法,ElementPlus布局

问题描述 在开发网页时使用了elementplus的el-container组件 组件里分成了main和footer两块&#xff0c;但是想要将两个按钮置底在容器底部遇到了困难 如下图所示&#xff0c;在网页开发者工具可见两个按钮与左侧的图片没有底部对齐 此时我的代码是这样 <el-footer>&…

探讨倒排索引Elasticsearch面试与实战:从理论到实践

在当前大数据时代&#xff0c;Elasticsearch&#xff08;以下简称为ES&#xff09;作为一种强大的搜索和分析引擎&#xff0c;受到了越来越多企业的青睐。因此&#xff0c;对于工程师来说&#xff0c;掌握ES的面试准备和实战经验成为了必备技能之一。本文将从ES的面试准备和实际…

Redis高级特性和应用(发布、订阅、Stream、慢查询、Pipeline、事务、Lua)

Redis高级特性和应用 发布和订阅 Redis提供了基于“发布/订阅”模式的消息机制&#xff0c;此种模式下&#xff0c;消息发布者和订阅者不进行直接通信,发布者客户端向指定的频道( channel)发布消息&#xff0c;订阅该频道的每个客户端都可以收到该消息。 操作命令 Redis主要…

专为大模型训练优化,百度集合通信库 BCCL 万卡集群快速定位故障

1 集合通信对分布式训练至关重要 在分布式训练中&#xff0c;每一块 GPU 只负责处理部分模型或者数据。集群中不同 GPU 之间通过集合通信的方式&#xff0c;完成梯度同步和参数更新等操作&#xff0c;使得所有 GPU 能够作为一个整体加速模型训练。 如果有一块 GPU 在集合通…

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

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

Ps:历史记录面板

Ps菜单&#xff1a;窗口/历史记录 Window/History 历史记录 History面板提供了对图像编辑过程中所进行更改的深入控制&#xff0c;可以让用户回溯并查看每一步操作&#xff0c;从而允许用户轻松撤销错误或比较不同的编辑效果。 ◆ ◆ ◆ 常用操作方法与技巧 “历史记录”面板…

解决 MySQL 未运行但锁文件存在的问题

查看mysql状态时&#xff0c;显示错误信息"ERROR! MySQL is not running, but lock file (/var/lock/subsys/mysql) exists"。 解决步骤 1、检查 MySQL 进程是否正在运行 在继续之前&#xff0c;我们首先需要确定 MySQL 进程是否正在运行。我们可以使用以下命令检查…

【Mybatis】多表映射 第二期

文章目录 一、多表映射概念二、对一映射三、对多映射四、多表映射总结4.1 多表映射优化4.2 多表映射总结 一、多表映射概念 多表关系&#xff1a; 一对一一对多 | 多对一多对多 一个 客户 对应 多个订单一个订单 对应 一个客户 举例&#xff1a; 对一 实体类设计&#xff1a…

2024最新算法:鹦鹉优化算法(Parrot optimizer,PO)求解23个基准函数(提供MATLAB代码)

一、鹦鹉优化算法 鹦鹉优化算法&#xff08;Parrot optimizer&#xff0c;PO&#xff09;由Junbo Lian等人于2024年提出的一种高效的元启发式算法&#xff0c;该算法从驯养的鹦鹉中观察到的觅食、停留、交流和对陌生人行为的恐惧中汲取灵感。这些行为被封装在四个不同的公式中…

vs code更新后json文件无法识别通配符 ,编译多文件失败的解决办法

问题描述 在Mac或者LInux上&#xff0c;进行C/C相同路径下进行多文件编译时&#xff0c;之前设置好的json文件突然不能解释通配符&#xff0c;并且将带有单引号的地址传给clang&#xff0c;由于*.c被扩在单引号中&#xff0c;clang找不到文件导致失败。 如果将命令端中的指令复…

Mysql标量子查询

目录 子查询标量子查询数据准备 子查询 SQL语句中嵌套select语句&#xff0c;称为嵌套查询&#xff0c;又称子查询。 SELECT * FROM t1 WHERE column1 ( SELECT column1 FROM t2 ... );子查询外部的语句可以是insert / update / delete / select 的任何一个&…

如何将一个远程git的所有分支推到另一个远程分支上

如何将一个远程git的所有分支推到另一个远程分支上 最初有 12 个分支 执行 git remote add 远程名 远程git地址 git push 远程名 --tags "refs/remotes/origin/*:refs/heads/*"之后就变成 26个分支

Visual Studio C++项目远程断点调试客户现场程序方法

前言 程序开发一个很常见的场景&#xff0c;就是程序在自己本地部署调试明明一点问题都没有&#xff0c;但是部署到客户现场就问题百出&#xff0c;要调试起来还很困难&#xff0c;在自己本地也没有条件复现&#xff0c;很多时候只能靠日志一点点排查和猜测&#xff0c;耗费大…

基于springboot+vue的智能无人仓库管理系统

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…

数据挖掘:航空公司的客户价值分析

需求分析 理解并掌握聚类分析方法&#xff0c;掌握数据的标准化&#xff0c;掌握寻找最佳聚类数&#xff0c;掌握聚类的绘图&#xff0c;掌握聚类分析的应用场景。 系统实现 实验流程分析 借助航空公司数据&#xff0c;对客户进行分类对不同类别的客户进行特征分析&#xf…