最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通

您所在的位置:网站首页 微信上有教材答案的小程序 最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通

最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通

2024-06-26 12:19:07| 来源: 网络整理| 查看: 265

大家好,又见面了,我是你们的朋友全栈君。

讲解课程:https://edu.csdn.net/course/detail/9531

写在前面1,讲解视频

视频课我会在B站免费提供给大家,欢迎关注,欢迎三连。 https://space.bilibili.com/419474640/video

最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通2,配套笔记

配套笔记会在csdn上免费给到大家,欢迎关注,笔记会持续更新。 https://blog.csdn.net/qiushi_1990

最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通3,支持石头哥😊3-1,源码和配套资源获取

目前源码和配套的一些资源暂时不免费,如果有需要的同学可以私聊石头哥,拿米来换。

最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通3-2,笔记电子书

笔记我也有整理一套电子书,大家也可以私聊石头哥获取电子书版的配套笔记。电子书笔记方便后期查询知识点。

最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通4,问题解答(●’◡’●)

另外石头哥提供配套解答服务。当然了,知识付费时代石头哥解答是要米的,毕竟石头哥精力有限,石头哥也是要吃面包的。石头哥有推出包月,包年解答服务。你在学习过程中有任何问题,或者工作中遇到任何编程问题,都可以来找石头哥 石头哥目前可以解答如下问题

小程序方面的问题云开发方面的问题Java,springboot,Javaweb方面的问题毕设方面的问题安卓app开发方面的问题html+css+JavaScript方面的问题前端开发的问题后端开发的问题面试找工作方面的问题 最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通

从今天开始就来带领大家学习微信小程序了,只要你跟着我一步步来,相信你也可以上线一款属于自己的微信小程序。

一,认识小程序

微信⼩程序,简称⼩程序,英⽂名 Mini Program Mini Program ,是⼀种不需要下载安装即可使⽤的应⽤,它实现 了应⽤“触⼿可及”的梦想,⽤⼾扫⼀扫或搜⼀下即可打开应⽤

1-1,微信小程序的优势1.微信有海量⽤⼾,⽽且粘性很⾼,在微信⾥开发产品更容易触达⽤⼾;2.推⼴app或公众号的成本太⾼。3.开发适配成本低。4.容易⼩规模试错,然后快速迭代。5.跨平台。

通过小程序和app的使用步骤,更容易看出来

最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通

可以看出小程序和app使用相比:免安装,免注册,免卸载。正如张小龙所说“随用随走”

1-2,小程序发展前景

通过腾讯2020年财报可以看出,2019年上线小程序已经超过100万个,小程序日活也已经突破4亿

最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通

2019年小程序带动就业536万个,所以我们不管是学习小程序开发,还是学习小程序运营,都有很广的就业前景。

最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通1-3,小程序发展历史2016年1月11日,微信之父张小龙时隔多年的公开亮相,解读了微信的四大价值观。张小龙指出,越来越多产品通过公众号来做,因为这里开发、获取用户和传播成本更低。拆分出来的服务号并没有提供更好的服务,所以微信内部正在研究新的形态,叫「微信小程序」。2016年9月21日,微信小程序正式开启内测。在微信生态下,触手可及、用完即走的微信小程序引起广泛关注。腾讯云正式上线微信小程序解决方案,提供微信小程序在云端服务器的技术方案。2017年1月9日0点,万众瞩目的微信第一批微信小程序正式低调上线,用户可以体验到各种各样微信小程序提供的服务。2017年12月28日,微信更新的 6.6.1 版本开放了小游戏,微信启动页面还重点推荐了小游戏「跳一跳」,你可以通过「微信小程序」找到已经玩过的小游戏。2018年1月18日,微信提供了电子化的侵权投诉渠道,用户或者企业可以在微信公众平台以及微信客户端入口进行投诉。2018年1月25日,微信团队在“微信公众平台”发布公告称,“从移动应用分享至微信的小程序页面,用户访问时支持打开来源应用。同时,为提升用户使用体验,开发者可以设置小程序菜单的颜色风格,并根据业务需求,对小程序菜单外的标题栏区域进行自定义。2018年3月,微信正式宣布微信小程序广告组件启动内测,内容还包括第三方可以快速创建并认证小程序、新增小程序插件管理接口和更新基础能力,开发者可以通过微信小程序来赚取广告收入。除了公众号文中、朋友圈广告以及公众号底部的广告位都支持微信小程序落地页投放广告,微信小程序广告位也可以直达小程序。2018年7月13日,微信小程序任务栏功能升级,新增“我的微信小程序”板块;而微信小程序原有的“星标”功能升级,可以将喜欢的小程序直接添加到“我的微信小程序”。2018年8月10日,微信宣布,微信小程序后台数据分析及插件功能升级,开发者可查看已添加「我的微信小程序」的用户数。此外,2018年8月1日至12月31日期间,微信小程序(含小游戏)流量主的广告收入分成比例优化上调,单日广告流水10-100万区间的部分,开发者可获得的分成由原来流水的30%上调到50%,优质微信小程序流量主可获得更高收益。2018年9月28日,微信“功能直达”正式开放,商家与用户的距离可以更“近”一步:用户微信搜一搜功能词,搜索页面将呈现相关服务的微信小程序,点击搜索结果,可直达微信小程序相关服务页面。2019年8月9日,微信向开发者发布新能力公测与更新公告,微信 PC 版新版本中,支持打开聊天中分享的微信小程序。安装最新PC端测试版微信后,点击聊天中的微信小程序,便会弹出微信小程序浮窗。而在微信小程序右上角的操作选项中,可以进行“最小化”操作,让微信小程序像其他PC软件一样最小化,排列于Windows系统的任务栏中。1-4,为什么学习小程序

我们上面了解完小程序的优势和历史以后,就知道我们为什么要学习小程序了

依赖微信生态就业面广上手快学习完微信小程序以后,再去学习百度小程序,抖音小程序,支付宝小程序就很方便了。因为这些小程序api都很相似。相对于Java,php,python而言,小程序更适合作为编程的入门语言相对于传统前端开发,我们在学习小程序的同时就可以学习css,JavaScript的知识1-5,微信小程序对创业者的优势App开发的推广成本过高移动互联网格局已定,用户需求被各路巨头把持,我们要想在移动互联网有一番作为,微信是不可避免的靠山小程序能以最小的成本,最快的速度验证你的商业模式。二,开发者工具

工欲善其事必先利其器,所以我们在开发小程序之前必须准备好一款适合自己的开发者工具,这里我给大家推荐官方开发者工具。原因有以下几点

官方的所有更新,都会第一时间在官方开发者工具同步有任何问题,可以直接反馈给官方官方开发者工具更新迭代最及时我们用官方开发者工具,使用一些官方功能最稳定。 下面就来教大家如何下载官方开发工具2-1 官方开发者工具下载地址

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 建议大家下载最新的稳定版本

最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通

然后点击自己电脑对应系统的版本下载即可。至于安装很方便,只需要双击安装包,不停的点下一步即可,安装完成以后的官方开发者工具长这样。

最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通2-2,认识微信开发者工具

我们安装好开发者工具以后,只需要双击打开即可。

最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通

通常我们第一次打开,会出现上图所示的,只需要用微信扫描即可登录开发者工具。扫码登录以后会出现下面这样的界面。

最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通三,创建属于自己的第一个小程序

上面第二步已经安装好开发者工具了,接下来就来教大家如何创建一个最简单的小程序

3-1,在桌面上创建一个空白文件

名字可以随便取,我这里习惯取小石头

最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通3-2,点击 + 号,创建小程序。最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通3-3,小程序项目配置

这里需要注意下,小程序官方最新的开发者工具有了变化,所以你创建项目时如果不长下面这样。可以跳过这个图片,看下面新版的

最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通

新版的如下,多了一个模板选择,这里注意:要选择不使用模板。

最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通

配置好以后,点新建,即可创建属于自己的第一个小程序,然后创建会有一个过程,耐心等待即可。

最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通3-4,熟悉开发者工具最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通3-5,开发者工具个性化的配置

主要给大家讲一些个性化的配置

最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通

我们可以配置主题颜色,模拟器位置,这些完全可以根据个人喜好进行设置。

最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通3-6,小程序结构目录

下图是程序目录,每一个我都给大家标注出来了,大家前期不用死记硬背,后面开发学习过程中,用的多了, 自然就记住目录下每个文件的作用了。

最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通四,小程序开发三剑客4-1小程序三剑客: wxml+wxss+js

1, wxml主要用来布局组件的(相当于大楼结构) 如:楼有几层,每层有多少房间,有什么设备 2, wxss主要决定显示样式(决定大楼的样式) 如:颜色,大小,宽高等 3, js主要用来处理逻辑(决定大楼具备哪些功能) 如:大楼具有电梯功能,空调制冷,灯光,供水,供电,主要是为了大厦的运行。

下面画个图,来说明三者的关系。

最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通4-2,小程序文件和传统web对比

结构

小程序

传统web

结构布局

Wxml

Html

样式

Wxss

Css

逻辑

JavaScript

JavaScript

配置

Json

五,小程序常见组件的学习5-1,认识view组件

view组件:相当于一个盒子,可以用来装一些别的组件 https://developers.weixin.qq.com/miniprogram/dev/component/view.html 如果大家有html的web基础,就可以把我们小程序里的view理解为html里的div标签。如果你没学过也无所谓,直接跟着我学习view即可。

5-2,认识text组件

text组件:主要用来显示文字的 https://developers.weixin.qq.com/miniprogram/dev/component/text.html

5-3,认识input组件

input组件主要用来获取用户输入的信息的,一般在用户填写信息,提交数据,登录注册时会用到。 https://developers.weixin.qq.com/miniprogram/dev/component/input.html

5-4,认识button组件

button 组件:是按钮组件,自带默认的按钮效果,我们后面会经常用到 https://developers.weixin.qq.com/miniprogram/dev/component/button.html

六,函数和事件的学习6-1,注释的学习

我们在学习后面课程之前,先来学习下注释。注释是在代码里给予提示使用的,主要是让别人更快的熟悉你的代码,也方便后期自己看自己的代码,快速回忆起来使用的。 — 注释有快捷键的 —

window电脑:Ctrl+/mac电脑:command+/wxml里的注释如下最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通wxss里的注释最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通js里的注释最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通6-2,日志打印的学习

我们在学习点击事件之前,需要先学习日志(log)的打印,因为我们开发过程中会经常用到日志打印。日志打印的语法如下

代码语言:javascript复制console.log("我的打印出来的日志内容")最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通6-3,函数的学习

函数的两种使用方式如下图:

最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通6-4,点击事件的学习

我们如果想给一个组件定义点击事件,就要用到bindtap,我们给一个组件绑定点击事件的语法如下。

最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通

我们给一个组件定义点击事件,主要是给组件定义一个 bindtap=“事件名”,然后再js页面里定义和事件名一样的函数即可。视频里会作详细讲解

6-5,获取用户输入信息

我们获取用户输入会用到bindinput事件,其实我们在学习input组件时,官方有给出这个属性的。https://developers.weixin.qq.com/miniprogram/dev/component/input.html

最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通

看官方的文档,可以知道bindinput主要是为了获取用户的输入内容。 bindinput的定义如下图。

最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通

在wxml里定义好bindinput事件以后,在js页面再定义一个和事件名一样的函数即可。视频里会作详细讲解。如果你有买老师的课程,或者购买老师的年卡,可以获取对应的学习视频。

七,变量的学习7-1,什么是变量

用大白话讲:变量就是一个装东西的盒子 再通俗些讲:变量就是用于存放数据的容器,我们通过变量名获取对应的数据。

最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通

如上图所示,我们的盒子(变量)可以装名字,布尔类型的true,还可以用来装数字。 变量的本质:就是在程序的内存中申请一块用来存放数据的空间。

7-2,变量的组成

变量由变量名和存储的值组成,语法如下

代码语言:javascript复制var x = 7; var y = 8; var z = x + y; 从上例中,您可知道x,y,z是三个不同的变量名: x 存储值 7 y 存储值 8 z 存储值 15

变量有点类似我们的酒店房间。一个房间就可以看作是一个变量。例如我们的808号房间是情侣间。那么808这个房号就相当于我们的变量名,情侣间就是这个变量存储的值。

7-3,变量的使用

变量在使用时分两个步骤:

1,声明变量

来看下具体代码

代码语言:javascript复制//声明变量 var age

这段代码的意思是声明一个叫age的变量 var是一个JavaScript关键字,用来声明变量,使用该关键字声明变量以后,计算机会自动为变量分配一个内存空间,用来存储数据。 age就是我们的变量名,我们要通过变量名来访问到计算机内存里分配的空间。

2,赋值

还是拿我们的酒店房间来举例,声明变量就相当于在前台办理入住,确定要住那个房间,也就是确定房间号(变量名),然后确定房间号对应的房型,比如单人间,双人间,情侣间。而确定房型就相当于是给变量赋值。

代码语言:javascript复制//给age赋值 age=10

这段代码的意思,就是给age变量赋值为10 上面的 = 用来把右边的值赋给左边的变量名,也就是把我们的变量名age指向数值10,就可以用age来操作我们的数值了。赋值的目的就是为了后面使用数值。

7-4,变量的初始化

我们上面变量的使用可以直接写到一行

代码语言:javascript复制var age=10

声明变量同时给变量赋值,我们称之为变量的初始化。

7-5,变量的重新赋值

一个变量可以被重新赋值,新的赋值会覆盖掉前面的赋值,变量值将以最后一次赋的值为准。

代码语言:javascript复制var age=10 age=18

如上面的代码,我们的变量age先被赋值10,后又被赋值18,那么最后我们的age就是18 这就好比,酒店的房间,808屋一开始住的是石头哥,后面石头哥走了,刘德华住进去了,那这个时候你再去808找人,找到的就是刘德华了。

7-6.变量的命名规范名称可包含字母、数字、下划线和美元符号名称必须以字母开头名称对大小写敏感(y 和 Y 是不同的变量)不能是关键字,保留字(比如 JavaScript 的关键词)遵守驼峰命名法,首字母小写,后面的单词的首字母大写。如userName最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通7-7,变量的小案例

还记得我们的6-5这节学习了如何获取用户输入的信息吗?我们是不是可以用变量来存储我们获取到的用户输入信息呢。

最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通

讲解视频里会做详细讲解:《零基础入门小程序开发》

7-8,全局变量和局部变量

局部变量:变量在函数内声明,只能在函数内部访问。 全局变量:变量在函数外定义,整个代码都可以调用的变量。

最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通

如上图所示的局部变量和全局变量的定义。

八,数据类型8-1,认识数据类型

上一节变量的学习,我们知道变量是用来装数据的盒子,可是数据有很多,有各种各样的类型。不同类型的数据占用的计算器内存也不一样。就好比胖子睡大床,瘦子睡小床就行。 在计算机中不同的数据占用的存储空间是不同的,为了便于区分,充分利用存储空间,于是就定义了不同的数据类型。 简单来说,数据类型就是数据的类别型号,比如“张三”是个人名,18是个数字

8-2,常见的数据类型

我们的数据类型可以分成下面两大类

简单数据类型(Number String Boolean Undefined Null)复杂数据类型(Object)简单数据类型

简单数据类型

描述

默认值

Number

数字型,包含整数和小数,如 18,18.8

0

String

字符串型,如“小石头”。注意js里字符串都要带引号

“”

Boolean

布尔值类型,就true和false两个值,代表正确和错误

false

Undefined

Undefined 这个值表示变量不含有值,如var a;声明了变量a,但是没有赋值,就是undefined

undefined

Null

空值,如var a=null,声明了变量a为空值

null

8-3,数字型Number

js数字类型的数据,既可以是整数,也可以是小数(浮点数)

代码语言:javascript复制var age=21 //整数 var PI=3.1415 //小数8-4,字符串String

用引号或者双引号包起来的都是字符串类型,如 “编程小石头”,‘石头哥’都是字符串。字符串和羊肉串有点像,羊肉串是用竹签把羊肉一串串的串起来。字符串就是把字符串起来。

代码语言:javascript复制var name="编程小石头" //字符串 var age1="18" //字符串 var age2=18 //数字型

上面代码的age1和age2是有区别的,age1的18被双引号包裹着,所以是字符串,age2就是一个数字18,所以是数字型。这也进一步说明了,只要是被单引号或者双引号包裹着的都是字符串类型。

字符串长度

字符串是由若干字符组成的,这些字符的数量就是字符串的长度,通过字符串的length属性可以获取整个字符串的长度。 还是拿羊肉串来类比,比如你一个羊肉串上串了5块羊肉,那么这个羊肉串的长度就是5。 使用的语法如下

代码语言:javascript复制 var name="编程小石头" console.log(name.length) //这里的输出结果是5字符串的拼接

多个字符串之间可以使用 + 进行拼接,其拼接方式为 字符串+字符串=拼接之后的新字符串。 语法如下:

代码语言:javascript复制 var name="编程小石头" var weixin=2501902696 var test=name+weixin console.log(test) //输出结果:"编程小石头2501902696" console.log(12+12)//输出结果:24 console.log("12"+12)//输出结果:1212

上面的12+12=24,“12”+12=“1212” 这就告诉我们字符串加任何类型的数据,拼接后的结果都是字符串。

8-5,布尔型Boolean

布尔类型有两个值:true和false,其中true表示真,false表示假。

代码语言:javascript复制var flag=true8-6,Undefined和Null

一个声明后没有赋值的变量会有一个默认值 undefined 一个声明变量,并且赋值null,就代表这个变量是空值(学习object对象时,我们会继续研究null) null 和 undefined 的值相等,但类型不同,下面的8-7会有代码演示

8-7,typeof 操作符

typeof 操作符用来检测变量的数据类型

代码语言:javascript复制typeof "John" // 返回 string typeof 3.14 // 返回 number typeof false // 返回 boolean

打印null和undefined的数据类型如下

代码语言:javascript复制 var aaa=undefined var bbb=null console.log(aaa==bbb)//输出结果:true console.log(typeof aaa)//输出结果:undefined console.log(typeof bbb)//输出结果:object

注意:这里的 == 用来判断值是否相等,后面会讲。 上面的代码可以看出:null 和 undefined 的值相等,但类型不同

8-8, 数据类型的转换

就是把一种数据类型的变量转换成另外一种数据类型,比如把字符串的 “18”转换为数字类型的18 常用的数据类型转换

把其他类型转为字符串型把其他类型转为数字型转换为字符串

方式

说明

案例

toString()

转为字符串

var num=1 num.toString()

String()

转为字符串

var num=1 String(num)

用加号拼接字符串

转为字符串

var num=1 “”+num

转换为数字型(重点)

方式

说明

案例

Number()

将字符串转换为数字

Number(“3.14”) // 返回 3.14

parseFloat()

解析一个字符串并返回一个浮点数

parseFloat(“3.12”) //返回3.12

parseInt()

解析一个字符串并返回一个整数

parseInt(“3.12”) //返回3

转为数字的几个特殊情况

代码语言:javascript复制console.log(Number(""))//空字符串转换为 0 console.log(Number(true))//true转换为1 console.log(Number(false))//false转换为0 console.log(Number("编程小石头"))//其他的字符串会转换为 NaN (不是个数字)九,综合小案例~开发简单的计算器9-1,数据绑定

在学习这个综合案例之前,我们需要先学习下小程序的动态数据绑定。数据绑定的语法如下

代码语言:javascript复制 { {message}} // js里如下 Page({ data: { message: '我是动态绑定的数据' } })9-2,效果图预览

上一节和大家讲解了小程序的一些常用组件,这节就带大家写出自己的第一个简单计算器。做一个综合性的练习。由于是入门,这里先教大家简单的加法运算。效果图如下

1.png1.png

实现起来特别简单,代码也特别少,就下面三个

index.wxml:上图的布局视图页index.js:实现加法逻辑的页面app.json:一些全局的配置。基本是都是默认的这里不用管 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n1U75mfw-1597396869759)(https://upload-images.jianshu.io/upload_images/6273713-2b8639cf9f1fc8ea.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)] 下面就带带大家敲出属于自己的计算器小程序代码。9-3,先看index.wxml代码语言:javascript复制 + 计算 结果为:{ {result}}

代码虽然少,但是作为刚入门的你,看起来可能很茫然,下面详细给大家讲下。

代码语言:javascript复制

就是我们输入数字a的输入框,这里input就是我们认识的第一个小程序组件。 input的官方简介如下:https://developers.weixin.qq.com/miniprogram/dev/component/input.html placeholder:设置默认显示文字(当我们输入文字时,默认的就没有了) bindinput=“inputa”:定义一个inputa方法来获取input的输入内容。在index.js中会用到

+ 这里的 组件是用来显示文本的这里我们只是为了显示一个 + 号 代码语言:javascript复制计算

这里是个按钮就是我们的计算按钮 bindtap=‘sum’:定义个叫sum的方法,用来计算结果在index.js中会用到

结果为:{ {result}} { {result}} 这种写法,是小程序用来绑定数据用的,这里用来显示我们的计算结果用的,上面代码和对应的显示如下:4.jpg4.jpg9-4,再来看index.js,我们加法的逻辑实现

可以看到我们在index.wxml里定义的bindinput=“inputa”,bindtap=’sum’在下面有用到

代码语言:javascript复制Page({ /** * 页面的初始数据 * 初始化两个输入值 */ data: { input1: 0, input2: 0 }, //获取用户输入的值a inputa: function (e) { this.setData({ input1: e.detail.value }) }, //获取用户输入的值b inputb: function (e) { this.setData({ input2: e.detail.value }) }, // 拿到两个输入值以后求和 sum: function (e) { var a = parseInt(this.data.input1); var b = parseInt(this.data.input2); // 求和 var sumResult = a + b this.setData({ // 把结果赋值到sum标签上 result: sumResult }) } })

index.js的代码不多,大家可以先照着敲一下。学小程序前期不需要你理解,但是一定要多敲多练。 这里的逻辑用文字写出来,估计大家新入门时还是不太好理解,我会录视频来给大家讲解。

9-5,作业,自己写一个减法计算器十,运算符

运算符也被称为操作符,是用于实现赋值,比较和运算等功能的符号。

10-1,算数运算符

运算符

描述

例子

x 运算结果

+

加法

x=5+2

7

减法

x=5-2

3

*

乘法

x=5*2

10

/

除法

x=5/2

2.5

%

取模(余数)

x=5%2

1

10-2,表达式和返回值

表达式:是由数字,运算符,变量等以能求得结果的有意义的操作组成的式子。 表达式最终都会有一个结果返回给我们,这个返回结果我们称之为返回值

如 let x=1+1 这里的1+1就是由数字和加号组成的表达式,然会返回结果2赋值给x,那么x的值就是2。通俗的讲就是先把右边的表达式计算完毕然后把值返回给左边的x。10-3,比较运算符

比较运算符是两个数据进行比较时所使用的运算符,比较运算以后会返回一个布尔值的结果,就是返回对或者错(true或false)

运算符

描述

案例

结果

2

false

>=

大于等于号(大于或等于)

1>=2

false



【本文地址】

公司简介

联系我们

今日新闻


点击排行

实验室常用的仪器、试剂和
说到实验室常用到的东西,主要就分为仪器、试剂和耗
不用再找了,全球10大实验
01、赛默飞世尔科技(热电)Thermo Fisher Scientif
三代水柜的量产巅峰T-72坦
作者:寞寒最近,西边闹腾挺大,本来小寞以为忙完这
通风柜跟实验室通风系统有
说到通风柜跟实验室通风,不少人都纠结二者到底是不
集消毒杀菌、烘干收纳为一
厨房是家里细菌较多的地方,潮湿的环境、没有完全密
实验室设备之全钢实验台如
全钢实验台是实验室家具中较为重要的家具之一,很多

推荐新闻


图片新闻

实验室药品柜的特性有哪些
实验室药品柜是实验室家具的重要组成部分之一,主要
小学科学实验中有哪些教学
计算机 计算器 一般 打孔器 打气筒 仪器车 显微镜
实验室各种仪器原理动图讲
1.紫外分光光谱UV分析原理:吸收紫外光能量,引起分
高中化学常见仪器及实验装
1、可加热仪器:2、计量仪器:(1)仪器A的名称:量
微生物操作主要设备和器具
今天盘点一下微生物操作主要设备和器具,别嫌我啰嗦
浅谈通风柜使用基本常识
 众所周知,通风柜功能中最主要的就是排气功能。在

专题文章

    CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭