Kbone踩坑记录（VUE多端开发不得不做的吃螃蟹尝试）

Kbone踩坑记录

tabbar

所有 tabbar 的页面在注册路由时，需要有一个 / 路径，比如，我们把 article 页面作为一个 tab 页，那么我们需要改写一下注册的路由写法：

const router = new Router({
  mode: 'history',
  routes: [
    // 新增 / 指向和 /articles 一致
    {
      path: '/',
      name: 'ArticleList',
      component: ArticleList
    },
    {
      path: '/articles',
      name: 'ArticleList',
      component: ArticleList
    }
  ]
});

kbone-ui使用

加载全部组件内容，并引入 weui 样式库：

import KboneUI from 'kbone-ui'
import 'kbone-ui/lib/weui/weui.css'
Vue.use(KboneUI)

或者使用按需引入：

import KButton from 'kbone-ui/lib/KButton.js'
import KView from 'kbone-ui/lib/KView.js'
Vue.use(KButton)
Vue.use(KView)

说明
直接在app.js引用，mp无需引用

自定义导航

statusbar 的高度：

const systemInfo = wx.getSystemInfoSync()
const statusbarHeight = systemInfo.statusBarHeight; // statusbar 的高度

titlebar 的高度：

const rect = wx.getMenuButtonBoundingClientRect();
const titlebarHeight = rect.bottom + rect.top - statusBarHeight * 2; // titlebar 的高度
// wx.getMenuButtonBoundingClientRect 这个 api 会返回胶囊的信息，官方文档

导航条的高度：

const totalHeight = statusbarHeight + titlebarHeight;

页面跳转

window.open 相当于 navigateTo，页面打开方式为 open；
window.location.href 相当于 redirectTo，页面打开方式为 jump；

扩展API

环境判断

swiper

图片资源

wx-web-view