考研刷题小程序云开发实战-基础知识储备

Posted 2022-01-19 Monstar_0°-蒙

前言

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

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.5、radio

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

2.6、checkbox

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