自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

草灯的专栏

未来,是做出来的,不是说出来的

原创 vue学习过程遇到的一些问题集合

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

2017-11-11 13:50:26 1153

原创 微信小程序发现的一些小问题以及解决方案集合以及注意点

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

2016-12-07 09:39:48 32515 5

原创 关于微信小程序中使用iview-weapp的诡异问题

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

2020-04-09 20:33:36 234

原创 uniapp项目之安卓版本获取从文本框下复制的文本

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

2019-05-15 15:45:24 1494 2

原创 uniapp自定义导航之添加自定义按钮之使用字体图标

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

2019-04-17 10:17:07 5706 1

原创 uni-app开启微信小程序调试

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

2019-04-02 19:56:50 7171

原创 uni-app项目中使用scss语法

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

2019-02-15 11:22:24 16863

原创 Highcharts图饼和折线图实践心得

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

2018-09-10 18:33:49 333

原创 缩放类小程序实践心得

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

2018-06-29 10:33:49 658

原创 nodejs+mockjs分页数据模拟实践

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

2018-02-24 14:48:37 3753 2

原创 微信小程序:组件实践

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

2018-02-06 13:46:35 10420 1

原创 微信小程序:web-view开发实践

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

2018-01-18 15:02:48 5374

原创 微信小程序:nodejs+百度语音识别开发实践

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

2018-01-08 15:49:47 3957 18

原创 微信小程序:nodejs+百度语音合成开发实践

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

2018-01-05 15:33:54 3041 2

原创 微信小程序:腾讯AI语音合成实践

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

2018-01-03 16:41:10 10601

原创 微信小程序:高德地图搜索周边poi接口实践

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

2017-12-28 11:27:33 5426 8

原创 vue-awesome-swiper轮播图实践

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

2017-11-18 20:01:39 15563 9

原创 -webkit-overflow-scolling使用心得

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

2017-11-13 17:52:04 7105 6

原创 nginx部署访问vue-cli搭建的项目

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

2017-08-07 09:30:43 10772

原创 vue学习之二:vue-router简单配置搭建单页应用

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

2017-07-12 11:23:21 7047

原创 vue学习之一:下载vue-cli项目

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

2017-07-04 15:56:35 6037 6

原创 js模拟网页的回退回退

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

2017-04-24 10:08:35 1142

原创 LayaAir学习之二:给显示对象设置遮罩----js方向

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

2017-04-11 11:25:13 6872 1

原创 layaAir学习之一:创建空项目----js方向

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

2017-04-10 15:37:25 4441

原创 angular仿支付宝密码框

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

2017-03-24 17:16:10 1506

原创 angular+CountUp.js轻量级数字动画插件使用

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

2017-03-02 10:17:30 2703 2

原创 webpack安装出错

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

2017-02-08 14:53:20 5773

原创 微信小程序实例:开发showToast消息提示接口

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

2017-01-24 11:24:55 41181 28

原创 微信小程序实例:编写tabBar模板

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

2017-01-13 18:50:33 27176 18

原创 微信小程序实例:move事件导致navigator组件和tap事件无效

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

2017-01-11 17:53:19 5757 1

原创 微信小程序实例:map组件markers属性动态初始化

        今天在写小程序详情页时候遇到一个问题,map组件的markers属性是通过异步请求到数据后设置的,结果就导致了微信底层渲染出错。但是如果我先在data初始化markers变量,每次小程序都不能正常渲染都是初始化的北京的数据。然后写了如下测试:test.js::Page({ data:{ map:{ lat: 0, lng: 0, ma...

2016-12-19 18:04:49 46659 13

原创 微信小程序实例:创建下发模板消息实例

鉴于目前网络上都还找不到小程序下发模板消息的相关资源,在多次阅读了官方文档今天终于把小程序的模版消息给测通了,接下来介绍在不使用服务器的情况下,前端开发人员在本地怎么测试模板消息的发送。1、在微信公众平台-小程序的模板中心先申请一个下发模板消息2、根据文档提及的模板消息做法分两个步骤2-1、获取token,这里我直接使用微信公众平台接口调试工具【

2016-12-13 15:45:06 62933 93

原创 微信小程序实例:跳转到顶部实例

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

2016-11-16 19:56:08 19857 11

原创 微信小程序测试:navigator组件使用flex布局不兼容问题及解决方案

今天使用navigator+flex布局来做一个测试,结果发现安卓机子竟然无效,而在苹果机子上却是能正常一行显示的。测试代码如下: 开发工具演示如下,正常:安卓机子演示如下,右侧掉了:苹果机子演示如下,正常:

2016-11-15 11:09:03 5338

原创 微信小程序学习:使用picker封装省市区三级联动模板

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

2016-10-28 11:13:36 32002 12

原创 微信小程序学习:audio组件发现的几个问题

这个只测试了action的method=play的情况下,其它的方法我有稍微改变了下src和action方法,发现只要一切换其它action方法和src歌曲后,歌曲都是未开播状态,所以应该不会出现什么问题。主要是play的情况下有几个小问题需要注意下!先上官方源码:wxml::播放js::Page({ data: { poster: 'http://y.gtim

2016-10-18 16:00:13 9387

原创 微信小程序学习:location API接口

微信小程序的位置接口共有两个:1、wx.getLocation(OBJECT)获取当前的地理位置、速度。2、wx.openLocation(OBJECT) 使用微信内置地图查看位置然后,根据object参数说明,结合module模块化重写了下两个接口在暴露出来引用,是的项目更加灵活管理。

2016-10-11 18:45:13 20364 6

原创 微信小程序实例:image组件的binderror事件处理

微信公众平台关于image组件的讲解都挺详细的,至于在binderror错误事件处理上并没有详细说明。那么如果我们在获取网络图片出现404 nofound的情况下要怎么处理呢?如果是单张和循环内的某张图片出错的情况下又该如何处理呢?      首先,我们都知道html的img组件自带一个onerror图片出错事件处理机制,写法就如同js一样。语法如下:      但是,我尝试在

2016-10-08 15:14:09 15557 2

原创 微信小程序实例:实现tabs选项卡效果

最近微信应用号是炒的如火如荼,热门满满,但是也可以发现搜索关键词出来,各类网站出现的还都是微信的官方文档解释。正好赶上这个热潮,这几天先把小程序技术文档看了个遍,就直接着手写案例了。很多组件微信内部已经封装完了,正好发现没有tab选项卡效果,这两天正好研究了下。思路如下: 1、首先点击导航的时候需要两个变量,一个存储当前点击样式类,一个是其它导航默认的样式类2、选项卡内容列表同样也

2016-09-30 17:38:21 25939 1

原创 angular学习之五实例:实现图片懒加载

这两天一直纠结angular的图片懒加载插件中无法自拔。在使用过程深深感到js学艺不精的痛苦,想修改源码又不会修改,只能尽力压榨如何使用插件上。这里主要谈谈两种插件的使用过程遇到的问题。      一)我使用的是angular-imglazyload这个插件。【https://www.npmjs.com/package/angular-imglazyload】主要是这个插件小不依赖jquery

2016-09-13 10:45:46 6954

提示
确定要删除当前文章?
取消 删除