美文网首页
小程序语法

小程序语法

作者: 江疏影子 | 来源:发表于2019-06-10 14:16 被阅读0次

    小程序App

    App(Object object)

    注册小程序。接受一个Object 参数,其指定小程序的生命周期回调等。
    App()只能在app.js中调用,并且只能一次。

    参数

    onLaunch(Object object)function,生命周期回调-监听小程序初始化,全局只触发一次。
    onShow(Object object)function,生命周期回调——监听小程序启动或切前台。
    onHide():小程序从前台进入后台时触发。
    onError(String error):小程序发生脚本错误或 API 调用报错时触发。
    onPageNotFound(Object object):小程序要打开的页面不存在时触发。如果没有配置此方法,会自动进入到微信内置的页面不存在选项。
    示意代码:

    App({
      onPageNotFound(res) {
        wx.redirectTo({
          url: 'pages/...'
        }) // 如果是 tabbar 页面,请使用 wx.switchTab
      }
    })
    

    页面

    Page(Object object)

    参数

    data:页面第一次渲染使用的初始数据,data会以JSON字符串的形式从逻辑层传到渲染层。类型:字符串 数字 布尔值 对象 数组,在页面中表示:{{text}}

    Page({
      data: {
        text: 'Hello World'
      }
    })
    
    生命周期回调函数

    onLoad(Object query):页面加载时触发。一个页面只会调用一次,可以在onLoad的参数中获取打开当前页面路径中的参数。
    onShow():页面显示/切入前台时触发。
    onReady():页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。
    注意:对页面内容进行设置的API如wx.setNavigationBarTitle,请在onReady之后进行。
    onHide():页面隐藏/切入后台时触发。如wx.navigationTo或底部tab切换到其他页面,小程序切入后台等。
    onUnload():页面卸载时触发。如wx.redirectTo或者wx.navigateBack到其他页面时。

    页面事件处理函数

    onPullDownRefresh():监听用户下拉刷新事件。

    • 需要在app.jsonwindow选项中或者页面配置选项中开启enablePullDownRefresh,页面配置会覆盖app.json的相同配置项。
      示意代码:
    onPullDownRefresh:function(){
        setTimeout(function(){
          wx.stopPullDownRefresh({})//停止下拉刷新动作
        },1000)
      }
    

    注意:页面中下拉刷新并没有出现loading的效果,需要在app.json里面的window选项中配置"backgroundTextStyle": "dark"
    onReachBottom():监听用户上拉触底事件。可以在app.json中配置触底的距离,onReachBottomDistance,也可以在页面中配置。
    onPageScroll(Object object):监听用户滑动页面事件。参数scrollTop,页面在垂直方向已滚动的距离(单位px)
    注意:不要定义空方法,也不要进行大量的setData方法,影响通信耗时。
    onShareAppMessage(Object object):监听用户点击页面内转发按钮(button组件open-type='share')或右上角菜单转发按钮的行为,并自定义转发内容。也只有定义了此事件处理函数右上角菜单才会显然“转发”按钮。

    这是点击页面按钮转发所打印的内容
    这是点击右上角菜单转发按钮所打印的内容
    • from:转发事件的来源,button页面中的按钮,menu右上角的菜单栏转发
    • target:如果from值是button,则target就是button,但如果frommenutarget则是undefined
    • webViewUrl,如果页面有web-view组件时,则返回当前web-viewurl
      此函数需要return一个对象出去来自定义转发内容。
    onShareAppMessage: function (res) {
        console.log(res)
        var obj={
          "title":'自定义标题',
          "path":'/user/user'
    //还有一个imageUrl参数,自定义图片的路径。默认是当前页面的截图。
        }
        return obj;
      }
    
    image.png
    onResize(Object object):小程序屏幕旋转时触发。
    onTabItemTap(Object object):点击tab触发。
    onTabItemTap:function(res){
        console.log(res)
      }
    
    index索引,pagePath页面url,text为tab按钮文字
    this.setData()
    注意:
    • 直接修改而不调用this.setData方法是无法改变状态的
    • 仅支持可JSON化的数据
    • 单次设置数据不能超过1024kb
    • 不要把data里面的value设置为undefined

    相关文章

      网友评论

          本文标题:小程序语法

          本文链接:https://www.haomeiwen.com/subject/gddaxctx.html