Kbone踩坑记录
- tabbar
- kbone-ui使用
- 自定义导航
- 页面跳转
- 扩展API
- 环境判断
- swiper
- 图片资源
- wx-web-view

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

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

node 对接微信支付的踩坑记录（服务端）
因项目需要,对接了微信支付,微信支付对于网页来说没有什么工作量,申请了商户号后,直接将收款码放到网页上就可以,但是小程序需要调起微信支付直接付款,于是认真翻阅了官网要针对小程序做微信支付的对接. 准备 ...
微信vue路由跳转兼容_Vue微信公众号开发踩坑记录
需求微信授权登录(基于公众号的登录方案) 接入JS-SDK实现图片上传,分享等功能现状及难点采用的Vue框架,前后端分离模式(vue工程仅作为客户端),用户通过域名访问的是客户端,但是微信授权中 ...
vue项目中将视频链接分享至推特的解决方法及踩坑记录
vue项目中将视频链接分享至推特的解决方法及踩坑记录将动态改变的视频链接分享至推特,并希望能直接在推特上播放视频的需求实现方法及踩坑记录如果只要将文本或链接分享到推特,不需要推特识别图片/视频等媒 ...
乐视体感摄像头开发踩坑记录
乐视三合一体感相机开发踩坑记录第一次用Cmake,以下如有错误请大佬指正开发环境: Linux ARM(树莓派4) AstraSDK-v2.1.3 Arm/Arm64(https://orbbec ...
安卓 Native+Flutter 应用开发入门资料、亲身实战及踩坑记录
安卓 Native+Flutter 应用开发实战及踩坑记录,练手入门项目:FluLearn 入门资料第三方共享包检索(国内).第三方共享包检索(国外) Flutter开发环境搭建(中文版).Flut ...
VUE 集成富文本编辑器及踩坑记录
一.查看 vue版本和vue cli版本首先要知道自己所使用的VUE 版本和脚手架(VUE CLI)版本这样自己无论是在百度的时候还是选择富文本编辑器对应版本的时候都方便很多 1.查看vue 版 ...
TVM: Deep Learning模型的优化编译器(强烈推荐, 附踩坑记录)
本文作者是阿莱克西斯,原载于知乎,雷锋网(公众号:雷锋网)获得授权转载. (前排提醒,本文的人文内容部分稍稍带有艺术加工,请保持一定的幽默感进行阅读) 关注我最近想法的同学应该知道我最近都在把玩 TV ...
【踩坑记录】Tensorflow在Windows下使用
[踩坑记录]Tensorflow在Windows下使用 TensorFlow 是一个端到端开源机器学习平台安装 pip3 install tensorflow 使用时报错如下 2021-04-21 ...
mvn exec: java_实战|Java 测试覆盖率 Jacoco插桩的不同形式总结和踩坑记录(下）
本文为霍格沃兹测试学院优秀学员关于 Jacoco 的小结和踩坑记录.测试开发进阶学习,文末加群. 六.注意事项汇总修改 JAVA_OPTS 参数时,如果位置不对,可能造成代理无法启动. java - ...

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