微信小程序图表插件(wx-charts)基于canvas绘制,体积小巧支持图表类型饼图.线图.柱状图 .区域图等图表图形绘制,目前wx-charts是微信小程序图表插件中比较强大好使的一个. wx-charts基于canvas绘制的微信小程序图表插件 支持图表类型 饼图 pie 线图 line 柱状图 column 区域图 area 高清显示 设置canvas的尺寸为2倍大小,然后缩小到50%,建议都进行这样的设置,图表本身绘制时是按照高清显示配置的,不然整体效果会偏大 /* 例如设计图尺寸为3…

今天微信小程序发现wx.request不好使了,调试报错: 小程序要求的 TLS 版本必须大于等于 1.2 查官方文档 解决方法 在 PowerShell中运行以下内容, 然后重启服务器 # Enables TLS 1.2 on windows Server 2008 R2 and Windows 7 # These keys do not exist so they need to be created prior to setting values. md "HKLM:\SYSTEM\Cur…

微信小程序中wx:for遍历默认元素为item,但是如果我们设计多层遍历的时候我们就需要自定义item的字段名以及key的键名 wx:for="{{item.goodsList}}" wx:for-item="ite" wx:for-key="idx" wx:key="{{idx}}" 这样子元素就被设置成ite了,而key则为idx…

ios手机小程序调用wx.chooseLocation接口的时候,获取权限的时候报authorize:fail:require permission desc这样子的错误,这是由于苹果的安全机制导致需要再app.json加上 "permission": { "scope.userLocation": { "desc": "您的位置信息将用于添加收货地址" } } 但有时还是无法获取授权,则需要在使用的地方判断是否授权,没有的话…

下载地址 https://github.com/xiaolin3303/wx-charts 使用步骤: 一.解压后,把dist里面的wxcharts.js或者wxcharts-min.js放在小程序的文件夹里,在当前页面引用文件. 二.需要使用图表的wxss页面中加canvas的宽高值,若没有加则不显示 .canvas { width: 100%; height: 300px; } 三.在需要使用图表的wxml 页面中加xml代码 ring 环形图 <canvas canvas-id="r…

以下问题测试环境为微信开发者0.10.102800,手机端iphone6,如有不对敬谢指出. 根据我的测试,context.drawImage,在开发者工具中并不能画出来,只有预览到手机中显示. wx.canvasToTempFilePath wx.saveFile 官方文档中只有一行,真是坑爹啊,原来 wx.canvasToTempFilePath参数为一个对象包括canvasID,success,fail,complete,和wx.saveFile差不多: wx.canvasToTempFi…

在调取地图的时候发现,wx.openLocation的方法在模拟器和安卓手机上都可以用,在苹果手机上报错. 报错为调取失败:fail invoke too frequently                     fail invalid_coordinate 解决方法: 微信小程序默认将组件上绑定的参数都当作字符串了,所以认为坐标点不正确,强制转换成number类型即可. var lat = Number(e.currentTarget.dataset.lat),        lng =…

通常用户在商城购买产品后,需要填写他的收货信息,方便我们发货,但是在手机上写字非常不方便,一个客户的收货信息包括:姓名,地址和手机号码这些内容全部填写的话,至少要写20个字. 地址 所以有些客户在手机上购买东西,看到要填写的内容太多,就放弃了购买的念头. 使用小程序做商城, 有一个非常便利的地方,你可以在小程序里通过wx.chooseAddress这个api接口,获取到用户在微信里填写的收货信息,免去用户手机打字的麻烦,从而提高你的成交率. 一. 小程序wx.chooseAddress 使用方法…

wx:if 与 hidden 都可以控制微信小程序中元素的显示与否. 区别: wx:if 是遇 true 显示,hidden 是遇 false 显示. wx:if 在隐藏的时候不渲染,而 hidden 在隐藏时仍然渲染,只是不呈现. 所以如果频繁切换的话,用 wx:if 将会消耗更多资源,因为每次呈现的时候他都会渲染,每次隐藏的时候,他都会销毁. 如果切换并不频繁的话,用 wx:if 相对来说较好些,因为它会避免初始就一下渲染那么多. wxml: <view> <text>page…

API:https://developers.weixin.qq.com/miniprogram/dev/api/wx.pageScrollTo.html wx.pageScrollTo 在小程序的开发过程中,有个功能是点击后需要往view层中添加数据内容,在添加后需要将内容滚动到最下面一条,以便有更好的用户体验. 页面布局是: 最外层<view class="box">内容</view> 底部有输入框固定着<view class='footer'>…

新版开发者工具增加了https检查功能:可使用此功能直接检查排查ssl协议版本问题: 可能原因:0:后台域名没有配置0.1:域名不支持https1:没有重启工具:2:域名没有备案,或是备案后不足24小时:备案未生效:感谢@小树提供的案例 3:ssl协议有问题:具体请参考本文: 微信小程序开发SSL证书配置,解决request fail问题 解决方法 1.Geotrust先检查下你的站点.把一些常规的问题解决掉,比如中级证书没装,等等问题. 2.微信支持,且只支持ssl_protocols TLS…

https://www.2cto.com/kf/201802/724174.html(copy) 也许有人会问,小程序中都是竖直app形态,要横竖屏判断有什么用?即使判断出了横屏状态,你能把小程序横过来?答案是不能的,但是判断当前设备处于横屏或者竖屏状态来实现一些友好的用户体验交互方式的需求确实存在.例如手机横屏,让视频播放自动全屏,手机竖屏,让视频切换回来小屏. 然而,截止至目前,小程序官方的API中并没有提供这样的横竖屏判断的方法.那么我们只能自己想办法实现这样的判断.小程序的设备API中提…

场景(比如:商城选地址,选优惠券): 在[页面A]中调用wx.navigateTo方法跳转到[页面B] 然后从[页面B]返回[页面A], 并将[页面B]中的一些数据传回[页面A] wx.navigateBack({ delta:1 }) 方法1:使用全局数据存储 将要传递的数据,存储在App对象上(比如globalData属性). 将要传递的数据,存储在小程序的本地数据缓存(Storage)中. 例如,我们在将要退出页面B的时候,作如下调用: //=== 1. 存储到app对象上的方式 ====…

最近在折腾微信小程序,遇到这么一个情况:后端返回一个key-value的对象数据,需要遍历对象的key-value,然后渲染到视图中.就像下面这样: { '2018-1-9':{ address: '....', name: '....' }, '2018-1-10':{ address: '....', name: '....' }, '2018-1-11':{ address: '....', name: '....' } } 遇到也这种情况,有三种解决办法: 让后端改一下接口: 自己写个函…

今天在做微信小程序时,设置wx.navigateTo页面跳转并传参数,点击始终没有效果,代码如下: //事件处理函数 newsDetail: function (event) { console.log(event), //带id跳转到指定的页面,这里的event.currentTarget.dataset.id是获取wxml页面上的data-id参数,详见事件说明 wx.navigateTo({ url: "../detail/detail?id="+event.currentTar…

web-view吧,其实微信官方应该是非常不支持在小程序上嵌套web的,它希望你直接用小程序上的代码,而放弃web的实现,当然,也是为了防止用小程序去嵌套别的广告页面.所以官方对web-view的操作是,它永远是界面的最上层及z-index最大,而且web-view只能全屏显示.从而,就可以在web-view之上嵌套任何控件,而官方提供web-view与网页之间的交互,只有src和bindmessage,同时还有一些跳转及在js中调用相关代码(wx.miniProgram.navigateTo.…

条件渲染 顾名思义所谓的条件渲染,就是通过条件来判断是否需要渲染该代码块.条件渲染主要是用到wx:if 和 block wx:if 这两个,第一个相信好理解,第二个是在block里面进行条件渲染,这里我们特别说明一下< block/>并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性.和我们以前的逻辑编程类似,既然有了wx:if ,那么我们也会有wx:elseif和wx.else,这几个组合起来,可以使条件渲染更加灵活. 在这里官方文档中提到了一个wx:if和hidd…

wx.requestPayment 发起微信支付 timeStamp 时间戳 nonceStr 随机字符串 package 统一下单接口返回的 prepay_id 参数值 signType 签名算法 paySign 支付签名 success 接口成功回调 fail 接口失败回调 complete 接口完成回调(成功,失败都执行) 1.先调用后台接口,生产基本数据 // 获取店铺信息 Api.BalancePay({ openid: openid, amount: amount, bid: bid…

首先,在page外定义一个函数用户判断是否为空对象 var isEmptyObject = function (e) { var temp; for (temp in e) ; } 然后,在page中的onload里面调用授权 onLoad: function () { var that = this; if (app.globalData.userInfo) { this.setData({ userInfo: app.globalData.userInfo }) } else if (thi…

在开发小程序过程中,有项目用到图表功能, 其实Echart.js有小程序的库,我们要吧引入进来,然后配置初始化一下,就可以达到目的了.接下来就开始步骤吧 首先下载JS库:http://download.csdn.net/download/qq_36431166/10047018 下载放到目录中 大家可能看到上面还有SDK插件,那是腾讯地图在小程序当中的应用,在下一文章给大家介绍如何使用它来定位 引入进来之后,根据基本文档的介绍首先要写一个canvas 然后在JS文件中引入,我用的是require…

由于wx.login是异步函数,导致在我们获取微信小程序返回的code去请求我们的登录接口时code的值会异常.现在用promise封装一下,将他success的结果返回,在登陆函数中await就可以了. loginwx() { return new Promise(function (reslove, reject) { wx.login({ success(res) { wx.setStorageSync("loginCode", res.code); reslove(res.co…

前言:小程序的开发中总是踩到各种坑,看文档也不知所云: 例如当我们在写微信小程序接口时,method请求方式有POST和GET两种,为了数据安全,我们会偏向于使用POST请求方式访问服务器端: 问题:当我们使用POST方式请求时,后端无法获取数据,但使用GET方式便可以获取数据?? 解决办法: 设置请求的 header: header: { "Content-Type": "application/x-www-form-urlencoded" }, 例如:…

radarChart:原始代码 new wxCharts({ canvasId: 'radarCanvas', type: 'radar', categories: ['1', '2', '3', '4', '5', '6'], series: [{ name: '成交量1', data: [90, 110, 125, 95, 87, 122] }], width: 320, height: 200, extra: { radar: { max: 150 } } }); C#:服务器关键代码:…

1. . wx.showModal({ title: "2222步", content: currentCache ? "确定为自己城市添加步数吗" : "确定取消为自己城市添加步数吗?", showCancel: true, cancelText: "取消111", cancelColor: "#000", confirmText: "确定", confirmColor: "…

<style lang="less"> .animation { width: 100vw; height: 100vh; opacity: 0; background-color: inherit !important; position: fixed; top: 0; left: 0; } .inner { width: 100%; height: 100vh; background-color: #ffffff !important; } </style>…

  获取了 N 条信息(具体有多少条不确定),如何在界面中动态呈现出来呢? .wxml 代码 <view wx:for="{{items}}" wx:for-index="index" wx:for-item="item">{{index+1}}.{{item.title}}</view> 核心代码就是 wx:for,对应一个数组. 而 wx:for-index 指明后面如果要用数组索引的话,           用什么名…

先说一下基本使用.官网也有. 比如说你在App.js里面有这些变量.想修改某些值. data: { main_view_bgcolor: "", border: "", } 修改方式有两种,一是直接用“=”赋值,这种是可以修改,并且你把修改之后的值打印出来可以看到确实修改了,但是不推荐使用这样的方式. 因为,一般我们想修改data里面的值,往往都是因为这些数据都在main.wxml中绑定了,可以实现动态修改并实时刷新显示.刚刚这种方式容易发生数据被修改但是页面没有变…

首先,在page外定义一个公共函数用于发送获取位置的请求 var getLocation = function (that) { wx.getLocation({ type: 'wgs84', success: function (res) { // 经纬度 var latitude = res.latitude var longitude = res.longitude var aK = that.data.aK wx.request({ url: 'https://api.map.baidu…

提到wx.getLocation()这个方法,大家都知道是获取地理信息的 今天用这个方法获取定位经纬度后传给后台取得附近markers标记集合, 在开发工具上都正常有标记出现 ,但是在手机测试时,死活没有显示 , 最后发现是在手机测试时,后台已经报参数不合法抛出错误通知了 原因是因为,在开发工具上获取经纬度只有小数点后5位,而我们传给后台接口的数据规定只有后6位, 这在开发工具上是正常可以请求成功,但是在手机上测试时,定位更加精确,例如"longitude":"121.534…

页面js文件中加入 show: function () {wx.navigateTo({url: ‘/pages/show/show’})} 这个函数 目的在于要做跳转到新的页面,但是你可能会遇到一个问题,跳转没有反应. 你可能重建个新目录名称又可以了,名称再改为原来的又不可以了,问题出在哪里? 那就是底部菜单app.json已经有这样的url链接过. 解决方法,改成不一样就可以了. 为什么这样,估计是个bug吧…