今天需要为大家介绍一款神器ivx

它是通用无代码开发平台,是面向新一代全栈开发人员的通过不编写代码的方式实现快速开发的软件开发平台,提供图形化逻辑编排编程语言、抽象组件、集成开发环境等能力,能够支持大部分通用软件的开发。

本质上是将以“键盘”编程为主的程序设计过程,转变为“鼠标”编程;实现降低编程学习门槛,提升开发效率的目的。

实战

如果你是一个编程小白,或者说你不怎么会使用编程。但是,你又想开发一个“微信小程序”,那么ivx平台绝对是你的首选,仅仅只需要“拖拉拽”,就能帮助我们开发一款小程序。

官网: https://www.ivx.cn/

黄同学仅仅学习了3天,就可以制作这样一个简单的微信小程序。因此呢,我写了这一篇保姆级教程,来教你如何制作。

1、前期素材准备

我为大家简单录制了一个视频,功能和界面都很简单。我相信,随着你学习的深入和熟练程度,在复杂的界面,你同样可以开发出来。

前期的素材准备很重要,你的界面需要什么元素,你就需要制作什么元素,这里我为大家提供了如下3个要准备的素材。

  • 查询.png:是主界面中的“按钮”;
  • 学生成绩表.xlsx:是数据库文件;
  • 封面.jpg:是发布小程序时,小程序的主封面;

有了前期的准备工作,我们开始我们的实战案例讲解。

2、步骤详解

① 打开网站,创建应用

我们不需要下载任何软件,就可以制作一个“微信小程序”,是不是很好玩?

首先,我们打开ivx的官网https://www.ivx.cn/,第一件事,是注册和登录。

登陆上网站后,点击右上角的“工作台”。

当出现如下界面后,点击“新建应用”。

由于我们制作的是一个“微信小程序”,所以这里选择第三个,同时娶一个“应用名称”,点击“创建”即可。

② 添加文本框、输入框

观察这个小程序的主界面,这里有两个文本框、两个输入框,我们依次添加即可。

最终效果如图所示,每个对应元素均在中间的“画布”中显示,并在右侧的“页面”栏目显示每个对应元素的名称。

此时,你把光标放在不同的元素名称处,那么它会在自动在“画布”中,选中它对应的元素,如下图所示。

当界面复杂时候,我们往往需要用到多个文本框和输入框,为了区分它们,我们可以为它门命名,如下图所示。

② 调节“提示信息”文本框的元素

首先,我们选中“提示信息”这个文本框,左侧方框其实就可以调整该文本框的各种元素。

这里我们需要设置两个东西:

  • ① 文本框的内容;
  • ② 文本框的位置;

大家按照图中的操作即可,或者说你按照你想摆放的位置,进行调节。

③ 调节“查询结果”文本框的元素

首先,我们选中“查询结果”这个文本框,左侧方框其实就可以调整该文本框的各种元素。

这里我们需要设置两个东西:

  • ① 文本框的内容和颜色;
  • ② 文本框的位置;

大家按照图中的操作即可,或者说你按照你想摆放的位置,进行调节。

④ 调节“查询条件1”输入框的元素

首先,我们选中“查询条件1”这个输入框,左侧方框其实就可以调整该输入框的各种元素。

这里我们需要设置两个东西:

  • ① 输入框的提示内容;
  • ② 输入框的位置;

大家按照图中的操作即可,或者说你按照你想摆放的位置,进行调节。

⑤ 调节“查询条件2”输入框的元素

首先,我们选中“查询条件2”这个输入框,左侧方框其实就可以调整该输入框的各种元素。

这里我们需要设置两个东西:

  • ① 输入框的提示内容;
  • ② 输入框的位置;

大家按照图中的操作即可,或者说你按照你想摆放的位置,进行调节。

⑥ 插入一个“图片”按钮元素

至此,整个小程序的主界面 ,已经搭建起来。

这里唯独差一个“查询”按钮和“背景色”。


首先,我们先来调整一下“背景色”。按照图中提示,完成图中两个操作。

接下来,我们为“主界面”添加一个“查询”按钮,这是一张图片。

完成上述操作后,最终效果如图所示。

对于“查询”按钮 元素,我们需要设置4个内容。

  • ① 修改元素名称;
  • ② 设置等比缩放;
  • ③ 调整图片大小;
  • ④ 调整图片摆放位置;

完成上述操作后,最终效果如图所示。

此时,整个效果图出来了,看着不错吧!

⑦ 选择一个数据库

我们查询的数据哪里来呢?这里我们就利用一个Excel表格,充当我们的数据库。

首先,完成图中的操作。

接着,在完成图中的操作。

最终效果如图所示:

在上图中,我为大家标注了0、1、2,这是每一行每一列元素,所对应的索引。和编程语言一样,你想要获取每个元素,知道索引值就可以。

⑧ 为“查询按钮”添加一个事件

“事件”是什么呢?

它可以看作是一系列的连锁反应,用于连接各部分组件。

此时,我们虽然做出了整个界面的样子,但是他们之间毫无关联,“事件”就是用来建立它们之间的联系。


首先,我们点击图中的按钮。

接着,完成图中的一系列设置。

大致意思是这样的: 每次当我们点击这个“查询按钮”,它会返回“账号数据库1”中的数据,但是要满足两个条件。“学号”等于“查询条件1”中的内容,“姓名”等于“查询条件2”中的内容。每次查询完成后,就给查询结果“赋值”,它的输出结果是“账号数据库1”表格中的0行3列的分数。

完成上述所有操作后,我们可以预览一下效果:

试验一下:

最后,我们就可以发布我们的“微信小程序”了。

不用写一行代码,就能用ivx制作一个“微信小程序“,超牛逼相关推荐

  1. 分享下自己写的一个微信小程序请求远程数据加载到页面的代码

    分享下自己写的一个微信小程序请求远程数据加载到页面的代码 1  思路整理 就是页面加载完毕的时候  请求远程接口,然后把数据赋值给页面的变量 ,然后列表循环 2 js相关代码  我是改的 onload ...

  2. 手把手教你写一个微信小程序日历组件

    今天我们一起写一个微信小程序日历组件 微信小程序日历组件 github.com/749264345/w- 好,我们先看一下要实现的模样,如下图 由以上截图我们可以看到 1.日历可以通过按钮[切换展示效 ...

  3. 微信小程序+PHP 从零写一个微信小程序

    微信小程序是越来越火,参与其中的开发者也越来越多,但是很多朋友都是只懂小程序前端开发,或者是只懂 PHP 开发,本 Chat 就是想让这部分人能够自己一个人把前后端串起来,做一个专属自己的微信小程序. ...

  4. 【效率】微软开源最强Python自动化神器!不用写一行代码!

    相信玩过爬虫的朋友都知道selenium,一个自动化测试的神器工具.写个Python自动化脚本解放双手基本上是常规的操作了,爬虫爬不了的,就用自动化测试凑一凑. 虽然selenium有完备的文档,但也 ...

  5. 写一个微信小程序的代码

    微信小程序是使用小程序框架开发的,主要使用 WXML 和 WXSS 两种语言构建用户界面,使用 JavaScript 来编写逻辑. 以下是一个简单的微信小程序示例代码: <!-- index.w ...

  6. 微信小程序python数据交换代码_一个微信小程序通过 DDP 协议和 Meteor 后端交换数据的简单例子...

    simple-todos-react 是一个 meteor 的 React todo list 例子.我有一点改动,主要是在插入时需要用户登录改为了不用登录就可以添加新任务,这样小程序就可以添加新任务 ...

  7. CSS处理文字一行显示,超出用省略号。包含一个微信小程序使用css文字溢出一行显示的一个bug

    一.核心代码   注意:text-overflow 必须要搭配 white-space 才能生效 overflow: hidden; /* 文字溢出隐藏 */ white-space: nowrap; ...

  8. 写一个微信小程序,加拿大移民分数计算器

    如果你想写一个加拿大移民分数计算器的微信小程序,你需要遵循以下步骤: 首先,你需要了解如何使用微信小程序开发工具,包括如何创建小程序项目.如何编写代码和如何调试小程序. 然后,你需要了解加拿大移民分数 ...

  9. taro做项目html写在哪里,用Taro写一个微信小程序(一)——开始一个项目

    一.Taro简介 1.名字由来 Taro['tɑ:roʊ],泰罗·奥特曼,宇宙警备队总教官,实力最强的奥特曼. 2.taro是什么 Taro 是一个开放式跨端跨框架解决方案,支持使用 React/Vu ...

最新文章

  1. android 拖动数字选择,拖放android 3.x导致illegalStateException之后的小数字拖动
  2. iOS10 UI教程子视图和父视图UI层次结构和Views继承
  3. Linux_RHEL_设置网络
  4. python中中括号中的负数
  5. iptables如何添加容许某个端口的访问
  6. 并发编程的艺术:第二章
  7. 小程序[渲染层网络层错误] failed to load image_游戏中水的渲染技术
  8. 华为云推出全自研数据库,GaussDB(openGauss)能否撑起一片天?
  9. C++ lower_bound 与 upper_bound 函数
  10. [论文阅读] iCaRL: Incremental Classifier and Representation Learning
  11. 经验:多表复制(结构、数据)
  12. 关于大型网站技术演进的思考(十)--网站静态化处理—动静整合方案(2)
  13. token与JWT详细介绍
  14. Codeforces 887D - Ratings and Reality Shows
  15. 错误代码warning C4013: ‘sqrt‘ undefined; assuming extern returning int怎么解决?
  16. android模拟器装包,逍遥模拟器如何安装本地应用包apk?
  17. 学术论文等级划分(包括EI会议论文)
  18. 操作BLOB、CLOB、BFILE
  19. 注册Office教育版账号流程实现oneDrive1TB储存
  20. 黑马学员放弃20K月薪投身比亚迪,是去「车间」打螺丝吗?

热门文章

  1. Prometheus 查询语言 PromQL 的 CPU 使用率计算方法
  2. php 怎么打开一个pdf,pdf是什么?用什么打开?
  3. 深入浅出系列1:词向量
  4. moviepy多张图片合成视频
  5. 知网下载论文(通过深圳图书馆)
  6. 母牛的故事——无脑模拟解法
  7. poj 1383 Labyrinth
  8. Java 并发面试题解
  9. 专家教你如何使用google
  10. 前端——将png图片做成icon