最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通 |
您所在的位置:网站首页 › 微信上有教材答案的小程序 › 最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通 |
大家好,又见面了,我是你们的朋友全栈君。 讲解课程:https://edu.csdn.net/course/detail/9531 写在前面1,讲解视频视频课我会在B站免费提供给大家,欢迎关注,欢迎三连。 https://space.bilibili.com/419474640/video ![]() 配套笔记会在csdn上免费给到大家,欢迎关注,笔记会持续更新。 https://blog.csdn.net/qiushi_1990 ![]() 目前源码和配套的一些资源暂时不免费,如果有需要的同学可以私聊石头哥,拿米来换。 ![]() 笔记我也有整理一套电子书,大家也可以私聊石头哥获取电子书版的配套笔记。电子书笔记方便后期查询知识点。 ![]() 另外石头哥提供配套解答服务。当然了,知识付费时代石头哥解答是要米的,毕竟石头哥精力有限,石头哥也是要吃面包的。石头哥有推出包月,包年解答服务。你在学习过程中有任何问题,或者工作中遇到任何编程问题,都可以来找石头哥 石头哥目前可以解答如下问题 小程序方面的问题云开发方面的问题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万个,所以我们不管是学习小程序开发,还是学习小程序运营,都有很广的就业前景。 ![]() ![]() 我们上面了解完小程序的优势和历史以后,就知道我们为什么要学习小程序了 依赖微信生态就业面广上手快学习完微信小程序以后,再去学习百度小程序,抖音小程序,支付宝小程序就很方便了。因为这些小程序api都很相似。相对于Java,php,python而言,小程序更适合作为编程的入门语言相对于传统前端开发,我们在学习小程序的同时就可以学习css,JavaScript的知识1-5,微信小程序对创业者的优势App开发的推广成本过高移动互联网格局已定,用户需求被各路巨头把持,我们要想在移动互联网有一番作为,微信是不可避免的靠山小程序能以最小的成本,最快的速度验证你的商业模式。二,开发者工具工欲善其事必先利其器,所以我们在开发小程序之前必须准备好一款适合自己的开发者工具,这里我给大家推荐官方开发者工具。原因有以下几点 官方的所有更新,都会第一时间在官方开发者工具同步有任何问题,可以直接反馈给官方官方开发者工具更新迭代最及时我们用官方开发者工具,使用一些官方功能最稳定。 下面就来教大家如何下载官方开发工具2-1 官方开发者工具下载地址https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 建议大家下载最新的稳定版本 ![]() 然后点击自己电脑对应系统的版本下载即可。至于安装很方便,只需要双击安装包,不停的点下一步即可,安装完成以后的官方开发者工具长这样。 ![]() 我们安装好开发者工具以后,只需要双击打开即可。 ![]() 通常我们第一次打开,会出现上图所示的,只需要用微信扫描即可登录开发者工具。扫码登录以后会出现下面这样的界面。 ![]() 上面第二步已经安装好开发者工具了,接下来就来教大家如何创建一个最简单的小程序 3-1,在桌面上创建一个空白文件名字可以随便取,我这里习惯取小石头 ![]() ![]() 这里需要注意下,小程序官方最新的开发者工具有了变化,所以你创建项目时如果不长下面这样。可以跳过这个图片,看下面新版的 ![]() 新版的如下,多了一个模板选择,这里注意:要选择不使用模板。 ![]() 配置好以后,点新建,即可创建属于自己的第一个小程序,然后创建会有一个过程,耐心等待即可。 ![]() ![]() 主要给大家讲一些个性化的配置 ![]() 我们可以配置主题颜色,模拟器位置,这些完全可以根据个人喜好进行设置。 ![]() 下图是程序目录,每一个我都给大家标注出来了,大家前期不用死记硬背,后面开发学习过程中,用的多了, 自然就记住目录下每个文件的作用了。 ![]() 1, wxml主要用来布局组件的(相当于大楼结构) 如:楼有几层,每层有多少房间,有什么设备 2, wxss主要决定显示样式(决定大楼的样式) 如:颜色,大小,宽高等 3, js主要用来处理逻辑(决定大楼具备哪些功能) 如:大楼具有电梯功能,空调制冷,灯光,供水,供电,主要是为了大厦的运行。 下面画个图,来说明三者的关系。 ![]() 结构 小程序 传统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里的注释如下![]() ![]() ![]() 我们在学习点击事件之前,需要先学习日志(log)的打印,因为我们开发过程中会经常用到日志打印。日志打印的语法如下 代码语言:javascript复制console.log("我的打印出来的日志内容")![]() 函数的两种使用方式如下图: ![]() 我们如果想给一个组件定义点击事件,就要用到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![]() 还记得我们的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,数字型Numberjs数字类型的数据,既可以是整数,也可以是小数(浮点数) 代码语言: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,效果图预览上一节和大家讲解了小程序的一些常用组件,这节就带大家写出自己的第一个简单计算器。做一个综合性的练习。由于是入门,这里先教大家简单的加法运算。效果图如下 ![]() 实现起来特别简单,代码也特别少,就下面三个 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}} 这种写法,是小程序用来绑定数据用的,这里用来显示我们的计算结果用的,上面代码和对应的显示如下:![]() 可以看到我们在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 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |