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

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

前言

小程序应用生命周期

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 => 不被索引
  • 其他页面都会被索引
相关文章
ly~
|
8天前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
42 6
|
8天前
|
JSON 小程序 前端开发
微信小程序的目录结构及页面结构的说明
本文详细介绍了微信小程序的目录结构、页面组成部分以及项目的全局配置文件,阐述了小程序的宿主环境和运行机制,包括小程序启动和页面渲染的过程。
微信小程序的目录结构及页面结构的说明
|
8天前
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
|
27天前
|
小程序 前端开发 生物认证
微信小程序如何将一个按钮放到页面的最底下?
微信小程序如何将一个按钮放到页面的最底下?
33 5
|
28天前
|
移动开发 小程序 JavaScript
uni-app开发微信小程序
本文详细介绍如何使用 uni-app 开发微信小程序,涵盖需求分析、架构思路及实施方案。主要功能包括用户登录、商品列表展示、商品详情、购物车及订单管理。技术栈采用 uni-app、uView UI 和 RESTful API。文章通过具体示例代码展示了从初始化项目、配置全局样式到实现各页面组件及 API 接口的全过程,并提供了完整的文件结构和配置文件示例。此外,还介绍了微信授权登录及后端接口模拟方法,确保项目的稳定性和安全性。通过本教程,读者可快速掌握使用 uni-app 开发微信小程序的方法。
57 3
|
8天前
|
小程序 前端开发 API
微信小程序 - 调用微信 API 回调函数内拿不到 this 问题(解决方案)
本文讨论了在微信小程序中调用API回调函数时无法获取到`this`上下文的问题,并提供了解决方案。在回调函数中,使用一个变量(如`that`)来保存当前的`this`引用,然后在回调内部使用这个变量来访问当前页面的数据和方法。
|
8天前
|
JSON 小程序 JavaScript
微信小程序页面事件,下拉刷新事件和上拉触底事件
这篇文章介绍了微信小程序中如何实现下拉刷新和上拉触底事件,包括开启下拉刷新、配置下拉刷新样式、监听下拉刷新事件,以及监听上拉触底事件和配置上拉触底的距离。
|
2月前
|
小程序 JavaScript Java
微信小程序的后端开发需要使用什么语言?
【8月更文挑战第22天】微信小程序的后端开发需要使用什么语言?
321 65
|
2月前
|
小程序 JavaScript
Taro@3.x+Vue@3.x+TS开发微信小程序,使用轮播图
本文介绍了使用 Taro 和 Vue 创建轮播组件的两种方法:一是通过 `&lt;swiper&gt;` 实现,二是利用 Nut UI 的 `&lt;nut-swiper&gt;` 组件实现。
Taro@3.x+Vue@3.x+TS开发微信小程序,使用轮播图
|
22天前
|
存储 移动开发 监控
微信支付开发避坑指南
【9月更文挑战第11天】在进行微信支付开发时,需遵循官方文档,确保权限和参数配置正确。开发中应注重安全,验证用户输入,合理安排接口调用顺序,并处理异常。上线后需实时监控支付状态,定期检查配置,关注安全更新,确保系统稳定运行。
下一篇
无影云桌面