【Zion无代码小程序开发教程】准备工作做好了么？还没有？那就一起来看看吧！（不用代码制作小程序） 返回列表

　　上一篇文章【Zion无代码小程序开发】UI8下载小程序项目实战分享和大家分享了我制作的小程序的一些设计思路和页面组成，今天周末在家比较空闲，再和大家分享一下制作过程。小程序体验见文末。

—————————— ฅ՞• •՞ฅ ———————————

{{{加关注，不迷路

}}}

—————————— ฅ՞• •՞ฅ ———————————

从一开始准备使用Zion来开发小程序到小程序发布上线，都会要经历：产品设计->UI设计->创建项目->开发小程序->预览小程序->真机测试->提交审核->发布上线。

产品设计

在动手之前，咱们得先构想一下你的产品是什么样？具有哪些页面？页面有哪些字段？页面中字段的功能等等。

　　咱们这小程序功能比较简单，相对于电商的小程序简单太多，主要页面就如上图所示。正如前一篇文章所说，我希望产品操作越简单越好，所以主要的功能都在列表和详情2个页面。

列表：

承载了资源的标题+主图+售价显示（这里的售价不是要收费，只是标注资源的价值，以及作为白嫖榜的数据来源），以及用户的搜索结果展示。

详情：承载了资源的详细图片，以及资源下载地址获取和分享的功能。

UI设计

刚工作的时候，做过一段时间UI，所以自己上手，一切从简，没有太多的修饰，简简单单，进了小程序就下载，下载完就走人。简单粗暴到极点。

　　毕竟不同产品设计不同，这边就不多聊，下面来说说主要的，实施阶段。

开始前的准备

因为Zion是基于浏览器的工具，所以除了注册平台账户以外，个人建议使用Chrome浏览器进行使用，其他浏览器也可以用，但是是不是可能出现未知的问题。

创建项目

现阶段zion支持小程序和网页端项目，为了方便有一定基础，或者尝鲜体验的玩家更方便的使用Zion，平台提供了现成的实例和模板，可以在登录后，通过创建项目按钮进行查看和创建项目。

你可以选择创建空白项目，从头开始，也可以选择使用现成的模板来进行2次开发。点击模板可以对模板项目进行预览，并快速按模板创建。

通过模板创建的项目，可以在操作见面看到类似上图所示的内容，每一个小程序的页面，都是单独存在的，你可以通过在页面上右击，来对页面进行复制、删除、新增操作，也可以使用单击、右键、拖拽等方式进行开发。

基本操作

聚焦模式

在上面的图中可以看到，每个页面是单独存在的，如果我们可以直接在页面间拖拽修改，这样很容易出错，所以这里就要提到聚焦模式，顾名思义，告诉你，我正在修改当前页面，也就是说，只有在聚焦模式下，你才可以对当前页面的内容进行修改。

　　进入聚焦模式的方法很简单，双击你的当前页面即可，正确进入聚焦模式后，页面顶部会显示聚焦模式的字样，当前页面也会有个橙色的框子显示。

在聚焦页面你可以对当前页面进行任何操作，新增/编辑组件，设置组件的数据来源，设置组件的参数等等。

如何使用组件

组件的使用前提是需要当前页面处于聚焦模式下，添加组件的方式很简单，点击左侧+按钮，可以打开组件面板，将你需要使用的组件拖拽到当前页面中即可。

这里需要注意一点，拖拽操作在平台中有一个提示，只有当将组件拖拽带页面显示范围内，才能正确的将组件应用到页面中，这里可以看到当组件进入页面显示范围的时候，页面的橙色框会处于激活状态，此时松开鼠标即可。

如何编辑组件

　　在聚焦模式下选择任意组件，在屏幕右侧会出现对应组件的属性配置栏目，主要包括样式，内容，行为3大部分。

样式：

主要用来修改尺寸，边框，颜色等基本参数

内容：用来设置组件数据的来源

行为：用来配置当用户点击组件时触发的动作。

如何设计数据表

上面提到的内容主要是面向Ｃ端用户的界面设计，这些设计的组件都需要后端数据的支撑，数据的来源就是数据表，Zion提供了简单的数据表设计工具，你可以根据页面的内容快速的设计出不同的数据表和数据字段。

这一步的操作主要为了将来在后台添加数据，提供最基本的表单字段，在后台添加数据后，前端就不再是苍白的组件，而是充满活力的APP了，哈哈哈，此处用到了拟人的修辞手法。

如何预览效果

虽然平台提供了实时预览功能，但是经过试用发现，或多或少还是有一些问题，当然作为效果展示的预览基本上满足需求了，如果要相对真实的体验真机操作，还是得走正规路线，代码发布和预览。

上图为实时预览

上图是代码发布后的用于真机的预览

　　2者的区别在于，真机预览更容易发现用户体验上的问题，如果只是对于数据调用或者展示问题校验，可以在实时预览就行了。

如何发布小程序

在真机预览没有任何问题的情况下，就可以对小程序进行发布操作了，这里需要注意3点：

预览和发布都需要先进行Zion的授权，由Zion来负责处理发布操作

每天只能发布一次（哈哈哈哈，所以一定要测试清楚，避免发布结束又发现致命bug，那就没办法了！但是据说限制每天一次也是为了让便于大家氪金）就问你刺激不刺激？惊喜不惊喜？

点击发布按钮，其实第一步是提交审核，由微信平台对代码进行审核；审核无误后，你的微信会收到消息提醒，告知审核结果，审核通过后，还需要到Zion后台，再次点击发布按钮，完成最后的发布操作。

　　当发布完成后，用户再次打开小程序，会提示有新的版本，要求重启更新，至此，你的小程序就与大家见面了。

—————————— ฅ՞• •՞ฅ ———————————

成品效果预览

—————————— ฅ՞• •՞ฅ ———————————

{{{加关注，不迷路

}}}

—————————— ฅ՞• •՞ฅ ———————————