kuangpf/mpvue-weui

用 vue 写小程序，基于 mpvue 框架重写 weui。

mpvue-weui

用 vue 写小程序，使用 mpvue 框架重写 WeUI。

相关说明

该仓库是基于 mpvue 重写 WeUI，是一个 demo 库，没有实现组件化，目前 MPComponent/mpvue-weui 已实现组件化，支持 npm 安装。

前言

今天早上打开电脑，像往常一样浏览一下 github，看到了一个很不错的框架，没错，就是 mpvue。它是基于 Vue.js 的小程序开发框架，从底层支持 Vue.js 语法和构建工具体系。what，小程序可以用 vue写了？简直有点不太敢确定，花了5 分钟看了一下简介，没错，真的可以用vue开发小程序。真的是**限制了我的想象力，明白又该学写了，于是就开始准备利用这个框架写一点项目，感受一下他的魅力(其实是踩坑)。

踩坑文档

记录了踩的一些坑和一些组件在 mpvue 框架中的用法

WeUI

由于是小程序，所以首先想到了实现一下小程序的一些组件，包括 button、loading、picker 等等。总的效果就像weui，或者说用 vue 重写weui。

开发预览

1. git clone
git clone https://github.com/KuangPF/wxapp-vue.git

2. 安装依赖
npm install

3. 启动程序
npm run dev

4. 预览
打开微信开发者工具，新建项目，将目录指向 /dist 即可

效果

重写状态

点击展开重写状态

表单

• Button
• Input
• List
• Slide-View
• Slider
• Uploader

基础组件

• Article
• Badge
• Flex
• Footer
• Gallery
• Grid
• Icons
• Loading
• Loadmore
• Panel
• Preview
• Progress
• Swiper

操作反馈

• Actionsheet
• Dialog
• Half-Screen-Dialog
• Msg
• Picker
• Toast

导航相关

• Navbar
• Navigation-Bar
• Tabbar

搜索相关

• Searchbar

Issues 相关

• Request
• 页面通信（Vuex 实现）
• Rate

版本日志

releases

Contributors

Thank you to all the people who already contributed to mpvue-weui.

结束语

花了大概一周多的时间来完成了这个项目，过程中收获还是很大的，给我最大的感触就是现在技术发展的很快，如果不学习就真的要落后了。美团开源的mpvue是一个非常不错的框架，而且开发者也正在快速的迭代，开发新的功能，所以它的前景是非常值得期待。另外就是非常感谢关注这个仓库的人，谢谢你们的支持，后续我也会继续维护这个仓库，当mpvue有了一些新的特性或者一些新的语法的时候也会持续更新。如果各位大佬发现了什么问题欢迎PR 或者 Issues。

文档是用 docsify构建，所有文档文件在 /docs 目录下面，由于里面图片比较多而且还有gif，可能在git clone的时候会有一点点慢。

License

持续维护...

mpvue-weui's Issues

有使用Demo吗?

需要自己在项目中定义button和card这些组件吗?

navbar 只能传名称进去，没有内容

兄嘚 文档地址是不是挂了？https://kuangpf.com/mpvue-weui/#/

怎么没有网络请求相关的实例

怎么没有网络请求相关的实例

请问作者有没有mpvue实现的多区间的slider滑块组件

时间选择器为什么要把它写死成picker？我只想点击input的时候弹出下面的城市选择。。。

我想去掉这该死的边框怎么去除？boder:0 or boder:none 都没效果
<picker class="weui-btn" mode="region" :value="region" @change="CityChange">

*省市区

选择城市

图片

关于组件uploader

wx.chooseImage里面设置count：1 无效。。而且在predivImage时 没有删除这个图片的地方，weui里有这个。help

npm run dev 时 错误提示 error: 嵌套的 v-for 不能连续使用相同的 iterator: [ 'index', 'index' ]

npm run dev 时 错误提示 error: 嵌套的 v-for 不能连续使用相同的 iterator: [ 'index', 'index' ]

但编译成功了

版本迭代需求描述

这个 Issue 目的在于收集下次版本迭代的时候需要更新哪些功能，如果你有哪些需求可以在下面留言，在下个版本开发中会考虑把新功能添加进去，当然也可以直接 PR。

v1.0.5

• 增加评分组件 demo (issues19)

版本迭代需求日志

v1.0.4

• 增加页面通讯实例 (issues15)

v1.0.3

• 增加网络请求实例 (issues14)

v1.0.2

• uploader 组件增加图片上传后删除功能（issues10）

https://kuangpf.com/mpvue-weui/#/挂了

404 - Not found

关于request

npm install flyio 之后运行命令npm run dev 就报错，说相关依赖没找到，我也没有引入fly 到相应页面。
重装flyio 还是报一样的错

navbar的tabClick没有对数据类型转换，导致激活状态的下划线没有变化，可以优化一下

tabClick (e) {
  this.activeIndex = Number(e.currentTarget.id)
}

都转成数字类型就可以

端口占用后不会自动更换端口,导致npm run dev 启动报错

var server = app.listen('8801', 'localhost')
修改端口才可以启动

那个评分的组件不显示

评分的那5颗星星没有显示出来

运行 node build/dev-server.js 卡住不动

可见：
Meituan-Dianping/mpvue#518
Meituan-Dianping/mpvue#522
Meituan-Dianping/mpvue#562

测试环境：
Windows 10
node v9.10.1

发布的时候，/static/images/图片没有上传到服务器，无法显示

还有个问题，就是报Cannot read property 'call' of undefined;at App onError function TypeError: Cannot read property 'call 的问题

npm run dev 报错

Cannot read property 'template' of undefined

Uploader图片上传放封装成一个子组件 然后子组件放在for循环内没有生效 点击没有反应

Uploader图片上传用在for循环里面没有效果呢
想做一个像淘宝评价页面的，然后因为设置mpvue的data里面的goods.imgs 这个二维数组页面没有同步刷新 然后考虑把上传抽出来做子组件 然后发现for循环里面没有生效

组件-Loadmore（暂无数据）- margin-top 计算错误的问题

.weui-loadmore__tips_in-line{top: -0.9em}
也就是说中心向上偏移0.9em，那么整体增加0.9*2=1.8em，也就是说margin-top应该是1.5em+1.8em=3.3em，文字才是上下居中的。

为了保持高度的一致，应该作如下修改：
.weui-loadmore_line {
margin-top: calc(3.3em - 26rpx);
margin-bottom: calc(1.5em - 26rpx);
}

bug(build): Vue packages version mismatch

编译报错 - [email protected] 版本不对应

Vue packages version mismatch:

- [email protected]
- [email protected]

swiper组件中的swiper-item会遮盖其他的图标吗？

[问题简单描述]

mpvue项目中使用swiper组件，给容器内加上其他利用定位和v-if（后来改成display也出现）以及z-index的图标，在部分机型上（iphone和安卓都有，但不是所有手机）会出现该图标渲染不出来的情况：虽然设置了z-index，但会发现image仍然在swiper下面，但有时又会渲染出来。
问题复现步骤：

1. [第一步]：打开小程序，等待第一屏商品图片加载完毕，可见商品的上新图标和点餐按钮都是显示的；
2. [第二步]：下滑至大概两屏的距离，等待其他商品加载完毕，然后再划上去，会发现之前的上新图标和点餐图标都不显示了，滑动商品swiper会发现图标在swiper-item层下，当前屏有图片重新渲染后这些图标还会出现
3. [其他步骤...]：重复第二步会发现该问题还是存在

期望的表现：
图标一直在swiper组件上层，使用户能够明确看到
[在这里描述期望的表现]

观察到的表现：
图标在swiper组件下层，用户无法看到图标，可能会无法使用小程序
[在这里描述观察到的表现]

屏幕截图或动态图：

.vue文件布局代码如下：

<div :style="{position: 'relative',zIndex: '100',width: '100vw', height: (700 * dp)+'rpx'}">
        <div v-if="!goodsdata.hasLoad" class="default-wrap" :style="{width: '100vw', height: (700 * dp)+'rpx'}">
          <!-- <div v-if="isIp" class="loading-svg"> -->
          <div class="loading-svg">
            <img src="/static/svg/tail-spin.svg"/>
          </div>
          <image class="default-image" src="/static/images/goods-default.jpg"/>
        </div>
        <swiper v-if="goodsdata.isInListView" :style="{width: '100vw', height: (700 * dp)+'rpx', zIndex: '200'}" 
          :indicator-dots="indicatorDots" 
          :indicator-color="indicatorColor" 
          :indicator-active-color="indicatorActiveColor"
          :autoplay="autoplay" 
          :interval="interval" 
          :duration="duration" 
          :circular="circular">
          <div v-for="(imgItem, imgIndex) in goodsdata.detail.mainPicture" :key="imgIndex">
            <swiper-item>
              <!-- <image class="slide-image" :src="goodsdata.isInListView?imgItem:'/static/images/goods-default.jpg'"/> -->
              <image class="slide-image" :src="imgItem" :data-index="imgIndex" :data-src="imgItem" @load="imgLoadSuccess" @error="imgLoadFail"/>
            </swiper-item>
          </div>
        </swiper>
      </div>
      <div v-if="loadFailCount" class="reload-tips">部分餐品图加载失败了</div>
      <div v-if="loadFailCount" class="reload-btn" @tap="reloadImg">点击此处重新加载</div>
      <!-- <img v-if="!goodsdata.currentStock" class="soldout-img" src="/static/images/ph-sold-cr.png" alt="售罄"/> -->
      <img class="soldout-img" :style="{display: goodsdata.currentStock?'none':'block'}" src="/static/images/ph-sold-cr.png" alt="售罄"/>
      <!-- <img v-if="goodsdata.detail.level" class="newdeal-img" src="/static/images/ic-new_coming_copy.png" alt="上新"/> -->
      <img class="newdeal-img" :style="{display: goodsdata.detail.level?'block':'none'}" src="/static/images/ic-new_coming_copy.png" alt="上新"/>

目前不确定该问题是swiper组件导致（该组件好像不属于原生组件？而且只是在部分机型出现），还是mpvue导致：图标使用v-if控制，但是图标是有加载出来的，只是是在swiper的下层，即使设置了z-index

编译出来的 dist/static/css/app.wxss 的 font-size 都是 weui.css 的两倍

请问哪里有转换？

swiper组件如何同时显示两个滑动项

目前的swiper组件设置了'previous-margin': '5rpx', 'next-margin': '10rpx', 'display-multiple-items': 2 属性但没有效果
代码图：

结果图：

怎么在项目中引入这套UI，不能通过npm方式么

emmmm，如标题

请问https://kuangpf.com/mpvue-weui/#/input和https://mpcomponent.github.io/mpvue-weui/guide/是同样一个吗

请问https://kuangpf.com/mpvue-weui/#/input和https://mpcomponent.github.io/mpvue-weui/guide/是同样一个吗，看重个差不多，但组件数不一样。请问2者是什么关系。

页面通讯相关案例最好也提供下

页面通讯相关案例最好也提供下

picker 确定按钮 在哪里改字体颜色？

picker 确定按钮颜色在哪里修改？另外多级联动选择器在安卓手机上拉选择的时候 ，如果小程序定义了onPullDownRefresh ，安卓手机就一直拉onPullDownRefresh ，多级联动上拉没反应

tabbar在mpvue中的具体配置方法

tabbar在mpvue中的具体配置方法 求告知，原生weui官网的配置方法的地址也没找到呢...
谢谢

有自定义的TabBar吗？小程序默认的限制太多了。

有自定义的TabBar吗？小程序默认的限制太多了。
比如：

1. 不能动态增减。
2. 从TabBar转到非TabBar页面后不能跳转了。
   。。。。。。

摆脱能不能说下怎么使用“”？？？？

摆脱能不能说下怎么使用“”？？？？

关于mpvue新版本styles支持

目前的1.0.1改不了styles属性，据说新版本修复了，我直接升1.0.5，报错mpvue-template-compiler版本不匹配,应该怎么升呢？

是否考虑用less加入theme？

换主题颜色

mpvue组件化及全局安装

大神，mpvue组件化及全局安装可以吗？

过来点个赞，并悄悄的关闭。

为什么 button 属性“getUserInfo”不成功？

button 属性“getUserInfo”不成功，提示以下错误：
VM7311:1 Do not have bindQosChange handler in current page: pages/button/button. Please make sure that bindQosChange handler has been defined in pages/button/button, or pages/button/button has been added into app.json

关于预览安装

刚测试了下，把代码clone下来之后，npm 安装，运行，在dist文件夹中并未编译出app.js 等文件，请问是什么原因？

1.0.5及之下的版本丢失app.json

1.0.5及之下的版本丢失app.json，切换到1.0.6，需要手动改每个文件吗

list/index.vue下image标签写错了

image标签是单标签，多写了结尾标签

网站证书过期了

https://kuangpf.com/mpvue-weui/#/README 网站域名证书过期了

定时器开启之后， 使用 clearInterval(this.timer)函数关闭不了定时器问题

我使用如下代码在进入页面启动定时器，在离开页面关闭定时器功能，有什么问题吗？

我也尝试直接调用 clearInterval(this.timer);函数也关闭不了定时器，是不是调用的函数不对

代码如下：

mounted() {
    this.timer = setInterval(this.fetchCurrentDeviceData, 500)
    this.timer = setInterval(() => {
      this.fetchCurrentDeviceData();
    }, 1000)
  },

  beforeDestroy() {
    if (this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
      clearInterval(this.timer); //关闭
    }
  },

关于在安装过程中报错：Vue packages version mismatch，在这里统一声明一下

由于在最开始的版本中，安装的mpvue版本为1.0.1，但是mpvue-template-compiler的版本是指定安装最新版本的（目前为 1.0.5），从而造成两者的版本号不相等，因此就会报上述错误，解决方法有两种：

• 两者都安装最新版本的包，方法如下：

修改package.json文件，将"mpvue": "1.0.5"改为 "mpvue": "^1.0.5"

• 将要安装的这两个包的版本都设置成一样的，比如都设置成 1.0.5

推荐第一种方法。

关于部分未封装组建的问题

像这种跟原文件一样的，建议封装一下。很不规范，感觉很随意

Button 怎么能封装下直接设置图片或图文么？

用图片 或者 图文的形式展示Button

关于多级联动选择ui优化

用多级联动组件的时候，点击按钮打开选择框，背景层还是能滚动，跟微信自带的体验效果不太一样，能改进一下吗

是不是不支持 onLaunch()

App.vue 里的 created() , onLaunch() 其实没有执行了
加在 main.js 里也不执行

亲测 mpvue 本身是支持的，小弟不才，搞不定这个问题，Google 了一圈，没找到解决方案，麻烦大佬有时间看一下这个问题，万分感谢。

编译报错，按关掉的问题做的还是报错

编译报错

Vue packages version mismatch:

• [email protected]
• [email protected]

可以加tag组件吗 类似微信中朋友添加备注标签那样的功能

请问作者有没有mpvue实现的星级评分的demo

就是类似订外卖完了评价的时候点星星的操作

参考mpvue-weui方式引入weui-wxss，样式丢失的问题

引入的weu.css是mpvue-weui项目的，结果很多样式丢失比如，颜色，圆角等。请教下是什么原因？