精华内容
下载资源
问答
  • 从今天开始就来带领大家学习微信小程序了,只要你跟着我一步步来,相信你也可以上线一款属于自己的微信小程序 一,认识小程序 微信⼩程序,简称⼩程序,英⽂名 Mini Program Mini Program ,是⼀种不需要下载安装...

    讲解课程: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
    结构布局WxmlHtml
    样式WxssCss
    逻辑JavaScriptJavaScript
    配置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)的打印,因为我们开发过程中会经常用到日志打印。日志打印的语法如下

    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,变量的组成

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

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

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

    7-3,变量的使用

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

    • 1,声明变量

    来看下具体代码

    //声明变量
    var age 
    

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

    • 2,赋值

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

    //给age赋值
    age=10
    

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

    7-4,变量的初始化

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

    var age=10 
    

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

    7-5,变量的重新赋值

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

    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.80
    String字符串型,如“小石头”。注意js里字符串都要带引号“”
    Boolean布尔值类型,就true和false两个值,代表正确和错误false
    UndefinedUndefined 这个值表示变量不含有值,如var a;声明了变量a,但是没有赋值,就是undefinedundefined
    Null空值,如var a=null,声明了变量a为空值null

    8-3,数字型Number

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

    var age=21	//整数
    var PI=3.1415	//小数
    

    8-4,字符串String

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

    var name="编程小石头"	//字符串
    var age1="18"		//字符串
    var age2=18		//数字型
    

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

    字符串长度

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

        var name="编程小石头"
        console.log(name.length)	//这里的输出结果是5
    

    字符串的拼接

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

        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表示假。

    var flag=true
    

    8-6,Undefined和Null

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

    8-7,typeof 操作符

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

    typeof "John"                // 返回 string 
    typeof 3.14                  // 返回 number
    typeof false                 // 返回 boolean
    

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

        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

    转为数字的几个特殊情况

    console.log(Number(""))//空字符串转换为 0
    console.log(Number(true))//true转换为1
    console.log(Number(false))//false转换为0
    console.log(Number("编程小石头"))//其他的字符串会转换为 NaN (不是个数字)
    

    九,综合小案例~开发简单的计算器

    9-1,数据绑定

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

    <!--wxml-->
    <view> {{message}} </view>
    
    // js里如下
    Page({
      data: {
        message: '我是动态绑定的数据'
      }
    })
    

    9-2,效果图预览

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

    <!--index.wxml  -->
    <input placeholder="请输入数字a" bindinput="inputa" />
    <text>+</text>
    <input placeholder="请输入数字b" bindinput="inputb" />
    <button bindtap='sum'>计算</button>
    <text>结果为:{{result}}</text>
    

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

    <input placeholder="请输入数字a" bindinput="inputa" /> 
    <input placeholder="请输入数字b" bindinput="inputb" />
    

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

    • +
      这里的 组件是用来显示文本的这里我们只是为了显示一个 + 号
    <button bindtap='sum'>计算</button>
    

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

    • 结果为:{{result}}
      {{result}} 这种写法,是小程序用来绑定数据用的,这里用来显示我们的计算结果用的,

    上面代码和对应的显示如下:

    4.jpg

    9-4,再来看index.js,我们加法的逻辑实现

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

    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+27
    -减法x=5-23
    *乘法x=5*210
    /除法x=5/22.5
    %取模(余数)x=5%21

    10-2,表达式和返回值

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

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

    10-3,比较运算符

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

    运算符描述案例结果
    <小于号1<2true
    >大于号1>2false
    >=大于等于号(大于或等于)1>=2false
    <=小于等于号(小于或等于)1<=2true
    ==判等号(判断是否相等)1==1true
    ===绝对等于(值和类型均相等)1===‘1’false
    !=不等于1!=1false

    10-4,赋值运算符

    赋值运算符向 JavaScript 变量赋值。

    运算符例子等同于
    =x = yx = y
    +=x += yx = x + y
    -=x -= yx = x - y
    *=x *= yx = x * y
    /=x /= yx = x / y
    %=x %= yx = x % y

    =的小结

    • =:赋值,把右边赋值给左边 如a=b
    • ==:判断,判断两边的值是否相等 如 a ==b
    • === :全等,判断两边的值和数据类型是否完全相等 如 a === b

    10-5,逻辑运算符

    用于多个条件的判断,其返回值是布尔值。

    • && 逻辑与,两个条件都要满足,两侧都是true结果才为true
    • || 逻辑或,两个条件只需要满足一个即可,有一侧是真结果就真
    • ! 逻辑非 not,逻辑取反,如true的相反值是false

    比如你要充话费

    • && 你想用微信充:必须你有微信并且使用微信支付才可以充
    • || 你去营业厅充:微信或者支付宝支付都可以
    • ! 如果只有支付宝和微信两种方式:你不想用微信那就只能用支付宝了

    10-6,递增和递减运算符

    递增和递减运算符概述:如果需要反复的给数字变量加或减去1,可以使用递增(++) 和递减(–)运算符来完成。
    在js里递增(++) 和递减(–)既可以放在变量前面,也可以放在变量后面,放在前面时称为前置递增或递减运算符,放在后面时称为后置递增或递减运算符。
    注意:递增或者递减只能操作变量,不能直接操作数字。

    10-6-1,前置递增递减运算符

    注意:前置递增或递减时,是先自加或自减,然后返回值
    我们之前想要一个变量加1写法如下

    var num=1
    num=num+1 //这里就是给num加1
    

    我们有没有方便的写法呢,上面的num=num+1,可以直接写成 ++num,这样是不是更简洁。

    10-6-2,后置递增递减运算符

    注意:后置递增或递减时,先返回值,然后自加或自减

    10-6-3,前置和后置的区别

    • 前置和后置如果单独使用,效果是一样的
    • 前置是先自加或自减,然后返回值;后置先返回值,然后自加或自减
    var num=10
    console.log(++num  +10)//结果是21
    console.log(num++  +10)//结果是20
    

    我们通过下面几个小例子来强化理解下

    var a=10
    ++a
    console.log(b)//这里b的结果是几
    
    var c=10
    c++
    var d=c++ +2
    console.log(d)//这里d的结果是几
    
    var e=10
    var f=e++ + ++e
    console.log(f)//这里f的结果是几
    

    10-6-4,前置和后置递增递减的小结

    • 前置和后置的主要目的是为了简化代码编写
    • 单独使用递增或递减时,前置和后置效果一样
    • 与其他运算连用时,执行结果会不同
      后置:先返回原值,后自加(先人后己)
      前置:先自加,后返回值(先己后人)
      可以总结为:前置自私,后置无私
    • 开发时,大多使用后置递增/减。例如 num++或num- -

    十一,条件语句和循环语句

    11-1,流程控制

    在学习条件语句河循环语句之前,我们要先知道什么是流程控制,
    **流程控制:**流程控制就是来控制我们的代码按照什么顺序来执行的语句。
    流程控制主要有三种结构

    • 顺序结构
    • 分支结构
    • 循环结构

      顺序结构是程序中最简单,最基础的流程控制,就是代码按照先后顺序依次执行。我们重点是讲解分支结构和循环结构。

    11-2,分支结构

    我们上面讲的分支结构,就是代码在从上到下的执行过程中,根据不同的条件,执行不同的代码,从而得到不同的结果。分支结构常用的语句就是条件语句.
    我们常用的分支结构的语句:

    • if语句
    • switch语句

    条件语句: 用于基于不同条件执行不同的动作,通常在写代码时,您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。
    在这里插入图片描述
    举个最简单的例子:你满18岁就可以去网吧,不满18岁就不允许进网吧。这里的判断条件就是你的年纪。
    我们这里常用的就是if条件语句,所以接下来我们会重点讲解下if条件语句。

    11-3,if条件语句

    在 JavaScript 中,我们可使用以下条件语句:

    • if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码
    • if…else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码
    • if…else if…else 语句- 使用该语句来选择多个代码块之一来执行

    11-3-1,if 语句

    使用 if 语句来规定假如条件为 true 时被执行的 JavaScript 代码块。

    • 语法
    if (条件) {
        如果条件为 true 时执行的代码
    } 
    
    • 实例
    if (age< 18) {
       console.log("未成年")
    }
    

    如果年龄小于18岁,就输出未成年

    11-3-2,if else 双分支语句

    使用 else 语句来规定假如条件为 false 时的代码块。

    if (条件) {
        条件为 true 时执行的代码块
    } else { 
        条件为 false 时执行的代码块
    }
    
    • 实例
    if (age < 18) {
         console.log("未成年")
     } else {
        console.log("成年")
     } 
    

    如果年龄小于18岁,就输出未成年,否则就输出成年

    11-3-3,if else if 多分支语句

    使用 else if 来规定当首个条件为 false 时的新条件。

    语法
    if (条件 1) {
        条件 1 为 true 时执行的代码块
    } else if (条件 2) {
        条件 1 为 false 而条件 2 为 true 时执行的代码块
     } else {
        条件 1 和条件 2 同时为 false 时执行的代码块
    }
    
    • 实例
    if (age < 18) {
         console.log("未成年")
     } else if(age<60) {
        console.log("成年")
     } else {
        console.log("老年")
     } 
    

    如果年龄小于18岁,就输出未成年,年龄大于18岁小于60岁就输出成年,年龄大于60岁就输出老年。

    11-4 wxml条件渲染

    在wxml中,使用 wx:if="" 来判断是否需要渲染该代码块:

    <view wx:if="{{condition}}"> 我是可以显示的</view>
    

    也可以用 wx:elif 和 wx:else 来添加一个 else 块:

    <view wx:if="{{length > 5}}"> 1 </view>
    <view wx:elif="{{length > 2}}"> 2 </view>
    <view wx:else> 3 </view>
    

    可以看出wxml里的条件渲染和我们上面讲的if条件语句类似,只是写法上稍微有些区别。
    wxml里的条件渲染主要用来做页面展示和隐藏使用的。

    11-5,for循环语句

    如果您希望一遍又一遍地运行相同的代码,并且每次的值都不同,那么使用循环是很方便的。
    比如我们想输出5编编程小石头

    • 一般写法:
      console.log(“编程小石头”)
      console.log(“编程小石头”)
      console.log(“编程小石头”)
      console.log(“编程小石头”)
      console.log(“编程小石头”)
    • 使用for循环
    for (var i=0;i<5;i++){ 
      console.log("编程小石头")
    }
    

    for 循环的语法:

    for (初始化变量; 条件表达式; 操作表达式){
        被执行的代码块
    }
    
    • 初始化变量:开始前第一个执行,通常用于初始化计数器变量,只执行一次。
    • 条件表达式:就是用来决定每一次循环是否可以继续执行, 定义运行循环的终止条件
    • 操作表达式:在大括号里的代码块已被执行之后执行,通常用于对我们的计数器变量进行递增或者递减操作。

    实例

    for (var i=0;i<5;i++){ 
      console.log("编程小石头")
    }
    

    上面实例中
    语句1:var i=0 是在开始执行前初始化变量i
    语句2:i<5 是用来判断i是否小于5,如果小于5就继续执行循环
    语句3:i++ 是在每次循环执行一遍后对i进行加1的操作

    11-6,wxml列表渲染

    在wxml里我们使用wx:for来显示列表数据。
    在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
    默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item

    <view wx:for="{{array}}">
      {{index}}: {{item.name}}
    </view>
    

    在js里定义的列表数据如下

    Page({
      data: {
        array: [{
          name: '编程小石头',
        }, {
          name: '邱石'
        }]
      }
    })
    

    11-7,continue和break的学习

    continue和break都是用来终止循环的,区别在于

    • continue:是终止循环中的某一次,继续执行后面的循环
    • beak: 直接终止整个循环执行,整个循环不在执行

    十二,数组的学习

    12-1,数组的概念

    数组就是一组数据的集合,可以把更多的数据存储在单个变量下。
    数组里面可以存储各种类型的数据。
    如: var names=[‘编程小石头’,16,true]

    12-2,创建数组的两种方式

    • 1,使用new创建数组(不常用)
    var names=new Array(); 
    names[0]="编程小石头";       
    names[1]="刘德华";
    names[2]="周杰伦";
    
    • 2,利用数组字面量创建数组(常用)
    var names=['编程小石头','刘德华','周杰伦']
    

    明显看到第二种创建数组的方式比第一种更简洁,所以以后我们创建数组就用第二种方式

    12-3,获取数组元素

    我们获取数组元素是通过数组下标来获取的,下标也叫做索引,数组的下标是从0开始的。如下图
    数组可以通过下标来访问,设置,修改对应的元素值。我们可以通过
    数组名[下标] 的方式来获取数据中的元素。
    如 names[0]就可以获取names数组里的第一个元素‘编程小石头’

    12-4,计算数组的和以及平均值

    前面我们已经学完如何遍历数组了,如果我这里让大家去求下数组里所有元素的和以及平均值,大家知道如何去求吗。

    • 作业
      已知数组 [1,2,3,4,5,6] 如果通过代码计算这个数组的和以及平均值。

    12-5,求数组中的最大值

    var nums=[1,2,3,4] 这个数组我们很明显就可以看出来4是数组里的最大值,但是如果我们数组里的元素有很多,这个时候你就未必能很快的找出来最大值了,所以我们要想求数组里的最大值,要让代码去实现,而不是你肉眼去看。

    • 思路
      其实我们找数组中的最大值,有点类似于武术比赛打擂台

      我们首先拿第一个和第二个比,胜出者在待定席位,然后第三个来挑战胜出者,这样又会产生新的胜出者,然后后面的元素都来逐个挑战胜出者,直到最后一个胜出者,就是我们要找的最大值。而这样一v一的对决,正好可以借助我们的循环来实现。
        var nums = [1, 2, 3, 4, 5]
        var max = nums[0]
        for (var i = 1; i < nums.length; i++) {
          if (max < nums[i]) {
            max = nums[i]
          }
        }
        console.log('最大值', max)  //可以得出最大值是5
    

    12-5,给数组添加新元素

    push() 方法可向数组的末尾添加一个或多个元素,所以我们一般给数组追加元素的时候,直接使用push方法就可以了。

        var nums = [1, 2, 3, 4, 5]
        nums.push(6)
        nums.push(7, 8)
        console.log(nums) //追加新元素后的数组  [1, 2, 3, 4, 5, 6, 7, 8]
    

    12-6,删除数组中的指定元素

    如我们想把数组中的指定元素删除掉,可以用一个新的数组来接受符合要求的元素,不符合要求的元素不接收,这样就可以实现删除数组元素的效果

    	// 把元素5删除
        var nums = [1, 2, 3, 4, 5]
        //1,定义一个新数组
        var newNums = []
        //2,遍历旧数组
        for (var i = 0; i < nums.length; i++) {
          //3,把符合要求的元素添加到新的数组里
          if (nums[i] !== 5) {
            newNums.push(nums[i])
          }
        }
        console.log(newNums) //删除成功 [1, 2, 3, 4]
    

    十三,对象的学习

    13-1,什么是对象

    对象只是一种特殊的数据。对象是一组无序的相关属性和方法组成。这里重点要记住属性和方法这两个新概念

    • 属性:事物的特征,对象里的属性就是用来表现该对象具备哪些特征
    • 方法:事物的行为,对象里方法就是用来表示该对象具备哪些行为。

    例如:
    石头哥具备姓名,年龄,身高,体重等属性
    石头哥具备写代码,唱歌,骑车,跑步,吃饭等行为。

    • 手机具备下面的属性和方法

    13-2,为什么需要对象

    我们在保存一个数据时,可以用变量,保存多个数据时可以用数组。但是我如果想保存一个完整的立体的信息时呢。

    • 比如保存石头哥的完整信息。
      如果我们用数组来表示就是
      var shitouge=[‘编程小石头’,‘男’,‘128’,‘180’]
      这样我虽然把石头哥的完整信息保存到了数组里,也可以大致猜出来哪些数据代表什么意思,但是后面的128和180是什么意思呢???

    但是我们如果用对象来保存这些信息呢

    {
    姓名:'编程小石头',
    性别:'男'
    体重:128
    身高:180
    }
    

    这样我们是不是就可以立体的知道每个数据代表什么意思了呢。这也是我们使用对象的原因。上面的{}里包裹的就是我们对象的一些属性。只不过我们的属性名不提倡用汉字,应该用英文或者拼音,我这里方便大家理解才这样写的。

    13-3,创建对象的三种方式

    • 利用字面量创建对象
    • 利用new Object创建对象
    • 利用构造函数创建对象

    13-3-1,利用字面量创建对象

    语法如下
    var 对象名={
    属性名:属性值,
    属性名:属性值,
    方法名:function(){}
    }

    示例如下:

    var Person = {
     name:'编程小石头',
     age:18,
     code:function(){console.log('石头哥会写代码')}
    }
    

    13-3-2,利用new Object创建对象

    语法:
    var obj = new Object();
    obj.name=‘编程小石头’
    obj.age=18
    我们这里就是先用 new Object()创建一个空对象,然后通过.属性名给这个空对象添加属性和方法

    13-3-3,利用构造函数创建对象

    构造函数是一种特殊的函数,主要用来初始化对象,它总是和new运算符一起使用,我们可以把对象里的一些公共属性和方法抽取出来,然后封装到这个函数里,方便批量创建对象。

    使用构造函数创建对象时要注意下面几点

    • 1,构造函数名字的首字母习惯大写
    • 2,构造函数里不需要return就可以返回结果
    • 3,调用构造函数创建对象时,必须用new
    • 4,我们的属性和方法前面必须添加this

    完整实例如下:

    	function Person(name, age) {//创建构造函数Person
          this.name = name;
          this.age = age;
          this.action = function (jineng) {
            console.log(name + "具备" + jineng + '的技能')
          }
        }
        //创建对象1
        var obj1 = new Person('编程小石头', 18)
        console.log(obj1.name)//编程小石头
        obj1.action('写代码')//编程小石头具备写代码的技能
         //创建对象2
        var obj2 = new Person('周杰伦', 41)
        console.log(obj2.name)//周杰伦
        obj2.action('唱歌')//周杰伦具备唱歌的技能
    

    构造函数和对象

    我们这里的构造函数就好比汽车的设计图纸,汽车具备哪些属性,拥有哪些方法,已经提前在图纸上设计好了,我们只需要根据图纸new出来一个对象,比如可以new出来一个宝马车,也可以new出来一辆兰博基尼。

    13-3-4,new关键字执行过程

    如上面我们通过构造函数new一个对象

    	function Person(name, age) {//创建构造函数Person
          this.name = name;
          this.age = age;
          this.action = function (jineng) {
            console.log(name + "具备" + jineng + '的技能')
          }
        }
        //创建对象1
        var obj1 = new Person('编程小石头', 18)
    

    这里在new一个对象出来时会执行下面四件事

    • 1,在电脑内存中创建一个空对象
    • 2,让this指向这个新的对象
    • 3,执行构造函数里的代码,给这个新对象添加属性和方法
    • 4,返回这个新对象如上面的obj1就是我们创建的新对象

    13-3-5,变量,属性,函数,方法总结

    属性和变量:

    • 相同点:
      都是用来存储数据的。
    • 不同点:
      变量单独声明并赋值,使用的时候直接使用变量名就可以;
      属性在对象里面的,不需要声明,使用的时候要用:对象.属性名。
    var dog = {
        //属性
        name:'可可',
        age:'12'
    } 
    //变量
    var num = 12;
    
    //调用变量:(直接使用变量名进行调用)
    console.log(num); 
    //调用属性:(对象名.属性名)
    console.log(dog.name);
    

    函数和方法:

    • 相同点:
      都是实现某种功能。
    • 不同点:
      函数是单独声明并且调用的,调用方法:函数名()
      方法存在于对象里面。调用方法:对象名.方法()
    var dog = {
        name:'可可',
        age:'12',
        //方法
        skill:function(){
            console.log('汪汪汪');
        }
    }
     
    //函数
    function skillDemo(){
        console.log("睡觉");
    }
    
    //调用函数:(直接使用:函数名(),进行调用)
    skillDemo();
    //调用方法:(--对象名.方法名()--)
    console.log(dog.skill());
    

    13-4,对象的使用

    13-4-1,访问对象的属性

    对象属性的调用语法有两种

    • 对象名.属性名
    • 对象名[‘属性名’]

    如我们对象如下

    var obj = {
     name:'编程小石头',
     age:18,
     code:function(){console.log('石头哥会写代码')}
    }
    

    调用name属性就是 obj.name
    这里obj就是我们的对象,name就是我们的对象的属性,obj.name里的.就相当于 的 翻译过来就是obj的name
    另外一种调用属性的方式就是 obj[‘name’]

    13-4-2,访问对象的方法

    对象中方法的调用就一种方式:对象名.方法名() 这里的这对小括号是必不可少的。
    如我们对象如下

    var obj = {
     name:'编程小石头',
     age:18,
     code:function(){console.log('石头哥会写代码')}
    }
    

    obj.code() 就是直接调用obj里的code方法

    十四,内置对象的学习

    14-1,什么是内置对象

    内置对象就是指Javascript自带的一些对象,供开发者使用,这些对象提供了一些常用的的功能。开发者可以很方便的使用这些内置对象,而不用关心这些内置对象的实现原理。
    就好比我们使用手机内置的发短信,打电话功能,我们用的时候可以很方便的快速使用,而不用关心打电话的实现原理。这就是我们使用内置对象的原因,主要就是为了快速方便的使用内置对象的

    常见的内置对象有Math、Array、Date等

    14-2,查阅文档的学习

    因为内置对象的方法太多了,我们不可能把所有的方法都记下来,所以我门就需要时不时的查阅文档,就好比我们查字典一样。
    常用的学习文档有下面几个

    • MDN
      官方地址:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
    • W3cschool
      https://www.w3school.com.cn/js/index.asp
    • 菜鸟教程
      https://www.runoob.com/js/js-tutorial.html

    这里建议大家使用MDN文档。因为这个文档比较全,可以快速检索

    14-3,Math对象的学习

    与其他内置对象不同的是,Math 不是一个构造器对象。Math 的所有属性与方法都是静态的。引用圆周率的写法是 Math.PI,调用正余弦函数的写法是 Math.sin(x),x 是要传入的参数。也就是说我们的Math可以直接通过Math. 来调用他的属性和方法

    由于Math对象的方法比较多,我这里只把开发过程中常用的一些方法做下讲解

    14-3-1,Math常用的属性

    • Math.PI
      圆周率,一个圆的周长和直径之比,约等于 3.14159

    14-3-2,Math常用的方法

    • Math.abs(x) 返回一个数的绝对值
    Math.abs('-1');     // 1
    Math.abs(-2);       // 2
    Math.abs(null);     // 0
    Math.abs("string"); // NaN
    Math.abs();         // NaN
    
    • Math.max() 返回多个数值的最大值
        console.log(Math.max(1, 2, 3)) //3
    
    • Math.min() 返回多个数值的最小值
      console.log(Math.min(1, 2, 3)) //1
    

    14-3-3,Math中取整数的三个方法

    • Math.ceil(x) 向上取整,往大了取
    	console.log(Math.ceil(1.2))//2
        console.log(Math.ceil(1.5))//2
        console.log(Math.ceil(1.7))//2
        console.log(Math.ceil(1.9))//2
    
    • Math.floor(x) 向下取整,往小了取
        console.log(Math.floor(1.2))//1
        console.log(Math.floor(1.5))//1
        console.log(Math.floor(1.7))//1
        console.log(Math.floor(1.9))//1
    
    • Math.round(x) 四舍五入取整
        console.log(Math.round(1.2))//1
        console.log(Math.round(1.5))//2
        console.log(Math.round(1.7))//2
        console.log(Math.round(1.9))//2
    

    14-3-4,随机数的学习

    Math.random() 得到一个大于等于0,小于1之间的随机数
    使用。

    使用场景:一般我们做抽奖时会用到随机数

    • 获取两数之间的随机数(大于等于min小于max)
    //这个随机数可能是整数,也可能是小数
    Math.random() * (max - min) + min
    
    • 得到两数之间的随机整数(大于等于min,小于max)
    // 这个随机数是min和max之间的随机整数
    function getRandomInt(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      //不含最大值,含最小值
      return Math.floor(Math.random() * (max - min)) + min; 
    }
    
    • 得到两数之间的随机整数,包括两个数在内(大于等于min,小于等于max)
    // 这个随机数是min和max之间的随机整数
    function getRandomIntInclusive(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      //含最大值,含最小值 
      return Math.floor(Math.random() * (max - min + 1)) + min; 
    }
    

    14-4,Date日期对象的学习

    我们的Date对象是一个构造函数对象,必须使用new 对象,来创建我们要使用的对象以后才可以使用。

    创建一个新Date对象的唯一方法是通过new 操作符,
    例如:let now = new Date()

    使用场景 比如我们的秒杀倒计时,显示的日期都需要借助Date日期对象

    14-4-1,创建Date对象

    有 4 种方法创建新的日期对象:

    new Date()
    new Date(year, month, day, hours, minutes, seconds, milliseconds)
    new Date(dateString)
    new Date(milliseconds)
    
    • new Date()创建Date对象
        var d = new Date()
        console.log(d)//Mon Dec 21 2020 20:02:54 GMT+0800 (中国标准时间)
    

    这样直接创建的返回的是当前的时间如上面的注释所示,我当前是2020年12月21日20时02分54,你打印的应该是你当前自己的时间。

    • new Date(year, month, …)
      new Date(year, month, …) 用指定日期和时间创建新的日期对象。
      7个数字分别指定年、月、日、小时、分钟、秒和毫秒(按此顺序):
    var d = new Date(2018, 11, 24, 10, 33, 30, 0);
    console.log(d) //Mon Dec 24 2018 10:33:30 GMT+0800 (中国标准时间)
    

    这里有一点需要注意:JavaScript 从 0 到 11 计算月份。一月是 0。十二月是11。
    4个数字指定年、月、日和小时:

    var d = new Date(2018, 11, 24, 10);
    

    3 个数字指定年、月和日:

    var d = new Date(2018, 11, 24);
    
    • new Date(dateString)
      new Date(dateString) 从日期字符串创建一个新的日期对象
      我们可以通过 年-月-日 或者年/月/日 获取Date对象
    //如我们用两种方式来创建2020年12月21日
        var d1 = new Date(2020,11,21);//月份是从0开始的 11代表12月
        console.log(d1) //Mon Dec 21 2020 00:00:00 GMT+0800 (中国标准时间)
        var d2 = new Date('2020-12-21');
        console.log(d2) //Mon Dec 21 2020 08:00:00 GMT+0800 (中国标准时间)
         var d3 = new Date('2020/12/21');
        console.log(d3) //Mon Dec 21 2020 08:00:00 GMT+0800 (中国标准时间)
    
    • new Date(milliseconds)
      new Date(milliseconds) 创建一个零时加毫秒的新日期对象
      JavaScript 将日期存储为自 1970 年 1 月 1 日 00:00:00 UTC(协调世界时)以来的毫秒数。
      零时间是 1970 年 1 月 1 日 00:00:00 UTC。
      现在的时间是:1970 年 1 月 1 日之后的 1608553621233毫秒
      如下
        var d1 = new Date(0);
        console.log(d1) //Thu Jan 01 1970 08:00:00 GMT+0800 (中国标准时间)
    

    r如果我们想获取当前时间距离1970 年 1 月 1 日之间的毫秒值可以

        var d1 = new Date();
        console.log(d1.getTime()) //1608553621233
        var d2 = new Date();
        console.log(d2) //Mon Dec 21 2020 20:27:01 GMT+0800 (中国标准时间)
    

    可以看出当前时间距离1970 年 1 月 1 日之间的毫秒值是1608553621233
    那么我们直接new Date(1608553621233)获取的日期如下

        var d1 = new Date(1608553621233);
        console.log(d1) //Mon Dec 21 2020 20:27:01 GMT+0800 (中国标准时间)
    

    所以当前的日期和通过new Date(当前日期距离1970年1月1日的毫秒值)都可以获取当前时间。两者可以相互转换。

    14-4-2,日期获取方法

    获取方法用于获取日期的某个部分(来自日期对象的信息)。下面是最常用的方法

    方法描述
    getDate()以数值返回天(1-31)
    getDay()以数值获取周名(0-6)
    getFullYear()获取四位的年(yyyy)
    getHours()获取小时(0-23)
    getMilliseconds()获取毫秒(0-999)
    getMinutes()获取分(0-59)
    getMonth()获取月(0-11)
    getSeconds()获取秒(0-59)
    getTime()获取时间(从 1970 年 1 月 1 日至今)

    14-4-3,日期设置方法

    设置方法用于设置日期的某个部分

    方法描述
    setDate()以数值(1-31)设置日
    setFullYear()设置年(可选月和日)
    setHours()设置小时(0-23)
    setMilliseconds()设置毫秒(0-999)
    setMinutes()设置分(0-59)
    setMonth()设置月(0-11)
    setSeconds()设置秒(0-59)
    setTime()设置时间(从 1970 年 1 月 1 日至今的毫秒数)

    14-4-4,倒计时(综合案例)

    我们这里带大家实现一个倒计时的案例,比如我们知道一个活动结束的时间,然后去计算活动还有多久结束。我会在视频里带着大家写一个综合的案例。大家跟着视频课来学习这个综合案例即可。

    14-5,Array数组对象的学习

    数组对象的作用是:使用单独的变量名来存储一系列的值。
    如我之前学习数组时,数组的一种创建方式

    var mycars = new Array();
    mycars[0] = "Saab";
    mycars[1] = "Volvo";
    mycars[2] = "BMW";
    

    14-5-1,判断是不是数组

    判断一个对象是不是数组有两种方式

    • 1,通过instanceof Array
    • 2,通过Array.isArray()方法
        var arr = new Array()
        console.log(arr instanceof Array) //true
        console.log(Array.isArray(arr))//true
    

    14-5-2,添加和删除数组元素

    其实我们在讲解数组的那一节有教大家如何添加和删除数组,今天再来带大家系统的来学习下数组的添加和删除

    • push方法添加
      在数组的末尾添加一个或者多个元素
    • unshift方法添加
      在数组的开头添加一个或者多个元素
    • pop方法删除
      删除数组尾部的元素,一次只能删除一个
    • shift方法删除
      删除数组最前面(头部)的元素

    14-5-3,配套练习(筛选数组)

    给你一组数据 [20,59,40,80,99,98] 筛选出所有小于60的数组,可以理解为找到所有不及格的学生的成绩,你会怎么做呢? 可以结合我们上面学过的知识,自己思考下。我会在视频里带着你写一遍。看视频之前,建议你自己先思考下。

    14-5-4,reverse方法翻转数组

    reverse() 方法将数组中元素的位置颠倒,并返回该数组。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个。该方法会改变原数组。

        var arr = [1, 2, 3, 4, 5]
        console.log(arr.reverse())//[5, 4, 3, 2, 1]
    

    14-5-5,sort方法对数组进行排序

    用sort方法进行排序,默认是升序排列的,如下

       var arr = [1, 3, 2, 5, 4]
       console.log(arr.sort())//[1, 2, 3, 4, 5]
    

    但是直接用sort方法会有问题

        var arr = [11, 3, 22, 55, 44]
        console.log(arr.sort())//[11, 22, 3, 44, 55]
    

    为什么会出现3在11和22后面的问题呢,因为我们sort默认排序顺序是在将元素转换为字符串,然后对字符串进行比较,再排序的,所以我们要想用sort来排序,就要用到另外一个写法了

        var arr = [11, 3, 22, 55, 44]
        //按照升序排序
        arr.sort(function (a, b) {
          return a - b
        })
        //按照降序排序
        arr.sort(function (a, b) {
          return b - a
        })
    

    上面的 写法是固定的,大家只需要记住就行了。 a-b时是升序,b-a时是降序

    function (a, b) {
          return a - b 
    }
    

    14-5-6,数组的索引方法

    • indexOf()方法
      返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。
    • lastIndexOf() 方法
      返回指定元素在数组中的最后一个的索引,如果不存在则返回 -1

    14-5-7,课程作业,对数组进行去重

    给出一个数组 [1,3,5,2,4,5,6,4],现要求把数组里重复的元素给删除掉,我会在视频里带着大家写一遍,在看视频之前,建议大家先自己仔细思考下,最好自己先实现一下。

    14-5-7,把数组转换为字符串

    我们把数组转换为字符串有下面两种方法

    • toString()
      将数组通过逗号连接成一个字符串。
    • join(分隔符)
      将数组通过分隔符连接成一个字符串。join里分隔符如果不写的话,默认用逗号来连接数组元素组成一个字符串
        var arr = [1, 3, 2, 5, 4]
        console.log(arr.toString())//1,3,2,5,4
        console.log(arr.join('-'))//1-3-2-5-4
    

    这里希望大家重点掌握,因为我们实际开发中,会把数组转换为字符串传给后台开发人员。

    14-5-8,数组的其他常用方法

    • concat() 方法
      用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组
    • slice() 方法
      截取数组的一部分返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变
    • splice() 方法
      通过删除或替换现有元素或者原地添加新的元素来修改或者删除数组
      splice(从第几个开始,删除几个)
        var arr = [1, 2, 3, 4, 5]
        arr.splice(0, 2)// 从索引为0的地方开始,删除2个元素。
        console.log(arr) //[3, 4, 5]
    
    • splice(从第几个开始,替换几个,要替换的值)
        var arr = ['a', 'b', 'c', 'd', 'e']
        arr.splice(0, 2,'A','B')// 从索引为0的地方开始,替换2个元素,替换为 A和B
        console.log(arr) //["A", "B", "c", "d", "e"]
    

    十五,wxss和css样式美化

    我们上面基本上都是在学习JavaScript基础,js在小程序里主要是用来处理逻辑的,从今天开始我们就来学习一些样式相关的知识,用来美化我们的小程序。其实我们小程序三剑客里的wxss和我们的css是一样的。所以我接下来会把一些常用的css知识点给大家讲解一下。还有小程序里特有的一些样式知识也做下重点讲解。

    一些特别基础的css知识可能不会讲太多。
    这里把一些css的文档给大家一个,大家抽个几小时可以快速的学习下css基础,css不要求大家学习时全部记住,只需要大致知道相应的知识点,后面学习时会回来快速的查阅就行。

    • 菜鸟教程:https://www.runoob.com/css/css-tutorial.html
    • w3cshool教程:https://www.w3school.com.cn/css/index.asp

    15-1,css基础语法

    CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:

    在我们小程序的代码里就体现如下

    • 1,在wxml里定义一个class选择器
    • 2,在wxss实现css样式

      我们这里主要给title选择器实现红色背景,黄色字体。效果如下

      可以看出我们css主要是实现页面美化用的,所以你如果想让你的小程序变得美丽漂亮,就要好好学习css样式了。

    15-2,CSS 注释

    注释是用来解释你的代码,并且可以随意编辑它,浏览器会忽略它。
    CSS注释以 /* 开始, 以 */ 结束, 实例如下:

    /*这是个注释*/
    .title{
        text-align:center;
        /*这是另一个注释*/
        color:black;
        font-family:arial;
    }
    

    15-3,Id 和 Class选择器

    • id 选择器以 “#” 来定义。
      下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色:
    #red {
    	color:red;
    }
    #green {
    	color:green;
    }
    
    • class 选择器
      class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用,类选择器以一个点"."号显示
    .red {
    	color:red;
    }
    .green {
    	color:green;
    }
    

    我们小程序的css中用的最多的就是id和class选择器。

    15-4,CSS 背景

    CSS 属性定义背景效果常用的方式:

    • background-color(最常用)
      background-color 属性定义了元素的背景颜色.如:
      .title {background-color:red;} 就是设置类选择器title的背景颜色为红色

    我们上面的 background-color也可以简写为 background,如:
    .title {background-color:red;} 也是设置背景为红色

    15-5,css中颜色设置的三种方式

    CSS中,颜色值通常以以下方式定义:

    • 十六进制 - 如:"#ff0000"
    • RGB - 如:“rgb(255,0,0)”
    • 颜色名称 - 如:“red”

    我这里给大家提供一个颜色表,大家可以拿到自己喜欢颜色的十六进制值。
    https://tool.oschina.net/commons?type=3
    如果这个连接失效了,大家自己百度下“颜色对照表”也可以找到类似的。

    部分截图如下。

    15-6,文本常用样式

    15-6-1,文本的对齐方式

    文本排列属性是用来设置文本的水平对齐方式。
    文本可居中或对齐到左或右,两端对齐

    • text-align: center; 文本居中对齐
    • text-align: left; 文本居左对齐
    • text-align: right; 文本居右对齐

    15-6-2,文本修饰

    text-decoration 属性用来设置或删除文本的装饰

    • text-decoration: overline; 上划线
    • text-decoration: line-through; 中间划线
    • text-decoration:underline; 下划线

    15-6-3,color设置文本颜色

    如下所示,设置字体颜色为红色的三种方式

    /* 英文颜色 */
    .title {
      color: red;
    }
    /* rgb设置颜色 */
    .title {
      color: rgb(255, 0, 0);
    }
    /* 十六进制设置颜色 */
    .title {
      color: #FF0000;
    }
    


    这些颜色值,可以在我前面给到大家的颜色对照表里找到。

    15-6-4,font-size 设置字体大小

    font-size可以用来设置字体的大小

    • 不写这个属性有默认大小
    • font-size: 30px;
    • font-size: 50px;

      当然我们的文本还有好多别的样式,这里我们只讲这几个重点的,其余的大家可以自己去看下 https://www.runoob.com/css/css-text.html

    15-7,css边框和边距

    元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。

    我这里画一个图,方便大家理解margin,padding,border。其实我们装手机的快递盒子有点类似。

    15-7-1,padding 内边距

    元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。padding 属性定义元素边框与元素内容之间的空白区域。padding 属性接受像素值或百分比值,但不允许使用负值

    • padding: 10px;
      如果只设置一个值,那么上下左右都是10px
    • padding: 10px 20px 30px 40px;
      按照上、右、下、左的顺序分别设置各边的内边距。这样设置就是内边距的上间距10px,右间距20px,下边距30px,左边距40px
    • 也通过使用下面四个单独的属性,分别设置上、右、下、左内边距:
      padding-top
      padding-right
      padding-bottom
      padding-left

    15-7-2,border边框

    元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。
    CSS border 属性允许你规定元素边框的样式、宽度和颜色。
    如下面几种边框

    每个边框有 3 个方面:样式,宽度、以及颜色

    • border-style可以来设置样式

      我们通过设置border-style来定义上下左右四个边框样式,当让也可以定义单边样式,如果您希望为元素框的某一个边设置边框样式,而不是设置所有 4 个边的边框样式,可以使用下面的单边边框样式属性:
      border-top-style
      border-right-style
      border-bottom-style
      border-left-style

    • border-width设置边框的宽度
      您可以通过 border-width 属性为边框指定宽度。
      同样border-width: 5px;只有一个值的时候是设置上下左右4个边框的宽度。
      您也可以通过下列属性分别设置边框各边的宽度:
      border-top-width
      border-right-width
      border-bottom-width
      border-left-width

    • border-color设置边框的颜色
      您可以通过border-color 属性为边框指定颜色。
      同样border-color只有一个值的时候是设置上下左右4个边框的颜色。
      您也可以通过下列属性分别设置边框各边的颜色:
      border-top-color
      border-right-color
      border-bottom-color
      border-left-color

    • 当然我们我们的边框宽度,样式,颜色有一种简写方式

    .title{
      border:5px solid red;
    }
    

    我们只需要一个border属性,就可以设置上下左右四个边框的宽度为5px,样式为solid,颜色为red。

    15-7-3,margin外边距

    围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。margin 没有背景颜色,是完全透明的
    设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位、百分数值甚至负值

    • Margin - 单边外边距属性
      在CSS中,它可以指定不同的侧面不同的边距:
      实例
      margin-top:100px;
      margin-bottom:100px;
      margin-right:50px;
      margin-left:50px;

    margin属性可以有一到四个值。

    • margin:25px 50px 75px 100px;
      上边距为25px
      右边距为50px
      下边距为75px
      左边距为100px
    • margin:25px 50px 75px;
      上边距为25px
      左右边距为50px
      下边距为75px
    • margin:25px 50px;
      上下边距为25px
      左右边距为50px
    • margin:25px;
      所有的4个边距都是25px

    15-8,border-radius设置圆角边框

    border-radius 主要是用来设置圆角用的,下面我通过几个常用的例子来给大家讲解下这个知识点

    • 1,直接可以用像素设置圆角大小
    .title {
      background: red;
      /* 可以用像素设置圆角 */
      border-radius: 10px;
    }
    

    • 2,如果有宽高值,可以设置border-radius为宽高的一半实现圆形
    .title {
      background: red;
      width: 200px;
      height: 200px;
      border-radius: 100px;
    }
    


    当有宽高的时候,设置 border-radius为50%同样可以实现上面的圆形功能。

    .title {
      background: red;
      width: 200px;
      height: 200px;
      border-radius: 50%;
    }
    

    15-9,综合案例一(画个月牙)

    比如我们想实现一个红色的半月,如下图

    那我们该怎么实现这个月牙呢。

    • 1,在wxml里定义两个view组件,并且设置好class类名
    • 2,然后再wxss里设置对应的css样式,用到我们前面学的border-radius

      可以看出来,我们就是用了border-radius实现了一个红色的圆形和一个白色的圆形,白色的圆形遮住了一部分红色的大圆,这样就实现了一个红色的月牙。

    15-10,综合案例二(写个搜索框)

    我们在小程序里经常见到下面所示的搜索框,其实这个搜索框实现起来很简单,把我们上面学的知识点都用到了,所以我们接下来用这么一个综合案例带大家熟悉下之前的知识点。

    首先我们要在wxml里定义如下布局

    布局其实很简单,就是一个父view里套一个子view。
    然后就是在wxss里定义样式就可以了

    其实到这里就已经可以轻松实现我们上面想要的效果了。

    建议大家先跟着写写看。我下面把wxss代码贴出来给大家。

    .root {
      height: 65rpx;
      background: #FFB965;
      padding: 10rpx;
    }
    
    .input {
      height: 100%;
      text-align: center;
      color: grey;
      background: white;
      border-radius: 15rpx;
    }
    

    15-11,px和rpx的转换

    我们在设置宽度,高度,边框粗细时都会用到尺寸单位,我们这里重点给大家讲解下px和rpx。rpx是微信为小程序专门设计的一个尺寸单位。
    px和rpx的换算如下:

    我们一般设计规范都是依据iPhone6来设计的,也就是说平常ui设计师给出的1px我们在写代码时要写0.5rpx。

    下面给出一个简单的例子

    上面红色小石头的字体设置了100px,黑色小石头设置了200rpx,这个时候我们可以看出,红色和黑色小石头的大小是一样的。所以我们后面开发小程序里建议大家用rpx作为小程序的尺寸单位,这样能很好的做自适应。如果我们的设计小姐姐给的是px单位的设计图,我们就要自己用px除以2得到我们对应的rpx大小。

    十六,多媒体组件的学习(图片和视频)

    16-1,认识图片image组件

    image组件:主要用来显示图片,可以是本地图片,也可以是网络图片。

    官方学习文档:https://developers.weixin.qq.com/miniprogram/dev/component/image.html

    当我们不给image设置宽高时,image组件的默认宽度是320px,高度240px。

    16-1-1,src属性显示网络图片

    我们通过src属性来设置要显示的图片资源,图片资源有两种

    • 本地图片资源
    • 网络图片资源

    由于我们本地的图片会占用小程序软件包的大小,所以这里推荐大家尽量使用网络图片。

    我们设置显示图片的语法如下

    <image src="图片资源地址"></image>
    

    如下图,我们显示一个网络图片。

    这里给大家两个网络图片地址:
    https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg

    https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2273029747,2912173232&fm=15&gp=0.jpg

    16-1-2,src属性显示本地图片

    用image显示本地图片,我们需要提前把图片放在小程序项目里,如下图我们把本地图片放在images目录里,这个images目录需要我们自己新建。

    然后在image组件里设置src属性,指向这个本地图片,就可以在小程序里展示了。
    我把网络图片和本地图片都在小程序里展示,给大家对比着学习下。

    16-1-3,通过mode设置图片裁剪、缩放的模式

    image组件另外一个比较重要的属性就是mode了。我们在使用图片时,不能百分之百保证图片的比例正好是我们想要的,这个时候就要用到图片的裁剪和缩放了。
    mode 的常用设置如下

    说明
    scaleToFill缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
    aspectFit缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
    aspectFill缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
    widthFix缩放模式,宽度不变,高度自动变化,保持原图宽高比不变
    heightFix缩放模式,高度不变,宽度自动变化,保持原图宽高比不变 2.10.3
    top裁剪模式,不缩放图片,只显示图片的顶部区域
    bottom裁剪模式,不缩放图片,只显示图片的底部区域
    center裁剪模式,不缩放图片,只显示图片的中间区域
    left裁剪模式,不缩放图片,只显示图片的左边区域
    right裁剪模式,不缩放图片,只显示图片的右边区域
    top left裁剪模式,不缩放图片,只显示图片的左上边区域
    top right裁剪模式,不缩放图片,只显示图片的右上边区域
    bottom left裁剪模式,不缩放图片,只显示图片的左下边区域
    bottom right裁剪模式,不缩放图片,只显示图片的右下边区域

    比如我们有一个原图如下。

    设置不同的mode值,可以很明显的看出来区别

    后面我们需要对图片做裁剪或者伸缩处理时,就可以设置不同的mode值来实现不同的效果。

    16-1-4,图片懒加载

    小程序里image组件是支持图片懒加载的,当我们一个列表页有很多图片时,我们可以使用懒加载,来加快页面加载速度。使用懒加载时,我们只需要给image设置lazy-load就可以了。

    16-2,认识视频video组件

    video组件:主要用来实现视频播放。

    官方学习文档:https://developers.weixin.qq.com/miniprogram/dev/component/video.html

    16-2-1,src属性设置视频地址


    video组件里也是通过src属性来设置视频资源的。这里的视频资源都是网络连接。

    我把这几个mp4格式的视频链接贴给大家

    http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4
    
    https://media.w3.org/2010/05/sintel/trailer.mp4
    
    http://vjs.zencdn.net/v/oceans.mp4
    

    如果上面链接失效,我们可以去官方文档拿官方的视频链接

    16-2-2,设置视频弹幕属性来显示弹幕

    我们上面设置src只能保证视频的正常播放,如果我们想使用弹幕功能,就要为video设置别的属性了。

    我们如果想在视频上显示弹幕,就要设置danmu-list属性。可以看出danmu-list属性是一个数组,而这个数组就要放置我们弹幕的一些数据了。

    下面我在代码里给大家简单的演示下弹幕的显示。
    首先在wxml里设置danmu-list属性,并且给danmu-list绑定数据danmuList

    而这个danmuList就要在js里设置了。

    我们可以在danmuList的每个弹幕对象里设置弹幕显示的内容,弹幕的颜色,弹幕显示的时间。

    通过上图可以看到,我们设置的弹幕成功的显示在了视频上。这样我们就可以轻松的实现弹幕展示功能了。

    16-2-3,发送弹幕功能

    我们上面只是简单的展示了弹幕,如果我们想让用户发送弹幕该怎么做呢。下面就来教大家实现弹幕的发送功能。
    简单起见,我这里设置一个input来获取用户输入的内容,用一个button按钮来触发弹幕的发送。

    wxml文件如下:

    这里我们特意设置了一个id属性,我们下面发送弹幕时,需要先初始化一个视频对象,而初始化视频对象时就用到了这个id。

    js文件如下:

    可以看出,我们在onReady页面渲染完成时,初始化了一个视频对象videoContext,然后通过bindInput获取用户输入的弹幕内容。最后在点击发送弹幕按钮时,通过videoContext.sendDanmu来发送弹幕到视频的屏幕上。

    到这里,我们发送弹幕的功能也实现了,当然video视频组件还有很多别的属性,这里就不再一个个介绍了。大家可以自己去看官方文档:
    https://developers.weixin.qq.com/miniprogram/dev/component/video.html

    十七,授权登录退出和缓存

    我们的项目开发多多少少的都会用到用户的一些信息,比如头像,昵称,性别等。而这些信息的获取,小程序也为我们提供好了方法。

    17-1,认识wx.getUserProfile方法


    对应的文档:https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserProfile.html

    使用这个方法可以获取如下的用户信息

    17-2,授权弹窗

    一般我的使用上面的wx.getUserProfile方法获取用户信息时,需要用户授权的。一般授权弹窗如下。

    只有用户点击允许以后才可以获取用户信息。

    不弹起授权弹窗解决方案

    有的同学用这个方法时,不会弹起上面的弹窗,有可能是因为基础库版本太低,这里建议升级到最新版的基础库。

    17-3,授权登录核心代码

    等下视频课程里会带着大家一起敲代码,这里先把一些核心代码贴出来。其实核心代码官方文档里有提供的。

    这里为了方便日后大家使用,我贴出来给到大家。这里要注意 desc必须保留,里面的描述尽量写的规范些。因为

        wx.getUserProfile({
          desc: '用于完善会员资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
          success: (res) => {
          }
        })
    

    17-4,顶部圆形头像和昵称


    其实这里倒是挺简单,重点知识只有一个圆形图片的实现这里只需要一个image组件和一个text组件即可。通过css的border-radius就可以来设置圆形图像了,我小程序基础里也有讲过的,核心代码如下。

    17-5,本地缓存的讲解

    17-5-1,使用wx.setStorageSync缓存

    这里缓存我们主要用到了wx.setStorageSync 对应的官方文档:
    https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html

    17-5-2,缓存数据的查看

    如下图所示,就是我们的本地缓存数据

    17-5-3,使用wx.getStorageSync获取缓存


    对应的官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.getStorageSync.html

    17-6,退出登录的编写

    退出登录其实很简单,就实现一个点击事件就可以了

    然后js里具体代码就下面这几行就够了

    17-7,完整的项目代码

    我这里把wxml和js的完整代码贴出来给到大家
    index.wxml

    <button wx:if="{{!userInfo}}" bindtap="login">授权登录</button>
    <view wx:else class="root">
      <image class="touxiang" src="{{userInfo.avatarUrl}}"></image>
      <text class="nicheng">{{userInfo.nickName}}</text>
      <button bindtap="loginOut">退出登录</button>
    </view>
    

    index.js

    Page({
      data: {
        userInfo: ''
      },
      onLoad() {
        let user = wx.getStorageSync('user')
        console.log('进入小程序的index页面获取缓存', user)
        this.setData({
          userInfo: user
        })
      },
      // 授权登录
      login() {
        wx.getUserProfile({
          desc: '必须授权才可以继续使用',
          success: res => {
            let user = res.userInfo
            // 把用户信息缓存到本地
            wx.setStorageSync('user', user)
            console.log("用户信息", user)
            this.setData({
              userInfo: user
            })
          },
          fail: res => {
            console.log('授权失败', res)
          }
        })
      },
      // 退出登录
      loginOut() {
        this.setData({
          userInfo: ''
        })
        wx.setStorageSync('user', null)
      }
    })
    

    index.wxss

    .root {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .touxiang {
      width: 200rpx;
      height: 200rpx;
      border-radius: 50%;
      margin-top: 30rpx;
      margin-bottom: 10rpx;
    }
    

    我会在视频里带大家做具体代码的编写。
    《小程序入门》

    十八,swiper轮播图组件

    18-1,swiper组件

    我们在小程序里实现顶部轮播图来动态的显示一些热门商品,这个时候就要用到swiper组件了。

    官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

    如下图,就是我们传说中的顶部轮播图。

    给大家看下官方swiper简介

    可以看出我们的swiper必须结合swiper-item来使用。

    18-2,swiper-item组件

    我们的swiper-item就是用来装每个轮播图使用的。下面我写一个简单的例子来看下

    我这里先在swiper里放三个swiper-item,给每个swiper-item设置不同的背景颜色。这个时候我们就可以实现这三个swiper-item的来回滑动切换。但是我们通常开发的时候,肯定不是仅仅显示一个颜色,我们应该在里面放置图片。要不然怎么叫轮播图呢。

    18-3,swiper-item组件里显示轮播图

    我们如果想在swiper-item里显示图片,就要借助我们前面学习的image组件了。如下图所示

    这样我们就可以完整的实现一个轮播图组件了。我把完整的代码贴出来给到大家。

    <swiper indicator-dots>
      <swiper-item>
        <image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg" />
      </swiper-item>
      <swiper-item>
        <image src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1819216937,2118754409&fm=26&gp=0.jpg" />
      </swiper-item>
      <swiper-item>
        <image src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2273029747,2912173232&fm=15&gp=0.jpg" />
      </swiper-item>
    </swiper>
    

    18-4,swiper的常用属性。

    可以看出我们的swiper有很多属性,下面我会重点的把我们一些常用的属性,通过视频里的一个综合案例来给大家讲解下。

    还是来看官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

    十九,通过tabBar设置多页面

    我们正常创建的默认项目是一个单页面,我们要想实现下面效果所示的多页面就要借助tabBar来实现多页面。

    官方文档:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#%E9%85%8D%E7%BD%AE%E9%A1%B9


    一个小程序可以配置2-5个多页面,

    我们这里以创建3个页面来给大家做下讲解。

    19-1,创建image目录放图标

    我们要使用tabBar就需要用到图标,所以我们要创建一个放图标的目录。

    然后把我提前给大家准备好的图标放到image里即可。

    这些图标我会在配套学习资料里给到大家。

    19-2,创建多个页面

    关于小程序里页面的快速创建我小程序基础里讲过很多遍了,这里就不再啰嗦,直接在app.json里创建下面三个页面即可

    19-3,设置tabBar实现多页面布局

    上面三个页面创建好以后,我们就可以通过tabBar来设置多页面布局了。
    在app.json里添加如下配置。

    这样我们就可以实现可以自由切换的多页面小程序了。

    到这里我们的多页面项目就创建好了。

    19-4,设置tabbar的代码

    由于这里的tabbar配置基本上是固定的,我这里把代码贴在笔记里,大家以后用到的时候,只需要把笔记里的这段代码拿过去就可以,里面的配置稍微改下既可以。

    "tabBar": {
        "color": "#Fc0",
        "selectedColor": "#f4c903",
        "borderStyle": "white",
        "list": [{
            "selectedIconPath": "image/tab1-ok.png",
            "iconPath": "image/tab1.png",
            "pagePath": "pages/home/home",
            "text": "首页"
          },
          {
            "selectedIconPath": "image/tab2-ok.png",
            "iconPath": "image/tab2.png",
            "pagePath": "pages/me/me",
            "text": "我的"
          }
        ]
      },
    

    二十,navigator页面跳转

    我们在小程序里做页面跳转有两种方式

    • 1,借助navigator组件
    • 2,借助wx.自带方法,在点击的时候做页面跳转
      如下图所示的几个wx.方法

      官方给出的几种跳转方式的解释如下

    20-1,navigator实现页面跳转

    navigator其实和我们html里的a标签有点像,也是为了实现页面跳转的。
    官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

    我们想用navigator来跳转到别的页面,其实很简单,只需要如上图所示,做简单配置即可。
    当然了我们使用navigator来跳转页面时,分下面几种情况。当然这些跳转方式都是通过配置open-type属性来定义的。

    20-2,页面的跳转方式

    下面我把一些常用的open-type属性列出来给大家,方便大家以后使用。

    open-type值说明对应wx方法
    navigate保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面对应wx.navigateTo
    redirect关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面对应 wx.redirectTo
    switchTab跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面对应 wx.switchTab
    reLaunch关闭所有页面,打开到应用内的某个页面对应 wx.reLaunch
    navigateBack关闭当前页面,返回上一页面或多级页面对应 wx.navigateBack
    exit退出小程序,target="miniProgram"时生效

    如我们使用navigate做页面跳转,只写个url属性,open-type的值默认就是navigate

    这样我们跳转到新页面后,会有一个返回按钮。我们可以通过这个返回按钮返回上一个页面。

    我会在视频里为大家一个个演示其余的方法和功能。

    20-3,点击事件结合wx方法实现跳转

    我们做页面跳转除了使用navigate组件外,还可以通过点击事件借助wx方法实现页面跳转。

    常用的wx方法:

    wx方法说明
    wx.navigateTo保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面
    wx.redirectTo关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
    wx.switchTab跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
    wx.reLaunch关闭所有页面,打开到应用内的某个页面
    wx.navigateBack关闭当前页面,返回上一页面或多级页面

    我这里给大家举个简单的例子

    • 在wxml里设置点击事件
    • 然后再js里设置点击后跳转页面

      这样我们就可以实现页面跳转了,和使用navigate做跳转一样的效果。
      其余的几个wx跳转方法,我也会在视频里给大家做演示。

    20-4,通过switchTab跳转tabbar页面如何携带数据

    我们跳转到tabbar页面是无法直接通过url携带数据,所以我们就要通过别的方式来实现页面跳转时的数据传递,所以这时候可以有两个方式。具体代码我在视频里带大家写一遍。

    20-4-1,通过app.js里的globalData

    其实就是通过app.js里的全局变量来传递。

    20-4-2,通过本地缓存

    其实就是在A页面存数据到缓存,然后A页面跳转到B页面时通过取本地缓存来拿到数据,进而实现页面跳转传递参数的功能。

    20-5,打开别的小程序

    其实我们可以在自己的小程序里通过navigateTo打开别的小程序的,只不过有自己特定的方法:wx.navigateToMiniProgram
    对应的官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/navigate/wx.navigateToMiniProgram.html

    其实我们只需要拿到别的小程序的appid就可以实现这个功能了,我会在视频里演示怎么拿到别的小程序的appid

    二十一,小程序页面生命周期

    什么是生命周期

    https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html
    这是官方给出的页面生命周期解释,如下图

    作为初学者,一开始不一定能看懂,所以我给大家总结成下面所示的。方便大家学习。其实生命周期就是一个小程序页面从创建到销毁的一个时间周期。

    官方文档

    https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html
    这是官方给出的解释,感兴趣的同学可以自己看看,我会在视频里把常用的生命周期方法给大家做具体的讲解。

    二十二,小程序应用生命周期

    官方文档

    https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html

    这里最常用的就是下面3个

    onLaunch()

    小程序初始化完成时触发,全局只触发一次。

    onShow()

    小程序启动,或从后台进入前台显示时触发

    onHide()

    小程序从前台进入后台时触发

    二十三,scrollview讲解

    23-1,认识scrollview

    首先要去看下官方文档
    https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

    我会在课程里把一些常用的属性带大家认识一遍。

    23-2,快速创建100个view快捷方式

    先教大家一个在wxml页面里快速创建100行view代码的快捷方式
    输入 view{$}*100 然后回车键,就可以在页面里快速创建100行view了。

    23-3,设置列表条目隔行不同颜色

    效果图如下:

    其实这是借助我们css的 :nth-child知识点,如上图所示:nth-child(2n)就是设置偶数行,:nth-child(1n)就是设置奇数行。

    23-4,一键置顶,回到列表页面顶部

    主要是借助scroll-view的scroll-top属性,我会在视频里手把手的教大家实现这个功能的

    23-5,让列表里的任意位置滚动到顶部

    主要是借助scroll-view的scroll-into-view属性,我会在视频里手把手的教大家实现这个功能的

    注意事项:如上图所示,我们需要给每个条目设置一个id,并且这个id不能是数字开头。

    对应的js代码如下:

    二十四,注册小程序

    我们前面虽然可以用测试号创建小程序,但是测试号有很多功能会受限,比如我们接下来要讲的云开发,必须是注册小程序后才可以使用,所以今天我们就来讲讲小程序的注册.

    24-1,其实官方给的注册步骤很详细了


    官方注册文档:https://developers.weixin.qq.com/miniprogram/introduction/

    微信小程序注册地址:https://mp.weixin.qq.com/
    进去以后点击立即注册

    进入注册页面时,跟着提示一步步来就可以了

    24-2, 注意点

    • 如果只是学习的话,注册个人小程序即可.
    • 如果想商用,想使用微信支付,取用户手机号等复杂功能,可以注册企业小程序,不过企业小程序必须有营业执照才可以注册
    • 一个邮箱只能注册一个小程序
    • 一个身份证可以注册5个,个人小程序
    • 一个企业的营业执照可以注册50个企业小程序

    持续更新中,敬请关注。。。

    小程序入门系列(其他教程)

    1,零基础入门小程序

    https://xiaoshitou.blog.csdn.net/article/details/107557972

    2,零基础入门小程序云开发(数据后台)

    https://xiaoshitou.blog.csdn.net/article/details/112391688

    3,云开发+cms实现扫码点餐小程序

    https://xiaoshitou.blog.csdn.net/article/details/113717509

    展开全文
  • 如何自己搭建一个小程序(步骤详解)

    万次阅读 多人点赞 2021-03-15 15:53:05
    微信小程序自2017年1月9日上线以来,极大的方便了人们的生活;也给很多商家提供了全新的推广、销售产品渠道。但是很多用户苦于不懂技术,想自己搭建又无从下手; 那应该如何创建一个属于自己的小程序?今天分享一下...

    微信小程序2017年1月9日上线以来,极大的方便了人们的生活;也给很多商家提供了全新的推广、销售产品渠道。但是很多用户苦于不懂技术,想自己搭建又无从下手;

    那应该如何创建一个属于自己的小程序?今天分享一下小程序创建步骤,只要按照步骤操作,不懂技术也能自己搭建一个属于自己的小程序

    NO·1

    注册公众号

    划重点:申请小程序前,建议先注册一个公众号;因为使用已认证过的公众号主体做辅助认证,可以免300元年费。(秒通过)

    每年认证费300元 提供法人身份证、营业执照、对公账户等相关材料信息 认证周期约3个工作日 如涉及进嘴的商品,还需要提供食品经营许可证 ··············

    NO·2

    注册小程序

    登录认证过的公众号后台,点击小程序,按照提示步骤操作,开通小程序;

    NO·3

    申请微信支付

    提供法人身份证、营业执照、对公账户等相关信息资料 如果涉及食品的,还需要提供食品经营许可证 每笔腾讯收取0.06%手续费 申请免费 审核时间大概1-3个工作日 ·············· ··············

    NO·4

    服务器

    价格一年1500元左右(只适合小量用户访问,稍微多点用户量,服务器直接蹦,卡住进不去) 注册阿里云、腾讯云或者其他服务商,实名认证需要3个工作日内 购买服务器后,需要进行备案。备案大概需要7-10个工作日 提供法人身份证、营业执照、等相关信息资料。 ·············· ··············

    NO·5

    注册域名

    www.xxxx.com,一年30-150元不等(可通过万网、新网注册) 购买好域名后需要进行备案,备案大概需要20个工作日 提供法人身份证、营业执照、等相关信息资料。 ·············· ··············

    NO·6

    小程序商城源代码 如有小程序商城源码略过!!!

    1如没有小程序商城源码,建议去开源站gitee上去找找你需要的小程序源码;gitee官方会推荐一些优质的开源项目,你自己就不用挨个下载测试了,例如gitee官方推荐的关注量达6K+CRMEB商城系统,公众号、小程序端都包含的,直接下载安装即可:http://github.crmeb.net/u/gitee

    2不建议自己请技术开发;自己开发需要前端技术、UI设计、后端开发、办公场地等租金等,并且系统没有经过市场检验,会出现各种bug 后期维护成本也非常高 ·············· ·

    NO·7

    程序安装

    这里我就按已有源码的情况做解释

    NO·1-5都完成了,那我们接下来要做的工作

    第一步:先去小程序后台获取用户ID和秘钥,填写服务器配置信息、填写开发者

    第二步:再去微信支付后台填写支付秘钥,绑定支付目录、绑定对应的小程序ID

    第三步:安装后台,安装好后,填写小程序ID和秘钥,填写小程序服务器地址,填写支付秘钥信息。(这就是管理小程序的后台管理)

    第四步:去腾讯官方下载小程序开发者工具,把小程序商城前端代码打包上传到开发者工具,填写好小程序ID即可开始制作之旅。

    第五步:前后端各个功能测试、小程序商品上传、图片设计、小程序授权登录接口调试、小程序支付接口调试

    第六步:后台填充小程序商品、页面设计、图片设计

    第七步:提交前端代码到腾讯进行审核,审核周期1-7个工作日通过后,恭喜您 小程序正式上线 ·············· ··············

     

    展开全文
  • 从0开始搭建微信小程序(前后端)的全过程

    万次阅读 多人点赞 2019-04-14 22:21:40
    有段时间比较闲就尝试着做了一个微信小程序,一是为了锻炼自己独立部署一个前后端全链路系统的能力,二是想做一个自己都想用的小程序出来。方向是让用户可以集中获取优质的电影、音乐、书籍、游戏等信息的推荐,那...

    前言

    有段时间比较闲就尝试着做了一个微信小程序,一是为了锻炼自己独立部署一个前后端全链路系统的能力,二是想做一个自己都想用的小程序出来。方向是让用户可以集中获取优质的电影、音乐、书籍、游戏等信息的推荐,那什么是优质的信息呢?我这里假设的是排行榜里越靠前的信息就越是优质的信息,于是就做了一个这几类信息的排行榜小程序,当然排行的信息不是我随便瞎编的,数据来源主要是豆瓣以及其他一些排行网站,希望排行数据是权威和客观的,能最大化的减少用户获取优质资源的成本。

    下面讲解的可能不会太详细,毕竟想呈现的是一个全过程,弄一个非常详细的图文教程反而显得有些冗长,有些详细操作过程需要读者自己去参照相关文档,有些文档链接也会给出。OK,准备好了吗?一起开始这趟快乐的旅程吧。

    准备工作

    工欲善其事,必先利其器。要做的事明确了,那怎么做呢?需要准备什么呢?
    下面我将我涉及到的以等式的形式罗列出来:

    • 小程序账号 + 微信开发者工具 + 前端代码 + 后端数据 = 微信小程序
    • 豆瓣公共API + 参数 = 实时的排行榜数据及详情数据
    • PyCharm + Python + 爬虫代码 = 爬取的排行榜数据
    • Idea + Java + SpringBoot = 后端接口定义
    • 腾讯云服务器 + Tomcat + 后端接口定义 = 可访问的后端服务接口
    • 域名 + IP + SSL证书 + 备案 = 合法后端接口访问路径

    前端

    1. 注册微信小程序账号

    进入:微信公众平台, 选择小程序的账号类型按照流程进行注册。注意每个邮箱只能注册一个账号。

    2. 下载开发工具

    有了账号后,我们就可以使用这个账号进行开发了,开发用的IDE是腾讯出品的微信开发者工具,进入:小程序开发工具,下载对应的版本安装即可。

    3. 开始进入小程序前端开发

    打开刚下载好的微信开发者工具,扫码登录、创建小程序项目。登录微信公众号平台,在开发->开发设置->开发者ID中找到你小程序的AppID并填入到项目设置里。

    接着开始真正具体页面的开发了,开发过程参考开发文档:微信小程序接入指南

    4. 前端开发过程

    小程序前端开发其实就是在腾讯的开发工具里,使用js语言,遵循腾讯小程序的开发文档规范进行代码编写。开发过程中可以编译、预览、真机调试等,可以使用各种插件,可以调用一些公共的api或者自己定义的后端接口,也可以使用腾讯提供的云函数。

    调用的后端接口需要是https开头的,并且需要在微信公众平台的开发->开发设置->服务器域名里配置好。

    5. 打包上线

    开发完成后就可以准备上线了,首先在开发者工具里将写好的代码上传,点击上传,定义版本号和注释,再到微信公众平台的版本管理提交审核,待审核通过了就表示上线成功了,就可以在微信中搜索到你的小程序进行访问了。

    小结

    到这里,前端的工作就算是完成了,其实一般如果不涉及复杂数据处理的话,后端不是必需的,直接所有简单数据都存放在前端就行了。如果你的小程序是这样的话,那本文到这里就可以结束了。后面的你也不需要看了。如果你需要更灵活的交互,更复杂的逻辑,那后端接口则必不可少了。那更复杂的后端数据接口又是怎么完成的呢,跟着我继续往下走你就知道了。

    后端

    后端主要是提供给小程序数据接口,让小程序各个页面都能有排行榜数据展示,这里我提供的是http接口,返回的Json格式的字符串。使用的语言是Java,使用的框架是SpringBoot,将最终的java代码打包成war包部署在云主机上的web服务器Tomcat中,Tomcat就可以自动的将通过url过来的请求分发到我的程序代码的处理逻辑中,处理完请求拿到相应的数据则以Json字符串的格式返回。

    主要流程如下图:

    服务器搭建

    1. 购买云服务器

    首先要存放后端程序代码,需要一台机器,自己的电脑虽然也可以,但是自己的电脑可不能保证24小时都开机且让外网能访问到,所以需要购买一台云服务器;其次,外网能访问到意味着需要一个公网IP,购买的云服务器会配套一个对应的IP地址。
    这里我使用的是腾讯云服务器,进入官网购买:腾讯云,选择服务器的配置,付款即可。

    基于经费预算以及实际需要(其实还是因为舍不得花钱)的考虑,我这里选择的是比较低配的机器:

    • CPU:1 核
    • 内存:1 GB
    • 公网带宽:1 Mbps
    • 操作系统:CentOS 7.5 64位
    • 系统盘:高性能云硬盘,共 50 GB
    • 数据盘:高性能云硬盘,共 50 GB

    2. 购买域名

    域名是用来映射到IP上,便于直接使用域名访问其绑定IP所在的服务器。虽然直接用IP和端口的形式也可以访问到我们购买的云服务器,但是一来IP不好记,二来微信不允许使用IP加端口形式的url。所以只能“慷慨解囊”购买一个域名了。

    域名可以在任意域名服务商购买,我为了方便也是直接在腾讯云上买的,购买链接:域名注册

    3. 域名解析

    买好了域名,那这个域名怎么用呢,不和IP配套使用的域名是没有任何意义的域名。这里我们需要将这个域名或者其子域名绑定在我们需要对外提供服务的服务器所对应的IP上,也就是我刚刚购买的云服务器的IP上。

    在腾讯云后台的云解析里,点击你的域名添加记录,一般主要是添加A记录,也就是将域名绑定到IPv4地址上,可以添加多条,以主机记录区分各级的域名,@表示直接使用二级域名xxx.com,其他的则表示使用三级或更多级的域名,挂在你自己二级域名以下的多级域名都归你管。

    4. 域名备案

    为什么要域名备案呢?这个,普天之下莫非王土,互联网这块一亩三分地自然也是属于国家的,不能随随便便让你接入服务。要想在这块地开垦拓荒,不是不可以,只是需要向国家报备,接受监管。

    整个小程序的搭建过程,域名备案花的时间是最长的,花了十几二十天。进入备案页面:备案管理开始备案,详细的我就不多说了,
    备案过程详情参考:网站备案
    主要流程包括下面几个:
        (1) 办理幕布拍照
        (2) 验证备案信息
        (3) 填写主体信息
        (4) 填写网站信息
        (5) 上传材料
        (6) 确认备案信息,提交初审
        (7) 通过审核,完成备案

    5. 购买SSL证书

    为什么需要SSL证书呢?因为配置了SSL证书后可以让我们的url以https开头,这是微信小程序中要求的域名访问方式,以加密传输的方式更加安全。

    说是购买,其实你可以选择免费的证书“购买”,一样可以达到目的,只是没有付费的加密功能强,安全性自然弱了一等。不过这也阻拦不了我选择免费的,毕竟穷字当头。

    进入购买页面:SSL证书, 选择你要购买的证书的配置,下单付钱即可,将证书下载下来,后续配置web服务器用得着。

    小结

    经过了前面5个大步骤,这时我们的服务器具备了使用https协议通过域名访问的能力。接下来的工作就剩下开发我们的后端接口以及把后端程序代码部署到这台服务器上供小程序访问。

    后端程序开发

    环境

    • 开发语言:Java 8
    • 开发集成环境:IntelliJ IDEA Ultimate 2017
    • web框架:Springboot
    • 构建工具:Maven

    安装这些工具就不细讲了,网上一大堆教程,而且要是不懂后端开发的,安装了这一套环境也没用,这里姑且假设读者也是懂一定的后端开发知识。

    下面列出最主要的一部分Java代码来说明后端程序是怎么提供的http接口:

    @RestController
    @RequestMapping(value = "/movie")
    public class MovieListController extends MovieBaseController{
        private static final Logger log = org.slf4j.LoggerFactory.getLogger(MovieListController.class);
    
        /**
         * 豆瓣top250电影
         * test: http://localhost:8080/movie/top250?start=0&limit=10
         */
        @RequestMapping(value = "/top250")
        public CommonRespVo<List<ListCommonVo>> getMovieTop250() {
            try {
                HttpServletRequest request = this.getHttpServletRequest();
                String start = request.getParameter("start");
                String limit = request.getParameter("limit");
                String url = String.format("https://api.douban.com/v2/movie/top250?start=%s&count=%s",start,limit);
                JSONObject jsonObject = HttpUtil.getInfoFromHttpApi(url);
                List<ListCommonVo> listCommonVos = this.movieListDataTrans(jsonObject);
    
                if (CollectionUtils.isNotEmpty(listCommonVos)) {
                    return new CommonRespVo(listCommonVos, CommonRespVoCode.SUCCESS);
                }
            } catch (Exception e) {
                log.error("获取豆瓣top250电影信息异常",e);
            }
            return new CommonRespVo(CommonRespVoCode.FAILED.code, "未获取到数据");
        }
        
        /**
         * 华语top100电影
         * test: http://localhost:8080/movie/chinaTopMovie?start=0&limit=10
         */
        @RequestMapping(value = "/chinaTopMovie")
        public CommonRespVo<List<JSONObject>> getChinaTopMovie() {
            try {
                List<JSONObject> result = this.getSubList(Lists.newArrayList(ChinaTopMovieData.chinaTopMovieData));
                if (CollectionUtils.isNotEmpty(result)) {
                    return new CommonRespVo(result, CommonRespVoCode.SUCCESS);
                }
            } catch (Exception e) {
                log.error("获取华语Top电影信息异常",e);
            }
            return new CommonRespVo(CommonRespVoCode.FAILED.code, "未获取到数据");
        }
        //省略后续代码
    }
    

    上面这段代码,就是其中的两个接口,一个是通过公共API获取豆瓣top250电影信息,一个是通过爬虫数据获取的华语top100电影信息。可以看到SpringBoot使用RestController注解表明此类处理http请求,并在每个RequestMapping对应的方法上都返回json格式的数据。

    RequestMapping注解的作用是为每个方法映射一个url。@RequestMapping注解可以作用在控制器类上,也可以作用在其下的某个方法上。当在类级别上添加@RequestMapping注解时,这个注解会应用到控制器的所有方法上。而方法上的@RequestMapping注解会对类级别上的@RequestMapping的声明进行补充。这就是上面最终的url是类加方法上的路径的原因,在本地测试的时候在浏览器里通过url:http://localhost:8080/movie/chinaTopMovie?start=0&limit=10就可以获取到返回的数据。

    程序代码开发完成后,使用Maven构建项目并将代码打包成一个war包形式的文件,在target目录中可以找到该war包,后面会讲到这个war包的用途。

    数据来源

    排行榜数据是要具有一定的权威性,客观性的,所以当然不能我随便拿一些数据排列一下就成的,我自己又没有能力去统计这几类信息的相关排行,所以我就想到了拿来主义:从别人那里拿已经具备一定权威的数据。豆瓣有一些公共开源的api可以拿到我想要的部分数据,另外一些数据在其他各大排行榜网站上都有,但是没有现成的api把他们的数据提供给我,他们既然不给,那我只能自己去取了。

    我使用Python写了一些爬虫软件定期的爬取特定的排行榜网站上的数据,用这些数据更新我本地的静态数据,这样我的Java程序就可以拿到相对新的数据了。这里其实我还可以做得更好,但为了快速的上线,我来不及使用数据库落地这些爬取来的数据,这样有个不好的结果就是,每次服务重启的时候,有一段时间的数据不是最新的。这在我的可接受范围内,后面有时间再去解决这个问题吧。

    豆瓣的api示例:https://api.douban.com/v2/movie/top250?start=0&count=10,通过这个url可以批量分页的拿到top电影榜的数据。

    python爬虫则使用的是urlopen,urllib.request.urlopen()函数是用于实现对目标url的访问,返回url对应的网页数据。再使用BeautifulSoup对网页数据进行解析,主要是遍历搜索文档树从而拿到自己想要的那部分数据。

    部署后端程序

    准备:

    • 云服务主机: 腾讯云服务器
    • Web应用服务器:Tomcat 8
    • JRE:Java 8
    • SSL证书:Tomcat对应的SSL证书
    • FTP传输工具:FileZilla

    首先登录购买的那台云服务器,部署前先安装好环境,主要是安装JRE和Tomcat,安装好后还需要对Tomcat进行一番配置。

    1. 安装环境

    • 安装JRE
      点击下载Java运行时环境:Java SE Runtime Environment 8u201,下载后安装。
    • 安装Tomcat
      需要提前安装好Tomcat。进Tomcat官网下载对应版本的Tomcat压缩包:Apache Tomcat,将下载好的压缩包拷贝至指定的目录并解压,我这里是拷贝到/usr/local

    2. 配置Tomcat

    3. 部署应用

    将我们之前用Maven打包好的war包拷贝到安装Tomcat的webapps目录下,如我这里下图的位置:

    [root@VM_0_12_centos webapps]# pwd
    /usr/local/tomcat8/webapps
    [root@VM_0_12_centos webapps]# ls
    docs  examples  host-manager  manager  ROOT  wxrank  wxrank.war
    

    这里也就是上图中wxrank.war文件,然后去Tomcat的bin文件夹下运行startup.bat启动tomcat,即可自动解压war包,并部署。

    小结

    为了方便,上面有些文件是在自己的电脑上下载好了,再通过FileZilla上传到云服务器上,我自己电脑和云服务器之间的其他文件传输也都是用的这个工具。

    随着Tomcat的配置以及部署成功,我们的后端接口就可以通过url访问到了。

    总结

    虽然难度不大,但是整个过程确实还是挺繁琐的,之前只是大致知道怎么搭建,却并没有完整的实践过。整个流程完成下来,心中对于软件开发的全局观更加具体化了,这算是最大的收获吧。


    下面是小程序成品,扫一扫看一下吧:


    还有很多数据没准备好,后面有时间再优化优化。另外既然云服务器买都买了,怎么着也得充分的利用下,所以又在上面搭了一个个人博客,点下面我的博客链接看一下效果吧:www.jackielee.cn


    原文链接:随猿记-从0开始搭建微信小程序(前后端)的全过程

    展开全文
  • 微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。 在写本文章之前,发布过一篇 《说一说要求 小程序自定义导航栏 的产品有多沙雕》 文章地址:...

    微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。

    在写本文章之前,发布过一篇 《说一说要求 小程序自定义导航栏 的产品有多沙雕》
    文章地址:说一说要求 小程序自定义导航栏 的产品有多沙雕_黄河爱浪-CSDN博客_自定义标签沙雕
    在文章中说明了自定义导航栏的诸多弊端,小编是坚决抵制自定义小程序导航栏的。但由于一些特殊原因不得不去自定义导航栏(比如要根据登录的用户权限增加或减少导航数量)。

    本篇分享一下小编自己整理的一套 微信小程序 自定义tabBar 源码,及说明实现过程和分析相较与自定义组件式定位在底部导航的优点。

    目前仅 微信小程序 是支持自定义导航栏的,可查看微信小程序官方文档,学习自定义tabBar的使用。

    # 1、创建自定义导航栏 目录和文件

    目录:微信文档有具体说明,可见下图

    资源平台无法设置免费下载且被不懂的人瞎评论,所以删除了下载链接,请自行阅读微信文档

    源码效果示例图:

    # 2、优缺点:

    相较与 自定义组件 定位在底部的方式,优缺点:

    优点:

    1. 拥有了多窗口的切换(这是非常重要的功能,自定义组件定位的方式是无法实现该需求的);
    2. 不会因为“下拉刷新”功能导致移动导航栏被移到窗口外的问题。

    缺点:

    1. 仍然无法实现“中间按钮凸出”的效果;
    2. 实现过程相对复杂一些;

    相较与 框架原生导航 的方式,优缺点:

    优点:

    1. 能够支持更多的自定义需求,比如动态的增删导航数量;

    缺点:

    1. 首次加载和增删导航数量后,更新时会有闪动和跳动的情况;

    鱼和熊掌不可兼得,这应该是目前最佳的自定义方式了,框架原生导航依旧是最好的选择。小编也正在积极的探索一种实现更方便,效果更自由的,兼容更多小程序的方案,在不久,将会分享给大家。

    作者:黄河爱浪 QQ:1846492969,邮箱:helang.love@qq.com

    本文原创,著作权归作者所有,转载请注明原链接及出处。

    展开全文
  • 微信小程序商城有发展机会吗?

    千次阅读 2019-06-24 14:18:50
    1.微信小程序商城有发展机会吗? 1.微信小程序商城有发展机会吗? 近年来,移动互联网发转迅猛,用户从社交、购物、办公、到娱乐游戏等等,都日渐从传统PC端 转向移动端。移动支付的普及更是让更多的消费者选择...
  • uniapp和小程序面试题一

    千次阅读 2021-07-15 17:21:33
    小程序端和H5的代表值是什么? 通过 #ifdef、#ifndef 的方式 H5 : H5 MP-WEIXIN : 微信小程序 2.uniapp的配置文件、入口文件、主组件、页面管理部分 pages.json 配置文件 main.js 入口文件 App.vue 主组件 pages ...
  • 本文转载自: 知乎 ...一:官方地址集合: 1:官方工具: ...2:简易教程: ...wxadoc/dev/?t=1476434677599 ...微信小程序把玩《一》:window配置,tabBar底部导航,应用生命周期 ... ...微信小程序demo:搜索音乐小程序,调用酷狗
  • ', '假设对于一个动态规划问题,应用顺推法以及逆推解法得出的最解分别为P和D,则有( )。', '下列有关线性规划问题的标准形式的叙述中错误的是( )。', '人类进入21世纪,英国广播公司(BBC)在全球范围内进行...
  • 经典蝙蝠算法MATLAB实现

    万次阅读 多人点赞 2019-02-24 21:19:42
    为什么会有这么多基于群智能的算法,蚁群、粒子群、鱼群、烟花、炮竹、猪...该算法是一种基于迭代的优化技术,初始化为一组随机解,然后 通过迭代搜寻最解,且在最解周围通过随机飞行产生局部新解,加强了局部搜索。...
  • 搭建微信小程序(前后端)

    千次阅读 多人点赞 2019-09-25 14:39:20
    前言有段时间比较闲就尝试着做了一个微信小程序,一是为了锻炼自己独立部署一个前后端全链路系统的能力,二是想做一个自己都想用的小程序出来。方向是让用户可以集中获取优质的电影、音乐、书籍、游戏等信息的推荐,...
  • 社区管理系统案列/APP/小程序/网站

    千次阅读 2019-07-05 17:33:54
    1)及时性:以往社区工作人员在巡视街道时,发现脏乱差等都需要经过一定程序才能传达到所负责的人手里,而通过社区APP,只需要在发现问题的地方将其用手机拍下,然后上传到APP的“市容管理”模块,便会及时提醒负责人...
  • 微信小程序完整demo:猜拳小程序(go+websocket+redis+mysql) 微信小程序demo:选课投票,遮罩层、统计图 小程序学习用demo:年终计划:剩余天数,秒数倒计时 微信小程序UIdemo:三种图片列表样式 微信...
  • 蚁群算法汇总含matlab代码_数学建模(十四)

    千次阅读 多人点赞 2019-11-10 12:27:23
    (4)启发式的概率搜索方法不容易陷入局部最解,易于寻找到全局最解。 我们以中国31个直辖市、省会、自治区(未包括我国香港、澳门及台湾) 求解结果如下: 图2 TSP的最短距离与迭代次数的关系图 图3 ...
  • 微信小程序多端框架 kbone 开源

    千次阅读 2020-02-26 10:21:07
    适用场景kbone 是一个致力于微信小程序和 Web 端同构的解决方案。微信小程序的底层模型和 Web 端不同,我们想直接把 Web 端的代码挪到小程序环境内执行是不可能的。kbone ...
  • 点击上方“AirPython”,选择“加为星标”第一时间关注 Python 技术干货!1. 场景之前写过微信小程序的几种方式,对于有源码的小程序推荐使用微信开放的 SDK 来做自动化,...
  • 微信小程序调用小票打印机

    万次阅读 2018-10-16 13:02:17
    如今多媒体的传播速度远远超乎我们的想象,其中依附于微信的"公众号"作为10亿流量代表,成为所有...微信小程序因为其即搜即用、用完即走的简单快捷而被大众所追崇,而这个小程序从一出生就是一个富二代,...
  • 遗传算法

    万次阅读 多人点赞 2019-04-06 21:41:47
    当然,也存在较的概率选出适应度较低的个体,为了避免这种情况,本文引入了竞争机制,即一次选择的过程选出2个个体,再取其中适应度较高的那个个体,具体的程序如下: /* 基因选择函数 ga 遗传算法器指针 ...
  • 2019工程伦理慕课答案(2019秋)习题及期末答案

    万次阅读 多人点赞 2019-11-08 18:19:53
    程序公正 多选题 (1/1 point) 下列哪些属于工程项目社会评价的社会公平指标?() 基尼系数 恩格尔系数 就业率 公众参与度 第四章习题(下) 单选题 提出保护资源的目的是为了自然本身的...
  • 前端面试题

    万次阅读 多人点赞 2019-08-08 11:49:01
    iframe的缺点? 75 请你谈谈Cookie的弊端? 75 js延迟加载的方式有哪些? 76 documen.write和 innerHTML 的区别? 76 哪些操作会造成内存泄漏? 76 判断一个字符串中出现次数最多的字符,统计这个次数 ...
  • 软件测试面试题汇总

    万次阅读 多人点赞 2018-09-27 12:31:09
    2、我现在有个程序,发现在Windows上运行得很慢,怎么判别是程序存在问题还是软硬件系统存在问题?   5 3、测试的策略有哪些? ................................................................................
  • 大二开始接触小程序开发,目前自己唯一还在弄的项目是校内面向学生的一款课程评测小程序 uCourse。 使用过微信小程序原生语言开发过小程序,也用过一系列后来紧随其上的第三方框架,如 WePY (1.x), mpvue (1.x)...
  • 测试开发笔记

    万次阅读 多人点赞 2019-11-14 17:11:58
    简单效率高 回归测试不充分,漏洞较多 时间较紧且人力资源不足时,中间版本的测试轮次可以使用,关联度比较的模块和功能 周边影响法 每次回归除了执行发现bug的用例外,还要执行与其相关的用例 在考虑了测试成本的...
  • 微信小程序资源汇总

    千次阅读 2018-08-20 17:18:47
    微信小程序汇总(10月16日更新小程序100+个教程或资讯与50+个Demo) 1:微信小程序官方工具:https://mp.weixin.qq.com/debug/w … tml?t=1476434678461 2:微信小程序简易教程:...
  • 【数据库学习】数据库总结

    万次阅读 多人点赞 2018-07-26 13:26:41
    缺点 优点 视图可以将多个复杂关联表提取信息,方便查询,但不能优化查询速度(调用视图查询时才进行动态检索数据)。 即,如果你认为一个sql查询非常慢,为了优化它的速度把它建立成视图,这是不可取的,视图是...
  • 微信小程序中web-view的那些坑

    千次阅读 2018-02-01 14:27:00
    最近在研究微信小程序,在使用web-view的时候遇到了一些坑,记录一下。 1.打开的页面必须在微信小程序网站上的开发设置中配置进去,否则是无法打开该网页的 2.所有的H5 URL必须是https 3. H5的URL不能包含“?key...
  • 深度学习入门

    万次阅读 多人点赞 2017-11-05 21:23:46
    对于一个未标记示例集U = {xl+1, x l+1, … , xl+u},I《u,于是,我们期望学得函数 f:X→Y 可以准确地对未标识的数据xi预测其标记yi。这里均为d维向量, yi∈Y为示例xi的标记。   半监督学习就是以“已知之认知...
  • uni-app和mpvue对比开发小程序

    千次阅读 2019-10-08 10:54:38
    最近在研究uni-app,因为公司要同时准备做小程序和H5,网上对比了一些框架,发现uni-app是比较适合这种开发的,下面拿原生代码和uni-app还有mpvue这三种框架做对比,你就知道为什么了: uni-app是遗传了原生小程序的...
  • 《数据库原理》— 数据库系统概论第五版习题解析

    万次阅读 多人点赞 2017-05-29 14:57:48
    试述网状、层次数据库的缺点。 答:  层次模型的优点主要有: ( l )模型简单,对具有一对多层次关系的部门描述非常自然、直观,容易理解,这是层次数据库的突出优点; ( 2 )用层次模型的应用系统性能...
  • videoCoverImg:'http://img5.imgtn.bdimg.com/it/u=1672477765,2527992874&fm=26&gp=0.jpg', // 视频封面图 videoPlayIcon:'http://39.105.134.221:8080/test/source1.png', // 视频播放icon videoLockIcon:'...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 36,599
精华内容 14,639
关键字:

优小u小程序