小程序
文章平均质量分 82
关于小程序开发的一些研究
草灯
活的就要像明天死去一样
展开
-
关于微信小程序中使用iview-weapp的诡异问题
今天使用微信开发者工具创建了一个空项目,然后引入了iview-weapp UI后,出现一个很奇怪的问题,按钮的展示和官网提供的不一致。具体效果看下图:按钮并没有垂直居中。接下来我去下载了官方示例,按钮效果图如下:对比下,明显官方示例才是对的,后来经过一番排查,发现是微信小程序对UI做了升级处理,有增加了一句命令配置,具体请自行创建一个项目,然后查看app.json文件配置:我们只要在...原创 2020-04-09 20:33:36 · 1109 阅读 · 2 评论 -
微信小程序:组件实践
前阶段有网友问了一个关于小程序组件的问题: 有一个列表,我点击编辑,出现一个弹窗修改组件,输入修改数值点击确定,对应的列表项的值就被更改过来,点击取消,不做任何操作。据说能获取到文本框的值,可是列表值一直更改不了。我就抽空写了个demo发现并未出现此问题,因此萌生了写这篇文章。 那么什么是组件,为什么要用组件。相信不用我多说大家都很清楚,以前每个html静态页的头部和底部都得原创 2018-02-06 13:46:35 · 11671 阅读 · 1 评论 -
缩放类小程序实践心得
这是目前最近开发的一个小程序完成后的一些心得。需求是有一张静态地图,用户点击对应的县要进入二级页面,二级页面里面底图是一张静态地图,上面展示出相应的景点。点击景点显示景点简介一级页面和二级页面都是可以拖动和缩放的,双击可以缩放具体功能页如下: 我先是通过自己写touch事件体验,使用正常的h5测试已经能明显感觉到体验不是很流畅。 改写成小程序,滑动数据都是用setData,...原创 2018-06-29 10:33:49 · 856 阅读 · 0 评论 -
微信小程序:web-view开发实践
使用该组件有个先决条件,就是得到小程序公众平台设置网页的域名白名单,具体做法请自行登录查看。然后在小程序写入如下测试页:: test.js::onLoad: function (options) { this.setData({ url: 'https://你的域名/test.html?rnd=' + new Date().getTime() }) }原创 2018-01-18 15:02:48 · 5866 阅读 · 0 评论 -
微信小程序:nodejs+百度语音识别开发实践
今天,终于成功使用nodejs研究出百度语音识别了。目前使用小程序最新录音管理api测试,小程序录音只支持aac,mp3格式,并且保持的是临时地址。而百度语音识别目前只支持pcm,wav,amr格式。因此服务端需要先存储好录音文件并经过一次音频转换。具体步骤如下: 1、安装ffmpeg插件。我使用的windows系统,具体安装方法看这里,该博主文章讲的非常详细,按照步骤走即可。这个插件是使原创 2018-01-08 15:49:47 · 4858 阅读 · 18 评论 -
微信小程序:nodejs+百度语音合成开发实践
写在前面,今天突然又整理了这个教程是因为百度的语音合成文本最多可以有1024个字节,而腾讯的只有150个字节。而且开发语言可以自由选择。其中包括nodeJs开发。今天就拿这个做实践。1、在百度AI开放平台注册账号,并申请应用。申请完可以在应用管理看到如下应用,appid,apikey,secretkey在待会合成的时候会用到。 2、安装express框架开发后端项目,教程请去看官网。原创 2018-01-05 15:33:54 · 3727 阅读 · 2 评论 -
微信小程序:腾讯AI语音合成实践
最近正在研究小程序地图开发项目,其中有一个是要实现路线导航播放功能,找了各个平台的语音合成,发现只有腾讯AI开放平台的Restful API本人比较看得懂,于是决定先用这个接口实践测试。 官方地址请走:https://ai.qq.com/doc/aaitts.shtml我这里使用的是第一种方式,语音合成(AI Lab)。然后后端开发环境使用的是phpStudy软件。接着我们要先在腾讯原创 2018-01-03 16:41:10 · 13457 阅读 · 0 评论 -
微信小程序:高德地图搜索周边poi接口实践
近期一直在研究小程序地图组件开发,使用的是高德微信小程序sdk查找周边poi数据,并展示到地图上。根据getPoiAround接口协议传入对应的参数测试发现目前该接口最多只能返回20条数据,不支持分页,重要的是他的第一条数据默认是选中态,如果想要保证所有的图标一致性还得在传入iconPathSelected属性。而这些都在官方上得到了证实: 测试实例代码如下: js代码:c原创 2017-12-28 11:27:33 · 8087 阅读 · 8 评论 -
微信小程序实例:实现tabs选项卡效果
最近微信应用号是炒的如火如荼,热门满满,但是也可以发现搜索关键词出来,各类网站出现的还都是微信的官方文档解释。正好赶上这个热潮,这几天先把小程序技术文档看了个遍,就直接着手写案例了。很多组件微信内部已经封装完了,正好发现没有tab选项卡效果,这两天正好研究了下。思路如下: 1、首先点击导航的时候需要两个变量,一个存储当前点击样式类,一个是其它导航默认的样式类2、选项卡内容列表同样也原创 2016-09-30 17:38:21 · 27053 阅读 · 1 评论 -
微信小程序实例:image组件的binderror事件处理
微信公众平台关于image组件的讲解都挺详细的,至于在binderror错误事件处理上并没有详细说明。那么如果我们在获取网络图片出现404 nofound的情况下要怎么处理呢?如果是单张和循环内的某张图片出错的情况下又该如何处理呢? 首先,我们都知道html的img组件自带一个onerror图片出错事件处理机制,写法就如同js一样。语法如下: 但是,我尝试在原创 2016-10-08 15:14:09 · 20028 阅读 · 2 评论 -
微信小程序学习:location API接口
微信小程序的位置接口共有两个:1、wx.getLocation(OBJECT)获取当前的地理位置、速度。2、wx.openLocation(OBJECT) 使用微信内置地图查看位置然后,根据object参数说明,结合module模块化重写了下两个接口在暴露出来引用,是的项目更加灵活管理。原创 2016-10-11 18:45:13 · 22206 阅读 · 6 评论 -
微信小程序学习:audio组件发现的几个问题
这个只测试了action的method=play的情况下,其它的方法我有稍微改变了下src和action方法,发现只要一切换其它action方法和src歌曲后,歌曲都是未开播状态,所以应该不会出现什么问题。主要是play的情况下有几个小问题需要注意下!先上官方源码:wxml::播放js::Page({ data: { poster: 'http://y.gtim原创 2016-10-18 16:00:13 · 10414 阅读 · 0 评论 -
微信小程序学习:使用picker封装省市区三级联动模板
目前学习小程序更多的是看看能否二次封装其它组件,利于以后能快速开发各种小程序应用。目前发现picker的selector模式只有一级下拉,那么我们是否可以通过3个picker来实现三级联动模板的形式来引入其它页面中呢?答案是肯定可以的。那么我的思路是这样的:1、使用template模板语法进行封装,数据从页面传入2、根据picker组件的语法,range只能是一组中文地区数组,原创 2016-10-28 11:13:36 · 33821 阅读 · 12 评论 -
微信小程序测试:navigator组件使用flex布局不兼容问题及解决方案
今天使用navigator+flex布局来做一个测试,结果发现安卓机子竟然无效,而在苹果机子上却是能正常一行显示的。测试代码如下: 开发工具演示如下,正常:安卓机子演示如下,右侧掉了:苹果机子演示如下,正常:原创 2016-11-15 11:09:03 · 6466 阅读 · 0 评论 -
微信小程序实例:跳转到顶部实例
总所周知,小程序不能操作dom,那么我们要怎么实现在页面滚动到一定条件的时候,显示gotop图标,点击后跳转到页面的顶部呢? 这里小程序有个组件是可以实现的,那就是scroll-view组件,他具有很多的属性,其中我们要利用到以下两个属性来处理:scroll-topNumber 设置竖向滚动条位置bindscrollEven原创 2016-11-16 19:56:08 · 20830 阅读 · 11 评论 -
微信小程序发现的一些小问题以及解决方案集合以及注意点
最近一直在关注小程序开发,目前正在试着将公司的app转换为小程序执行,在此期间有遇到的一些小问题以及解决办法集合。当然这些都是我个人经验谈,对于小程序的底层框架我也是一知半解,很多也都无法解释的很清楚,如果有不同见解欢迎指出。 1、navigator组件使用flex布局在安卓机子下是不兼容的。 解决方案:在navigator组件内先添加一个view组件使用flex布...原创 2016-12-07 09:39:48 · 35203 阅读 · 5 评论 -
微信小程序实例:创建下发模板消息实例
鉴于目前网络上都还找不到小程序下发模板消息的相关资源,在多次阅读了官方文档今天终于把小程序的模版消息给测通了,接下来介绍在不使用服务器的情况下,前端开发人员在本地怎么测试模板消息的发送。1、在微信公众平台-小程序的模板中心先申请一个下发模板消息2、根据文档提及的模板消息做法分两个步骤2-1、获取token,这里我直接使用微信公众平台接口调试工具【原创 2016-12-13 15:45:06 · 65179 阅读 · 93 评论 -
微信小程序实例:map组件markers属性动态初始化
今天在写小程序详情页时候遇到一个问题,map组件的markers属性是通过异步请求到数据后设置的,结果就导致了微信底层渲染出错。但是如果我先在data初始化markers变量,每次小程序都不能正常渲染都是初始化的北京的数据。然后写了如下测试:test.js::Page({ data:{ map:{ lat: 0, lng: 0, ma...原创 2016-12-19 18:04:49 · 59510 阅读 · 14 评论 -
微信小程序实例:move事件导致navigator组件和tap事件无效
今天,微信小程序终于发布了,激动的同时也在加紧最后公司项目的测试,结果发现了一个问题,就是在使用catch绑定move事件的时候,无法触发navigator组件的url和tap事件。原创 2017-01-11 17:53:19 · 6594 阅读 · 1 评论 -
微信小程序实例:编写tabBar模板
众所周知,微信小程序的tabBar都是新开页面的,而微信文档上又表明了最多只能开打开5层页面。这样就很容易导致出问题啦,加入我的tabBar有5个呢?下面是微信原话:一个应用同时只能打开5个页面,当已经打开了5个页面之后,wx.navigateTo不能正常打开新页面。请避免多层级的交互方式,或者使用wx.redirectTo原创 2017-01-13 18:50:33 · 29313 阅读 · 18 评论 -
微信小程序实例:开发showToast消息提示接口
相信在学习小程序文档或者已经创建项目的开发员们,都很清楚小程序的wx.showToast接口只提供了两种icon【success和loading】展示形式,那假如我想要的是不要图标只要存粹的文字提醒呢?或者是我不要微信单方面提供的那种图片呢?想要自己指定的情况呢?这时候要怎么办.. 这几天我根据wx.showToast接口提供的参数,跟着写了个消息提醒模板,1、如原创 2017-01-24 11:24:55 · 50310 阅读 · 28 评论