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

lwx2233 lwx2233     2022-12-03     774

关键词:

一.小程序概论

微信小程序想必大家都多少一些,这里就不在赘述。

制作这个微信小程序的前提是,你要了解到,小程序其实与前端并无太大的差异,甚至可以认为就是前端的应用展开。

所以你最好具备有对JavaScript,CSS,HTML(网页三大件)的了解,当然你不认识也可以,当初我也是零基础“临危受命”,并没有太大的影响。

二.网页三大件

微信小程序将其分为JavaScript,WXSS与WXML,其实后面的两个就是相对应的CSS与HTML,是基本一致的,所以如果你没有基础的话,我举一个例子,让你大概的了解一下

假如你需要写一个按钮,那么HTML就是这个按钮的内容,CSS就是这个按钮的样式,JavaScript就是这个按钮所能触发的事件。

三.前期准备

1.一个微信开发者工具

官网下载就是了,这个应该不用教程吧不用吧不用吧不用吧。

2.一个能够编辑JSON格式文件的编辑器

这个到时候会用到,不过你要是用文本文档,也不是不可以~

四.新建一个项目

有很多人应该会奇怪“诶新建项目这么简单,为什么要单独拿出来说呢”

实不相瞒,我曾经在这里出现过一些问题,所以把它单独写出来分享给大伙。、

1.你需要一个appid,还需要给你的appid申请云开发功能

用测试号不可以的,因为需要云开发功能,但如果你要将它发布审核的话,那就需要自己去申请一个appid(与百度地图类似),申请云开发的话,官网写得一清二楚,这边建议直接参考官网,我就不再赘述。

2.后端服务

后端的话,我这里使用的是小程序的云开发,里面自带了一个免费的云数据库,非常方便,比较适合实验室仪器管理开发使用,当然你想要自己搞一个的话也是可以的,语言选择JavaScript。

3.于是你新建了一个,结果点进去一看

诶怎么是空的,我还想着大展身手了呢。

别急,你总得先配环境吧。

假设你已经申请了appid,也给你的appid配置了云开发,那么这个时候你会有这个云开发的环境可以选择,记得勾选,之后如图所示:

这是一个模板,微信官网给你做好的模板,由于我们是从零开始,且这个模板里面的内容我们基本上用不到,当然你要留着也可以,我是推荐删掉重来的。

删掉流程如下:

1.新建一个空的非云开发项目

2.然后将云开发项目中的cloudfunctions与miniprogram清空

3.建立的非云开项目应该只有miniprogram文件夹,将其文件夹下的所有文件复制进入云开发项目的miniprogram文件夹中。

4.project.config.json文件不要替换!!!!

5.保存并打开项目,当出现cloudfunctions|字样的时候,就是成功了!

好的,如此的话,就是配置成功了,下一期正式开始讲解我们要如何着手做一个实验室仪器管理系统!我们下期再见吧!

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

书接上文,我们了解到了怎么在微信开发者工具上新建一个空的云开发项目。别急,你以为你能大展身手开始写代码了?答案是否定的,首先你要先开始对小程序进行模块拆分郦波老师有一句话说得很好:解... 查看详情

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

书接上文,我们已经“画”好了一个登录页面,接下来我们来分析一下按钮需要进行什么操作登录:获取账号与密码,上传到云数据库进行判断,如果存在用户,则跳转到下一页面,不存在则出现提示... 查看详情

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

书接上文,我们已经“画”好了一个登录页面,接下来我们来分析一下按钮需要进行什么操作登录:获取账号与密码,上传到云数据库进行判断,如果存在用户,则跳转到下一页面,不存在则出现提示... 查看详情

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

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

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

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

微信小程序踩坑集录:云数据库与云函数(代码片段)

看到有人催我更新《零基础手把手教你制作一个微信小程序云开发-实验室仪器管理系统》,很抱歉因为最近实习比较忙,同样也是在做微信小程序(OA办公平台),所以这个专栏可能会停更一段时间,这段... 查看详情

微信小程序踩坑集录:云数据库与云函数(代码片段)

看到有人催我更新《零基础手把手教你制作一个微信小程序云开发-实验室仪器管理系统》,很抱歉因为最近实习比较忙,同样也是在做微信小程序(OA办公平台),所以这个专栏可能会停更一段时间,这段... 查看详情

微信小程序踩坑集录:云数据库与云函数(代码片段)

看到有人催我更新《零基础手把手教你制作一个微信小程序云开发-实验室仪器管理系统》,很抱歉因为最近实习比较忙,同样也是在做微信小程序(OA办公平台),所以这个专栏可能会停更一段时间,这段... 查看详情

猿创征文|基于appcube应用魔方:零代码手把手教你5分钟开发微信小程序

文章目录前言一、AppCube应用魔方1.1、什么是AppCube应用魔方?1.2、为什么选择AppCube应用魔方?二、项目实验环境与资源准备2.1、实验需求及环境介绍2.2、初次订购AppCube2.3、曾订购过AppCube三、进入AppCube全新零代码界面四... 查看详情

只需6步,教你从零开发一个签到小程序

...程序soeasy!》,作者:一只程序猿。背景华为romalab实验室在构建智慧教育领域app时&# 查看详情

微信小程序|基于小程序+云开发制作一个菜谱小程序

今天吃什么?这是一个让强迫症左右为难的问题,跟随此文基于小程序+云开发制作一个菜谱小程序,根据现有食材一键生成菜谱,省心又省力。一、小程序1.创建小程序</ 查看详情

手把手教你0基础c语言速通(代码片段)

0基础速通C语言关于C语言C语言是一种通用的高级语言,最初是由丹尼斯·里奇在贝尔实验室为开发UNIX操作系统而设计的。C语言最开始是于1972年在DECPDP-11计算机上被首次实现。在1978年,布莱恩·柯林汉(BrianKernighan... 查看详情

微信小程序|基于云数据库的许愿墙(代码片段)

...话题:学习笔记 本实训项目以云开发的云数据库为基础,制作一个简易的许愿墙。01、实训内容本实训项目以云开发的云数据库为基础,制作一个简易的许愿墙,顾名思义“云数据库”就是把本项目中的愿望的数... 查看详情

超详细的java开发环境搭建指南(手把手带你开发第一个java程序)

...环境配置教程,通过图文并茂的方式详细讲解每一步骤,手把手教你安装和配置和Java环境。视频在线观看:Java零基础教程视频(适合Java0基础,Java初学入门)资料、源码下载:​​ Java零基础入门视频教程全套免费下载【适... 查看详情

手把手教你制作一款ios越狱app,伪装微信位置

说明缘由严重声明概念越狱的原理iOS目录层级结构iOS程序类型准备工作硬件设备辅助软件Mac需要的工具iOS需要使用的辅助开发工具逆向过程静态分析给App砸壳使用IDA静态分析动态调试iOS工程目录制作TweakTweak是什么了解Theos安装iOS... 查看详情

手把手教你写第一个微信小程序页面(代码片段)

搭建第一个小程序页面1.首页效果以及实现步骤  新建项目并梳理项目结构配置导航栏效果配置tabBar效果实现轮播图效果实现九宫格效果实现图片布局2.接口地址获取轮播图数据列表的接口【GET】https://www.escook.cn/slides获取九宫格... 查看详情

手把手教你写网络爬虫:网易云音乐歌单

...号的爬虫系列文章迁移过来,热热身,就当备份了。 手把手教你写网络爬虫(1)作者:拓海摘要:从零开始写爬虫,初学者的速成指南!封面:  大家好,《手把手教你写网络爬虫》连载开始了!在笔者的职业生涯... 查看详情

腾讯云技术专家卢萌凯手把手教你demo一个人脸识别程序!

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~本文来自腾讯云技术沙龙,本次沙龙主题为Serverless架构开发与SCF部署实践卢萌凯:毕业于东南大学,曾就职于华为,熟悉云行业解决方案。目前负责腾讯云中间件产... 查看详情