前言

考研刷题小程序项目,它的技术栈基于微信原生小程序和云开发能力,所以需要在本地安装微信开发者工具,初始化考研刷题小程序项目,认识项目目录结构与配置文件,以及了解和学习相关框架知识,这样会对学习或者直接使用本项目均有很大的帮助。


1、生命周期

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

分为两种:

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

2. 页面的生命周期 ;

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


1.1、应用的生命周期

看看考研刷题小程序项目中的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:"生命周期"
}
});


1.2、页面的生命周期

看看考研刷题小程序项目中的首页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) {

}
});


2、原生组件

在考研刷题小程序中,常用的原生组件:


2.1、view

视图容器,也就是块级元素。


2.2、text

文本标签,也就是行内元素。

1)text 组件内只支持 text 嵌套。

2)设置user-select属性,长按文本可选、复制。

3)可以对空格、回车进行解析显示。


2.3、image

1)默认的宽度和默认的高度 320 * 240。

2)内置懒加载 lazy-load。

3)mode 渲染模式:

  • scaleToFill: 默认值。把图片内容,拉伸到相框的大小 。
  • widthFix: 把图片变成了和以前web中的图片的渲染模式一样。web图片,当宽度改变的时候,高度会等比例的跟着改变。移动端开发 img width:100%。
  • aspectFit: 等比例拉伸图片-内容,可能会导致,image相框留出空白。
  • aspectFill: 等比例拉伸图片-内容,图片的内容会被截取(图片内容会撑满相框)。


2.4、button

按钮考研刷题小程序云开发实战-基础知识储备(2)_生命周期考研刷题小程序云开发实战-基础知识储备(2)_小程序_02

2.5、radio

单选项目,在考研刷题小程序项目中用于单项选择题。考研刷题小程序云开发实战-基础知识储备(2)_小程序_03

2.6、checkbox

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