小程序自定义组件

最新推荐文章于 2024-07-24 23:18:37 发布

原创

最新推荐文章于 2024-07-24 23:18:37 发布 · 1.1k 阅读

标签

#微信小程序

小程序中的js对象实例，按作用域大小划分，大致可以归为三类：App, Page, Component。

Component 也即本文要重点要讲的自定义组件，或称模板。

一、App

App() 必须在 app.js 中调用且只能调用一次，用于注册成为一个小程序应用。

1、app.js

App({
  // 小程序初始化完成时触发，全局只触发一次。
  onLaunch (options) {
    // 通过options.scene获取场景值可以得到小程序进入的渠道来源
    // 参数也可以使用 wx.getLaunchOptionsSync 获取。
  },
  
  // 小程序启动，或从后台进入前台显示时触发。
  onShow (options) {
    // 小程序启动，或从后台进入前台显示时触发。
  },
  
  // 小程序从前台进入后台时触发。
  onHide () {
    // 也可以使用 wx.onAppHide 绑定监听。
  },
  
  onError (msg) {
    console.log(msg)
  },
  
  // 小程序要打开的页面不存在时触发。也可以使用 wx.onPageNotFound 绑定监听。
  onPageNotFound(res) {
    // 如果是 tabbar 页面，需使用 wx.switchTab
    // 若需保留历史页面路径，需用wx.navigateTo，而非wx.redirectTo (会销毁当前页面) 
    // 若存在循环操作，则需要计算页面层级(wx.navigateTo最多跳转10层页面，超过会报页面栈溢出)
    let pageNum = getCurrentPages().length
    if(pages >= 10){
        // 超过页面路由层深，返回重载应用首页
        wx.reLaunch({
          url: '/pages/index/index'
        })
    }else{
        wx.navigateTo({
          url: '/pages/...'
        })
    }
    
    // 控制后退页面数 wx.navigateBack();  wx.navigateBack({delta: n}); // 后退n页
    wx.navigateBack({
        // 回退所有循环操作页面，只保留前3页
        delta: pageNum - 3, 
        // iOS会先重定向后回退页面，需要控制先回退完成后再重定向到指定页面
        complete: function(){ 
          wx.redirectTo({ 
            url: '/pages/...'
          })
        }
    })
  },
  
  // 全局数据，可以保存用户登录信息等
  globalData: {
    
  }
})

2、app.json

app.json 全局配置（所有页面需要在此文件中注册配置pages。该文件不能写注释。）

{
    "pages": [
        "pages/index/index"
    ],

    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "我的小程序",
        "navigationBarTextStyle": "black"
    },

    "permission": {