@232003894/h5plus 中文文档教程

Question

h5plus

HTML5+ App for Vue.js

安装

npm install @232003984/h5plus

yarn add @232003984/h5plus

基本使用

import Vue from 'vue'
import plus from '@232003984/h5plus'
Vue.use(plus)

组件选项

其方法中的this指向组件

- event 选项

Events模块管理客户端事件，包括系统事件，如扩展API加载完毕、程序前后台切换等。

1. "plusready": 扩展 API 加载完成事件
2. "pause": 运行环境从前台切换到后台事件
3. "resume": 运行环境从后台切换到前台事件
4. "netchange": 设备网络状态变化事件
5. "newintent": 新意图事件
6. "plusscrollbottom": 窗口滚动到底部事件
7. "error": 页面加载错误事件
8. "background": 应用切换到后台运行事件
9. "foreground": 应用切换到前台运行事件
10. "trimmemory": 应用需要清理内存事件
11. "splashclosed": 应用启动界面已关闭事件

- listener 选项

用于监听自定义的事件广播

$api [查看]{@link $api}

全局window中扩展$api，包含常用api，与设备无关的

$plus [查看]{@link $plus}

全局window中扩展$plus，包含设备相关的api

示例

export default {
  name: 'app',
  // Events模块管理客户端事件，包括系统事件，如扩展API加载完毕、程序前后台切换等。
  // "plusready": 扩展API加载完成事件
  // "pause": 运行环境从前台切换到后台事件
  // "resume": 运行环境从后台切换到前台事件
  // "netchange": 设备网络状态变化事件
  // "newintent": 新意图事件
  // "plusscrollbottom": 窗口滚动到底部事件
  // "error": 页面加载错误事件
  // "background": 应用切换到后台运行事件
  // "foreground": 应用切换到前台运行事件
  // "trimmemory": 应用需要清理内存事件
  // "splashclosed": 应用启动界面已关闭事件
  event: {
    // plusready，设备加载完成
    plusready() {
      console.log('test组件 设备加载完成')
    }
  },
  // 自定义窗体监听选项
  listener: {
    // “customEvent”为事件名称
    customEvent(e) {
      // e.detail：事件传递的数据
      alert('test:' + JSON.stringify(e.detail))
    }
  },
  methods: {
    // 广播消息
    send: function() {
      this.plus.send('customEvent', { a: 1 }, { self: true })
    }
  }
}

自定义扩展

import Vue from 'vue'
import plus from 'h5pa-vue'
Vue.use(plus, {
  // 全局指定hbuild的错误页地址
  errorPage: '/error.html',
  // 是否需要模拟
  isSim: true
})

参考

• Vue2 中文
• html5plus