零基础微信小程序Day1

文章目录

一、前言
二、下载和注册
三、认识界面
四、小程序组件
五、结尾

一、前言

学习目的（purpose)：学会制作一款微信小程序，为今后毕设做准备。

背景介绍（introduction)：计科大二在读，大一上学web开发（对，就是你所想的ppt老师，当时也没咋学==零基础），学过C和数据结构。

说明（explanation）：本人学习能力一般，关于计算机软硬件、前后端、主流语言都懂一点点，每次学习时间在1h-2h，所以看本人博客时应该会感到非常轻松。Day1，开始！

二、下载和注册

工欲善其事，必先利其器。咱的工具在哪？在哪运行？
微信官方给咱提供了开发者平台，无脑下载安装就行。不知道哪下载？CSDN、百度、知乎、b站一搜，给你安排的明明白白。下载完，我相信就创建个新项目来说是没有任何问题的，这个就跟你平时使用APP一样，你随便点又不会爆炸，所以，别怕。
你得有个小程序账号，点这个注册小程序账号(https://mp.weixin.qq.com/)

①点击右上角“立即注册” ②选择账号类型“小程序” ③填你的信息 ④完成（done）
现在来看创建小程序页面

项目名称：项目名称（搁着搁着呢）
目录：把这个项目存在哪？
AppID：之前注册的小程序号派上用场了，之前那个网页你登录的话，左边有一栏“开发”，点进去找“开发设置”，就会看到AppID（小程序ID了）复制粘贴即可
后端服务：选不使用云服务，然后语言默认JavaScript
模板选择：后面那个普通的就行了，要是选前面那个新年的，记得把音量调低，自行体会~

三、认识界面

页面基本就是这个样

建议把红圈的地方可以改成85%缩放就够了，【模拟器】：最左边这个模拟手机页面的；【编译器】：写代码的地方；【调试器】：下面写着在
其实英语单词能力过关的话，基本上就看得懂每一栏的英文，简单了解下：
☆pages：存放所有小程序的页面
utils：存放工具性质的模块（eg：格式化时间）
☆app.js：小程序项目的入口文件
☆app.json：全局配置文件（JavaScript Object Notation是一种轻量级的数据交换格式）我不到(知道)啊，先了解
app.wxss：全局样式文件
project.config.json：项目配置文件
sitemap.json：配置小程序和页面是否能被微信索引

1. json文件

①app.json

（1）“pages”：记录所有页面的路径，比如我现在可以在这里面随便加个JIARAN的文件，只需要在原来末尾语句加个逗号然后模仿“pages/JIARAN/JIARAN”（别打逗号了，这是最后一句）
然后就是这样，你会发现左边pages文件里面会多出一项

当你按下ctrl+s保存，你可能疑惑为啥新写的JIARAN文件对旁边模拟器没有啥影响，点击JIARAN.wxml（相当于HTML）看里面有没有啥东西，发现其实是有的，有一段text（文本），但是为什么不显示呢？了解过PS的同学应该知道图层，也就是我们的文件被压在最后了，那我现在想显示出来怎么办呢？调换顺序即可，来！
再点击我们的app.json修改顺序，效果如下（记得敲完代码按ctrl+s保存生效）

（2）“window”：全局定义页面的背景色、文字颜色等。里面的什么backgroundTextStyle看英文就知道是背景文本风格样式嘛
（3）“style”：小程序组件所用的样式版本。默认是“v2”表示新版，或者你直接把整段话删掉，就是旧版了
（4）“sitemapLocation”：指明sitemap.json的位置

②project.config.json文件

（1）“setting”：编译相关配置
（2）“projectname”：项目名称
（3）“appid”：小程序账号ID。以后别人的小程序拿来用，首先要修改这个appid，不然可能频繁报错

③sitemap.json文件

（1）“action”：默认“allow”（你的调试器会出现一句话“xxx将被索引”）

那么如果我们把这个“allow”改为“disallow”就变成不允许被索引了

④页面.json文件
我们点进pages这个大文件夹，发现里面有其他文件，随便点击（eg：index）有index自己的json文件，现在咱能做的也就能改改颜色（navigationBarBackgroundColor）了

2.wxml文件

（WeiXin Markup Language）和前端HTML差不多，但有区别。不知道HTML？浏览器上面的文字就是一个html文件，就当成文本文件吧。简单做个区分：

①标签不同
HTML中的（div，span，img，a）对应过来是（view，text，image，navigator）
div：一个大盒子、大容器，夹在这个里面的内容独占一行（纵向排列）
span：翻译过来叫跨度嘛，小盒子、小容器，写一堆span横跨一行（横向排列）
img：插图片

②属性不同
a：超链接（< a href = " # “> 超链接 < /a > ）对应过来（< navigator url = " /pages/ home / home” < /navigator>）

③提供了类似于vue中的模板语法

3.wxss文件

（Weixin Style Sheets）相当于前端中CSS，啥是CSS？咱用HTML写出一堆东西，想美化它咋办？就用CSS文件美化，区别：

①提供了rpx尺寸单位
可以自动换算

②提供了全局样式和局部样式
全局就是app.wxss，局部xxx.wxss，比如全局样式定义为白色，这个局部定义为绿色，那么这一块就是绿色了

③wxss仅支持部分css选择器
.class和#id、element、并集选择器，后代选择器、::after和::before等伪类选择器（啊，说实话咱第一次接触选择器也不知道是啥，可以理解为一大串文字，你需要选择其中一部分变个色儿，咱给它上个标签，然后在css文件里面给它美化）

4.js文件

（JavaScript）和普通的js差不多，刚刚说完html、css那么此时你所创造的东西是不能动的、无法交互的，因此就有了js
①app.js
小程序的入口文件，调用APP（）函数启动整个小程序

②某个页面.js
同理，页面的入口文件，通过调用Page（）函数来创建并运行页面

③普通的.js文件
是普通的功能模块文件，用来封装公共的函数或属性供页面使用

(ノ◕ω◕)ノ那么知道老三样（wxml、wxss、js）后咱说下小程序的宿主环境—通信模型

(ノ◕ω◕)ノ关于小程序是怎么启动的：
step1：把小程序的代码包下载到本地
step2：解析app.json全局配置文件
step3：解析app.js小程序入口文件，调用APP（）函数创建小程序实例
step4：渲染小程序首页
step5：启动完成（done）

(ノ◕ω◕)ノ关于页面渲染：
step1：加载解析页面的.json配置文件
step2：加载页面的.wxml和.wxss文件
step3：执行页面.js文件，调用Page（）函数创建页面实例
step4：渲染完成（done）

四、小程序组件

1.常用的视图容器类组件

①view（页面布局效果）
之前说过是类似于HTML中的div，大容器，那么我们就点开pages大文件夹里新建的文件JIARAN，找到JIARAN.wxml，输入图片中的代码，保存，左边模拟器可见效果

有的同学就说了：“啊！view里面包裹的东西我知道，但是你咋让他们成为三个带色儿方块的？”
别急别急，我能解释！虽然涉及CSS的语法，但这些东西咱接触一次就心领神会了
首先，在wxml里是这个效果

然后咱们刚刚提到CSS、WXSS就是美化功能对吧，还讲到了选择器。那咱们现在就用个常用的class选择器，顾名思义，class，就是选择这一类的。应用view class把它包裹起来，但是咱得给这个选择器起个名啊，就叫hhh吧（不影响）

这…这不对吧？怎么选择器包裹起来了，图片还没变样子呢？因为咱只是给它包裹起来了，但是没设定样式，所以此时应该去JIARAN.wxss里设定样式。因为我们用的是class类选择器，所以我们在声明它的样式时应该写成.hhh（class = “填这个里面你的命名 ”）然后来个大括号{}里面写你的语法。语法的功能在图片里标了注释（这东西要用的时候去查嘛，就跟abandon是啥意思一样，去查字典）

最后可以使用后代选择器（就是说在hhh里的三个字母我要分别给他们设计样式），还是选择器nth-child（n）可以规定属于父元素（就是属于外面大框框）的第几个孩子（元素）的样式（这些属于css语法，做了解即可，同时在我们零基础学小程序的过程，不可避免的要再去学习前端的知识，这是必然的）

②scroll-view（可滚动的视图区域）

我们在逛狗东、某宝、地猫等线上商城时，往往会看见会有可以往下滚动的分类栏，如图

应用这个组件，咱也可以实现，比如让刚刚那三个方块竖着滚动。
首先这个 view 就该变成 scroll-view 了，结尾的< /view>也该变成< /scroll-view>然后我们想要它纵向滚动，就得在后面多加一句 scroll-y，不用等于“ ”赋值，只需要这个属性就行

然后咱是不是也该对咱的. wxss文件去操作呐，只需要修改之前大盒子.hhh就行了，给它设定一定的高度，这个高度就是咱在不滚轮的情况下能看见的高度（因为一个方块是100px，这里设置150px可以看见一个半）同时这个大盒子的宽度也应该和小方块保持一致（100px）大家可以自行尝试~
最后可以给大盒子加上边框，利用border：2px（边框线宽度） solid（边框线的类型） black（边框线的颜色），效果如下图(✪ω✪)

③swiper和swiper-item（轮播图容器组件）
同样的，我们也在手机商城里看到那种轮播图，就是隔几秒切一张图片的那种，那怎么实现呢？
首先 swiper 当大盒子，每个小盒子就属于一项所以是swiper-item，给大盒子选择器命名“abc”，小盒子命名“item”，保存后发现模拟器上的方块是可以拖动的了

然后我们去设计大小盒子的样式（跟之前一样：nth-child( ) 语法做个了解）

最后可以给轮播图增加小圆点，表明有几张图在轮播、现在播到哪一张图（打空格，然后加indicator-dots）

(☆_☆)那可不可以修改小圆点的样式呢？可以的，就是一种类似叠buff的效果，以下是swiper组件的常用属性

indicator-color=“默认状态颜色、未激活的颜色”
indicato-active-color=“被选中的颜色、激活的颜色”active嘛，积极主动的意思

五、结尾

有任何问题的话，欢迎各位指出~ ヾ(◍°∇°◍)ﾉﾞ