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-

在普通的web页面当中,我们都知道图片懒加载可以提升浏览器的加载速度.原理是图片用空或者占位图片进行显示,当屏幕移动到图片位置的时候,再把图片的地址换成它的地址.那么,在小程序当中呢,最近老大让看一下微信小程序的优化方面,图片是很吃资源的一项,所以我把矛头指向了懒加载: 首先写代码之前一定要理清楚思路,我想的基础是懒加载的思路,首先设立一个数组都为false,让图片的高度和屏幕滚动的高度进行比较,当到达这个点的时候,数组里面对应的false变成true.当数组的false变成true的时候,我们

代码地址如下:http://www.demodashi.com/demo/14242.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 1.基本需求. 实现加载动画 带动画(动画可做参靠,个人要是觉得不好看可以自定义动画) 2.案例目录结构 二.程序实现具体步骤 1.index.wxml代码 <view class="tui-loading-r

最新方法可以使用微信小程序提供的 rich-text (富文本)组件直接写解析html,详见 rich-text: <rich-text class='f13 c_9' nodes="{{html}}"></rich-text> 其中 html 为后端返回的html代码格式数据,这里直接就可以解析,再也不需要像wxParse那样还需要引入插件. 虽然官方文档说nodes不推荐使用String类型,性能会有所下降(当然了,肯定要解析代码呀),建议使用nodes类型

官方推出的web-view方便了很多开发人员. 我们在做的时候,经常会想到写一个小程序的page然后通过动态加载web-view的形式来完成其他功能页面的开发. 之前研究web-view的时候发现网上很多人都在问动态加载html页面的先后顺序问题,然而都并没有一个完整的解答. 例如: <web-view src="{{web_url}}/WeiXin/{{web_path}}.html?user_token={{user_token}}&{{param}}#wechat_redir

1  思路整理 就是页面加载完毕的时候  请求远程接口,然后把数据赋值给页面的变量 ,然后列表循环 2 js相关代码  我是改的 onload函数 /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this;//这里注意,要不然setData不可用 wx.request({ url: 'http://****/index.php/Home/Wechat/index', // 仅为示例,并非真实的接口地址 header:

参考网址:https://www.cnblogs.com/Smiled/p/8203306.html 1.wxml: <view class='myScroll' style='float:left;'> <scroll-view scroll-y='true' style="height:{{height}}px" bindscrolltolower='lower' > <!--分类 下部分 图文列表 --> <view class=&quo

<swiper-item> <image src="{{item.image}}" class="slide-image" mode="widthFix" @tap="bannerjump({{item.link}})" data-url="{{item.link}}" bindload="imageLoad" style="height:{{imgheigh

微信小程序使用 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 *

本文转自:http://blog.csdn.net/michael_ouyang/article/details/70194144 我们在购买宝贝的时候,购物的数量,经常是我们需要使用的,如下所示: 在宝贝详情页里: 在购物车里: 现在就为大家介绍这个小组件,在小程序中,该如何去写 下图为本项目的图: wxml: <!-- 主容器 --> <view class="stepper"> <!-- 减号 --> <text class="

懒加载:延迟加载,当程序启动时不加载资源,当程序需要这些资源时再去加载.需要的时候再加载的一种方式,能够减少内存的占用,效率高.其本质是重写get方法. 背景:由于ios内存有限,如果我们一次性将所有资源加载完毕将极大的消耗内存,降低程序运行效率.所以就要将一些比较大的资源,如音频,数据,图片等大资源进行懒加载,就需要                                             先判断是否存在,如果不存在再创建实例化. @property (nonatomic, st

所谓懒加载(lazy)就是延时加载,延迟加载. 什么时候用懒加载呢,我只能回答要用懒加载的时候就用懒加载. 至于为什么要用懒加载呢,就是当我们要访问的数据量过大时,明显用缓存不太合适, 因为内存容量有限 ,为了减少并发量,减少系统资源的消耗, 我们让数据在需要的时候才进行加载,这时我们就用到了懒加载.懒加载的异常有很多种,你指的是不是session已经关闭的异常?因为那个初学者最容易遇到情况是当你加载出一个一对多关系的一这端的对象,然后在出了事务之后的地方,比如页面上,还想再获取多端对象里面的除

使用 Promise 解决小程序页面因为需要app.js onLaunch 参数导致的请求失败 app.js onLaunch 的代码 "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); const http = require('./utils/http.js'); const api = require('./config.js'); App({ onLaunc

在开发小程序的时候,发现在加载图片时并没有异常,但是后台却报错了. 例如以下我的一段代码: <view class="useage2 "> <image src='../../images/qq/{{weatherData.data[item_k].wea_img}}.png'></image> </view> 这里的{{weatherData.data[item_k].wea_img}}是JS传进来的一个变量,但是在显示某个框框的时候将

问题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

微信小程序实现上拉加载下拉刷新 使用小程序默认提供方法. (1). 在xxx.json 中开启下拉刷新,需要设置backgroundColor,或者是backgroundTextStyle ,因为加载的动画可能会是白色背景,会看不清. { "usingComponents": { "annicate": "/components/annicate/index" }, "navigationBarTitleText": &quo

| UI组件 | | | | | | | | | weui-wxss ★1873 - 同微信原生视觉体验一致的基础样式库 | | | | | | zanui-weapp ★794 - 好用易扩展的小程序 UI 库 | | | | | | wx-charts ★449 - 微信小程序图表工具 | | | | | | Wa-UI ★164 - 针对微信小程序整合的一套UI库 | | | | | | wux ★163 - 微信小程序自定义组件 | | | | | | wemark ★161 - 微信小