小程序框架

目录

一.什么是小程序框架

二.视图层

先建立四个包

数据绑定

条件渲染

​编辑

使用模板

事件系统

所有a.js

输出结果

​编辑

三.跳转

a页面跳b页面

​编辑

a页面跳c页面

测试结果

四.生命周期

一级跳一级

一级跳二级

二级跳二级

页面隔代跳转


一.什么是小程序框架

小程序框架是指一种开发小程序的软件工具或框架,它提供了一套开发规范、组件库和开发工具,帮助开发者更方便地开发和构建小程序应用。

小程序框架的主要功能和作用包括:

  1. 提供开发规范:小程序框架定义了一套开发规范,包括文件结构、代码组织、页面路由、事件处理等。开发者按照框架规范进行开发,使得开发过程更加规范化和统一。

  2. 提供组件库:小程序框架通常提供了丰富的组件库,如按钮、列表、表单等,开发者可以直接使用这些组件来构建小程序页面,减少了开发的工作量和时间成本。

  3. 提供基础能力:小程序框架提供了一些基础能力的封装,如网络请求、本地存储、地理位置、多媒体等。开发者可以直接调用这些封装好的接口,快速实现常用的功能。

  4. 提供开发工具:小程序框架通常提供了一套开发工具,如微信开发者工具,用于代码编写、调试和预览。开发者可以在开发工具中实时查看小程序的效果,并进行调试和错误排查。

常见的小程序框架包括微信小程序原生框架、uni-app、Taro 等,它们都针对小程序的特点和需求提供了不同的功能和扩展,方便开发者进行小程序的开发和管理。通过使用小程序框架,开发者能够更高效地开发出功能完善、用户体验良好的小程序应用。

二.视图层

先建立四个包
数据绑定
条件渲染
使用模板
事件系统
java 复制代码
<view id="tapTest" data-hi="Weixin" data-meetingState="6" bindtap="tapName"> Click me! </view>
所有a.js
java 复制代码
// pages/a/a.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
   message:'Hello 页面一',
   array: [1, 2, 3, 4, 5],
   users:[{id:1,name:'小流氓'},{id:2,name:'小坤'},{id:3,name:'小痞子'}],
   view:2,
   staffA: {firstName: 'Hulk', lastName: 'Hu'},
   staffB: {firstName: 'Shang', lastName: 'You'},
   staffC: {firstName: 'Gideon', lastName: 'Lin'}
  },

  tapName: function(event) {
    console.log(event)
    console.log(event.target.dataset);
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})
输出结果

三.跳转

a页面跳b页面

这里要跳转我们看到的必须要是首页

a页面跳c页面

上面a页面跳b页面用得是switcTab 如果跳c页面用这个的话汇报错反之跳b页面用navigateTo也会报错

测试结果

四.生命周期

Page 实例的生命周期表

Tab 切换对应的生命周期(以 A、B 页面为 Tabbar 页面,C 是从 A 页面打开的页面,D 页面是从 C 页面打开的页面为例):

当前页面 路由后页面 触发的生命周期(按顺序)
A A Nothing happend
A B A.onHide(), B.onLoad(), B.onShow()
A B(再次打开) A.onHide(), B.onShow()
C A C.onUnload(), A.onShow()
C B C.onUnload(), B.onLoad(), B.onShow()
D B D.onUnload(), C.onUnload(), B.onLoad(), B.onShow()
D(从转发进入) A D.onUnload(), A.onLoad(), A.onShow()
D(从转发进入) B D.onUnload(), B.onLoad(), B.onShow()

1.一级不会销毁

2.二级层级深跳到层级低的会销毁

3.二级层级低跳到高只会隐藏

4.隔代中间所有页面会被销毁

一级跳一级

index--->a

a.onLoad,a.onShow,a.onReady

a--->b

a.onHide,b.onLoad,b.onShow,b.onReady

一级跳二级

a--->c(一级跳二级)

a.onHide,c.onLoad,c.onShow,c.onReady

c--->a(二级返回一级)

c.onUnload,a.onShow

二级跳二级

在c.wxml写页面跳转

在c.js中编写跳转方法

c--->d

c.onHide,d.onLoad,d.onShow,d.onReady

d--->c

d.onUnload,c.onShow

c--->a

c.onUnload,a.onShow

页面隔代跳转

a--->c--->d--->a

d.onUnload,c.onUnload,a.onShow

相关推荐
说私域5 小时前
基于开源 AI 大模型 AI 智能名片 S2B2C 商城小程序视角下的企业组织能力建设与破圈升级
人工智能·小程序
fakaifa12 小时前
【最新版】CRMEB Pro版v3.4系统源码全开源+PC端+uniapp前端+搭建教程
人工智能·小程序·uni-app·php·crmeb·源码下载·crmebpro
2501_9159184119 小时前
iOS 应用上架全流程实践,从开发内测到正式发布的多工具组合方案
android·ios·小程序·https·uni-app·iphone·webview
上海云盾第一敬业销售1 天前
小程序被爬虫攻击,使用waf能防护吗?
爬虫·小程序
suncentwl1 天前
做一个答题pk小程序多少钱?
小程序·答题小程序·知识竞赛·答题pk软件
说私域1 天前
基于开源链动2+1模式AI智能名片S2B2C商城小程序的流量转化策略研究
人工智能·小程序
咸虾米_1 天前
微信小程序通过uni.chooseLocation打开地图选择位置,相关设置及可能出现的问题
微信小程序·小程序·uniapp开发·小程序地图api
未来之窗软件服务1 天前
蔬菜批发小程序:生产商的数字化转型利器——仙盟创梦IDE
小程序·自动化·仙盟创梦ide·东方仙盟·蔬菜批发·批发系统
数据皮皮侠1 天前
最新上市公司业绩说明会文本数据(2017.02-2025.08)
大数据·数据库·人工智能·笔记·物联网·小程序·区块链
不如摸鱼去2 天前
Trae 辅助下的 uni-app 跨端小程序工程化开发实践分享
微信小程序·小程序·uni-app·aigc·ai编程