【微信小程序点滴知识 】
文章平均质量分 70
barnett_y
成功道路并不拥挤,因为坚持的人不多。。。
展开
-
基于微信小程序开发的demo
先上开源地址:https://github.com/liujians/weapp最近一直在研究微信小程序,跟随互联网新闻的热潮从9月29日开发到现在,也算是把大部分API和组件都用到了 这个项目之所以想到把它开源,是因为之前在一个2000人小程序交流群中,发现很多demo都很简单 那么既然他们做的很简单,自然是引领很没有做过类似开发的人做一个转载 2016-10-19 15:15:33 · 3989 阅读 · 1 评论 -
微信小程序开发之选项卡(窗口顶部TabBar)页面切换
微信小程序开发中选项卡.在Android中选项卡一般用fragment,到了小程序这里瞬间懵逼了.总算做出来了.分享出来看看.先看效果:再上代码:1.index.wxml[html] view plain copy view class="swiper-tab"> view c转载 2016-12-12 17:21:29 · 3613 阅读 · 1 评论 -
微信小程序开发之画布canvas 饼状图
http://blog.csdn.net/qq_31383345/article/details/52944685 源码微信小程序开发的时候会遇到统计功能的开放.今天想做一个饼状图,群里有朋友造了轮子,我整理了一下,加了一些注释,分享出来.先说说canvas:1.微信里面canvas标签默认宽度300px、高度225px,可自行修改.2.同一转载 2016-12-12 17:34:53 · 2406 阅读 · 0 评论 -
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
今天遇到微信小程序的用户头像设置功能,做笔记.先上gif:再上代码:小demo,代码很简单.1.index.wxml[html] view plain copy button style="margin:30rpx;" bindtap="chooseimage">获取图片button>转载 2016-12-12 17:41:08 · 7708 阅读 · 1 评论 -
微信小程序开发之本地图片上传(leancloud)
将本地图片上传至leancloud后台.获取本地图片或者拍照,我在上一篇博文中写过.这里就不说了.我的博客直接上代码:1.index.js[javascript] view plain copy//index.js //获取应用实例 var app = getApp()转载 2016-12-12 17:42:03 · 2076 阅读 · 0 评论 -
微信小程序开发之真机测试 地图定位 map API 无法获取当前位置的问题
今天做到地图定位的模块.模拟器肯定是获取不到位置的.下面为真机测试结果.上图:经纬度不说了.定位用的,我这里直接输入的数字定位.但是有许多问题下图中scale是缩放比例,这个属性目前无效.后期微信团队应该会修复.毕竟现在刚开始公测.这样就导致我不管怎么修改scale,我的地图都是在默认的缩放比例.如上图.markers中的rota转载 2016-12-12 17:43:15 · 8693 阅读 · 1 评论 -
微信小程序开发之选择器 时间选择器 日期选择器 地区选择器
用微信封装好的控件感觉很好,为我们开发人员省去了很多麻烦.弊端就是不能做大量的自定义.今天试用了选择器.上gif:上代码:1.index.js[javascript] view plain copy//index.js //获取应用实例 var app = getApp() Page({转载 2016-12-12 17:44:18 · 3008 阅读 · 2 评论 -
微信小程序开发之图片等比例缩放 获取屏幕尺寸图片尺寸 自适应
早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于屏幕宽.我之前在做Android的时候也会遇到图片等比例缩放的问题.应该是用图片宽高比和屏幕宽高比做判断.做个笔记.老规矩,先上图.1.图片高宽比小于屏幕高宽比2.图片高宽比大于屏幕高宽比3.这种其实也是图片高宽比小于屏幕高宽比,但是高宽都大于屏转载 2016-12-12 17:53:19 · 6404 阅读 · 0 评论 -
微信小程序开发之拖拽 image 触摸事件监听
需要做个浮在scroll-view之上的button.尝试了一下.上GIF:Android中也会有类似移动控件的操作.思路差不多.获取到位移的X Y 的变量,给控件设置坐标.1.index.wxml[html] view plain copyimage class="image-st转载 2016-12-12 17:56:11 · 4398 阅读 · 0 评论 -
微信小程序开发之下拉刷新 上拉加载
微信小程序中的下拉刷新,上拉加载的功能很常见,目前我知道的有两种可行的方法,一是scroll-view,二是整个页面刷新.今天说说第一种,自己造轮子,难免有些瑕疵,日后慢慢完善.上gif:原理: scroll-view中有监听滑动的方法,这个跟Android类似.其中用到了滑动到顶部,滑动到底部的方法.1.下拉刷新,在滑动到顶部时,bin转载 2016-12-12 18:03:03 · 1601 阅读 · 0 评论 -
微信小程序开发之动画 Animation 放大 透明度
突发奇想,做个录音的模块,结果折腾到一点钟,还在做话筒的动画.最后发现微信还有bug,我也是醉了.有空再接着敲.先上gif:这还没完成,做完之后应该是水波纹的样子.无奈函数执行多次,动画只执行一次.还是先把锅甩出去.上微信开发文档的图:代码先贴上:1.index.wxml[htm转载 2016-12-12 18:04:46 · 11251 阅读 · 2 评论 -
微信小程序开发之麦克风动画 帧动画 放大 淡出
想做个录音机,第一步就卡在麦克风动画这里了.先上gif.再吐槽.① 上面gif中声波的动画是个半成品.没有循环播放.在微信小程序的开发文档上找了很久,也没找到循环模式的参数设置.用setInterval()并不执行动画.我在 微信小程序文档 动画最下面找到这么一行字.这个锅是不是可以甩出去了?ps:如果有同学能实现动画循环,一定告诉我.②转载 2016-12-12 18:05:55 · 2738 阅读 · 0 评论 -
微信小程序开发之录音机 音频播放 动画 (真机可用)
趁着周末用微信小程序做了个简易录音机.跟大家分享,欢迎批评!老规矩,先几张图.1.为了进来看得清楚.刚开始没有加载音频列表.代码往前挪一挪即可.2.按住 录音按钮的时候会出现麦克风.中间的麦克风是个帧动画.其实就是用js控制图片显示隐藏.没啥好说的.这里值得说一说的是录音.微信的录音API后,如果录音时间太短,会录音失败.所以fail的时候还是需要处理一转载 2016-12-12 18:07:21 · 4161 阅读 · 1 评论 -
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义
把录音的模块尝试过之后就想着微信小程序的视频播放会不会更有趣?果然,微信小程序视频自带弹幕.是不是很爽,跟我一起来看看.微信小程序开发之录音机 音频播放 动画 (真机可用)先上gif:再上几张图:1.视频播放器2.选择弹幕颜色3.弹幕来了...1.视频播放器转载 2016-12-12 19:49:25 · 2045 阅读 · 0 评论 -
微信小程序之仿微信漂流瓶
周末找事做做.看到微信里有个漂流瓶.试着敲了敲.这里是用leancloud做后台.涉及到语音和文字的储存,查询.自己不会写后台代码,对于我算是个福利.欢迎交流!技术点:1.微信小程序开发之录音机 音频播放 动画 (真机可用)2.微信小程序开发之用户系统 一键登录 获取session_key和openid3.微信小程序开发之转载 2016-12-12 19:50:28 · 2118 阅读 · 0 评论 -
微信小程序开发之『侧边栏滑动』特效
侧边栏滑动是很常见的功能,但是小程序出来不久,很多特效还没有成熟案例,只能原生重写,所以今天为大家带来4个漂亮的侧边栏特效~~侧边栏特效一先看效果:wxml:[html] view plain copy view class="page"> view class="page-bot转载 2016-12-12 19:52:39 · 816 阅读 · 0 评论 -
微信小程序开发之大转盘 仿天猫超市抽奖
天猫超市翻牌的转盘经常用,以前做Android,没啥想法,现在尝试微信小程序,看到别人家APP里有啥好玩的,就想去做一个. 上GIF看效果: 简要的说一下.1.外面一圈闪烁的小球是用js控制的样式.500ms改变一次样式.简单粗暴;2.抽奖的item也是js控制背景,但是怎么样让它优雅的停下来是个问题.动画中有timingFunction可以设置速度.自己用js就没那么简单了转载 2016-12-12 19:55:48 · 806 阅读 · 0 评论 -
微信小程序开发之圆形菜单 仿建行圆形菜单
建行APP首页有个圆形菜单.仿了个玩具出来. 功能介绍: 1.一个圆形背景.六个item菜单.中间是微信用户的头像; 2.触摸滚动.速度较小时,随手指滚动,手指抬起,滚动停止;速度较大时,随手指滚动,手指抬起,还会自动滚动一段时间; CSDN微信小程序开发-专栏,欢迎关注! 相关技术: 1.微信小程序开发之大转盘 仿天猫超市抽奖 2.微信小程序之仿微信漂流瓶转载 2016-12-12 19:56:26 · 1668 阅读 · 0 评论 -
微信小程序之『自定义toast』
一、微信官方默认toasttoast最常见了,几乎每个App都有这样的特效,先看下小程序自带的toast效果,立马想死的心都有了~~微信自带toast的效果: js文件:wx.showToast({ title: '成功', icon: 'success', duration: 2000})1234512345用法超级简单,但官方小程转载 2016-12-13 11:47:45 · 11750 阅读 · 0 评论 -
微信小程序仿闲鱼『下拉菜单』
https://gold.xitu.io/user/58277c482f301e00584f3ecf下拉菜单我们非常常见了,但是要在微信小程序中实现并不容易,今天带来的是仿闲鱼下拉菜单,相信对您有一定的帮助~~先看效果:展示效果麻雀虽小五脏俱全,此效果很复杂,我们将其拆分为多个步骤来分析~1)tab状态的切换先看效果:tab切换转载 2016-12-13 11:52:43 · 19525 阅读 · 1 评论 -
微信小程序–二维码生成器
在微信小程序联盟上有一个小练习,是要实现小程序上的二维码生成器,想想基于jquery的二维码生成插件有很多,但是小程序是不允许操作dom的,所以自己找了一个纯javascript版的二维码生成源码,然后换汤不换药把其中的hmtl5中的canvas改为小程序的canvas;效果图:纯javascript版js源码:qrcode1、解读源码,转载 2016-12-13 13:05:31 · 38998 阅读 · 2 评论 -
微信小程序电影推荐demo实战开发小结(附源码及思维导图) ... ...
第一步 项目配置 一、编写app.json 对整个项目的公共配置 1、pages:配置页面路径(必须),列出所有的页面的路径,所有存在的页面都需要在此写出,否则在页面跳转的时候会报出找不到页面的错误2、window:窗口配置 ...本文已获作者sesine授权转载,授权地址:http://www.jianshu.com/p/447b36463转载 2016-12-13 13:06:42 · 12201 阅读 · 6 评论 -
微信小程序实用组件:省市区三级联动demo
http://www.wxapp-union.com/home.php?mod=space&uid=2&do=thread&view=me&from=spacehttp://www.wxapp-union.com/forum.php?mod=viewthread&tid=1377转载 2016-12-13 13:12:55 · 9606 阅读 · 0 评论 -
微信小程序中有哪些你需要的实用组件
http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1384目前本站的组件已经有了一些,但是相对于同学们广泛的需求来说,也不过是杯水车薪,所以征集一下,大家需要的组件,你可以将自己所需的组件说出来:不管其他语言或程序内是否已有,只有微信小程序内没有,就可以提!目前已经有的组件:(已有的,假如够用就不转载 2016-12-13 13:16:18 · 2583 阅读 · 0 评论 -
微信小程序Demo--仿知乎
https://zhuanlan.zhihu.com/p/23394858从微信小程序开始内测到现在, 已经一个月过去了,终于把我自己的微信小程序 demo 墨迹完成了. 真的是墨迹完的, 连我自己都佩服自己的拖延症了(懒癌少女已弃疗*ヾ(´A`)ノ゚*), 总之算是基本完成了(明明有很多组件啊 API 啊根本都没用好嘛 →_→) 以及从来不写 blog 的我也出来码字啦 (ノ◕ヮ◕)ノ:转载 2016-12-13 13:44:35 · 8463 阅读 · 3 评论 -
微信小程序-仿淘宝
这是仿手机淘宝做的微信小程序,目的在于享受开发,学习小程序,欢迎大家批评指正。demo资源地址:demo gihub传送门tip:由于目前正在开中,因此tab栏后两个是小程序官方组件接口,目的是为了便于开发学习调用接口。先上效果图:真机测试图:开发工具里效果图:话不多说,项目github地址:https://git转载 2016-12-13 13:46:11 · 6230 阅读 · 3 评论 -
微信小程序开发之五星评分
一位同学说要写五星评分.要有半颗星的评分. 于是我做了个玩具.有空了做模块化,这代码看不下去了. gif: 代码: 1.index.wxmlblock wx:for="{{stars}}"> image class="star-image" style="left: {{item*150}}rpx" src="{{key > item ?(key-item == 0转载 2016-12-15 11:46:19 · 955 阅读 · 0 评论 -
微信小程序滑动删除效果
转自:看源社区 http://www.see-source.com/weixinwidget/detail.html?wid=80最初打算使用scroll-view实现,效果好、流畅、有惯性滑动,但由于滚动条没法去掉、无法实现上下层的帧布局,最终放弃了。还是自己写个吧,利用手势事件。遗憾的是小程序中目前没有像Android中快速滑动事件,所以转载 2017-01-02 15:34:00 · 4560 阅读 · 0 评论 -
目前为止最全的微信小程序项目实例
wx-gesture-lock 微信小程序的手势密码WXCustomSwitch 微信小程序自定义 Switch 组件模板WeixinAppBdNovel 微信小程序demo:百度小说搜索shitoujiandaobu 小程序:石头剪刀布(附代码说明)audiodemo 微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义转载 2017-01-02 15:35:58 · 15691 阅读 · 0 评论 -
微信小程序开发之页面分享 onShareAppMessage
今天下午突然听到群里有人说微信小程序工具更新了,文档也更新了不少内容. 顾不上吃冬至的饺子.我就冲进来了. 先说分享功能,目前真机尚不能调试.开发工具上可以看看效果.后续还会更新. Page()中加上如下代码后在右上角就会出现三个小白点 title:分享的标题. desc:分享一段描述. path:这个参数有点意思.以前在微信中的分享一般都是url.这里是当转载 2016-12-22 12:58:39 · 46051 阅读 · 2 评论 -
微信小程序开发之扫码 扫一扫 wx.scanCode()
目前分享真机无效,开放工具可用. 微信小程序开发之页面分享 onShareAppMessage 扫码真机,开发工具均可用. 真机图片如下: 仔细读了一遍文档,这个API只是调起了客户端扫码界面,扫码成功后返回对应的结果. 微信小程序中并没有提供打开链接的API.那么这个扫码是做什么用的呢?不可能像我一样扫个文字玩玩. 想象空间很大啊. API实在简单,我转载 2016-12-22 13:00:00 · 35622 阅读 · 7 评论 -
微信小程序列表的上拉加载和下拉刷新的实现
微信小程序可谓是9月21号之后最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不会让移动端App颠覆,让移动端的程序员失业,身为一个Android开发者我是不相信的,即使有,那也是需要个一两年的过度和打磨才能实现的吧。不管微信小程序是否能颠覆当今的移动开发格局,我们都要积极向上的心态去接收,去学习。不排斥新技术,所以,心动不如行动,赶紧先转载 2017-01-02 16:45:56 · 7191 阅读 · 0 评论 -
微信小程序开发之 下拉刷新,上拉加载更多
本文记载了如何在微信小程序里面实现下拉刷新,上拉加载更多先开看一下界面 大致如此的界面吧。 这个Demo使用了微信的几个Api和事件,我先列出来。1.wx.request (获取远程服务器的数据,可以理解成$.ajax)2. scroll-view的两个事件 2.1 bindscrolltolower(滑到页面底部时) 2.转载 2017-01-02 16:47:26 · 5871 阅读 · 1 评论 -
微信小程序_选项卡切换事例美容商城
http://www.see-source.com/weixinwidget/detail.html?wid=75实现服务展示,服务详情,预约,技师列表,技师详情等功能效果:共0条评论转载 2017-01-03 20:40:58 · 1542 阅读 · 0 评论 -
微信小程序开发之弹出菜单
周五.玩具一枚. gif: 代码: 1.index.js//index.js//获取应用实例var app = getApp()Page({ data: { isPopping: false,//是否已经弹出 animationPlus: {},//旋转动画 animationcollect: {},//item位移,透明度 ani转载 2016-12-24 15:41:46 · 969 阅读 · 0 评论 -
微信小程序开发之城市选择器 城市切换
移动开发中城市选择器必不可少. 空白造了个. gif: 这里只上部分js代码:var city = require('../../utils/city.js');//欢迎关注:http://www.wxapp-union.com/portal.php//CSDN微信小程序开发专栏:http://blog.csdn.net/column/details/13721.ht转载 2016-12-24 15:42:39 · 5198 阅读 · 0 评论 -
wx-charts:基于canvas绘制:饼图,线图,柱状图(适用1122)
微信小程序图表工具,charts for WeChat small app基于canvas绘制,体积小巧持续优化更新中,请保持关注~支持图表类型饼图 pie圆环图 ring线图 line柱状图 column区域图 area代码分析 Here如何使用1、直接引用编译好的文件 dist/charts.js2、自行编译转载 2016-12-24 15:47:03 · 16916 阅读 · 3 评论 -
微信小程序学习用demo推荐:家具电商:(适用1221版本)
点评:本demo功能已经基本完善,逻辑也基本完善,值得新手下载学习! 下载地址:本帖隐藏的内容 MallJiaJu.rar (299.8 KB, 下载次数: 46)http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1434&extra=page%3D1转载 2016-12-24 15:48:58 · 1472 阅读 · 0 评论 -
微信小程序完整精品demo:移动小商城:基于node,包含前后台
微信小程序-移动端小商城项目说明:微信小程序:实现一个移动端小商城,项目持续更新中...使用技术:Weui.wxss 、 ES6大家学习代码中遇到的问题,欢迎回复在这里目录结构:assets — 存放静态文件,例如:images、styles、pluginsetc — 存放配置文件,例如:config.jshelpers — 存放帮助文件,例如:Prom转载 2016-12-24 15:52:24 · 19936 阅读 · 3 评论 -
小程序学习用demo:收支账单;增加账单及列表(适用1221)
点评:实现了两个实用的功能:增加账单,同时在列表内增加显示,适合新手研究学习 示例代码:[AppleScript] 纯文本查看 复制代码?001002003004005006007008009010011012013014转载 2016-12-24 15:58:49 · 3687 阅读 · 0 评论