草灯-CSDN博客

原创 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 1638

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

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

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

原创在vue-cli3项目中使用svg-sprite-loader

目录概览使用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组

2020-09-11 17:08:52 1385 1

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

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

2020-04-09 20:33:36 1082 2

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

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

2019-05-15 15:45:24 2942 6

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

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

2019-04-17 10:17:07 11055 2

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

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

2019-04-02 19:56:50 18300

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

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

2019-02-15 11:22:24 37368

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

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

2018-09-10 18:33:49 673

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

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

2018-06-29 10:33:49 828

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

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

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

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

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

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

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

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

2018-01-18 15:02:48 5796

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

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

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

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

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

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

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

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

2018-01-03 16:41:10 13367

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

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

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

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

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

2017-11-18 20:01:39 16539 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 7729 6

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

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

2017-08-07 09:30:43 11608

原创 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 7666

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

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

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

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

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

2017-04-24 10:08:35 1869

原创 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 8369 1

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

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

2017-04-10 15:37:25 5097

原创 angular仿支付宝密码框

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

2017-03-24 17:16:10 1807

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

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

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

原创 webpack安装出错

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

2017-02-08 14:53:20 6379

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

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

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

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

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

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

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

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

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

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

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

2016-12-19 18:04:49 59404 14

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

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

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

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

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

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

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

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

2016-11-15 11:09:03 6398

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

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

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

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

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

2016-10-18 16:00:13 10374

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

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

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

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

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

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

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

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

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