zoukankan      html  css  js  c++  java
  • 微信小程序

    WXPAGE

    开源地址如下:https://github.com/tvfe/wxpage

    极快的小程序打开 - 势必是用户体验的重中之重

    #页面描述


    A:代表全局App.js

    var wxpage = require('./lib/wxpage')
    
    wxpage.A({
      config: {
        route: ['test/pages/$page', '/pages/$page'],
        resolvePath: function(name) {
          return '/pages/' + name;
        }
      },
    
      onLaunch: function(opts) {
        wxpage.on('some_message', function(msg) {
    
        })
    
      },
    
      onAwake: function(time) {
    
      },
    
      onShow: function() {
    
      }
    })

    C:代表组件

    Component.C({
      data: {},
      created: function() {
        this.$id = 1
        // console.log('[Component/Header] created', this.properties, this.is)
      },
      attached: function() {
        // console.log('[Component/Header] attached', this.properties, this.is, this.$root)
      },
      ready: function() {
        // 调用父组件方法
        this.$call('callFromComponent', 'header')
        // console.log('[Component/Header] ready', this.properties, this.is)
      },
      methods: {
        callFromComponent: function (from) {
          // console.log('!!! call from:', from)
        }
      }
    })


    P:代表页面

    var P = require('../lib/wxpage')
    
    P('index', {
      data: {
    
      },
      onPageLaunch: function() {
    
      },
      onAppLaunch: function(opts) {
    
      },
      onLoad: function() {
    
        this.$preload('play?cid=456');
    
        this.$setData({
          name: 'LLLLLL'
        })
    
        this.$cache.set('cache', {
          name: 'wxpage'
        })
    
        this.$session.set('session', {
          name: 'wxpage'
        })
    
        setTimeout(function() {
          P.emit('some_message', 'I am index!')
        }, 100)
      },
      onReady: function() {
    
      },
      onPlay: function() {
        this.$route('play?cid=123')
      },
      onPlayNav: function() {
        wx.navigateTo({
          url: '/pages/play?cid=abcd'
        })
      },
      onShow: function() {
    
      },
      onAwake: function(t) {
    
      },
      onClickBefore: function(e) {
    
      },
      onClickAfter: function(e) {},
      onTouchend: function(e) {},
      onTTap: function() {},
      callFromComponent: function(name) {
    
      }
    })
    

      

    我们只需要分析出它们(微信小程序原生和Wxpage)的不同之处即可

    #生命周期

    #生命周期
    ##onPageLaunch()
    小程序第一次运行的时候调用,此时对应的页面并未被加载
    
    ##onAwake(time<Number>)
    小程序进入后台模式后再激活的时候触发。time是耗时
    
    ##onAppLaunch(opts)
    App.onLaunch 触发时调用。 
    opts:
    path String 打开小程序的路径
    query Object 打开小程序的query
    scene Number 打开小程序的场景值
    
    ##onAppShow(opts)
    App.onShow 触发时调用。
    opts:
    path String 打开小程序的路径
    query Object 打开小程序的query
    scene Number 打开小程序的场景值
    
    ##onPreload(res)
    调用 this.$preload(url) 的时候触发,此时对应的页面并未被加载
    
    ##onNavigate(res)
    页面间跳转开始时调用,此时对应的页面并未被加载

    #事件描述

    #事件描述
    
    ##$name
    获取当前页面名称
    
    ##state
    页面的一些状态集合(是否搜狐个被小程序启动的页面)
    
    ##session(页面级缓存)
    this.$session.set('page_session_data', {
            name: '首页'
    })
    
    ##缓存cache
    this.$cache.set
    可以设置同步或异步以及缓存时间
    
    ##$emitter
    
    
    ##$route
    wx.navigatorTo
    
    ##$redirect
    wx.redirectTo
    
    ##$switch
    wx.switchTab
    
    ##$launch
    wx.reLaunch
    
    ##$back
    wx.navigateBack
    
    ##$preload
    提前加载页面
    
    ##$bindRoute
    点击代理方法,绑定 $onRoute 逻辑,在元素上声明 data-url 作为跳转地址,支持切面方法:
    ###data-before:跳转前执行
    ###data-after:跳转后执行
    ```<button
      bindtap="$bindRoute"
      data-url="/pages/play"
      data-before="onClickBefore"
    >click redirect</button>
    ```
    
    ##$bindRedirect()
    ###data-before:跳转前执行
    ###data-after:跳转后执行
    同 $bindRoute, 绑定 $onRedirect
    
    ##$bindSwitch()
    ###data-before:跳转前执行
    ###data-after:跳转后执行
    同 $bindRoute, 绑定 $onSwitch
    
    #$on(key, handler)
    监听跨页面间的消息
    
    #$emit(key, data)
    派发页面间的消息
    
    #$off(key, handler)
    取消监听消息
    
    #$put(id, value)
    指定 id 存在一份数据,可以为任何类型,以供其它逻辑获取使用
    
    #$take(id)
    根据 id 获取数据,数据只能被存在一次,获取一次。如果只存放一次,第二次获取 会得到 null 。
    

    在使用之前,大家可以先github拉取一个test下来,运行,看看它与小程序有何不同之处进行比较

    在熟悉之后,可以写一个开发似的模板,以便其调用

    框架来自“腾讯视频”小程序的项目沉淀,我建议大家可以先看完github文档,随即上手!

  • 相关阅读:
    mybatis-cache model
    多线程开发(1)
    正则表达式(3) — 正则表达式库
    正则表达式(2) — 表达式规则
    我在迈瑞工作的两年总结
    正则表达式(1) — 常用的表达式
    C++系列(2) — 智能指针
    C++系列(1) — string
    路径去除前缀
    SIMD性能优化
  • 原文地址:https://www.cnblogs.com/cisum/p/10200230.html
Copyright © 2011-2022 走看看