问题:小程序中echarts因为小程序原生的canvas层级太高,而导致弹窗这类dom元素无法遮挡住canvas,如下图: 解决方案1:(wx:if控制dom显隐,显示canvas就重新渲染echarts,简单粗暴,但是耗费性能): 第一步:wxml <!-- echarts饼图--用wx:if控制dom显隐,hidden没办法隐藏 --> <ec-canvas id="storeChart" canvas-id="storeChart" ec=&

微信小程序使用 ECharts 显示图表 首先创建微信小程序 这里就不再赘述 下载 GitHub 上的 ecomfe/echarts-for-weixin 下载后解压,打开文件夹,里面的 ec-canvas 文件夹是我们需要的 创建图表 首先,把下载的 ec-canvas 文件夹复制到小程序根目录中,与 pages 同级 然后在 page/bar 目录下新建以下几个文件 配置 index.json 配置如下: { "usingComponents": { "ec-canvas

首先打开ECharts网页 https://echarts.apache.org/zh/tutorial.html#%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts 里面有微信小程序引入ECharts组件的教程,下载了官方的项目后,拷贝ec-canvas到我微信小程序的目录下,然后在我的微信小程序文件夹中创建line文件夹,并新建四个文件index.js inde

1.微信小程序使用echarts,首先下载echarts并导入小程序项目中,因小程序后期上线对文件大小有要求,所以建议进行定制下载导入可减少文件大小占比,也可以下载以前旧版本文件比较小的应付使用 下载echarts: https://echarts.apache.org/zh/download.html 定制下载:https://echarts.apache.org/zh/builder.html 旧版本查看: https://archive.apache.org/dist/echarts/ 下

如何在微信小程序中使用Echarts可以看我的另一个教程:点击查看 首先看一个简单的例子 1.wxml文件 <view style='width:100%;height:200rpx'> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas> </view> 2.js文件 import *

前言:这是一篇简单粗暴的使用指南 在最近的小程序项目里前端UI框架最后选择使用WuxWeapp,这篇文章记录一下如何在小程序mpvue项目中使用该UI组件. 步骤一:下载源码 (地址在这里)主要是里面的dist文件夹,下载下来之后就把dist文件夹放到mpvue脚手架自动生成的static文档中.具体的目录层级各位都可以按自己的喜好来设计.贴上我的仅供参考. 步骤二:引入组件 我们需要在app.json文件中进行配置,其中有一个"usingComponents"配置属性.需要使用什么组

微信小程序textarea的placeholder的层级一直都是一个神坑, 我们是没有办法将我们的弹层加大层级去盖过placeholder的, 所以要解决这个问题只能从另外的角度找思路 我的思路是 : 在弹层弹出的时候 , 用JS将textarea的value值设置为 " " .  这样placeholder就不会显示 , 然后 value为" " 也不会遮挡弹层 . 然后在弹层收回的时候, 判断textarea的value值, 如果为 " ".

微信小程序进入到首页的时候,日志打印出"created", "onlaunch", "mounted",具体代码如下:那么,在小程序中 created() 和 mounted() 究竟什么时刻被调用 首页: created () { console.log('created') }, mounted () { console.log('mounted') }, // 监听页面加载 onLoad () { console.log('onlaunch

echarts-for-weixin 是 ECharts 官方维护的一个开源项目,提供了一个微信小程序组件(Component),我们可以通过这个组件在微信小程序中使用 ECharts 绘制图表. echarts-for-weixin 自身包含很多使用示例,方便我们参考. 安装 ECharts 组件 克隆项目: git clone https://github.com/ecomfe/echarts-for-weixin.git 切换版本: git checkout v2.0.0 echarts-

Mpvue中使用Vant Weapp组件库 https://segmentfault.com/a/1190000016228410?utm_source=tag-newest 小程序采坑记 mpvue + Vant Weapp https://blog.csdn.net/halo1416/article/details/83028524

问题1:ec-canvas出现上下滑动页面会漂移 解决方法:在标签内加 force-use-old-canvas="true" 问题2:echarts的tooltip会超出边界 解决方法: // 1.封装的函数方法 export const setTooltipPosition = function (point, params, dom, rect, size) { // console.log(params, dom) //其中point为当前鼠标的位置,size中有两个属性:vi

// 第一页 <div @click="play(video.src, video.width, video.height)"></div> methods: { play (src, width, height) { this.$router.push({path: `/pages/playVideo?src=${src}&width=${width}&height=${height}`})   } } // 第二页 <div class

问题场景 所谓悬浮窗就是图中微信图标的按钮,采用fixed定位,可拖动和点击. 这算是一个比较常见的实现场景了. 为什么要用cover-view做悬浮窗?原生组件出来背锅了~ 最初我做悬浮窗用的不是cover-view,而是view. 这是简化的代码结构: index.wxml: <view class="move-view" style=" top:{{top}}px;left:{{left}}px;" bindtap="goToHome"

wxml的标签跟html里面的一些标签是一样的,比如view标签相当于div标签,text标签相当于span标签. 在微信小程序中,表单元素都是原生组件,微信小程序中原生组件层级最高,所以在用input,canvas,map这些组件就要注意了,其中在样式上不支持overflow-x/overflow-y,只可使用overflow 1.  text相当于span,所以设置宽高时要加   display:block: 2. input标签无法设置 font-family; .对 input 直接 

如何在微信小程序地图添加上,添加图片? 在微信小程序中,地图的层级最高,所以我们没有办法,通过定位,在地图上添加图片等信息; 处理办法: 添加控件:controls; 其中有个属性position,进行定位,如何让他居中? 微信小程序有个方法 wx.getSystemInfo,可以获取当前屏幕的宽度和高度,这样就可以让图片完全适应格式手机型号大小了!

前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为 H5,mpvue 将是十分契合的一种解决方案. 目前, mpvue 已经在美团点评多个实际业务项目中得到了验证,因此我们决定将其开源,希望更多技术同行一起开发,应用到更广泛的场景里去.项目的地址在: https://github.com/Meituan-Dianpi

更多内容请查看 我的新博客 地址 : 前言 16年小程序刚出来的时候,就准备花点时间去学学.无奈现实中手上项目太多,一个接着一个,而且也没有开发小程序的需求,所以就一拖再拖. 直到上周,终于有一个小程序的项目.如果现在学小程序,时间上肯定来不及了(就给了一周的时间).正好前段时间看到美团开源了一个使用vue来开发微信小程序的框架 mpvue.因为平时vue用的多,所以就决定使用 mpvue 来开发. mpvue 介绍 我们看一下mpvue官网上的介绍: mpvue 是一个使用 Vue.js 开发

因为之前参照微信的原生的文档写过一些小程序的demo,写的过程比较繁琐,后来出了美团的mpvue,可以直接使用vue开发,其他的不作对比,这篇文章记录一下踩坑之旅. 参照mpvue http://mpvue.com/mpvue/#_2的官网的五分钟的教程搭建项目 在创建的过程中,需要输入微信小程序的个人appId,可以去微信小程序开发平台复制进去. 创建完成后的项目其实和使用vue-cli创建的脚手架大同小异,没图案也只是对其封装,然后转化为wxml. 1.首先引进iview weapp的组件库

MPVUE - 使用vue.js开发微信小程序 什么是mpvue? mpvue 是美团点评前端团队开源的一款使用 Vue.js 开发微信小程序的前端框架.框架提供了完整的 Vue.js 开发体验,开发者编写 Vue.js 代码,mpvue 将其解析转换为小程序并确保其正确运行. 简单上手mpvue 官方提供了一套quickstart模板. vue init mpvue/mpvue-quickstart my-project 安装好依赖之后,执行npm run dev,将会将小程序文件打包进dis

问题现象 这个问题的现象说起来很简单. 小程序页面中有一篇很长的文章,内部有一个Echarts图表,手指上下滑动观看内容. 但是手指滑动区域在Echarts图表上时,页面却不能滑动了. 如下图: 追踪问题原因 因为在小程序上渲染图表用到的是echarts-for-weixin这个组件,而这个组件确实不支持一些Echarts功能. 所以最开始我怀疑是这个组件的问题,认为它把我的滑动事件给吞了. 为了确认这个问题,我直接在这个组件ec-canvas旁加了个兄弟节点view,然后用绝对定位将其覆盖在e