《智能前端技术与实践》——第 2 章 前端开发基础 ——2.7 微信小程序开发——2.7.4 逻辑层文件

简介: 《智能前端技术与实践》——第 2 章 前端开发基础 ——2.7 微信小程序开发——2.7.4 逻辑层文件

2.7.4 逻辑层文件


在微信小程序中,逻辑层对从后台接收到的数据进行加工处理,并将其发送给视图层, 与此同时还要接收视图层的事件反馈。但小程序中的 JavaScript 与原生 JavaScript 并不完全 一样,最显著的一点就是由于小程序框架的逻辑层并非运行在浏览器中,因此 JavaScript 在 Web 中的一些功能(如 window、document 等)无法使用。另外,小程序还依托微信强大的 生态能力,在原生 JavaScript 的基础上做了一些方便小程序开发者的改进,主要体现在以下 几点。


• 增加 App()和 Page()方法,进行程序注册和页面注册。

• 增加 getApp()和 getCurrentPages()方法,分别用来获取 App 实例和当前页面栈。

• 提供丰富的 API,如微信用户数据、扫一扫、微信支付等。

• 提供模块化能力,每个页面均有其独立的作用域。


每个小程序都需要在 app.js 中通过调用 App()方法注册小程序实例,用来绑定生命周期 函数、错误监听函数和页面不存在监听函数等函数,该方法必须调用且只能调用一次,否 则会出现无法预期的后果。对于 20210116_demo 项目,app.js 中的默认代码如代码清单 2-59 所示。


代码清单 2-59


// app.jsApp({
onLaunch() {
// 展示本地存储能力constlogs=wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登录wx.login({
success: res=> {
// 发送 res.code 到后台换取 openId、sessionKey 与 unionId      }
    })
// 获取用户信息wx.getSetting({
success: res=> {
if (res.authSetting['scope.userInfo']) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹出对话框wx.getUserInfo({
success: res=> {
// 可以将 res 发送给后台解码出 unionIdthis.globalData.userInfo=res.userInfo// 因为 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回// 所以此处加入 callback 以防止这种情况if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
globalData: {
userInfo: null  }
})


代码清单 2-56 在 App()函数内部定义了 onLaunch()函数。该函数实现了两个功能。第一个功能 是通过wx.getStorageSync()函数获取每次小程序启动时的13 位时间戳,并通过wx.setStorageSync()函 数将该时间戳存储在日志(log)中,然后在 logs.js 文件中,通过引用 utils 文件夹中的 util.js 文件将对应的时间戳转换成标准时间格式,最后将其更新到 logs.wxml 页面。第二个功能是在 用户已经授权(即 scope.userInfo 值为 true)的情况下,获取用户信息(包括微信图像的网络地 址、所在城市/国家、性别、语言、昵称、省份)


接下来,我们通过 Page()来完成页面的注册。小程序中的每个页面都需要在页面对应的 js 文件中通过 Page 构造器进行注册,并指定页面的初始数据、生命周期函数回调、事件处理函 数等。index.js 中的默认代码如代码清单 2-60 所示。


代码清单 2-60


// index.js// 获取应用实例constapp=getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
// 事件处理函数bindViewTap() {
wx.navigateTo({
url: '../logs/logs'    })
  },
onLoad() {
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true      })
    } elseif (this.data.canIUse) {
// 因为 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回// 所以此处加入 callback 以防止这种情况app.userInfoReadyCallback=res=> {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true        })
      }
    } else {
// 在没有 open-type=getUserInfo 版本时的兼容处理wx.getUserInfo({
success: res=> {
app.globalData.userInfo=res.userInfothis.setData({
userInfo: res.userInfo,
hasUserInfo: true          })
        }
      })
    }
  },
getUserInfo(e) {
console.log(e)
app.globalData.userInfo=e.detail.userInfothis.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true    })
  }
})


代码清单 2-60 首先通过 getApp()方法获取全局唯一的 App 实例,以方便我们拿到 App 上 的 userInfo 数据;然后在 Page()函数内部,分别定义了初始数据(data)、生命周期函数 (onLoad())、事件处理函数。当用户触发组件的 getUserInfo 事件时,小程序会将用户 图像、用户昵称通过 setData()方法更新到页面中;当触发组件的 bindViewTap 事件时, 小程序会跳转至日志页面。

相关文章
预约按摩小程序开发,为什么很多上门按摩平台根本招聘不到优秀技师?
上门按摩平台面临招不到优秀技师的问题,主要原因是平台众多,技师选择多样。为解决此问题,平台可引入技师等级制度,根据订单数量和好评率划分高、低等级技师。高等级技师可享受70%-90%的高提成及首页推荐,这不仅能激励技师的积极性,还能帮助平台筛选出优质技师,提升服务质量和口碑,形成良性循环。
|
2月前
|
监控 前端开发 JavaScript
前端工程化和传统前端开发的区别是什么?
前端工程化相比传统前端开发,在开发模式、代码组织与管理、构建与部署流程、团队协作、性能优化以及技术选型等方面都有了显著的改进和提升,能够更好地应对现代前端应用开发的复杂性和高要求。
|
29天前
|
人工智能 小程序
【一步步开发AI运动小程序】十五、AI运动识别中,如何判断人体站位的远近?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,无需后台支持,具有快速、体验好、易集成等特点。本文介绍如何利用插件判断人体与摄像头的远近,确保人体图像在帧内的比例适中,以优化识别效果。通过`whole`检测规则,分别实现人体过近和过远的判断,并给出相应示例代码。
|
10天前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
111 18
|
28天前
|
人工智能 小程序 UED
【一步步开发AI运动小程序】十六、AI运动识别中,如何判断人体站位?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,本地引擎无需后台支持,具备快速、体验好、易集成等优势。本文介绍如何利用插件的`camera-view`功能,通过检测人体站位视角(前、后、左、右),确保运动时的最佳识别率和用户体验。代码示例展示了如何实现视角检查,确保用户正或背对摄像头,为后续运动检测打下基础。
|
23天前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十七、如何识别用户上传视频中的人体、运动、动作、姿态?
【云智AI运动识别小程序插件】提供人体、运动、姿态检测的AI能力,支持本地原生识别,无需后台服务,具有速度快、体验好、易集成等优点。本文介绍如何使用该插件实现用户上传视频的运动识别,包括视频解码抽帧和人体识别的实现方法。
|
2月前
|
人工智能 小程序 IDE
【一步步开发AI运动小程序】九、姿态辅助调试桌面工具的使用
随着AI技术的发展,各大厂商推出的AI运动APP如“乐动力”、“天天跳绳”等,使云上运动会、线上健身等概念大热。本文将指导你如何利用“云智AI运动识别小程序插件”,在微信小程序中实现类似功能,包括工具搭建、服务启动及数据回传等步骤,助力开发者高效开发AI运动小程序。
【一步步开发AI运动小程序】九、姿态辅助调试桌面工具的使用
|
1月前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十三、自定义一个运动分析器,实现计时计数02
本文介绍如何利用“云智AI运动识别小程序插件”开发AI运动小程序,详细解析了俯卧撑动作的检测规则构建与执行流程,涵盖卧撑和撑卧两个姿态的识别规则,以及如何通过继承`sports.SportBase`类实现运动分析器,适用于小程序开发者。
|
1月前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十二、自定义一个运动分析器,实现计时计数01
随着AI技术的发展,AI运动APP如雨后春笋般涌现,如“乐动力”、“天天跳绳”等,推动了云上运动会、线上健身等热潮。本文将指导你从零开始开发一个AI运动小程序,利用“云智AI运动识别小程序插件”,介绍运动识别原理、计量方式及运动分析器基类的使用,帮助你在小程序中实现运动计时和计数功能。下篇将继续探讨运动姿态检测规则的编写。
|
2月前
|
人工智能 JSON 小程序
【一步步开发AI运动小程序】八、利用body-calc进行姿态识别
随着AI技术的发展,各大厂商推出的如“乐动力”、“天天跳绳”等AI运动APP,使得云上运动会、线上健身等概念风靡一时。本文将引导读者从零开始开发一个AI运动小程序,使用“云智AI运动识别小程序插件”,介绍人体姿态检测规则、规则编写语法、执行检测规则运算及姿态检测实战等内容,助力开发者轻松实现AI运动小程序的开发。
【一步步开发AI运动小程序】八、利用body-calc进行姿态识别
下一篇
开通oss服务