微信小程序开发基础之逻辑层

一、注册程序 App() 方法

参数 类型 描述 触发时机
onLanuch Function 生命周期函数--监听小程序初始化 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
onShow Function 生命周期函数--监听小程序显示 当小程序启动,或从后台显示,会触发 onShow
onHide Function 生命周期函数 -- 监听小程序隐藏 当小程序从前台进入后台,会触发 onHide
onError Function 错误监听函数 当小程序发生脚本错误,或者 API 调用失败时,会解决 onError 并带上错误信息
其它 Any 开发者可以添加任意的函数或数据到 Object 参数中, 用 this 可以访问

注意:onLaunch 函数全局只触发一次

前台、后台:用户当前界面运行或操作小程序为前台;当用户点击左上角关闭,或者按了设备 Home 键离开微信,小程序并没有直接销毁,而是进入了后台;当再次进入微信或再次打开小程序,又会从后台进入前台。

销毁:只有当小程序进入后台一定时间,或者系统资源占用过高,才会被真正销毁。此时代表小程序生命周期结束。

   App({
    onLaunch: function() {
      // 启动时执行的初始化工作
    },
    onShow: function() {
      // 小程序进入前台执行操作
    },
    onHide function() {
      // 小程序进入后台时执行操作
    },
    onError:function(msg) {
     console.log(msg)
    },
    globalData: ‘Hello World‘
   })

微信团队为开发者提供了全局的 getApp() 函数,可以用来获取小程序实例。使用 getApp() 函数的示例代码如下:

   var appInstance = getApp()
   console.log(aaInstance.globalData)

注意:

  • App() 方法须在 app.js 中注册,且不能注册多个;
  • 不要在定义 App() 内的函数中调用 getApp(),使用 this 就可以拿到 App 实例;
  • 通过 getApp() 获取实例之后,不要私自调用生命周期函数(如 onLaunch、onShow、onHide等);

二、注册页面 Page() 方法

在逻辑层,Page() 方法用来注册一个页面。Page()接受一个object 参数,用于指定页面的初始数据、生命周期函数、事件处理函数等。Page() 方法,每个页面有且仅有一个,存在于该页面的.js 文件中。object 参数说明如下:

参数 类型 描述
data Object 页面的初始数据
onLoad Function 生命周期函数-- 监听页面加载
onReady Function 生命周期函数-- 监听页面初次渲染完成
onShow Function 生命周期函数-- 监听页面显示
onHide Function 生命周期函数-- 监听页面隐藏
onUnload Function 生命周期函数-- 监听页面卸载
onPullDownRefreash Function 页面相关事件处理函数--监听用户下拉动作
onReachBottom Function 页面上拉触底事件的处理函数
onShareAppMessage Function 用户点击右上角分享
其它 Any 开发者可以添加任意的函数或数据到 object 参数中, 用 this 可以访问

同样,微信为开发者提供了 getCurrentPage() 函数,用来获取当前页面的实例。

注意: 不要在 App() 中进行 onLaunch 操作的时候调用 getCurrentPage, 此时 page 还没有生成 。

1. 生命周期函数使用介绍

1) onLoad 函数

一个页面只会调用一次,参数可以获取 wx.navigateTo 和 wx.redirectTo 及 <navigator./> 中的 query。

2) onShow 函数

onShow 是页面显示时执行的操作。每次打开页面都会调用一次。

3) onReady 函数

onReady 是页面初次渲染完成时执行的操作,一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互,对页面的设置(如 wx.setNavigationBarTitle) 请在 onReady 之后设置。

4) onHide 函数

onHide 是页面隐藏时执行的操作。当 navigateTo 或底部进行 tab 切换时调用。

5) onUnload 函数

onUnload 是页面卸载时执行的操作。当进行 redirectTo 或 navigateBack 操作的时候调用。

2. 页面相关事件处理函数

onPullDownRefresh 是下拉刷新时执行的操作,例如:监听用户下拉刷新事件

  • 需要在页面 .json 文件的 window 配置顶中开启 enablePullDownRefresh;
  • 当处理完数据刷新后,wx.stopPullDownRefresh 可以停止当前页面的下拉刷新;

onShareAppMessage 是用户分享时返回定制的分享内容:

  • 只有定义了此事件处理函数,右上角才会显示 “分享” 按钮,用户点击分享按钮的时候会调用。

onShareAppMessage 自定义分享如下:

字段 说明 默认值
title 分享标题 当前小程序名称
path 分享路径 当前页面 path 必须是心 / 开头的完整路径

示例如下:

   Page({
    onShareAppMessage: function() {
      return {
        title: ‘自定义分享标题‘,
        path: ‘/path/user?id=123‘
      }
    }
   })

3. 页面栈及其实例获取

框架以栈的形式维护了当前的所有页面。当发生路由切换的时候,页面栈的表现如下:

路由方式 页面栈表现
初始化 新页面入栈
打开新页面 新页面入栈
页面重定向 当前页面出栈,新页面入栈
页面返回 页面不断出栈,直到目标返回页,新页面入栈
Tab 切换 当前页面出栈,新页面入栈

getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。

注意: 不要尝试修改页面栈,会导致路由以及页面状态错误。

3. 页面路由

在小程序中,所有页面的路由由全部框架进行管理,对于路由的触发方式以及页面生命周期如下表:

路由方式 触发时机 路由后页面 路由前页面
初始化 小程序打开的第一页面 onLoad, onShow
打开新页面 调用 API wx.navigateTo 或使用组件 <navigator open-type="navigator" /> onLoad, onShow onUnload
页面重定向 调用 API wx.redirectTo 或使用组件 <navigator open-type="redirect" /> onShow onUnload
页面返回 调用 API wx.navigateBack 或用户按左上角返回按钮 onLoad, onShow onUnload
Tab 切换 调用 API wx.switchTab 或使用组件 <navigator open-type="switchTab" /> 或多 Tab 模式下用户切换 Tab 第一次打开onLoad,onShow 否则 onShow onHide

三、微信原生 API

微信原生的 API 共有八大类: 网络 API, 媒体API, 文件API, 数据缓存API, 位置API,设备API,界面API以及微信开放接口,下面列表表格,文体大家 一眼过目,增加映像:

类别 API名称 主要用途
网络 API wx.request 发起网络请求
wx.uploadFile 上传文件
wx.downloadFile 下载文件
wx.connectSocket 创建 WebSocket 连接
wx.onSocketOpen 监听 WebSocket 打开
wx.onSocketError 监听 WebSocket 错误
wx.sendSocketMessage 发送 WebSocket 消息
wx.onSocketMessage 接收 WebSocket 消息
wx.closeSocket 关闭 WebSocket 连接
wx.onSocketClose 监听 WebSocket 关闭
媒体 API wx.chooseImage 从相册选择图片或者拍照
wx.previewImage 预览图片
wx.getImageInfo 获取图片信息
wx.starRecord, wx.stopRecord 开始录音,结束录音
wx.playVoice,wx.pauseVoice,wx.stopVoice 播放语音,暂停播放语音,结束播放语音
wx.createAudioContext 创建并返回 audio 的上下文对象
wx.getBackgroundAudioPlayerState 获取音乐播放状态
wx.playBckgroundAudio 播放音乐
wx.seekBackgroundAudio 控制音乐播放进度
wx.pauseBackgroundAudio 暂停播放音乐
wx.stopBackgroundAudio 停止播放音乐
wx.onBackgroundAudioPlay 监听音乐开始播放
wx.onBackgroundAudioPause 监听音乐暂停
wx.onBackgroundAudioStop 监听音乐结束
wx.chooseVideo 从相册选择视频或者拍摄
wx.createVideoContext 创建并 video 的上下文对象
文件 API wx.saveFile 保存文件
wx.getSaveFileList 获取本地已保存的文件列表
wx.getSaveFileInfo 获取本地的文件信息
wx.removeSaveFile 删除本地存储的文件
wx.openDocument 新开页面打开文件,支付格式:doc、xls、ppt、pdf、docx、xlsx、pptx
数据缓存 API wx.getStorage(wx.getStorageSync) 异步获取本地数据缓存(同步)
wx.setStorage(wx.setStorageSync) 异步设置本地数据缓存(同步)
wx.removeStorage(wx.removeStorageSync) 异步移除本地指定key(同步)
wx.clearStorage(wx.clearStorageSync) 异步清理本地数据缓存(同步)
位置 API wx.getLocation 获取当前位置
wx.chooseLocation 打开内置地图选择位置
wx.openLocation 打开内置地图
wx.createMapContext 创建 map 上下文对象
设备信息 API wx.getNetworkType 获取网络类型
wx.getSystemInfo(wx.getSystemInfoSync) 获取系统信息(同步)
wx.onAccelerometerChange 监听重力感应数据
wx.onCompassChange 监听罗盘数据
makePhoneCall 调起拨打电话
wx.scanCode 调起客户端扫码界面
界面 API wx.showToast、wxHideToast 显示消息提示框,隐藏消息提示框
wx.showModal 显示模态弹框
wx.showActionSheet 显示操作菜单
wx.setNavigationBarTitle 设置当前页面标题
wx.showNavigationBarLoading 显示导航条加载动画
wx.hideNavigationBarLoading 隐藏导航条加载动画
wx.navigateTo,wx.navigateBack 新窗口打开页面,退回上一个页面
wx.redirectTo 原窗口打开页面
wx.switchTab 跳转到 tabBar 页面
wx.createAnimation 创建动画
wx.createCanvasContext 创建 Canvas 绘图上下文
wx.createContext 创建 绘图上下文
wx.drawCanvas 绘图
wx.canvasToTempFilepath 保存画布内容
wx.hideKeyboard 隐藏键盘
Page.onPullDownRefresh 监听页面用户下拉刷新
wx.stopPullDownRefresh 停止下拉刷新动画
开放 API wx.login 登录
wx.getUserInfo 获取用户信息
wx.requestPayment 发起微信支付


注:表中所有列 API 会随着开发工具升级而更新,请关注工具的更新日志提醒

一个笨笨的码农,我的世界只能终身学习!

原文地址:https://www.cnblogs.com/homehtml/p/12690404.html

时间: 2024-10-09 19:14:10

微信小程序开发基础之逻辑层的相关文章

微信小程序开发基础(一)「配置」与「逻辑层」

微信小程序作为微信生态重要的一环,在实际生活.工作.商业中的应用越来越广泛.想学习微信小程序开发的朋友也越来越多,本文将在小程序框架的基础上就微信小程序项目开发所必需的基础知识及语法特点进行了详细总结和阐述,包括配置.函数.语法.事件及其处理.数据绑定.模块.样式等.想开发小程序,这些内容是必须掌握的. 全文知识结构预览: 一.程序配置: 1.全局配置:2.页面配置 二.逻辑层: 1.程序注册:App()方法:2.页面注册:Page()方法:3.模块与调用:4.微信原生API 三.视图层(将在单

微信小程序开发基础知识总结

微信小程序在无论在功能.文档及相关支持方面,都是优于前面几种微信账号类型,它提供了很多原生程序才有的接口,使得我们的小程序在很多方面突破H5页面应用的限制,更加接近原生程序的功能,因此微信小程序具有很大的前景想象力.它提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,可以让开发者可以方便的聚焦于数据与逻辑上. 1.小程序的目录结构 小程序的目录结构如下所示. 其中项目级别的的文件包括 app.js.ap

微信小程序开发基础(一)注册账号

想要开发小程序首先要注册一个账号 申请账号 进入微信公众平台,根据提示注册账号. 在这你可以管理你的小程序的权限,查看数据报表,发布小程序等操作. 登录微信公众平台,在菜单'设置'-'开发设置'看到小程序的AppID了. 安装开发工具 前往 开发者工具下载页面,根据自己的操作系统下载对应的安装包进行安装. 打开小程序开发者工具,用微信扫码登录,然后就开始开发小程序吧! 第一个小程序 新建项目选择小程序项目,选择代码存放的硬盘路径,填入刚刚申请到的小程序的AppID,给你的项目起一个名字, 最后勾

微信小程序开发视频教程

课程:拜师学艺,微信小程序从入门到大神必经之路(第一季,共四季) 课程观看地址:http://www.xuetuwuyou.com/course/172/lesson/list 课程出自学途无忧网:http://www.xuetuwuyou.com 讲师:风舞烟 课时列表: 第一部_诞生 - 天降大任:名门贵族,互联网开发新宠--小程序横空出世 第1章 : 忽如一夜春风来--小程序的前世今生 课时1:课程开场 课时2:本章目标及任务 课时3:第一回合_小王子出世-微信小程序_小程序为什么这么火

微信小程序开发入门与实践

基础知识---- MINA 框架 为方便微信小程序开发,微信为小程序提供了 MINA 框架,这套框架集成了大量的原生组件以及 API.通过这套框架,我们可以方便快捷的完成相关的小程序开发工作. MINA 框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,因此我们主要聚焦于数据与逻辑上. 响应的数据绑定 框架的核心是一个响应的数据绑定系统. 整个系统分为两块:视图层(View)和逻辑层(App Ser

微信小程序开发05-日历组件的实现

接上文:微信小程序开发04-打造自己的UI库 github地址:https://github.com/yexiaochai/wxdemo 我们这里继续实现我们的日历组件,这个日历组件稍微有点特殊,算是相对复杂的组件了,然后一般的日历组件又会有很多的变化,所以我们这里实现最基本的标签即可: 1 let View = require('behavior-view'); 2 const util = require('../utils/util.js'); 3 4 // const dateUtil

小程序&#183;巧应用,微信小程序开发实战

系统全面地讲解微信小程序的开发技术.开篇创建一个小程序项目并解析体验,介绍如何由零开始创建一个小程序,全面体验小程序的开发工具.界面.开发框架.实现过程及其主要代码框架,了解小程序的应用场景及开发要求.接着介绍小程序开发基础,包括小程序开发的语言与语法.函数方法.模块.事件交互等.然后详细介绍了组件的应用与开发,包括开发过程与组件应用技巧,还详细分析了API接口,包括使用各个微信原生API接口进行小程序开发的技巧.最后介绍了几个小程序实战案例,让读者实践小程序各项能力的应用及掌握一些应用技巧.本

【微信小程序开发?系列文章六】生命周期和路由

这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程序开发•系列文章四]模块化 [微信小程序开发•系列文章五]主界面 [微信小程序开发•系列文章六]生命周期和路由 整个微信小程序从打开到关闭,整个过程可以分为很多阶段或者说状态,这一整段的过程,我们称之为小程序的生命周期.而周期中的每种不同的状态,到另一个状态的过度和转化,是需要一个触发机制的,这种机

微信小程序开发工具使用与设计规范(二)

上一篇文章主要分析了微信小程序应用场景和优劣势.本篇你可以学习到: 如何使用小程序开发工具写一个Hello World 微信小程序设计规范 微信小程序项目结构 >>>微信小程序开发工具使用 下载安装小程序 下载 :微信web开发者工具 下载:官方DEMO源码 本系列教程使用的是mac版的开发者工具. 安装完成后,打开微信web开发者工具 1.扫码登录,绑定个人微信 2.扫码登录后,新建或导入已有项目(这里使用官方提供的DEMO源码quickstart) 3.新建项目,导入刚下载的quic