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

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

前言

小程序应用生命周期

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 => 不被索引
  • 其他页面都会被索引
相关文章
|
14天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
208 7
|
14天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
274 1
|
9天前
|
小程序 前端开发 开发者
小程序的页面如何布局?
【10月更文挑战第16天】小程序的页面如何布局?
25 1
|
9天前
|
存储 小程序 安全
微信的开发管理都需要配置什么?
【10月更文挑战第17天】微信的开发管理都需要配置什么?
21 0
|
14天前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
155 0
|
18天前
|
小程序
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
225 0
|
14天前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
109 3
|
21天前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
35 0
微信小程序更新提醒uniapp
|
3月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
92 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
3月前
|
小程序 前端开发 JavaScript
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
【避坑宝】是一款企业黑红名单吐槽小程序,旨在帮助打工人群体辨别企业优劣。该平台采用SpringBoot+MybatisPlus+uniapp+uview2等技术栈构建,具备丰富的注释与简洁的代码结构,非常适合实战练习与学习。通过小程序搜索“避坑宝”即可体验。
91 0
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序

热门文章

最新文章