如何用源码搭建小程序教程视频(0代码开发小程序，这才是程序员偷懒神器！)

涛哥聊 Python读完需要12分钟速读仅需 4 分钟/ 用 Zion 从零上线一个小程序 /👀一、初始 Zion无代码开发，这个概念，最早是在 2018 年左右听说的各种无代码开发平台层出不穷，一直没有尝试过。

原因很多，比如，面对稍微复杂一些的项目，用无代码开发，学习成本并不比学一门编程语言低开发过程中，bug 是难免的，无代码开发的用户远不及热门编程语言的用户多，所以遇到问题，不好找到解决方案更麻烦的一点，不只要改业务逻辑的 bug，有时候还会遇到开发平台的 bug，让人无从下手。

功能上，相比原生代码开发，也有很大的局限性面对同品赛道诸多缺陷和问题的压力之下，ZION 横空出世ZION 得到了用户和投资方的认可，刚完成了数百万美元的 Pre-A 轮融资，本轮投资方为红杉中国种子基金。

看到这个消息，顿时引起了我对无代码开发的兴趣永远可以相信一线资本的嗅觉本着不学习新知识，就会被淘汰的新一代码农，说做就做，整一个项目练一下！在 ZION 的官网看了下，了解到现有的产品功能，主要可以开发小程序或网页。

Android 、iOS 和 PC 客户端等开发支持，列在了平台的产品计划中可以的，产品定位全平台无代码开发如果真的做到了无代码一次开发，跨平台打包，其中蕴含的商业价值不可估量话题扯远了，就让我们用 ZION 来开发一个小程序吧。

👀二、分析需求从业务复杂度和技术层面分析，小程序可以分为单机版、云开发版，以及独立服务端版本所谓单机版，用户打开小程序后，只用到小程序基本能力用到的功能和产生的数据，都只在用户侧，不做云端的存储和处理。

比如节日头像处理、计算器、秒表计时器等小程序云开发版本，使用微信开发平台提供的云数据库、云函数、存储和云托管等能力使用云开发能力做小程序的后端用户使用小程序时，可以从微信云端获取数据进行展示，或进行相关数据的云侧处理或存储。

独立服务端版本，和云开发类似，只不过是将后端服务，部署在第三方云服务器或自己公司的服务器上部署的服务，需要按照小程序开发规范，提供 https 接口，才可以正常使用单机版的小程序，体验不到无代码开发的所有的功能。

部署独立服务端，暂时用不到，没那么复杂的业务逻辑那就用云开发的模式完成一个小程序，用云开发的数据库能力，再接入一个第三方的接口一番思考之后，决定写一个笑话小程序，叫 “这就是亿个笑话”首页是个笑话文本的信息流，三个按钮，一个点赞按钮，一个上一条按钮，一个下一条按钮。

底部是一个导航菜单，点击切换到个人页面，有历史记录和点赞列表。

可以看历史浏览过的 10 条笑话，或点赞过的笑话列表。

笑话的信息来源，是一个第三方的 API 接口，需要通过 https 请求获得👀三、开发流程本次开发，先完成核心部分的开发：1.完成页面搭建2.首页展示笑话，可以上一条下一条切换3.微信一键登录，展示用户信息和积分。

4.点赞列表，可以看到点过赞的内容。5.发布上线小程序。3.1 熟悉 ZION 搭建页面1.登录 ZION 平台后，先创建一个项目。

2.进入项目后，看到了 ZION 的界面布局，左边是菜单栏，分为上下两部分上半部分是很多开发常用功能，例如新建页面、数据模型、外接 API 等下面的部分则是项目的后台管理和预览发布等入口中间是页面的预览，所见即所得。

即使在完全没有看使用说明的情况下，也明白下一步该做什么

3.先创建一个页面，用于展示笑话和布局几个功能按钮。点击左侧的 “添加页面” 或屏幕中间的 “添加新页面”，在弹出的输入框中输入页面名称，即可创建一个页面。

4.点击新建的页面，左边弹出新增组件菜单，右边的菜单支持修改当前页面的样式、背景和数据配置。

5.点击标题 ”Page Title“，右侧菜单变为修改导航栏的信息。点击 ”内容“，修改标题内容为 ”笑亿笑“。

6.用 ZION 组件，简单的拖拽和文本修改，将我们设计的首页页面搭建完成。

7.创建其它页面。

8.用页面下方的 “底部 Tab 栏”，完成底部导航的配置。可以配置导航栏的颜色样式，也可以添加文字、图标。按需求配置导航逻辑。

9.为 “我的” 页面中的 “我的点赞” 和 “历史浏览” 增加点击事件，完善页面间的跳转逻辑双击选中要添加事件的组件，右侧菜单配置行为 “路由-跳转-我的点赞”“历史浏览” 同理，完成所有路由配置

10.至此，完成了所有页面的搭建，以及页面之间的跳转逻辑感觉太方便了特别是底部导航的配置，即使完全不懂编程，甚至不看 ZION 的教程，也很容易理解如何配置点击页面右上方的预览按钮，可以在页面上直接预览刚搭建的内容，页面间也可以切换。

验证了下，没什么问题

3.2 配置 API 数据接口页面搭建完毕，接下来先把数据拿到，将笑话内容展示到首页上。1.ZION 平台左侧菜单，提供了 外接 API 的能力。

2.点击这个菜单，新建外接 API ，提供了明道云和自定义配置两种方式。我们使用自定义配置的方式。点击“添加配置”。

3.在弹出的输入框，输入 API 的名称，定义为 “随机获取笑话内容”展开配置，功能有点像 Postman，用于调试接口请求点击右上方调试按钮，填入我们预先准备的第三方接口，随机获取笑话发送请求后，成功获取到接口数据。

4.保存配置后，接口已经成功添加。而且数据结构，会自动解析出来，可以在页面中使用了，考虑的太到位了！

5.接口调试成功后，要在页面加载后，请求接口，获取笑话内容请求接口，需要用到 app_id 和 app_secret ，这两个值用于请求接口，和用户身份无关我们创建两个全局变量，用来记录这两个值并在应用程序加载完成后，赋初始值。

6.将数据接口请求返回的数据，与页面上的文本组件绑定，显示请求的内容。可以通过发布菜单栏，直接用手机预览小程序。注意：请求的接口根域名要手动配置到微信小程序的开发管理——服务器域名中。

7.手机上预览到的小程序。

3.3 配置云端数据库1.添加首页“ 上一条”和 “下一条” 的业务逻辑其中，“上一条”的逻辑为，读取该用户在数据库中存储已读的笑话数据，如果有数据，加载这条数据，并将该数据从数据库中移除“ 下一条”的逻辑为，将当前展示的笑话存入数据库中，标记为已读，如果超过 10 条，自动将更新时间旧的删除；同时请求接口，获取新的笑话数据，展示到屏幕上。

这里需要云端数据库，我们用 ZION 的数据模型，就可以直接创建

2.添加 “点赞” 按钮的逻辑行为，点击点赞后，将这条内容，写入数据库中，标记为用户点赞。

3.将数据库的数据，和 “我的点赞” 页面的列表绑定。历史浏览页面同理。

3.4 将微信头像和昵称绑定到我的页面在应用程序加载完成后，微信会静默登录。可以获取到用户的微信头像、昵称等信息。这里只需要将两个数据，绑定到页面上的组件上，即可完成展示。

3.5 审核和发布上线ZION 提供了一键审核和发布的功能。左侧的菜单栏的 “发布” 按钮，即可审核或发布小程序。审核页面如下：

👀尾记到这里，我们的小程序开发的差不多了还有一些细节，考虑的不是很完善一番体验下来，感觉 ZION 的无代码开发平台，产品设计的很棒有几个地方，印象深刻：页面搭建，简单的拖拽，就可以搭建出复杂的页面，以及页面间的跳转逻辑。

第三方 API 接口集成，竟然开发出了类似 Postman 的功能，不用在调试接口的时候来回切换工具了，省时省事数据库的设计，图表、表格两种展示模式，看起来更直观创建的数据模型，能够直接在页面上进行绑定或使用。

提供了函子、自定义行为等进阶用法，支持更复杂的业务逻辑开发审核和发布流程，以及网页的部署功能（没有体验），都很方便不用再单独打包和上传部署未来可期，不久的将来，ZION 还将支持 iOS、Android、Windows 和 macOS 等系统应用的无代码开发。

官网还提供了 ZION 学院和 ZION 社区，降低了学习成本，提供了遇到问题时解决渠道最后借用官网的一句话，做为结束：应用开发有点难，ZION 让它无门槛；应用开发很复杂，ZION 让它更简单；应用开发很枯燥，ZION 让它更有趣。

戳原文，赶紧体验起来吧！

亲爱的读者们，感谢您花时间阅读本文。如果您对本文有任何疑问或建议，请随时联系我。我非常乐意与您交流。