wrapBox:最外层盒子,背景色为进度条的颜色 leftBox/rightBox:半宽等长 左/右浮动的盒子,背景色为灰色 roundMask:居中的盒子 用来遮盖leftBox和rightBox 基本原理: 当进度小于180度,rightBox以左中点为原点进行旋转 当进度大于180度,rightBox位置不变 背景变成灰色,leftBox以右中点为原点进行旋转,旋转度数=进度-180   问题:rpx在转换成px时有误差 导致小圆不在中心位置 border-radius计算不准确 解决办法…

很简单的一个音乐播放器 data:{ src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E…

微信小程序发布后,公司虽然没有拿到第一批内测资格,但作为微信亲密合作伙伴,一定要第一时间去尝试啦.现在微信小程序刚发布还在测试阶段,可以说是1.0版本,所以框架和结构内容都还不多,相关的文档跟微信API一样都做得很好. 1)微信小程序到底是什么?跟H5,HTML5是不是一样? 它可以把应用功能快速嵌入到微信公众号中,用户无需安装应用就能访问.相比现在的app开发和发布都容易很多. 微信小程序本质上就是Html5,或者说是一种优化过之后的Html5.不过在编码方式跟HTML5还是有很多不同的地方,…

微信小程序movable-view组件官方文档 传送门 Learn 一.moveable-view组件 一.movable-view组件 direction:movable-view的移动方向,属性值有all.vertical.horizontal.none[默认值none] 使用<movable-view>组件时必须和<movable-area>组件一起用,<movable-area>规定了可移动组件移动的范围 <!--index.wxml--> Cyni…

效果展示图 功能点概述 图一功能点有 搜索 轮播图 商品展示 图二功能点 导航栏 加入购物车 图四功能点 评论点 图五购物车 复选框 ( 全选全不选 ) 即点即改 总计结算 功能详解 1.A(搜索) 使用微信小程序自带函数bindinput实现 在每次输入一个字符的时候就会触发这个函数也就是,每次input框中的值发送改变都会触发bindinput绑定的事件 图示: Wxml端 Js端 获取到值之后就可以放到接口中进行查询然后查询结果直接循环到页面中使用 1.B(轮播图) 网址 :  https…

点击下载源码:示例-更改radio或checkbox选中样式…

表单组件radio:官方文档 Demo Code: Page({ data: { items: [ {name: 'USA', value: '美国'}, {name: 'CHN', value: '中国', checked: 'true'}, {name: 'BRA', value: '巴西'}, {name: 'JPN', value: '日本'}, {name: 'ENG', value: '英国'}, {name: 'TUR', value: '法国'}, ] }, radioChang…

lastUpDate: 2018-8-12 请把请求地址加入到downLoadFile 提示:首先得要在公众号设置对应的downLoadFile地址. downImg : 下载图片 wxml js downImg: function(e) { var _this = this; // 获取图片地址(http://www.playsort.cn/...) var img = e.currentTarget.dataset.src; // 下载监听进度 const downloadTask = wx…

/* 单选钮样式 */ radio { transform:scale(0.5); }…

获取radio值的方法: func:function(e){ var val=e.detail.value;//获取radio值,类型:字符串 var val2=parseInt(val);//将字符串转换为number } 实例: laternext: function (e){ // console.log(e); var val=e.detail.value;//获取radio值,类型:字符串 var val2=parseInt(val);//将字符串转换为number var score…

2017年的微信大动作就是微信小程序了,到底小程序都能做些什么?这是很多人关注的热点,小程序开发对企业又有什么帮助呢?下面让厦门微信小程序开发公司来为你就分析下.       微信小程序与APP的关系   微信小程序为啥而生?对APP开发有什么影响,现在微信小程序最大的看点就是把网站封装成为APP,通过微信可以让我们平常的网站可以调用智能手机的内置功能,比如:二维码扫描.生成APP图标.摇一摇等,而这些通过我们平常的网站程序是做不到的,而APP就可以做到,但是日常生活中要安装太多的APP了,有的…

关于答题类,或者一些游戏环节的小程序需要用到时间进度条,改功能怎么实现看下面源码 <view class='out' style='margin-top:10px'> <view class='in' style='width:{{progressWidth}}%'></view> </view> <view class='caozuo'> <text>{{progressTime}}秒</text> <text b…

2018年的11月份,自己做微信小程序相关的项目已经有四个月,这四个月自己走过很多弯路,也学到了不少经验,下面就一一总结: 一,微信小程序的radio组件是可以改变按钮样式的(比如大小,颜色等等) 改变大小解决办法:https://blog.csdn.net/iafmay/article/details/79479288 改变其他样式:https://blog.csdn.net/abs1004/article/details/78922596 二,关于display:flex;子集盒子被压缩,…

先上效果: 缘起 使用微信小程序做地图相关功能的时候,有个需求是需要接入自己发布的地图服务.查看微信小程序地图组件文档,发现它对地图相关的支持很少,只有一些基础功能,比如添加点.线.面.气泡和一些常规的地图事件监听,并没有添加地图服务相关的支持. 不过有了需求,也要想办法解决呀. 图层查询 既然小程序不能直接添加地图服务,那就把图层数据查出来,然后通过添加点线面方式添加到地图,具体要怎么实现呢? 首先想到的是通过图层查询接口把所有数据查出来. 但是既然数据是按图层发布的,一般数据量都比较大,把所…

目前市面上在内测期间出来的一些实战类教程还是很不错的,主要还是去快速学习小程序开发的整体流程,一个组件一个组件的讲的很可能微信小程序一升级,这个组件就变了,事实本就如此,谁让现在是内测呢.我们不怕,下面就推荐一些涵盖了大部分组件和API的实战项目类课程. 讲项目实战,主要是学习的小程序的开发思路,架构思路,组价稍带就过,不会的看文档喽,还有比官网文档更详细的教程咩. 我们小黄象社区为此录制三套实战类视频教程,实战项目快速学习小程序开发.另外社区专栏作家也贡献了优质的小程序教程专栏,下面已经列出.…

关于本文的所有观点都是网上收集,与作者本人没有任何关系! 最近朋友圈已经被微信小程序刷屏了,这也难怪,腾讯的产品拥有广泛的影响力,谁便推出个东西,都会有很多人认为会改变世界,这不,张小龙刚一发布微信小程序的消息,很多人(技术的和非技术的)就跟打了鸡血似的,估计现在已经鸡血告急了! 我也看了网上的一些关于微信小程序的文章,估计那帮家伙连微信小程序是什么都没搞清楚,就在那里一本正经地胡说八道.好吧,我就通过本文让大家了解一些什么是微信小程序,以及微信小程序到底能为我们带来什么. 关于微信小程序的误解…

最近花时间对WordPress版微信小程序做了一些完善和调整,修复不少程序的问题.一个程序的完善是持续和渐进的,没有最好,只有更完善.虽然会采纳一些用户的建议和意见,但我会从一个产品角度去考虑,哪些功能应该加,哪些需要舍弃,如果你需要更专业的解决方案,可以参考我的专业版小程序-微慕小程序. WordPress版微信小程序3.5版本的更新内容说明如下: 1.调整小程序海报 小程序原来的海报程序存在以下的问题: 1)图片没有裁剪,导致海报的图片发生变形.2)海报的文字调整起来比较麻烦. 为了解决上述…

背景 由于机器人协会进行鼓励大家多读书的活动,所以为了可以更好的.更有效果,所以我跟会长提了一个建议,做一个微信小程序,那么为什么是微信小程序呢? 1.现在微信小程序比较好,用户也比较多:利用微信小程序做推广,效果好: 2.小程序的痛点在于不需要在手机里额外安装app,利用微信提供的入口,用时扫码,用后清除: 3.开发周期与开发难度小于原生app. 技术栈 采用前后端分离 1.Vue全家桶 2.mpvue 3.koa2+mysql 构建过程 1.安装工作 a)安装好node b)安装vue-cl…

距离上次更新已经一个月了,这期间对WordPress版微信小程序 做的不少小的更新和性能的优化,此次版本更新推出了两个比较重点的功能:点赞和赞赏.同时,优化了文章页面的功能布局,在评论区把常用的功能:转发,复制,点赞,赞赏,都集中在一个操作面板,同时为了不占用文章页面的空间,做了隐藏. WordPress版微信小程序开放源码地址:https://github.com/iamxjb/winxin-app-watch-life.net 了解程序的开发历程及开发技术,建议看看相关版本的更新文章: 1.…

用微信小程序做了一个动画,效果如上图: 代码: js: Page({ data: { isPopping: false, animPlus: {}, animCollect: {}, animTranspond: {}, animInput: {}, animCloud:{}, aninWrite:{}, }, //点击弹出 plus: function () { if (this.data.isPopping) { //缩回动画 this.popp(); this.setData({ isPo…

本文链接:https://blog.csdn.net/u012667477/article/details/80940578前言:应项目要求,需要使用微信小程序做支付,写完后告知手续费太高方案不予通过(宝宝心里苦,但宝宝不说).此次开发在因站在巨人的肩膀上顺利完成. 微信支付文档传送门:https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_3 1.开发工具:Eclipse+Tomcat+微信web开发工具 2.开发环境:…

问题: 在开发过程中会发现微信小程序有很多功能都还不能满足我们的需求,谁叫客户就是上帝呢,前几天小编遇到了这么个问题,就是用微信小程序上传文件,但是还以为微信带有这个模块,可是查了许久还是没有找到,只找到了选择上传图片的模块(wx.chooseImage),就是找不到文本文件的模块,于是上网查了个遍还是没找到这样的模块,最后查了解决这需求的方法说是要引用外部的 html 游览器上传的方法才能解决,这要怎么引用呢??? 解决方法: 其实微信小程序还是留了那么一条天路,就是可以直接引用HTML页面,…

问题场景 所谓悬浮窗就是图中微信图标的按钮,采用fixed定位,可拖动和点击. 这算是一个比较常见的实现场景了. 为什么要用cover-view做悬浮窗?原生组件出来背锅了~ 最初我做悬浮窗用的不是cover-view,而是view. 这是简化的代码结构: index.wxml: <view class="move-view" style=" top:{{top}}px;left:{{left}}px;" bindtap="goToHome"…

微信小程序由于适用性强.逻辑简要.开发迅速的特性,叠加具有海量活跃用户的腾讯公司背景,逐渐成为了轻量级单一功能应用场景的较佳承载方式,诸如电影购票.外卖点餐.移动商城.生活服务等场景服务提供商迅速切入了. 为了贴合实际的应用情况,本篇以豆瓣评分小程序为参考样例,边做边学小程序的入门开发知识. 目录 效果图Demo源码开发环境了解官方样例 开发者工具 样例源码结构开发实战 底部Tab卡页 分析开发需求 评分条模板 rpx长度单位 数据绑定 条件渲染 列表渲染 电影海报模板 模板的使用 区块模板 主…

这几年生意不景气,这是很多人的共识.从2009年开始,各种专家就判断"明年经济是最差的一年."然后,这个明年,一直"明"到了2018年,到最后,我们发现,经济就没好过,一年比一年差. 工厂倒闭.商店关门.电商企业倒闭:虚拟经济都是泡沫,实体经济都是累赘:产品越来越难卖.消费者个性化需求越来越多,售后体验和服务要求越来越高--实体店倒闭潮,这几个词,已经在新闻上被用了好几年. 一边是马云的搞的电商,淘宝,打价格战,压低利润空间,一边是房地产飙升,房租涨涨涨~好不容易出…

接上文:微信小程序开发06-一个业务页面的完成 github地址:https://github.com/yexiaochai/wxdemo 我们首页功能基本完成,我对比了下实际工作中的需求,完成度有70%以上,如果再花一两天时间,便能跟之前工作做的差不多了,今天我们继续实现一个页面列表,便结束这次的学习,后面几天要出差,所以总结性的文章本周未必能出来,静待下周吧. 这里考虑demo复杂度,列表页功能完成度也仅仅完成主功能模块,与真实工作完成度对比60%左右吧,于是我们开始愉快的代码,首先是将我们…

前言 最近有在做小程序开发,在开发的过程中碰到一点小问题,描述一下先. 本人在职的公司对于后台获取的 json 数据需要做过滤转义的很多,不同的状态码会对应不同的文字,但是在微信小程序中又没有类似 vue 中的 | 方法进行快速的过滤,大都是用数据遍历洗数据来实现的,说实话,很麻烦,即使提取了公共方法那也麻烦,总之要洗数据就麻烦 WXS 为何物 在上代码之前先简单的介绍一下 WXS 是什么,以及和 javascript 有什么区别,虽然官方文档中都有,但我认为博客的存在意义就是尽量减少看官们的页…

  自2017年1月9日张小龙宣布万众瞩目的“微信小程序”正式上线了.以名字看,感觉像是突出了“将你的程序接入微信”的意思. 我们此前分析过微信的功能迭代节奏:一般微信重要的功能规划周期,大约会在在9-12个月的时间里.这样算起来,这次应用号从规划到上线,节奏也蛮符合. 我们先看下面这张据传是张小龙发在朋友圈关于小程序的评论: 关于这张图片,前半段我理解为小程序是微信内的云端应用,不是原生App,对用户来说很轻(对开发者来说也会更轻). 后半句则应该理解为:用户用完就退出程序,离开别人的服务,但…

随着正式开放公测,微信小程序再次万众瞩目,越来越多的企业和个人涌入到小程序开发的大军中.小程序究竟是什么?适合做小程序的产品有哪些?做小程序需要提前准备什么?如何零基础学做小程序?此文,将列出OSC上优质的资源供大学了解和学习. 一.新手入门 有关小程序的入门,首选自然是官方文档. 它解释了基本概念,有简单的设计指南和开发教程,能让你很好地对小程序有初步理解. 微信小程序产品定位及功能介绍 微信小程序设计指南 微信小程序简易教程 微信小程序运营规范 看完这些你会发现,小程序主打的是比APP更轻量…

基于spring-boot的社区社交微信小程序,适合做脚手架.二次开发 代码地址如下:http://www.demodashi.com/demo/13867.html 1 概述 笔者做的一个后端基于spring-boot的社区社交微信小程序,可以作为开发的脚手架,开发速度快,灵活,前后端分离,很适合二次开发.数据主要存储在MySQL上,笔者封装了一个MysqlGenerator.java工具类,结合spring jdbc,做数据库操作很方便.另外提供了一个文档系统,后端人员产出接口直接写出mar…