前言

你需要在本地安装微信开发者工具，即集开发编译运行环境于一体的工具。

本项目技术栈基于 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](/user/Import) 引入，用的是相对路径。

[@import](/user/import) "../../styles/common.wxss";

页面逻辑

生命周期

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

分为两种：

1. 应用的生命周期 `app.js`；

2. 页面的生命周期 ；

一个微信小程序项目其实一个`应用`，一个应用里面可以拥有多个 `页面`。

应用的生命周期

看看考研刷题小程序项目中的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以及能力。