不用写一行代码,就能用ivx制作一个“微信小程序“,超牛逼(代码片段)

数据分析与统计学之美 数据分析与统计学之美     2022-12-11     241

关键词:

今天需要为大家介绍一款神器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制作一个“微信小程序“,超牛逼(代码片段)

今天需要为大家介绍一款神器ivx。它是通用无代码开发平台,是面向新一代全栈开发人员的通过不编写代码的方式实现快速开发的软件开发平台,提供图形化逻辑编排编程语言、抽象组件、集成开发环境等能力,能够... 查看详情

ivx低代码平台——微信小程序获取用户信息

...xff0c;快速建立小程序内的用户体系。本文将向大家展示低代码开发:小程序实现获取用户信息的方法,供大家参考。文章目录写在前面开发概述准备工作用户组件发起小程序登录用户组件获取当前用户信息微信小程序组... 查看详情

微信小程序|基于小程序+c#制作一个考试答题小程序

基于小程序+C#制作一个考试答题小程序打破传统线下考试答题的边界线问题,使考试不用再局限与某个统一的场所,只要有设备,哪里都能考试。一、小程序 查看详情

十小程序实战(ivx快速开发教程)

...录与WebApp略有差别,其它逻辑实现较为类似。我们先制作页面,之后再实现功能。由于之前已经完成了一个Web站点的编写,在此为了节省阅读成本,同样重复的内容不再进行赘述。文章目录十、小程序实战1 查看详情

我最近开发了一款免费计件app,不需要安装,微信小程序打开就能用

我最近开发了一款免费计件app软件,它是一款员工用于计件工资的软件,计件账本是一款适用于帽厂、服装厂、鞋厂、包袋厂等厂员工记件的账本,改变原来纸制化记录,更方便计算和统计一目了然软件升级:目前正在开发企业... 查看详情

微信小程序制作java语言支持写吗?

是只写小程序某个部分?是端口吗?java语言是面向对象开发语言,网页和小程序是基于html开发,小程序对html进行了封装,java只是数据支持。你要学html,小程序和网页都是html.参考技术A可以写服务端,你这个怎么说呢。你会java... 查看详情

微信小程序怎么制作自己的程序

...开指定网页)NativeApp(原生开发,也就是使用iOS和Android代码开发)HybridApp(混合APP开发,写DIV+CSS+JS+PHP代码开发)(2)微信、公众号、小程序微信:就是一个聊天工具(类似于QQ)微信公众号:企业或个人组织管理其粉丝/用户... 查看详情

微信小程序代码怎么写?

参考技术A不懂代码怎么制作微信小程序首先看一下官方的干货:mp.weixin.qq/...201714指南包括小程序产品定位功能介绍,设计规范,开发入门教程,小程序数据相关分析等等一系列新手教程,接近手把手教,只要认真看总会有所感... 查看详情

零基础手把手教你制作一个微信小程序云开发-实验室仪器管理系统(代码片段)

...理清楚我们想要制作的小程序的大致框架后,开始写代码。有人就会问了,“皮卡丘,你说JavaScript,wxml,wxss,我要先写那个呢?”#你需要先将功能实体“画”出来,才可以继续给它赋予功能换句... 查看详情

零基础手把手教你制作一个微信小程序云开发-实验室仪器管理系统(代码片段)

...理清楚我们想要制作的小程序的大致框架后,开始写代码。有人就会问了,“皮卡丘,你说JavaScript,wxml,wxss,我要先写那个呢?”#你需要先将功能实体“画”出来,才可以继续给它赋予功能换句... 查看详情

十分钟学会微信小游戏,攀登不止小游戏制作(ivx快速开发教程十一)

十一、攀登不止小游戏制作制作微信小游戏大致流程与微信小程序、Web类似,不同的在于是组件的使用。我们此节需要完成的小游戏需求为:小球触碰矩形块会跳跃或攀爬小球触碰顶部或底部游戏结束点击屏幕将会使小... 查看详情

微信小程序|基于小程序+c#制作一个聊天系统(代码片段)

此文主要基于小程序+C#使用WebSocket制作一个聊天系统,基本实现小程序与服务端的聊天功能。用小程序自带的客服功能只能绑定微信且一对一沟通,接入市面上成熟的即时通讯预算又略显不足,干脆自己开发一个... 查看详情

基于微信小程序+爬虫制作一个表情包小程序(代码片段)

...爬虫表情包小程序,从源头解决问题,从此再也不用担心在斗图中落入下风精彩专栏持续更新↓↓↓微信小程序实战开发专栏一、API1.1项目创建1.2图片爬虫帮助类1.3测试窗体1.4接口封装二、小程序2.1项目创建2.2页面设计2.... 查看详情

不写一行代码即可运行一个应用

...件化的功能,正像其官方网站所介绍的那样,你甚至可以不用写一行代码,就可运行一个应用:“SpringBootmakesiteasytocreatestand-alone,production-gradeSpringba 查看详情

微信小程序使用swiper制作一个滑动导航(代码片段)

最近在做一个导航的时候,发现使用overflow-x:auto来做多内容滑动导航效果很不好,思索是不是可以使用swiper来做一个,研究了下其实发现原理基本相同这里说下,要用swiper做导航菜单,有几个要特别注意的参数1:autoplay,官方说... 查看详情

微信小程序|使用小程序制作一个核酸检测点查询工具(代码片段)

小程序创建小程序申请腾讯地图用户key实现小程序界面全国省市区数据API提交资料认证并申请接口拼接参数调用接口渲染数据优化细节出门在外,没有核酸证明寸步难行,此文将教你如何通过小程序制作一个工具帮你在... 查看详情

后台页制作01《ivx低代码签到系统制作》

制作iVX低代码项目需要进入在线IDE:https://editor.ivx.cn/一、签到系统思考签到系统一般是指公布一个签到链接或者二维码,随后用户扫码后即可完成签到。那如何制作呢?首先我们可以先不考虑签到页面的制作,既... 查看详情

后台页制作01《ivx低代码签到系统制作》

制作iVX低代码项目需要进入在线IDE:https://editor.ivx.cn/一、签到系统思考签到系统一般是指公布一个签到链接或者二维码,随后用户扫码后即可完成签到。那如何制作呢?首先我们可以先不考虑签到页面的制作,既... 查看详情