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

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

前言

小程序应用生命周期

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 => 不被索引
  • 其他页面都会被索引
相关文章
|
21天前
|
开发框架 人工智能 小程序
小程序常见的 UI 框架
【10月更文挑战第17天】小程序 UI 框架为开发者提供了便捷的工具和资源,帮助他们快速构建高质量的小程序界面。在选择框架时,需要综合考虑各种因素,以找到最适合项目的解决方案。随着技术的不断进步,UI 框架也将不断发展和创新,为小程序开发带来更多的便利和可能性。
37 2
|
2月前
|
小程序 JavaScript 前端开发
小程序常见的UI框架
小程序常见的UI框架
300 60
|
3月前
|
移动开发 小程序 JavaScript
开源的微信小程序框架
【8月更文挑战第22天】开源的微信小程序框架
181 65
|
1月前
|
缓存 小程序 UED
如何利用小程序的生命周期函数实现数据的加载和更新?
如何利用小程序的生命周期函数实现数据的加载和更新?
59 4
|
1月前
|
小程序 UED 开发者
小程序的生命周期函数
小程序的生命周期函数
69 1
|
4月前
|
开发框架 前端开发 JavaScript
在微信框架模块中,基于Vue&Element前端的事件和内容的管理
在微信框架模块中,基于Vue&Element前端的事件和内容的管理
|
4月前
|
开发框架 移动开发 前端开发
在微信框架模块中,基于Vue&Element前端的后台管理功能介绍
在微信框架模块中,基于Vue&Element前端的后台管理功能介绍
|
30天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
458 7
|
30天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
510 1
|
1月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
111 7

热门文章

最新文章