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

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

前言

小程序应用生命周期

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 => 不被索引
  • 其他页面都会被索引
相关文章
|
8天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
8天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
8天前
|
JavaScript 前端开发 小程序
微信小程序全栈开发之性能优化策略
【4月更文挑战第12天】本文探讨了微信小程序全栈开发的性能优化策略,包括前端的资源和渲染优化,如图片压缩、虚拟DOM、代码分割;后端的数据库和API优化,如索引创建、缓存使用、RESTful API设计;以及服务器的负载均衡和CDN加速。通过这些方法,开发者可提升小程序性能,优化用户体验,增强商业价值。
|
19天前
|
缓存 小程序 UED
微信小程序如何在切换页面后原页面状态不变
微信小程序如何在切换页面后原页面状态不变
21 0
|
8天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。
|
8天前
|
SQL 安全 小程序
探索微信小程序全栈开发的安全性问题
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的安全性问题,包括数据安全、接口安全、隐私保护和代码安全。为解决这些问题,建议采取数据加密、使用HTTPS协议、身份认证与授权、输入验证、安全审计及漏洞扫描以及安全培训等措施。通过这些方法,开发者可提升小程序安全性,保护用户隐私和数据。
|
19天前
|
缓存 小程序 开发者
微信小程序如何刷新当前页面
微信小程序如何刷新当前页面
15 0
|
1月前
|
小程序 前端开发 程序员
微信小程序开发入门教程-小程序账号注册及开通
微信小程序开发入门教程-小程序账号注册及开通
|
11天前
|
小程序 数据库
【微信小程序7】云开发中实时聊天系统的实现方法
【微信小程序7】云开发中实时聊天系统的实现方法
21 0
|
1月前
|
小程序 JavaScript
在使用微信小程序开发中用vant2框架中的Uploader 文件上传wx.uploadFile无反应和使用多图上传
网上有的说是bind:after-read="afterRead"的命名问题不支持-,但是我这儿执行了console.log("file",file);证明函数运行了。后来发现是multiple="true"原因开启了多图上传,如果是多图上传的话file就是数组了
25 2

热门文章

最新文章