[笔记]微信小程序开发《三》框架基础:小程序生命周期、全局配置、页面配置。

简介: [笔记]微信小程序开发《三》框架基础:小程序生命周期、全局配置、页面配置。

前言

小程序应用生命周期

App(Object object)

注册小程序。接受一个 Object 参数,其指定小程序的生命周期回调等。

App() 必须在 app.js 中调用,必须调用且只能调用一次。不然会出现无法预期的后果。

参数

Object object

小程序页面生命周期

Page(Object object)

注册小程序中的一个页面。接受一个 Object 类型参数,其指定页面的初始数据、生命周期回调、事件

处理函数等。

参数

页面

页面配置

app.json

"pages": [
    "pages/demo01/demo01",
    "pages/index/index",
    "pages/logs/logs"
  ],

添加一行 “pages/demo01/demo01” 放第一行就默认为首页,然后文件夹会自动创建相应文件。

onLoad

经常用作异步加载数据,页面显示用;

onHide

链接组件

onPullDownRefresh:

先全局设置允许下拉刷新:

"window": {
    "enablePullDownRefresh": true //下拉刷新启用
  },

onReachBottom

下拉到页面底部时触发

小技巧

view{$}*100 可以复制100个view标签

onShareAppMessage

用户点击右上角转发时触发

onPageScroll

页面滚动时触发

onResize

页面旋转时触发

在手机启用屏幕旋转

“window”: {

“pageOrientation”: “auto”

},

页面跳转

Navigator

跳转到Index页面

方法一 可返回
<navigator url="/pages/index/index" open-type="navigate">navigate</navigator>
方法二 原地销毁 不可返回 会调用到onUnload
<navigator url="/pages/index/index" open-type="redirect">redirect</navigator>

ViewThread和AppServiceThread交互图

小程序全局配置app.json

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

完整配置项说明请参考小程序全局配置

以下是一个包含了部分常用配置选项的 app.json :

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/index",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

Permission

小程序接口权限相关设置

获取地理位置信息

参考

window

背景样式

"backgroundTextStyle": "dark",

导航栏颜色

"navigationBarBackgroundColor": "#fff",

标题

"navigationBarTitleText": "Weixin",

允许下拉刷新

app.json

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh": true //下拉刷新启用
  },

tabBar

"tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "主页",
      "iconPath": "icon/_home.png",
      "selectedIconPath": "icon/home.png"
    },
    {
      "pagePath": "pages/demo01/demo01",
      "text": "demo01",
      "iconPath": "icon/_home.png",
      "selectedIconPath": "icon/home.png"
    }
  ],
  "color":"#0000FF",//文本颜色
  "selectedColor":"#4B0082",//选中时文本颜色
  "backgroundColor":"#00BFFF",//背景颜色
  "borderStyle":"white",//边框样式
  "position":"bottom"//默认是底部,top时类似Tab
  },

onTabItemTap

点击Tab时触发

onTabItemTap:function(){
    console.log("onTabItemTap");
  }

小程序页面配置

为某个页面配置相关属性

页面/index.json

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#7B6800",//背景颜色
  "navigationBarTitleText": "首页",//导航栏标题
  "enablePullDownRefresh": true //允许下拉刷新
}

sitemap配置

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/sitemap.html

微信现已开放小程序内搜索,开发者可以通过 sitemap.json

配置,或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索词条触发该索引时,小程序的页面将可能展示在搜索结果中。

{
  "rules":[{
    "action": "allow",
    "page": "path/to/page",
    "params": ["a", "b"],
    "matching": "exact"
  }, {
    "action": "disallow",
    "page": "path/to/page"
  }]
}
  • path/to/page?a=1&b=2 => 优先索引
  • path/to/page => 不被索引
  • path/to/page?a=1 => 不被索引
  • path/to/page?a=1&b=2&c=3 => 不被索引
  • 其他页面都会被索引
相关文章
|
11月前
|
机器人 数据安全/隐私保护 Python
企业微信自动回复软件,企业微信自动回复机器人,python框架分享
企业微信机器人包含完整的消息处理流程,支持文本消息自动回复、事件处理、消息加密解密等功能
|
11月前
|
JSON 机器人 API
微信机器人自动回复插件,vx自动回复机器人脚本助手,python框架分享
这个微信机器人系统包含三个主要模块:主程序基于itchat实现微信消息监听和自动回复功能
|
人工智能 开发框架 机器人
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
AstrBot 是一个开源的多平台聊天机器人及开发框架,支持多种大语言模型和消息平台,具备多轮对话、语音转文字等功能。
8937 38
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
|
11月前
|
JSON 机器人 数据安全/隐私保护
微信自动聊天机器人, 微信自动回复机器人,python框架分享
这个微信机器人实现包含主程序、配置文件、工具函数和测试脚本四个模块。主程序使用itchat库
|
人工智能 自然语言处理 小程序
技术小白如何利用DeepSeek半小时开发微信小程序?
通过通义灵码的“AI程序员”功能,即使没有编程基础也能轻松创建小程序或网页。借助DeepSeek V3和R1满血版模型,用户只需用自然语言描述需求,就能自动生成代码并优化程序。例如,一个文科生仅通过描述需求就成功开发了一款记录日常活动的微信小程序。此外,通义灵码还提供智能问答模式,帮助用户解决开发中的各种问题,极大简化了开发流程,让普通人的开发体验更加顺畅。
3980 11
技术小白如何利用DeepSeek半小时开发微信小程序?
|
小程序 Java 关系型数据库
weixin163基于微信小程序的校园二手交易平台系统设计与开发ssm(文档+源码)_kaic
本文介绍了一款基于微信小程序的校园二手物品交易平台的开发与实现。该平台采用Java语言开发服务端,使用MySQL数据库进行数据存储,前端以微信小程序为载体,支持管理员和学生两种角色操作。管理员可管理用户、商品分类及信息、交易记录等,而学生则能注册登录、发布购买商品、参与交流论坛等。系统设计注重交互性和安全性,通过SSM框架优化开发流程,确保高效稳定运行,满足用户便捷交易的需求,推动校园资源共享与循环利用。
|
小程序 JavaScript 前端开发
微信小程序开发全流程:从注册到上线的完整指南
这篇文章详细记录了微信小程序的完整开发到最终上线的每一个步骤。适合对小程序开发感兴趣的个人开发者或希望了解完整流程的学习者,涵盖了云开发、事件绑定、生命周期管理、组件使用等关键内容。
21642 14
|
小程序 关系型数据库 Java
weixin168“返家乡”高校暑期社会实践微信小程序设计与开发ssm(文档+源码)_kaic
本文探讨高校暑期社会实践微信小程序的开发与应用,旨在通过信息化手段提升活动管理效率。借助微信小程序技术、SSM框架及MySQL数据库,实现信息共享、流程规范和操作便捷。系统涵盖需求分析、可行性研究、设计实现等环节,确保技术可行、操作简便且经济合理。最终,该小程序可优化活动发布、学生信息管理和心得交流等功能,降低管理成本并提高工作效率。
|
JSON 缓存 小程序
微信小程序组件封装与复用:提升开发效率
本文深入探讨了微信小程序的组件封装与复用,涵盖组件的意义、创建步骤、属性与事件处理,并通过自定义弹窗组件的案例详细说明。组件封装能提高代码复用性、开发效率和可维护性,确保UI一致性。掌握这些技能有助于构建更高质量的小程序。
|
自然语言处理 搜索推荐 小程序
微信公众号接口:解锁公众号开发的无限可能
微信公众号接口是微信官方提供的API,支持开发者通过编程与公众号交互,实现自动回复、消息管理、用户管理和数据分析等功能。本文深入探讨接口的定义、类型、优势及应用场景,如智能客服、内容分发、电商闭环等,并介绍开发流程和工具,帮助运营者提升用户体验和效率。未来,随着微信生态的发展,公众号接口将带来更多机遇,如小程序融合、AI应用等。