【零基础微信小程序入门开发三】小程序框架一

简介: 【零基础微信小程序入门开发】小程序介绍及环境搭建【零基础微信小程序入门开发】配置小程序👉【零基础微信小程序入门开发】小程序框架上几节我们学到了小程序的一些基本功能,以及小程序的工具环境配置,大家学习可以顺着系列文章目录来进行查看,如果你有一定基础可以自己选择跳过章节,本节我们在上节的基础上继续讲解小程序的框架小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能。逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件.

系列文章目录

【零基础微信小程序入门开发】小程序介绍及环境搭建
【零基础微信小程序入门开发】配置小程序
👉【零基础微信小程序入门开发】小程序框架
在这里插入图片描述

前言

上几节我们学到了小程序的一些基本功能,以及小程序的工具环境配置,大家学习可以顺着系列文章目录来进行查看,如果你有一定基础可以自己选择跳过章节,本节我们在上节的基础上继续讲解小程序的框架

逻辑层

什么是逻辑层?

小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能。
逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。在 JavaScript 的基础上,增加了一些功能,以方便小程序的开发:
增加 App 和 Page 方法,进行程序注册和页面注册。
增加 getApp 和 getCurrentPages 方法,分别用来获取 App 实例和当前页面栈。
提供丰富的 API,如微信用户数据,扫一扫,支付等微信特有能力。
提供模块化能力,每个页面有独立的作用域。
==注意:小程序框架的逻辑层并非运行在浏览器中,因此 JavaScript 在 web 中一些能力都无法使用,如 window,document 等。==

注册页面

在小程序执行一些特殊功能时,例如首次打开页面或者是用户进行下拉刷新的时候等,这些操作都是在注册页面,也就是在js中执行的,我们来看一下这些封装好的基本方法:

(以官方模板为例)

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
  onPullDownRefresh: function() {
    // 触发下拉刷新时执行
  },
  onReachBottom: function() {
    // 页面触底时执行
  },
  onShareAppMessage: function () {
    // 页面被用户分享时执行
  },
  onPageScroll: function() {
    // 页面滚动时执行
  },
  onResize: function() {
    // 页面尺寸变化时执行
  },
  onTabItemTap(item) {
    // tab 点击时执行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // 事件响应函数
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  }
})

观察上方这个代码,
这个可以将一些数据进行初始化,将需要用的数据绑定,可以使前端渲染,通过改变这个变量的值,从而更改前端页面的数据信息

data: {

text: "This is page data." 

}

onLoad: function(options) {

// 这个页面在首次被打开时执行

}

onShow: function() {

// 页面只要被打开就被执行,可以用来弄实时刷新

}

onReady: function() {

// 页面首次渲染完毕时执行   
},

onHide: function() {

// 页面从前台变为后台时执行 
  },


onUnload: function() {

// 页面销毁时执行   
},

onPullDownRefresh: function() {

// 触发下拉刷新时执行 
  },

onReachBottom: function() {

// 页面触底时执行   
},

onShareAppMessage: function () {

// 页面被用户分享时执行  
 },

onPageScroll: function() {

// 页面滚动时执行   
},

onResize: function() {

// 页面尺寸变化时执行
   },

那这些方法怎么用呢?
举个例子:如果我将index.js中的data方法里面加入数据
==text: "hello word"==
修改后,如图所示
在这里插入图片描述
我们运行观察初始化的数据,data中text的初始化数据是hello word
在这里插入图片描述
我们在index.json添加下拉刷新如图:
在这里插入图片描述
代码

{
  "usingComponents": {},
  "enablePullDownRefresh": true
}

接下来在index.js中找到 onPullDownRefresh方法,编写如下代码:

  onPullDownRefresh: function() {
    // 触发下拉刷新时执行
    let that= this;
    that.setData({
      text:"德宏大魔王"
    })
  },

编译后我们下拉刷新可以看到data中的值变化了
在这里插入图片描述

页面生命周期

(看一下就可以,不需要搞懂,后面会了再回来看)
在这里插入图片描述

API

同步

以 Sync 结尾的 API 都是同步 API, 如 wx.setStorageSync,wx.getSystemInfoSync 等。此外,也有一些其他的同步 API,如 wx.createWorker,wx.getBackgroundAudioManager 等
例如缓存接口

wx.setStorageSync('key', 'value')

异步

大多数 API 都是异步 API,例如网络请求接口wx.requests()、等都是异步接口,关于这些接口的使用我们后面会讲到,这里先做一个了解,可以大致的指导是干啥的
https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/api.html#API

相关文章
|
9天前
|
人工智能 开发框架 机器人
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
AstrBot 是一个开源的多平台聊天机器人及开发框架,支持多种大语言模型和消息平台,具备多轮对话、语音转文字等功能。
2185 13
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
|
4月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
930 1
|
6天前
|
人工智能 小程序 程序员
【视频测评 DEMO 参考】VSCode 神级 AI 插件通义灵码:完全免费+实战教程+微信贪吃蛇小程序
VSCode 神级 AI 插件通义灵码:完全免费+实战教程+微信贪吃蛇小程序
153 7
|
13天前
|
存储 小程序 前端开发
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言,仅仅需要点击授权按钮,便能够完成登录操作,无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作,这种便捷的登录方式极大地提升了用户的使用体验
133 12
|
1月前
|
存储 监控 小程序
TP6+Uni-app框架下,圈子系统小程序的快速上线开发步骤
社交圈子系统多端运营级应用,融合了推荐匹配、语音聊天、IM即时通讯、动态发布、一键约聊、同城交友、附近的人、充值提现、邀请推广等功能,为平台运营提供更多的盈利变现方式。程序源码开源,支持二次开发,根据客户不同应用场景需求,定制个性化解决方案。
56 9
|
26天前
|
小程序 前端开发 关系型数据库
uniapp跨平台框架,陪玩系统并发性能测试,小程序源码搭建开发解析
多功能一体游戏陪练、语音陪玩系统的开发涉及前期准备、技术选型、系统设计与开发及测试优化。首先,通过目标用户分析和竞品分析明确功能需求,如注册登录、预约匹配、实时语音等。技术选型上,前端采用Uni-app支持多端开发,后端选用PHP框架确保稳定性能,数据库使用MySQL保证数据一致性。系统设计阶段注重UI/UX设计和前后端开发,集成WebSocket实现语音聊天。最后,通过功能、性能和用户体验测试,确保系统的稳定性和用户满意度。
|
2月前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
|
4月前
|
开发框架 人工智能 小程序
小程序常见的 UI 框架
【10月更文挑战第17天】小程序 UI 框架为开发者提供了便捷的工具和资源,帮助他们快速构建高质量的小程序界面。在选择框架时,需要综合考虑各种因素,以找到最适合项目的解决方案。随着技术的不断进步,UI 框架也将不断发展和创新,为小程序开发带来更多的便利和可能性。
252 2
|
4月前
|
存储 小程序 安全
微信的开发管理都需要配置什么?
【10月更文挑战第17天】微信的开发管理都需要配置什么?
68 0
|
4月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
756 0

热门文章

最新文章