zoukankan      html  css  js  c++  java
  • 微信小程序-05-详解介绍.js 逻辑层文件

    上一篇介绍了关于.json 的配置文件,本篇介绍关于.js 逻辑层文件

    微信小程序-05-详解介绍.js 逻辑层文件

    文件目录结构

    • 之前大概提高到,没有细说
    • 先打开 app.js 文件

    小程序 App

    • 打开 app.js 文件,会看到 App({...}) 函数
    • App() 函数用来注册一个小程序。接受一个 Object 参数,其指定小程序的生命周期回调等
    • 【注意】:App() 必须在 app.js 中调用,必须调用且只能调用一次。不然会出现无法预期的后果
    • Object参数说明:
    属性 类型 描述 触发时机
    onLaunch Function 生命周期回调一监听小程序初始化 小程序初始化完成时(全局只触发一次)
    onShow Function 生命周期回调一监听小程序显示 小程序启动,或从后台进入前台显示时
    onHide Function 生命周期回调一监听小程序隐藏 小程序从前台进入后台时
    onError Function 错误监听函数 小程序发生脚本错误,或者 api 调用失败时触发 ,会带上错误信息
    onPageNotFound Function 页面不存在监听函数 小程序要打开的页面不存在时触发,会带上页面信息回调该函数
    其他 Any 开发者可以添加任意的函数或数据到 Object 参数中,用 this 可以访问
    • 前台、后台定义:当用户点击左上角关闭,或者按了设备 Home 键离开微信(也就是返回手机桌面,没有退出微信),小程序并没有直接销毁,而是进入了后台;当再次进入微信或再次打开小程序,又会从后台进入前台。需要注意的是:只有当小程序进入后台一定时间,或者系统占用资源过高,才会真正被销毁
    • 关闭小程序(基础库版本1.1.0开始支持):当用户从扫一扫 ,转发等入口(场景值(下面有介绍)为1007,1008,1011,1025)进入小程序,且没有置顶小程序的情况下推出,小程序会被销毁
    • 小程序运行机制在基础库版本 1.4.0 有所改变:上一条关闭逻辑在新版已不适用
    • 示例代码:
    //提示:当在js文件中输入app会提示函数,直接回车会直接生产4个框架,快捷
    App({
    
      /**
       * 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
       */
      onLaunch: function () {
        
      },
    
      /**
       * 当小程序启动,或从后台进入前台显示,会触发 onShow
       */
      onShow: function (options) {
        
      },
    
      /**
       * 当小程序从前台进入后台,会触发 onHide
       */
      onHide: function () {
        
      },
    
      /**
       * 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
       */
      onError: function (msg) {
        
      }
      /**
       * 下面是自定义内容
      */
      globalData: 'I am global data'
    })
    

    详细介绍.js 文件中App({...})函数各参数

    • 上面提到的 5 个参数
    • onLaunch,onShow,onHide,onError,onPageNotFound

    js 文件中App({...})函数参数 - onLaunch(Object)

    • 小程序初始化完成时触发,全局只触发一次
    • Object 参数说明:
    字段 类型 说明
    path String 打开小程序的路径
    query Object 打开小程序的query
    scene Number 打开小程序的 场景值(下面有介绍)
    shareTicket String shareTicket,详见 获取更多转发信息(下面有介绍)
    referrerInfo Object 当场景为由从另一个小程序或公众号或App打开时,返回此字段
    referrerInfo.appId String 来源小程序或公众号或App的 appId,详见下方说明
    referrerInfo.extraData Object 来源小程序传过来的数据,scene=1037或1038时支持
    • 以下场景支持返回 referrerInfo.appId:
    场景值 场景 appId 信息含义
    1020 公众号 profile 页相关小程序列表 来源公众号 appId
    1035 公众号自定义菜单 来源公众号 appId
    1036 App 分享消息卡片 来源应用 appId
    1037 小程序打开小程序 来源小程序 appId
    1038 从另一个小程序返回 来源小程序 appId
    1043 公众号模板消息 来源公众号 appId

    js 文件中App({...})函数参数 - onShow(Object)

    • 小程序启动,或从后台进入前台显示时触发
    • Object 参数说明:
    • 与上面 onLaunch 相同

    js 文件中App({...})函数参数 - onHide()

    • 小程序从前台进入后台时触发

    js 文件中App({...})函数参数 - onError(String error)

    • 小程序发生脚本错误,或者 api 调用失败时触发
    • 参数说明:
    名称 类型 说明
    error String 错误信息,包含堆栈

    js 文件中App({...})函数参数 - onPageNotFound(Object)

    • 基础库 1.9.90 开始支持,低版本需做兼容处理
    • 小程序要打开的页面不存在时触发
    • Object 参数说明:
    字段 类型 说明
    path String 不存在的页面路径
    query Object 打开不存在的页面的 query
    isEntryPage Boolean 是否本次启动的首个页面(例如从分享等入口进来,首个页面是开发者配置的分享页面)
    • 开发者可以在 onPageNotFound 回调中进行重定向处理,但必须在回调中同步处理,异步处理(例如 setTimeout 异步执行)无效
    • 示例代码:
    App({
      onPageNotFound(res) {
        wx.redirectTo({
          url: 'pages/...'
        }) // 如果是 tabbar 页面,请使用 wx.switchTab
      }
    })
    
    • 注意:
      • 1.如果开发者没有添加 onPageNotFound 监听,当跳转页面不存在时,将推入微信客户端原生的页面不存在提示页面
        1. 如果 onPageNotFound 回调中又重定向到另一个不存在的页面,将推入微信客户端原生的页面不存在提示页面,并且不再回调 onPageNotFound

    getApp(Object)

    • 全局的 getApp() 函数可以用来获取到小程序 App 实例
    • Object 参数说明:
    字段 类型 说明 最低版本
    allowDefault Boolean 在 App 未定义时返回默认实现。当App被调用时,默认实现中定义的属性会被覆盖合并到App中。一般用于[独立分包](https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/independent.html) 2.2.4
    • 示例代码:
    // 自定义的.js
    var appInstance = getApp()
    console.log(appInstance.globalData) // I am global data
    
    • 注意:
      • 不要在定义于 App() 内的函数中调用 getApp() ,使用 this 就可以拿到 app 实例
      • 通过 getApp() 获取实例之后,不要私自调用生命周期函数

    场景值

    • 基础库 1.1.0 开始支持,低版本需做兼容处理
    • 当前支持的场景值有:
    场景值ID 说明
    1001 发现栏小程序主入口,“最近使用”列表(基础库2.2.4版本起将包含“我的小程序”列表)
    1005 顶部搜索框的搜索结果页
    1006 发现栏小程序主入口搜索框的搜索结果页
    1007 单人聊天会话中的小程序消息卡片
    1008 群聊会话中的小程序消息卡片
    1011 扫描二维码
    1012 长按图片识别二维码
    1013 手机相册选取二维码
    1014 小程序模版消息
    1017 前往体验版的入口页
    1019 微信钱包
    1020 公众号 profile 页相关小程序列表
    1022 聊天顶部置顶小程序入口
    1023 安卓系统桌面图标
    1024 小程序 profile 页
    1025 扫描一维码
    1026 附近小程序列表
    1027 顶部搜索框搜索结果页“使用过的小程序”列表
    1028 我的卡包
    1029 卡券详情页
    1030 自动化测试下打开小程序
    1031 长按图片识别一维码
    1032 手机相册选取一维码
    1034 微信支付完成页
    1035 公众号自定义菜单
    1036 App 分享消息卡片
    1037 小程序打开小程序
    1038 从另一个小程序返回
    1039 摇电视
    1042 添加好友搜索框的搜索结果页
    1043 公众号模板消息
    1044 带 shareTicket 的小程序消息卡片 详情
    1045 朋友圈广告
    1046 朋友圈广告详情页
    1047 扫描小程序码
    1048 长按图片识别小程序码
    1049 手机相册选取小程序码
    1052 卡券的适用门店列表
    1053 搜一搜的结果页
    1054 顶部搜索框小程序快捷入口
    1056 音乐播放器菜单
    1057 钱包中的银行卡详情页
    1058 公众号文章
    1059 体验版小程序绑定邀请页
    1064 微信连Wi-Fi状态栏
    1067 公众号文章广告
    1068 附近小程序列表广告
    1069 移动应用
    1071 钱包中的银行卡列表页
    1072 二维码收款页面
    1073 客服消息列表下发的小程序消息卡片
    1074 公众号会话下发的小程序消息卡片
    1077 摇周边
    1078 连Wi-Fi成功页
    1079 微信游戏中心
    1081 客服消息下发的文字链
    1082 公众号会话下发的文字链
    1084 朋友圈广告原生页
    1089 微信聊天主界面下拉,“最近使用”栏(基础库2.2.4版本起将包含“我的小程序”栏)
    1090 长按小程序右上角菜单唤出最近使用历史
    1091 公众号文章商品卡片
    1092 城市服务入口
    1095 小程序广告组件
    1096 聊天记录
    1097 微信支付签约页
    1099 页面内嵌插件
    1102 公众号 profile 页服务预览
    1103 发现栏小程序主入口,“我的小程序”列表(基础库2.2.4版本起该场景值废弃)
    1104 微信聊天主界面下拉,“我的小程序”栏(基础库2.2.4版本起该场景值废弃)
    • 可以在 App 的 onLaunch 和 onShow 中获取上述场景值,部分场景值下还可以获取来源应用、公众号或小程序的appId
      -提示:由于Android系统限制,目前还无法获取到按 Home 键退出到桌面,然后从桌面再次进小程序的场景值,对于这种情况,会保留上一次的场景值

    更多文章链接:微信小程序

  • 相关阅读:
    基于properties文件的Spring Boot多环境切换
    在mysql命令行下执行sql文件
    thymeleaf th:href 多个参数传递格式
    Mybatis 级联查询时只查出了一条数据
    IDEA技巧-自动导包(Auto import)以及自动优化包
    Drools学习教程
    Drools学习教程
    Drools学习教程
    Drools学习教程
    一道有趣的类加载面试题
  • 原文地址:https://www.cnblogs.com/xpwi/p/9656277.html
Copyright © 2011-2022 走看看