草灯的专栏

目录概览使用svg-sprite-loader好处手把手图文教程：如何引入svg-sprite-loader上iconfont上搜索需要的icon图标，下载svg格式文件，放入到src>icons>svg目录下在main.js页面里面引入icons在页面中使用svg-sprite-loader图标。最终演示效果如下：参考文章icons和SvgIcon目录下载使用svg-sprite-loader好处我用vue-cli3.0 + elementUI 搭建项目，但是elementUI的icon组

今天使用微信开发者工具创建了一个空项目，然后引入了iview-weapp UI后，出现一个很奇怪的问题，按钮的展示和官网提供的不一致。具体效果看下图：按钮并没有垂直居中。接下来我去下载了官方示例，按钮效果图如下：对比下，明显官方示例才是对的，后来经过一番排查，发现是微信小程序对UI做了升级处理，有增加了一句命令配置，具体请自行创建一个项目，然后查看app.json文件配置：我们只要在...

最近正在研究小程序地图开发项目，其中有一个是要实现路线导航播放功能，找了各个平台的语音合成，发现只有腾讯AI开放平台的Restful API本人比较看得懂，于是决定先用这个接口实践测试。 官方地址请走：https://ai.qq.com/doc/aaitts.shtml我这里使用的是第一种方式，语音合成（AI Lab）。然后后端开发环境使用的是phpStudy软件。接着我们要先在腾讯

学习vue开发过程中遇到的一些问题集合1、input文本框不可以使用动态的type以上这么使用是会被报错的：v-model does not support dynamic input types. Use v-if branches instead.这就是说使用v-model的type是不能用动态的type标签，只能使用v-if代替，因此如果想要做密码框类型切换只能使用如下方式

最近有个项目需求是做一个轮播图，图片不是铺满全屏，两边空白展示一点上下张图片的内容，具体如下图所示：        选择vue-awesome-swiper插件的原因是，他就是根据swiper插件改写而来的，功能齐全，模式多种。而我又刚好在swiper官网看到该种特效，于是去拔他的源码，跟着写了下，结果发现完全不可行，猜测是不是版本的问题，可是发现两个版本都是3.xx版的，应该

我们都知道在ios的safari浏览器和app内核浏览器中，当一个h5页面内容超出屏幕高度，我们手指去滑动屏幕的时候，只要手势一离开屏幕，滚动立刻结束。这时候我们可以通过设置-webkit-overflow-scrolling=touch来使页面可以顺畅滚动，但是设置这个也会引出许多问题。1、单独对body设置-webkit-overflow-scrolling touch是无效的，需要针对h

从vue-router官网了解到如果是用history模式构建的vue项目打包后是需要后端配置支持的，而hash是不需要的，只不过地址会多了一个#/的后缀。使用hash模式构建的项目打包后，我只需要使用webstorm之类的软件打开访问就能成功了。        但是我用history模式构建的项目需要借助后台技术，我这里选用的是nginx反向代理来部署项目。具体做法如下：

总所周知，小程序不能操作dom，那么我们要怎么实现在页面滚动到一定条件的时候，显示gotop图标，点击后跳转到页面的顶部呢？      这里小程序有个组件是可以实现的，那就是scroll-view组件，他具有很多的属性，其中我们要利用到以下两个属性来处理：scroll-topNumber 设置竖向滚动条位置bindscrollEven

这几周一直辗转在vue官网和各大博客搜索关于vue项目实战的例子。总觉得学的实在是零零碎碎的。总算在对于vue项目搭建有个基本认知，就直接拿起以前做过的项目进行改版了，接下来是从怎么搭建vue2.x+vue-router项目实战写的一些列文章。我的开发环境都是基于win8电脑系统构建的

现在很多主流的vue项目都是采用的单页路由模式来搭建的，我们也来赶个时尚，采用的官方提供的vue-router来构建一个简单的企业站。如果还不知道vue-router路由机制的，请右转直走：https://router.vuejs.org/zh-cn/，先把基础教程看一下再来实践一下。    官网对于vue-router的介绍如下：用 Vue.js + vue-router 创建单

众所周知，微信小程序的tabBar都是新开页面的，而微信文档上又表明了最多只能开打开5层页面。这样就很容易导致出问题啦，加入我的tabBar有5个呢？下面是微信原话：一个应用同时只能打开5个页面，当已经打开了5个页面之后，wx.navigateTo不能正常打开新页面。请避免多层级的交互方式，或者使用wx.redirectTo

在开发混合项目的过程有个需求是h5自定义页面的回退功能，等到无法回退的时候，直接关闭h5网页直接返回app界面。查找了很多资料都说无法实现，要不就是检测history.length来判断，但是我实际操作发现，回退的时候history.length并不会自动减少。最后自己分析了下回退的模式，使用sessionStorage实现的。

根据官方技术文档写的一个设置遮罩demo。        创建空项目，并在bin目录下创建maskDemo.html，输入如下代码： www.layabox.com var Sprite=Laya.Sprite; var Loader=Laya.Loader; function onLoade

项目需求，使用ng写一个密码框格子支付模块，一开始使用一个input+letter-spacing来分割字符，但是发现间距非常不好控制，随着字符的输入文本框字符串间距还会自动调整。最终从网上查找到一款jq仿支付宝密码输入框，于是我模仿编写了个指令模块，参考地址如下：http://www.qdfuns.com/notes/13457/2212f3d3af79179f3275dc5b7c028

据了解js项目无需在下载layaAir Engine文件，只需要layaAir Ide开发工具即可。

近期一直在研究小程序地图组件开发，使用的是高德微信小程序sdk查找周边poi数据，并展示到地图上。根据getPoiAround接口协议传入对应的参数测试发现目前该接口最多只能返回20条数据，不支持分页，重要的是他的第一条数据默认是选中态，如果想要保证所有的图标一致性还得在传入iconPathSelected属性。而这些都在官方上得到了证实： 测试实例代码如下： js代码：c

写在前面，今天突然又整理了这个教程是因为百度的语音合成文本最多可以有1024个字节，而腾讯的只有150个字节。而且开发语言可以自由选择。其中包括nodeJs开发。今天就拿这个做实践。1、在百度AI开放平台注册账号，并申请应用。申请完可以在应用管理看到如下应用，appid，apikey，secretkey在待会合成的时候会用到。 2、安装express框架开发后端项目，教程请去看官网。

相信在学习小程序文档或者已经创建项目的开发员们，都很清楚小程序的wx.showToast接口只提供了两种icon【success和loading】展示形式，那假如我想要的是不要图标只要存粹的文字提醒呢？或者是我不要微信单方面提供的那种图片呢？想要自己指定的情况呢？这时候要怎么办..        这几天我根据wx.showToast接口提供的参数，跟着写了个消息提醒模板，1、如

如题，在开发uniapp项目过程中，调用了uni.getClipboardData(OBJECT) API获取剪贴板的内容，然后写入到文本框。一开始一切都好好的。偶然做了如下测试，然后发现悲剧了！！！具体复现如下：1、在微信会话框，在文本框随机输入文本串2、全选复制后，切换回uniapp调试APP中。3、点击粘贴后，在控制台监控到获取的文本对象如下图然后开始惊慌失措，怀疑人生，是api...

如题，在uni-app导航栏开发中，如何使用图片按钮。根据反复研读官方文档，最终总结使用图片类按钮的几个步骤。首先，我们先来看下官方自定义导航按钮...

在开发uni-app项目过程如何开启微信小程序进行实时编译调试。首先根据官网做如下配置1、点击“工具” -》 “设置” -》 “运行配置”，找到“微信Web开发者工具” 安装所在的文件夹。复制路径，填入到“小程序运行配置” -》 “微信开发者工具路径”中，关闭设置页。如下图：重新点击“运行” -》 “运行到小程序模拟器” -》 “微信开发者工具 - [xxxx]”，如果成行就可以直接调试。...

如何在uni-app项目中使用scss语法。我的win7 64位系统最简单的方法如下：点击菜单栏中的“工具 – 插件安装 – scss/sass编译” 点击安装，如果成功了，就可以正常使用了。很不幸的是，我的提示失败了然后我又找到D:\HBuilderX\plugins\compile-node-sass插件目录，执行npm install，仍然提示失败：这里写自定义目录标题欢迎使用...

使用highcharts插件尽量做到和下两张图片一样的图表类型示例。 折线图DEMO首先是折线图，根据官方栗子，这个并不是很难，需要注意的有三个地方的配置 1、圆圈是个白色空心圆 A：这个主要是修改marker属性下的一些配置，[PS: 一开始对APIs不熟，这个真的我找了好久才找到，一开始修改series下的color和其他fill填充属性，怎么改都不对。。。后来，我也不知道怎...

这是目前最近开发的一个小程序完成后的一些心得。需求是有一张静态地图，用户点击对应的县要进入二级页面，二级页面里面底图是一张静态地图，上面展示出相应的景点。点击景点显示景点简介一级页面和二级页面都是可以拖动和缩放的，双击可以缩放具体功能页如下： 我先是通过自己写touch事件体验，使用正常的h5测试已经能明显感觉到体验不是很流畅。 改写成小程序，滑动数据都是用setData，...

以前还未有前后端分离的时候，前端都是静态页布局，现在有了前后端分离开发模式，测试的时候经常是写死的json数据测试。最近发现一款特别好用的数据模拟插件，完全满足前端自己开发测试调试了。 首先，大致说下mockjs的几个常用用法。 1、Mock.mock 根据数据模板生成模拟数据。 最常见的用法是： Mock.mock({ ‘list|1-10’: [ { ‘id|+1’: 1000...

      最近一直在关注小程序开发，目前正在试着将公司的app转换为小程序执行，在此期间有遇到的一些小问题以及解决办法集合。当然这些都是我个人经验谈，对于小程序的底层框架我也是一知半解，很多也都无法解释的很清楚，如果有不同见解欢迎指出。      1、navigator组件使用flex布局在安卓机子下是不兼容的。      解决方案：在navigator组件内先添加一个view组件使用flex布...

前阶段有网友问了一个关于小程序组件的问题： 有一个列表，我点击编辑，出现一个弹窗修改组件，输入修改数值点击确定，对应的列表项的值就被更改过来，点击取消，不做任何操作。据说能获取到文本框的值，可是列表值一直更改不了。我就抽空写了个demo发现并未出现此问题，因此萌生了写这篇文章。 那么什么是组件，为什么要用组件。相信不用我多说大家都很清楚，以前每个html静态页的头部和底部都得

使用该组件有个先决条件，就是得到小程序公众平台设置网页的域名白名单，具体做法请自行登录查看。然后在小程序写入如下测试页：： test.js：：onLoad: function (options) { this.setData({ url: 'https://你的域名/test.html?rnd=' + new Date().getTime() }) }

目前学习小程序更多的是看看能否二次封装其它组件，利于以后能快速开发各种小程序应用。目前发现picker的selector模式只有一级下拉，那么我们是否可以通过3个picker来实现三级联动模板的形式来引入其它页面中呢？答案是肯定可以的。那么我的思路是这样的：1、使用template模板语法进行封装，数据从页面传入2、根据picker组件的语法，range只能是一组中文地区数组，

今天，终于成功使用nodejs研究出百度语音识别了。目前使用小程序最新录音管理api测试，小程序录音只支持aac，mp3格式，并且保持的是临时地址。而百度语音识别目前只支持pcm，wav，amr格式。因此服务端需要先存储好录音文件并经过一次音频转换。具体步骤如下： 1、安装ffmpeg插件。我使用的windows系统，具体安装方法看这里，该博主文章讲的非常详细，按照步骤走即可。这个插件是使

项目需求，需要写一个数字增量的动画特效，最后找到了countUp插件，既支持jq+html写法，又支持ng1和ng2写法，简直是太完美了。一开始不懂怎么引入模块，老是出错，多亏了网友的帮助，下面写了个demo示例。       官方地址：https://github.com/inorganik/countUp.js，根据里面提及的使用步骤来写，需要引入两个文件，并引入模块，或者改写下指令定义语

今天，微信小程序终于发布了，激动的同时也在加紧最后公司项目的测试，结果发现了一个问题，就是在使用catch绑定move事件的时候，无法触发navigator组件的url和tap事件。

最近一直在看vue框架，都说使用webpack打包程序好用，于是又去看了下webpack中文指南教程，根据步骤安装了下，结果在全局安装完在输入webpack -h就出现如下错误了        webpack指南中说道Webpack 需要 Node.js v0.6 以上支持，建议使用最新版 Node.js。从上图可以看出我的nodejs版本是够的，但是为啥会出错呢？于是我又重新

我们知道设置值的时候是直接使用$("#txtrName").val("xxx");但是 如果class="easyui-textbox"同样使用这种设置方式却一直设置不了，后来去查找了官网英文站点才知道，，text-box设置值的方式是使用setValue的内置方法来实现的，具体如下：$("#txtrName").textbox("setValue", "xxx"); 

从前端那边拿到一份稿件，发现其中一个模块，使用大量的position定位，虽然没有错位，但是总觉得没有必要使用，因为我之前自己有写过一段时间的前端开发，所以我考虑了下把大部分的都注释掉了，但是有个鼠标经过的特效也是用定位，可是他的电脑展示的刚好是在小图标正上方，等到了我电脑发现却右移了很多像素！！        刚开始以为是inline行内化的原因，后来经过多方排除，发现竟然不能吧relati

最近参与公司mvc项目，目前刚好负责一处表单提交页面，刚开始接触mvc发现各种好使，很多都是调用封装好的插件框架之类的就能实现，例如我们在客户端验证表单，可以使用jquery.validate.js的插件，特别好使，稍微了解下调用方式就好了。例如我有以下表单元素：使用TextBoxFor生成input标签。

ie6下发现多个a标签block块级化浮动后回车排列，宽度总和=父元素div宽度的时候，最后一张没办法排成一行。找了好久发现是ie6下面回车会吧空格计算进去，而且在去网络上查找inline-block在ie7和6下面兼容办法后，都还是没办法解决，测试多次之后发现似乎只有当a标签包裹img标签的时候才会有如此大的差异

今天看到别人导航有个特效就是鼠标进过导航的时候，底部有个边框从0开始缓动增加，于是就想到了jQuery的animate命令，自己也动手搞了一把，刚开始是想把border写在a标签上，给个0使用animate让他增加，播过这个实现的并不是我们要的想过，他变成高度上的增加了，于是我就分离开，吧border写在了i标签该标签的初始是width为0，然后通过animate指定，经过的时候width开始增加

前阶段，在写界面的时候，碰到一个问题，检索出客户的列表我需要制作一个搜索菜单，关于检索省市区下的客户展示列表，一开始本来是想着去网络找个插件装进去就好，又想着提升自己，于是自己也动手写了个jq+ajax获取表里的地区字段显示出来，这里方便说明，我就把字段单独到一个access的表里了。当然我这个是asp语言的，用到也就是是在获取表单下拉区域字段而已，其他语言大同小异，只要ajax写好了，基本都没问

我们老是在想着怎么提升自己的水平，但是实际上的行动却很少，大师都说是要每天码一点点代码的，那么要怎么做到动手实践码代码呢？？我就想有时候我们自己在欣赏别人的网站的时候，是不是就会想说看到某个模块非常的美观简洁，那么是不是就可以自己动手写下来呢？？不懂的时候我们就使用火狐自带的firebug来查看这些结构，然后模仿下来，仔细分析好，后续在自己实现看看，这样不是就更能进步呢？？于是我在自己工作的同时看