微信小程序
文章平均质量分 71
dzp_coder
勤学如春起之苗,不见其增日有所长。辍学如磨刀之石,不见其损日有所亏。
展开
-
微信小程序 收货地址API 兼容低版本
微信官方在三月底搞了不少事情.开放个人注册权限,蓝牙,与公众号打通,未来还会开发AR,图片识别,文字识别等等能力. 起初大家只是将微信小程序当做玩具看待,相信如今会有很多人把他当成一门技术去研究了.微信小程序的想象空间已经很大. 说说新增API之一的收货地址.虽然看看兼容低版本. 先上图. API很简单,就一行代码 wx.chooseAddress(OBJECT) 调起的是原生页面,原创 2017-04-01 09:49:36 · 7174 阅读 · 1 评论 -
微信小程序开发之五星评分
一位同学说要写五星评分.要有半颗星的评分. 于是我做了个玩具. gif: 代码: 1.index.wxml<block wx:for="{{stars}}"> <image class="star-image" style="left: {{item*150}}rpx" src="{{key > item ?(key-item == 0.5?halfSrc:selectedSrc) :原创 2016-12-13 23:53:42 · 32459 阅读 · 7 评论 -
微信小程序开发之动画 Animation 放大 透明度
突发奇想,做个录音的模块,结果折腾到一点钟,还在做话筒的动画.最后发现微信还有bug,我也是醉了.有空再接着敲.先上gif:这还没完成,做完之后应该是水波纹的样子.无奈函数执行多次,动画只执行一次.还是先把锅甩出去.上微信开发文档的图:代码先贴上:1.index.wxml2.index.wxss/**in原创 2016-11-25 01:56:59 · 24531 阅读 · 2 评论 -
微信小程序开发之下拉刷新 上拉加载
微信小程序中的下拉刷新,上拉加载的功能在所难免,目前我知道的有两种可行的方法,一是scroll-view,二是整个页面刷新.今天说说第一种,自己造轮子,难免有些瑕疵,日后慢慢完善.上gif:原理: scroll-view中有监听滑动的方法,这个跟android类似.其中用到了滑动到顶部,滑动到底部的方法.1.下拉刷新,在滑动到顶部时,bindscrolltoup原创 2016-11-23 00:02:50 · 25552 阅读 · 6 评论 -
微信小程序之『自定义toast』
一、微信官方默认toasttoast最常见了,几乎每个App都有这样的特效,先看下小程序自带的toast效果,立马想死的心都有了~~微信自带toast的效果: js文件:wx.showToast({ title: '成功', icon: 'success', duration: 2000})用法超级简单,但官方小程序有几个问题:只能显示success、loading两转载 2016-12-12 22:01:56 · 7422 阅读 · 0 评论 -
微信小程序之仿微信漂流瓶
周末找事做做.看到微信里有个漂流瓶.试着敲了敲.这里是用leancloud做后台.涉及到语音和文字的储存,查询.自己不会写后台代码,对于我算是个福利.欢迎交流!技术点:1.微信小程序开发之录音机 音频播放 动画 (真机可用)2.微信小程序开发之用户系统 一键登录 获取session_key和openid3.微信小程序开发之常见问题 不在以下合法域名列表中原创 2016-12-03 20:58:31 · 38442 阅读 · 17 评论 -
微信小程序开发之网络请求(POST请求)
微信小程序开发中网络请求必不可少.GET.POST请求是最常用的.GET请求POST请求的时候有好几个坑.我已经为大家填好了.wx.request({ url: 'test.php', data: { x: '' , y: '' }, method: "POST", header: { 'Content-Type': 'application原创 2016-10-17 16:08:30 · 100524 阅读 · 21 评论 -
微信小程序开发之『侧边栏滑动』特效
侧边栏滑动是很常见的功能,但是小程序出来不久,很多特效还没有成熟案例,只能原生重写,所以今天为大家带来4个漂亮的侧边栏特效~~侧边栏特效一先看效果:wxml: 第一个item1 第转载 2016-12-04 11:05:41 · 35423 阅读 · 10 评论 -
微信小程序开发之大转盘 仿天猫超市抽奖
天猫超市翻牌的转盘经常用,以前做Android,没啥想法,现在尝试微信小程序,看到别人家APP里有啥好玩的,就想去做一个. 上GIF看效果: 简要的说一下.1.外面一圈闪烁的小球是用js控制的样式.500ms改变一次样式.简单粗暴;2.抽奖的item也是js控制背景,但是怎么样让它优雅的停下来是个问题.动画中有timingFunction可以设置速度.自己用js就没那么简单了.我这里用setI原创 2016-12-07 12:32:41 · 27743 阅读 · 5 评论 -
微信小程序 页面跳转 传递参数
微信小程序的页面跳转,页面之间传递参数笔记. 先上demo图: 为了简化逻辑,所以index.wxml里面只写了两个text.既然是跳转,那就还有其他页面.目录如下:三个页面,但是代码很简单.直接上代码. 跳转到新页面 在当前页打开index.wxml中的URL就是跳转的页面路径.上面代码中就是navigator目录下的navigator原创 2016-10-12 10:53:11 · 167493 阅读 · 11 评论 -
微信小程序开发之麦克风动画 帧动画 放大 淡出
想做个录音机,第一步就卡在麦克风动画这里了.先上gif.再吐槽.① 上面gif中声波的动画是个半成品.没有循环播放.在微信小程序的开发文档上找了很久,也没找到循环模式的参数设置.用setInterval()并不执行动画.我在 微信小程序文档 动画最下面找到这么一行字.这个锅是不是可以甩出去了?ps:如果有同学能实现动画循环,一定告诉我.② 麦克风里面是个帧动画.没有原创 2016-11-26 17:06:33 · 24872 阅读 · 3 评论 -
微信小程序开发之录音机 音频播放 动画 (真机可用)
趁着周末用微信小程序做了个简易录音机.跟大家分享,欢迎批评!老规矩,先几张图.1.为了进来看得清楚.刚开始没有加载音频列表.代码往前挪一挪即可.2.按住 录音按钮的时候会出现麦克风.中间的麦克风是个帧动画.其实就是用js控制图片显示隐藏.没啥好说的.这里值得说一说的是录音.微信的录音API后,如果录音时间太短,会录音失败.所以fail的时候还是需要处理一下.录音时间的限制和原创 2016-11-27 00:08:53 · 41983 阅读 · 16 评论 -
微信小程序开发之弹出菜单
周五.玩具一枚. gif: 代码: 1.index.js//index.js//获取应用实例var app = getApp()Page({ data: { isPopping: false,//是否已经弹出 animationPlus: {},//旋转动画 animationcollect: {},//item位移,透明度 animationTran原创 2016-12-23 16:12:50 · 7977 阅读 · 3 评论 -
微信小程序 引入es6 promise
微信小程序开发两个月了.大家的项目都在不断迭代.已经不是小程序.这时候就会遇到多层回调嵌套的问题.有些目不忍视了.迫不得已引入es6-promise.在微信小程序内测的时候promise不需要手动引入,后来被微信移除了.看看效果. promise详细的介绍我就不说了.有很多大神写过. 阮一峰 promise入门看看目录,引入es6-promise就可以用了. 1.网络请求 wxReques原创 2017-03-06 12:47:09 · 41224 阅读 · 10 评论 -
微信小程序开发之扫码 扫一扫 wx.scanCode()
目前分享真机无效,开放工具可用. 微信小程序开发之页面分享 onShareAppMessage 扫码真机,开发工具均可用. 真机图片如下: 仔细读了一遍文档,这个API只是调起了客户端扫码界面,扫码成功后返回对应的结果. 微信小程序中并没有提供打开链接的API.那么这个扫码是做什么用的呢?不可能像我一样扫个文字玩玩. 想象空间很大啊. API实在简单,我都不好意思写了. 想起我以前做原创 2016-12-21 22:07:13 · 44595 阅读 · 26 评论 -
微信小程序开发之页面分享 onShareAppMessage 分享参数用处
今天下午突然听到群里有人说微信小程序工具更新了,文档也更新了不少内容. 顾不上吃冬至的饺子.我就冲进来了. 先说分享功能,目前真机尚不能调试.开发工具上可以看看效果.后续还会更新. Page()中加上如下代码后在右上角就会出现三个小白点 title:分享的标题. desc:分享一段描述. path:这个参数有点意思.以前在微信中的分享一般都是url.这里是当前页面这里应该是pages/i原创 2016-12-21 21:28:01 · 152516 阅读 · 24 评论 -
微信小程序 仿美团分类菜单 swiper分类菜单
有同学要仿美团分类菜单.写了一个. 跟 微信小程序开发之选项卡(窗口顶部TabBar)页面切换很类似代码: js就这么一点//index.js //获取应用实例 var app = getApp()Page({ data: { currentTab: 0, grids: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], swiperList:[原创 2017-01-15 14:36:57 · 20251 阅读 · 3 评论 -
微信小程序 仿美团城市选择 城市切换
原来的城市选择做了一些修改.代码很简单.var city = require('../../utils/city.js');var app = getApp()Page({ data: { searchLetter: [], showLetter: "", winHeight: 0, // tHeight: 0, // bHeight: 0,原创 2017-01-14 15:25:39 · 25415 阅读 · 4 评论 -
微信小程序 获取session_key和openid
因为微信认证问题,登录一直放着.今天做个笔记. 说说获取session_key和openid的条件 1.AppID(小程序ID),需要通过微信认证; 2.AppSecret(小程序密钥); 3.登录时获取code;注意:即使获取到了appid,未通过微信认证,也是不能拿到code的. 打印出来是这样的. 获取流程: 1.公众平台上找到AppID(小程序ID)和AppSecret(小程序原创 2017-01-05 15:59:28 · 61532 阅读 · 4 评论 -
微信小程序开发之城市选择器 城市切换
移动开发中城市选择器必不可少. 空白造了个.修改了一下,看这个 gif: 这里只上部分js代码:var city = require('../../utils/city.js');//欢迎关注:http://www.wxapp-union.com/portal.php//CSDN微信小程序开发专栏:http://blog.csdn.net/column/details/13721.html转载 2016-12-24 00:01:59 · 9632 阅读 · 2 评论 -
微信小程序 倒计时
项目需要做倒计时. 黄大哥的轮子.拿来用用.表示很顺手. 代码: 1.index.wxml<text style="display: block;text-align: center;font-size: 30px;color: #f60;margin-top: 50px;"> {{clock}} {{micro_second}}</text>2.index.js 注释很清楚了.不转载 2017-01-10 00:26:57 · 27089 阅读 · 8 评论 -
微信小程序开发之圆形菜单 仿建行圆形菜单
建行APP首页有个圆形菜单.仿了个玩具出来. 功能介绍: 1.一个圆形背景.六个item菜单.中间是微信用户的头像; 2.触摸滚动.速度较小时,随手指滚动,手指抬起,滚动停止;速度较大时,随手指滚动,手指抬起,还会自动滚动一段时间; CSDN微信小程序开发-专栏,欢迎关注! 相关技术: 1.微信小程序开发之大转盘 仿天猫超市抽奖 2.微信小程序之仿微信漂流瓶 3.微信小程序开发之原创 2016-12-12 12:09:38 · 18027 阅读 · 4 评论 -
微信小程序开发之选项卡(窗口顶部TabBar)页面切换
微信小程序开发中选项卡.在android中选项卡一般用fragment,到了小程序这里瞬间懵逼了.总算做出来了.分享出来看看.先看效果:再上代码:1.index.wxml 哈哈 呵呵 嘿嘿 我是哈哈 我是呵呵 我是嘿嘿原创 2016-10-23 11:53:26 · 105392 阅读 · 62 评论 -
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义
把录音的模块尝试过之后就想着微信小程序的视频播放会不会更有趣?果然,微信小程序视频自带弹幕.是不是很爽,跟我一起来看看.微信小程序开发之录音机 音频播放 动画 (真机可用)先上gif:再上几张图:1.视频播放器2.选择弹幕颜色3.弹幕来了...1.视频播放器微信已经封装的非常好.我这里只用了很简单的几个属性原创 2016-11-30 01:07:12 · 30645 阅读 · 4 评论 -
微信小程序 尺寸单位rpx与px,rem相互转换
1. rpx :微信小程序开发中新出了尺寸单位rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。微信官方建议视觉稿以iPhone 6为标准.rem(root em原创 2016-10-14 17:45:10 · 83452 阅读 · 0 评论 -
微信小程序 开发运营接入指南 设计规则
微信官方刚发布了微信小程序的一些规则,当然也是动态变化的,毕竟还在内测阶段.为了节约小伙伴的时间我会用红色标出我认为重点的位置.一、原则及相关说明 微信最核心的价值,就是连接——提供一对一、一对多和多对多的连接方式,从而实现人与人、人与智能终端、人与社交化娱乐、人与硬件设备的连接,同时连接服务、资讯、商业。 微信团队一直致力于将微信打造成一个强大的、全方位的服务转载 2016-10-14 16:23:53 · 4451 阅读 · 0 评论 -
微信小程序 开发工具及开发环境配置
1.开发工具下载地址Windows 64位 下载 Windows 32位 下载MacOS 下载2.安装过程对于Windows用户直接双击下一步的方式安装即可,此处注意我们使用的版本是官方最新的版本(不需要破解),可以不用AppID,也就是说没有资格的开发者也可以测试。2.1 环境测试以及演示项目2.1.1安装完成过后通过打开我们已经完成的应用原创 2016-10-14 12:37:19 · 13538 阅读 · 2 评论 -
微信小程序 轮播图 swiper图片组件
照着开发文档尝试,总是能有所收获.之前做Android开发,做个轮播图并不简单,用上viewpage再设置圆点,折腾一通之后还一堆bug.今天尝试微信小程序开发做轮播图,真是感动的泪流满面.废话说完了,上图.上图就是一个简易的轮播图,是不是很简易.23333主要是代码也很简单.1.index.wxml原创 2016-10-13 21:38:47 · 104451 阅读 · 16 评论 -
微信小程序 开发 微信开发者工具 快捷键
微信小程序已经跑起来了.快捷键设置找了好久没找到,完全凭感觉.图贴出来.大家看看.我现在用的是0.10.101100的版本,后续版本更新快捷键也应该不会有什么变化.现在貌似不能修改.如果有同学找到修改的方法,麻烦告诉我.谢谢.微信小程序代码编辑快捷键常用快捷键格式调整Ctrl+S:保存文件Ctrl+[, Ctrl+]:代码行缩进Ctrl+Shift+原创 2016-10-13 09:54:46 · 32757 阅读 · 2 评论 -
微信小程序开发之选项卡(窗口底部TabBar)页面切换
微信小程序开发中窗口底部tab栏切换页面很简单很方便.代码:1.app.json//app.json{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgro原创 2016-10-23 11:02:13 · 31865 阅读 · 4 评论 -
微信小程序开发之本地图片上传(leancloud)
将本地图片上传至leancloud后台.获取本地图片或者拍照,我在上一篇博文中写过.这里就不说了.我的博客直接上代码:1.index.js//index.js//获取应用实例var app = getApp()const AV = require('../../utils/av-weapp.js');Page({ data: { temp原创 2016-11-02 23:58:35 · 34629 阅读 · 8 评论 -
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
今天遇到微信小程序的用户头像设置功能,做笔记.先上gif:再上代码:小demo,代码很简单.1.index.wxml获取图片2.index.js//index.js//获取应用实例var app = getApp()Page({ data: { tempFilePaths: '' }, onLoad: function () {原创 2016-11-02 23:08:51 · 59820 阅读 · 22 评论 -
微信小程序开发之网络请求(GET请求)
微信小程序开发中网络请求必不可少,今天说说最简单的请求.后续会尝试上传下载,Socket这些.1.一个微信小程序,同时只能有5个网络请求连接。这个规定应该是微信为了保证用户体验制定的,毕竟是小程序.2.wx.request(OBJECT) 参数说明:微信小程序支持GET,POST等请求.用method可以设置.以下是GET请求的代码://rate.js//获原创 2016-10-14 22:00:23 · 46778 阅读 · 10 评论 -
微信小程序开发之真机测试 地图定位 map API 无法获取当前位置的问题
今天做到地图定位的模块.模拟器肯定是获取不到位置的.下面为真机测试结果.上图:经纬度不说了.定位用的,我这里直接输入的数字定位.但是有许多问题下图中scale是缩放比例,这个属性目前无效.后期微信团队应该会修复.毕竟现在刚开始公测.这样就导致我不管怎么修改scale,我的地图都是在默认的缩放比例.如上图.markers中的rotate是图标的旋转角度.如果需原创 2016-11-08 11:23:24 · 14126 阅读 · 2 评论 -
微信小程序开发之画布canvas 饼状图
微信小程序开发的时候会遇到统计功能的开放.今天想做一个饼状图,群里有朋友造了轮子,我整理了一下,加了一些注释,分享出来.先说说canvas:1.微信里面canvas标签默认宽度300px、高度225px,可自行修改.2.同一页面中的 canvas-id 不可重复,如果使用一个已经出现过的 canvas-id,该 canvas 标签对应的画布将被隐藏并不再正常工作;不懂的原创 2016-10-27 12:26:04 · 18450 阅读 · 8 评论 -
微信小程序开发之数据存储 参数传递 数据缓存
微信小程序开发内测一个月.数据传递的方式很少.经常遇到页面销毁后回传参数的问题,小程序中并没有类似Android的startActivityForResult的方法,也没有类似广播这样的通讯方式,更没有类似eventbus的轮子可用.现在已知传递参数的方法只找到三种,先总结下.由于正处于内测阶段,文档也不是很稳定,经常修改,目前尚没有人造轮子.先上GIF:1.APP.js我原创 2016-11-02 10:24:31 · 37216 阅读 · 2 评论 -
微信小程序开发之用户系统 一键登录 获取session_key和openid
思来想去不愿自己的微信小程序是个单机版本.自己又不会写后台.现在借助leancloud可以实现微信小程序一键登录功能.尝试后,做笔记.第一步:下载av-weapp.js,放到utils下.第二步:使用 const AV = require('../../utils/av-weapp.js');路径根据具体情况而定.第三步:做初始化. AV.init({ appId:原创 2016-11-17 00:53:44 · 38034 阅读 · 5 评论 -
微信小程序开发之常见问题 不在以下合法域名列表中 wx.request合法域名配置
加上了appid,麻烦事就来了.问题:xxx不在以下合法域名列表中 ,请参考文档解决方法:去微信公众平台配置域名.注意:1.一个月申请修改的次数3次,且行且珍惜.我这个月只有一次机会了.2.必须是HTTPS. HTTPS SSL证书目前正在学习微信小程序开发,欢迎讨论.我的博客:http://blog.原创 2016-11-17 00:15:50 · 34562 阅读 · 2 评论 -
微信小程序开发之拖拽 image 触摸事件监听
需要做个浮在scroll-view之上的button.尝试了一下.上GIF:Android中也会有类似移动控件的操作.思路差不多.获取到位移的X Y 的变量,给控件设置坐标.1.index.wxml 简单的设置一张图片,添加触摸事件监听.点击事件监听.根据触摸事件获取X Y位移,设置为image的位置2.index.js//index.原创 2016-11-15 18:57:46 · 16054 阅读 · 14 评论 -
微信小程序开发之图片等比例缩放 获取屏幕尺寸图片尺寸 自适应
早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于屏幕宽.我之前在做Android的时候也会遇到图片等比例缩放的问题.应该是用图片宽高比和屏幕宽高比做判断.做个笔记.老规矩,先上图.1.图片高宽比小于屏幕高宽比2.图片高宽比大于屏幕高宽比3.这种其实也是图片高宽比小于屏幕高宽比,但是高宽都大于屏幕高宽.所以不能简单用高宽来判断原创 2016-11-11 12:48:13 · 78957 阅读 · 13 评论