简介
Sketch？
- 极其方便的原型设计软件，能让UI设计更为简单、高效
口袋引擎？
- 移动设备上的可视化编程软件，在手机上，三下两下就能创建出可使用的程序
Sketch + 口袋引擎 ？
- 无论何时，无论何地，使用口袋引擎对Sketch设计项目进行封装，使得您的项目能如同一个App一般独立运作于移动设备上，同时这将是一个展示设计的好方法。无论是谁，只要也安装了口袋引擎，就能在不同设备、不同地点查看您的项目。因为口袋引擎是一个拥有完整“控制流”，“面向对象”等特性的编程软件，所以您可以创建出一些不同寻常的效果，例如为您的原型设计添加逻辑运算，添加真正可用的相机，或是直接插入视频、网页等，使其拥有极强的表现力。
想象一下，当你在上海使用Sketch完成了一个原型设计，想要让北京的同事预览到效果，您只需将其包装到口袋引擎中，然后直接发送给对方，此时对方接收到的既不是一个充满辅助线的设计图，也不是一个需要麻烦安装的成品App，而将会是一个直接在移动设备上展示、方便快捷且拥有强大表现力的“小程序”。
* 本教程适用于口袋引擎版本1.4.3及以上
- 1.43版添加了许多接口，重制了文本组件，增加了标题组件的更多设置等等
开始操作
本文以一个简单的例子展示了如何将Sketch项目用口袋引擎进行封装。
这是将要进行封装的项目：
基本快速封装
1、将Sketch页面导出
2、将图片发送至手机上，在口袋引擎中载入这些切片
打开口袋引擎，并新建一个项目，然后在口袋引擎中打开文件管理库，在“当前项目”大文件夹下新建一个“页面图片”文件夹，将图片资源导入这个文件夹中。
* 为什么要放在“当前项目”文件夹中 ？因为放在“当前项目”文件夹中的所有内容都会随项目打包而全部打包，而放在“全部文件”中的内容则是每个口袋引擎项目都能访问的资源，不会随项目打包而打包，会出现在其他设备上无法查看资源的情况，所以项目需要添加到分享包里的资源务必放置到“当前项目”文件夹中。
3、载入切片并完成布局
新建各个页面，并在每个页面插入图片，使图片铺满全屏，并在“属性”中指定图像位对应的图像。
* 关于插入元件的相关详细说明，可在这篇文章查看，这里不再赘述：
当完成所有页面的导入后，我们已经可以在“页面管理”中看到这样的效果：
具体的操作步骤就是：
添加图片->拉满全屏->在属性中指定图片路径->打开页面管理器->新建页面->再次添加图片...（循环）
这个时候点击页面图案，就可以在不同页面之间切换。
4、对相关按键添加页面跳转动画
这一步骤就是为项目注入灵魂的步骤了，我们将创建几个按键，使其被点击时跳转到相关界面。
在“基本快速封装”中，我们需要的仅仅是点击“登录按键”就能直接跳转页面，无需输入账号密码等等。
4-1 ：为页面取名字
那么首先第一步，我们得给这些页面起个名字，让系统知道我们想要跳转到哪个页面，当然也可以使用默认的“页面1”类似的名字，不过这样的名字似乎不容易记忆呢。
如上图所示，在页面管理器中，先点击要修改的页面，然后点击右侧的三个点，就能打开菜单，然后在这里选择“属性”，并将其名字进行修改，修改成容易记忆的就行。
4-2 ：在需要触发事件的地方添加按键
那么第二步，我们需要确定，“点击什么地方的时候转到某个页面”，可以用“按键”来触发事件，就像下图一样，放置了两个按键到需要触发事件的位置：
你可能会觉得“哇两个按键像狗皮膏药一样毫不和谐”，不用担心，这两个黑色的按键之后会作透明化处理，我们需要的只是一个“触发事件”的中介
按照这样的规律，将所有页面的所有按键设计处都覆盖一个实体按键，就像这样：
然后，长按按键，并为每一个按键取一个名字，就像这样：
4-3 注入灵魂，让点击按键时触发页面跳转动画
请长按任意位置，然后打开“规则”菜单，我们要在弹出的代码页面写上代码
请试着像这样写：
点击登录按键时 {
转到页面(登录完成)
}
其中，“登录按键”是刚才我自己给按键取得名字，“登录完成”是刚才我自己给页面取得名字，这行代码的效果就是点击登录按键的时候会跳转到相应页面
这几句代码在软件中应该是这样的效果：
您可以根据您对每个页面的名字自行调整代码。
这个时候如果尝试运行，会发现点击相应按键时真的发生了跳转。
还可以尝试不同的跳转效果，例如尝试将代码改为这样：
点击登录按键时 {
转到页面(登录完成，动画 = 3)
}
你会发现页面的跳转动画发生了改变，其中“动画”可以有0，1，2，3几种动画，您可以自行尝试
* 运行的时候，如果没有跳转，请确定是不是有错别字。
所以，接下来我们的工作是，为每个按键都写上这样的跳转代码，就像这样：
关于代码中的按键和页面的名称请参考下图：
在您的使用过程中，这些名字都是可以随意更改的。
当完成这一步后，如果运行，你会发现所有的跳转流程都完成了，点击相关按键都触发了对应的跳转操作。是实体按键还是遮在上面哇，看着很不舒服，我们需要做一些处理。
长按住按键，点击属性，并将其字体颜色和背景颜色都设为透明色。
* 请勿直接将按键的整体透明度选项调为0，因为当透明度为0时将视作不存在，不会触发相关事件
5、将项目添加至桌面，分享给他人
长按住用来显示Sketch切片的图像，在弹出来的菜单中点击“位置调整”选项，点击下方第二个按键，然后将自动布局中的四个选项都勾上。
* 在未使用自动布局时，一个组件在不同的屏幕上将不会自动调整大小，但是当假如勾选了“左边距离”，那么无论在什么尺寸的环境中，这个组件距离左边的距离将会保持恒定。因此，当一个拉满全屏的组件的自动布局中的项全部勾上时，意味着它在任何尺寸的设备上都将会是全屏的。
5-2 添加到桌面
在任意地方长按，点击“添加到桌面”，并设置图标和名字，即可添加一个快捷方式至桌面，下次打开时可直接进入项目并自动运行。
您也可以通过“分享”选项生成一个.Ek文件，将这个文件发送给好友，好友在口袋引擎中打开即可直接载入您封装好的项目，从而直接查看效果。
完成
至此，本次“基础快速封装”教程就在这里完成了，我们得到了一个可切换页面的小程序，在下一节教程“进阶封装”部分中，我们将进行一些更高级的操作：
- 开启自动布局，使项目在不同设备上都是全屏的。
- 我们将会使得输入框变得可用，需要输入正确的账号密码才能触发调整页面。
- 创建系统提醒框，当账号密码错误时发送提醒消息。
- 引入系统的状态栏，所有状态将是即时更新的。
- 可上下翻滚的文字框，在其中展示文本内容。