kbone + vue 问题集合

使用kbone开发的微信小程序，只需要做稍微的修改就可以用到 web 端和 qq 小程序，很方便。

因为我之前的项目工程化程度很高，所以在刚开始用的时候因为惯性思维遇到了一些问题。

在 kbone + vue 的项目中可以使用 vue-router，但是web用一个router文件，小程序的 router 要另写。

我们在官方给出的 vue 项目模版的基础上做了一些目录调整：

现在我们要新增一个页面，文章详情页面， /article/:id ，首先我们需要在 src/article/mp/mainmpjs 中添加路由：

这里要注意：

tabbar 的配置主要写在 miniprogramconfigjs 中的 generate 属性里：

这里要注意：

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

因为在微信小程序中不能直接使用 axios ，需要用 wxrequest ，而 web 端不能用 wxrequest ，所以我们需要找一个在 web 端和小程序上都能进行正常网络请求的方案。这里我们采用了 axios + adapter ，即 axios-miniprogram-adapter 。

使用的时候注意做一下环境判断：

微信小程序和qq小程序都可以用官方推荐的 rpx 做适配，我们要做的是对 web 端做一下兼容。

我们可以在 webpack 中的 sass-loader 里写一个全局变量 $isMini 做环境的区分，然后我们就可以写一个转换设计稿尺寸的方法，在这个方法里借助前面注册的变量进行尺寸转换（假设设计稿是 750px 宽的）：

这里要注意的是 rpx 和 px 的转换关系，以 iphone6 为例： 750rpx = 375px。

微信小程序也支持 rem，设置的时候需要在 miniprogramconfigjs 的 global 字段中配置：

因为我们用的是 sass，而官方模版用的是 less，这里就顺便提一下，如果要用 sass，记得要在 build 目录下的各个 webpack 文件中进行对应的 loader 配置哦。

这个库可以在小程序和 web 端都能正常使用。

要注意的是使用的时候，不要忘记引入样式文件哦：

刚接触小程序的朋友还可以看一下微信原生组件的使用，因为 kbone-ui 的文档写的不是很详细，有些还是结合原生组件的文档好理解一点。

包括内置组件的使用，也可以结合原生组件的文档使用。

微信小程序现在支持单页面自定义导航，但是 kbone 如果要自定义导航，所有页面的导航都需要自己写。

导航条分为两部分，statusbar（显示时间的部分）和 titlebar (标题栏)。

statusbar 的高度：

titlebar 的高度：

导航条的高度：

如果是用在微信小程序上，那么现在这两个 api 的使用时机不需要特别注意，但如果是同时要用在qq小程序上，就需要注意使用的时机啦，如果直接在计算属性或者 created 中使用会出现报错，取不到内容的情况。

我是在created 中用了 settimeout 延迟使用这两个 api来解决这个问题的。

getMenuBarRect 这个方法是参考了网上找到的一个作者的方法，做了点修改，修改后可以正常使用，但是有个问题，因为 systeminfo 一开始取不到值，会用默认值，后来取到正确值时自定义头部的高度会有个突变，就是会跳一下。这个还没有优化。

比如，自定义分享内容的path要写全；

appid在微信小程序里叫appid，在qq小程序配置里叫qqappid；

微信小程序可以只设置宽度不设置高度，这样不会变形；

qq小程序只设置宽度不设置高度，会显示不出来，需要加属性 mode="widthFix" ；

页面的下拉刷新、加载中提示、上拉加载更多等配置需要在miniprogramconfigjs 里配置；

全局滚动事件也需要先配置，才能用 windowaddEventListener('scroll', () => {})

而且要取到 scrolltop 要用 documentbody$$getBoundingClientRect ；

总而言之呢就是多看文档、仔细看文档啦。

windowopen相当于 navigateTo，页面打开方式为 open；

windowlocationhref相当于redirectTo，页面打开方式为 jump；

不可否认它确实有很多方便的地方，但是在样式方面和组件支持方面简直令人抓狂。另外，编译速度和开发者工具都很慢。真的是一言难尽。今天又是修bug的一天，修到吐。

首先要分清两种分辨率：

视觉上的清晰度 ：

单位逻辑分辨率上的物理像素点越多，视觉效果越清楚。

但是人类的眼球是有视觉极限的。也就是326ppi;

通常来说一个pt可以由1个px或者2个px甚至3个px构成

结论：工作时如果按照iphone6来设计的，将设计稿的1px=1rpx=05pt。由于rpx会随着屏幕的尺寸调整，所以建议文字类的不建议用rpx，会导致页面字体过小

1、检查小程序代码，确保小程序代码中没有错误；

2、检查小程序的设计稿，确保设计稿中的尺寸信息是正确的；

3、检查小程序的css样式，确保css样式的设置是正确的；

4、检查小程序的网络环境，确保网络环境是稳定的；

5、如果以上方法都没有解决问题，可以尝试重新编译小程序。

微信小程序设置轮播图的尺寸为950450的 *** 作方法如下：

1、打开微信开发者工具。

2、找到wxml文件。

3、新建一个swiper标签。

4、设置swiper和autoplay的属性。

5、点击autoplay设置为自动轮播。

6、使用block标签，放置要轮播的，展示大小设置为950450即可。

关于是否使用rpx还是px，首先需要明白两者之间的区别。

rpx：微信小程序中的尺寸单位rpx(responsive pixel):可以根据屏幕宽度进行自适应。规定屏幕宽度为750rpx。微信官方建议视觉稿以iphone6为标准，一般设计师出图为2倍图。

px：iphone6上1px=2rpx

1rpx相当于1个物理像素，何为物理像素，就相当于我们所使用的屏幕的尺寸，只不过换了一种说法叫物理像素，而我们平时css中所用到的px,实际上是数据显示的尺寸，比如文字，、设计样式的盒子的大小1rpx的出现为我们搭起了物理像素与样式像素px之间的桥梁，而且根据屏幕宽度进行自适应

<view class="box">rpx的像素</view>

<view class="bo">px的像素观察</view>

box{  width:300rpx;  height:200rpx;  border:1rpx solid black;  font-size:30rpx;}bo{   width:300px;  height:200px;  border:1px solid black;  font-size:30px;}

结果：

所以，小程序中字体大小用rpx还是px要结合设计师出图的文字大小，建议的话还是以rpx为主。

微信小程序 开发--从px到rpx:

我一直在想，我是不是有必要再写这一节，还是给大家提供一些阅读链接。

因为关于单位的定义都是比较官方的。没什么好讨论的，我这里做一个汇总和简单的说明吧。

首先本文只以移动设备为例说明。

本文摘要：设计师以iphone6为标准出设计稿的话，1rpx=05px=1物理像素。Photoshop里面量出来的尺寸为物理像素点。所以可以直接使用标注尺寸数据。

--------------------------------------看懂本文摘要的话，就不用阅读下面的内容了-------------------------------------

英寸Inch英寸表示屏幕斜对角线的长度。如下图所示：

像素Pixel像素是图像的基本采样单位，它不是一个确定的物理量，因为像素点的物理大小是不确定的。如图:

分辨率分辨率是屏幕像素的数量，一般用屏幕宽度的像素点乘以屏幕高度的像素点。如描述iphone6的分辨率是7501334

分辨率又分为物理分辨率和逻辑分辨率，值得注意的是实际工作中设计师常常给的是物理分辨率，程序中用到的是逻辑分辨率，但是都称为分辨率，容易混淆。

物理分辨率是硬件所支持的分辨率，逻辑分辨率是软件可以达到的分辨率。

物理分辨率和逻辑分辨率的商称为像素倍率dpr，也就是常说的几倍屏。

如下图中所示，iphone6的分辨率写着375667，这里指的就是它的逻辑分辨率。我们上面提的7501334则是它的物理分辨率。

所以iphone6的像素倍率=（7501334）/（375667）=2

理解了上述的几个概念，我们就可以接着来看下面的几个单位。

pxpx就是Pixel的缩写，就是指像素。这个作为采样的基本单位，没什么需要特别说明的。

rem在做移动端适配是最常用的方法就是使用rem作为单位，因为rem是根据html的fontsize去动态计算实际的px的。

所以常常应用这点，做反向使用。即根据屏幕大小动态的设置fontsize来达到不同的分辨率下有一样的效果。

rpxrpx其实是 微信 对于rem的一种应用的规定，或者说一种设计的方案，官方上规定屏幕宽度为20rem，规定屏幕宽为750rpx。

所以在微信 小程序 中1rem=750/20rpx。

但是这不是我们要关注的重点。

在使用rem时，我们常常让设计师根据iphone6的标准出设计稿。因为如果以iphone6为标准，并且在iphone6上将fontsize设置成625%。

那么1rem就等于10px，我们只要将设计师标注的尺寸（一般标注的是物理分辨率）除以20就可以得到单位为rem的数值了。

在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 05px = 1物理像素。

css中的px与设备的物理像素并非绝对的一比一关系。

px与物理像素的比例与设备的dpr（像素倍率）有关。

rpx称为相对像素值，rpx与物理像素也并非绝对的一比一关系。

wxss将设备宽定义为750rpx，是以iPhone6的分辨率（750x1334）为基准划分的。

也就是说，在iPhone6上，1rpx=1物理像素=05px。

因为设计师标注的尺寸一般是物理分辨率。所以如果以iphone6为标准出设计稿的话，那么我们就可以不需要经过换算直接标准rpx。

这节课的内容就到这里结束了。

感谢您的阅读。

rpx是微信小程序WXSS的尺寸单位。介绍rpx前，先要介绍WXSS。

WXSS(WeiXin Style Sheets) 是一套样式语言，用于描述 WXML 的组件样式。

WXSS 用来决定小程序页面WXML的组件应该怎么显示。

为了适应广大的前端开发者，微信小程序的 WXSS 具有 CSS 大部分特性。 同时为了更适合开发小程序，微信开发者对 CSS 进行了扩充以及修改。

与 CSS 相比WXSS扩展的特性有：

其中，rpx就是尺寸单位。

建议 ： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

注意 ： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

参考资料：

微信小程序开发文档

以上就是关于kbone + vue 问题集合全部的内容，包括:kbone + vue 问题集合、微信小程序单位rpx解析、小程序显示错位怎么办等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！