基础篇：项目技术栈及其基础知识储备

前言

你需要在本地安装微信开发者工具，即集开发编译运行环境于一体的工具。
本项目技术栈基于 ES2015+、WXML、WXSS、JavaScript 、微信原生 API和云开发，所有的请求数据都使用云数据库的小程序端SDK进行查询，提前了解和学习这些知识会对使用本项目有很大的帮助。
接下来，我们一起大致梳理一下，本项目需要用到的一些技术基础知识，所谓删繁就简三秋树。

原生小程序框架

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

一个小程序主体部分由三个文件组成app.js、app.json、app.wxss，必须放在项目的根目录；
一个小程序页面由四个文件组成，分别是：js、wxml、json、wxss；
如下：
```
└── miniprogram 小程序目录
├── app.js 小程序全局入口
├── app.json 小程序全局配置
├── app.wxss 小程序全局样式
├── pages 页面目录
│ │── index 首页
│ ├── index.wxml 页面结构
│ ├── index.js 页面逻辑
│ ├── index.json 页面配置
│ └── index.wxss 页面样式
└── image 图片资源
```
页面结构
模板语法WXML
view标签和text标签
我们现在做的是微信小程序，所以，要使用它的语法。WXML（WeiXin Markup Language）是微信小程序框架设计的一套标签语言。
注意！不要被官方的很官方的概念唬住了，其实就是简单的标签。不信，我们举个栗子类比看看。相信大多数小伙伴，即使没有做过开发的都听过，html的div和span。
```
div => view
span => text
```
view其实相当于div，都是块级元素，也就是会换行的；
text相当于span，都是行内元素，也就是不会换行的。
动手试试吧，在index.wxml直接使用这两个标签就明白了。
```
<view> 马原 </view>
<view> 毛中特 </view>
<view>
   <text> 思修 </text>
   <text> 近代史 </text>
</view>
```
什么？还有点迷糊？这样看呢！

保姆级演示，明白了“view是块级元素，会换行的；text是行内元素，不会换行的”这句话了没？
或许我以后不会这么讲了，因为实在是太太太基础了。简单的事情，只说一遍。
不明白不要紧，就像公式，你不用知道是怎么来的，你只要记住公式是怎么用的就行了。
毕竟我们做的是应用层面的开发嘛，它提供什么API，知道怎么用的，然后直接去使用就行了。如果能举一反三，就更好了。

数据绑定

在js的data中定义变量：

data:{
  title:"考研题库小程序",
  num:50,
  isLogin:true,
  user:{
    nickName:"姑苏洛言",
    age:20
  },
  isChecked:true
}

在 wxml中直接使用：

<!-- 字符串类型 -->
<view>
{{title}}
</view>

<!-- 数字类型 -->
<view>
{{num}}
</view>

<!-- 布尔类型 -->
<view>
{{isLogin?'你好，xx会员':'请授权登录'}}
</view>

<view wx:if="{{isLogin}}">{{user.nickName}}</view>
<view wx:else="{{isLogin}}"> 请先登录 </view>

<!-- 使用bool类型充当属性check 字符串和花括号之间不要存在空格，否则会导致识别识别 -->
<checkbox checked="{{isChecked}}"></checkbox>

<!-- 对象类型 -->
<view>
昵称：{{user.nickName}}，年龄{{user.age}}
</view>

再了解一下，其他一些基本运算。

<!-- 算数运算 -->
<view>{{a + b}}</view>

<!-- 三元运算 -->
<view hidden="{{flag ? true : false}}"> Hidden </view>

<!-- 逻辑判断 -->
<view wx:if="{{length > 5}}"> 今日刷题挑战成功 </view>
<view wx:else>今日刷题挑战失败</view>

列表渲染

列表渲染，其实说白了就是我们说的数组循环。
列表渲染，关键字：

wx:for
wx:for-item
wx:for-index
wx:key

wx:for="{{list1}}"
wx:for-item="循环项的名字" => wx:for-item="item"
wx:for-index="索引项的名字" => wx:for-index="index""循环项的名字" 默认 = “item”
"索引项的名字" 默认 = “index”

值有两种：
1）当对数组对象做循环的时候：

list1:[{id:'1', name: '马原'},{id:'2', name: '毛中特'},{id:'3', name: '思修'},{id:'4', name: '近代史'}]

wx:key="id" => item.id

2）当数组是普通数组：

list1: ['马原', '毛中特', '思修', '近代史']
wx:key="*this"

index.js

Page({
data: {
// 普通数组
list1: ['马原', '毛中特', '思修', '近代史'],

// 对象数组的循环
list2: [
{id:'1', name: '马原'},
{id:'2', name: '毛中特'},
{id:'3', name: '思修'},
{id:'4', name: '近代史'}
]
}
})

index.wxml

<view>
<view>普通数组</view>
<view wx:for="{{list1}}" wx:key="*this">
{{index}} --- {{item}}
</view>
<view>======================</view>
</view>

<view>
<view>对象数组</view>
<view wx:for="{{list2}}" wx:key="id">
{{index}}:{{item.name}}--{{item.id}}
</view>
</view>

条件渲染

1）wx:if
if 、else、 else if 对应微信小程序模板语法分别为 wx:if、 wx:else、 wx:elif

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

2）hidden
在标签上直接加属性hidden。
3）什么场景下使用哪一个？

当标签不是频繁的切换显示，优先使用wx:if 直接把标签从页面结构给移除掉；
当表示频繁的切换显示，优先使用hiddem 通过添加样式的方式来切换显示。
事件的绑定
1）绑定事件通过 bind+事件名；
2）定义事件的回调需要放在 js文件和data同层级。
.wxml
```
<view bindtap="handleTap">
{{num}}
</view>
```
.js
```
Page({
data: {
num: 0
},

// 声明了点击事件的回调
handleTap() {
let num = this.data.num;
num++;

this.setData({
num
})
}
})
```
原生组件
在考研刷题小程序中，常用的原生组件：view、text、image、button、radio、checkbox、swiper等。
view
视图容器，也就是块级元素。
text
文本标签，也就是行内元素。
1）text 组件内只支持 text 嵌套。
2）设置user-select属性，长按文本可选、复制。
3）可以对空格、回车进行解析显示。
image
图片组件。
1）默认的宽度和默认的高度 320 * 240。
2）内置懒加载 lazy-load。
3）mode 渲染模式：
scaleToFill：默认值。把图片内容，拉伸到相框的大小。
widthFix：把图片变成了和以前web中的图片的渲染模式一样。web图片，当宽度改变的时候，高度会等比例的跟着改变。移动端开发 img width:100%。
aspectFit：等比例拉伸图片-内容，可能会导致，image相框留出空白。
aspectFill：等比例拉伸图片-内容，图片的内容会被截取（图片内容会撑满相框）。
button
按钮组件。

radio

单选项目，在考研刷题小程序项目中用于单项选择题。

checkbox

多选项目，属性和单选radio大概一致。在考研刷题小程序项目中用于多项选择题。

swiper

滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

页面样式

层叠样式WXSS

WXSS( WeiXin Style Sheets )是⼀套样式语言，用于描述 WXML 的组件样式。与 CSS 相比，WXSS 扩展的特性有：

响应式长度单位 rpx
样式导入
全局样式app.wxss
app.wxss是默认的全局样式。把全局的样式的代码都写到这里：
```
page{
background-color: #ffffff;
}
```
page 标签是页面最外层的标签。
样式语法
在wxss中不支持通配符 * ，所以当我们要实现以下效果的时候：
```
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
```
只能够单个标签一个一个的定义了。语法像这样写：
```
page,view,text{
margin: 0;
padding: 0;
box-sizing: border-box;
}
```
rpx
小程序中的单位 rpx，功能和以前移动端的web中的rem 类似，rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx 。
1）不管屏幕多宽，都是 750rpx；
2）不管手机屏幕多宽都是 100% ；
样式导入
当我们需要引用一个样式表文件时，通过@Import 引入，用的是相对路径。
```
@import "../../styles/common.wxss";
```

页面逻辑

生命周期

只是一个事件而已！！只是会在特定的时候，会自动触发。
分为两种：

应用的生命周期 app.js；
页面的生命周期；
一个微信小程序项目其实一个应用，一个应用里面可以拥有多个 页面。

应用的生命周期

看看考研刷题小程序项目中的app.js：

App({

// 小程序在启动的时候 触发
onLaunch: function (options) {
// 当应用开始启动的时候，可以获取用户的一些信息
console.log("onLaunch");
},

// 小程序被展示 的时候触发
// 反复被触发
onShow: function (options) {
console.log("onShow");
},

// 小程序被隐藏的时候触发
onHide: function () {
console.log("onHide");
},

// 当应用出错了时候会 触发
// 在这里 捕获错误信息
// 把错误信息收集 - 发送ajax异步请求 发送到后台中
onError: function (msg) {
// msg ：错误信息
console.log("onError");
console.log(msg);
},

// 当页面找不到了 就会触发了
onPageNotFound: function (options) {

},

// 应用的全局数据
globalData: {
title:"生命周期"
}
});

页面的生命周期

看看考研刷题小程序项目中的首页index.js：

Page({
data: {

},

// 页面开始加载的时候触发
// 发送异步请求 获取数据来渲染页面
onLoad: function(options) {
console.log("onLoad");
},

// 页面标签都渲染完毕 才触发
onReady: function() {
console.log("onReady");
},

// 页面被 显示 页面切换-页面路由
onShow: function() {
console.log("onShow");
},

// 页面被隐藏
onHide: function() {
console.log("onHide");
},

// 页面被 卸载的时候 - 当页面切换的时候 使用了不同的 open-type 会关闭当前页面的
onUnload: function() {
// 可以关闭一些定时任务
console.log("onUnload");
},

// 当页面 下拉刷新的时候触发
// 在全局配置或者 页面配置中 手动开启 下拉刷新！！！
onPullDownRefresh: function() {
console.log("onPullDownRefresh");
},

// 上拉页面 上拉加载下一页数据
onReachBottom: function() {
console.log("onReachBottom");
},

// 当页面被转发的时候
onShareAppMessage: function() {
console.log("onShareAppMessage");
},

// 页面被滚动的时候
onPageScroll: function() {
console.log("onPageScroll");
},

// 当点击tabbar的时候触发
onTabItemTap:function(item) {

}
});

页面路由

在小程序中所有页面的路由全部由框架进行管理。
注意事项：

navigateTo, redirectTo 只能打开非 tabBar 页面。
switchTab 只能打开 tabBar 页面。
reLaunch 可以打开任意页面。
页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
调用页面路由带的参数可以在目标页面的onLoad中获取。
页面配置
全局配置app.json
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
以下是一个包含了部分常用配置选项的 app.json ：
```
{
"pages": [
"pages/index/index",
"pages/test/test",
"pages/result/result"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "护网专题信息安全知识竞答",
"navigationBarTextStyle": "black"
},
"sitemapLocation": "sitemap.json"
}
```
完整配置项说明请参考小程序全局配置。
页面的配置
每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。
例如：
```
{
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "积分排名",
"navigationBarTextStyle": "black"
}
```
完整配置项说明请参考小程序页面配置。
API
小程序开发框架提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。
然而，这次我们在项目中，用到的主要是云开发 API。比如：add、get、update请求等。
云开发 API
开通并使用微信云开发，即可使用云开发API，在小程序端直接调用服务端的云函数。
get请求代码示例：
```
const db = wx.cloud.database();
db.collection('todos')
.where({
_openid: 'xxx' // 填入当前用户 openid
})
.get()
.then(res => {
console.log(res.data)
})
```
调用云函数代码示例：
```
wx.cloud.callFunction({
// 云函数名称
name: 'cloudFunc',
// 传给云函数的参数
data: {
a: 1,
b: 2,
},
success: function(res) {
console.log(res.result) // 示例
},
fail: console.error
})

// 此外，云函数同样支持promise形式调用
```
小结
微信小程序使用了最新的前端技术栈，具有原生APP体验服务的小程序框架，小程序视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，响应的数据绑定，提供了丰富的基础组件和API以及能力。

基础篇：项目技术栈及其基础知识储备

前言

原生小程序框架

页面结构

模板语法WXML

view标签和text标签

数据绑定

列表渲染

条件渲染

事件的绑定

原生组件

view

text

image

button

radio

checkbox

swiper

页面样式

层叠样式WXSS

全局样式app.wxss

样式语法

rpx

样式导入

页面逻辑

生命周期

应用的生命周期

页面的生命周期

页面路由

页面配置

全局配置app.json

页面的配置

API

云开发 API

小结

Monstart

引用和评论

小程序云开发实战——从0到1开发网络安全知识答题积分赛小程序

腾讯新闻中心首页改版啦

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

不使用 JS 纯 CSS 获取屏幕宽高