微信小程序
「已注销」
这个作者很懒,什么都没留下…
展开
-
微信小程序 —— 自定义带进度条的音频播放控件audio
在使用微信小程序的音频控件(audio)的时候发现居然控件中竟然没有播放进度条。例如:而微信小程序自带的音频空间(audio)光秃秃的:所以我就想了个办法,做了一个动态的音频进度条,像这样音乐进行到百分之几,进度条走到百分之几:-wxml<audio bindtimeupdate="MusicStart" bindended="MusicEnd" wx:for="{{MusicList}}"原创 2017-10-19 15:56:40 · 22745 阅读 · 2 评论 -
微信小程序 —— 瀑布流简单写法(css3属性加wx:if判断轻松实现)
css3中的column-count 规定元素应该被分隔的列数。纯css3完成瀑布流具体思路: 1. 先用css3中的column-count属性把页面元素分为俩列及多列。 2. 再用wx:if="{{item.id%2!=''}}来判断那一列的哪些元素需要隐藏,哪些元素需要显示。具体代码:wxml:<view class="free-panel-title">纯css3瀑布流布局 ( 利用原创 2017-11-09 15:19:36 · 9429 阅读 · 0 评论 -
小技巧 —— 多行文本尾部以“...”缩略
-webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),限制在一个块元素显示的文本的行数。它没有出现在 CSS 规范草案中。为了实现该效果,它需要组合其他外来的WebKit属性。 常见结合属性: 1. display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。 2. -webki原创 2017-11-15 10:56:53 · 789 阅读 · 0 评论 -
微信小程序 —— 验证码获取倒计时效果
wxml<button disabled='{{disabled}}' data-id="2" bindtap="getVerificationCode">{{time}}</button>jsvar interval = null //倒计时函数Page({ data: { date:'请选择日期', fun_id:2, time: '获取验证码', //倒计原创 2017-11-15 11:34:24 · 20644 阅读 · 9 评论 -
微信小程序 —— 自定义picker选择器弹窗内容
微信小程序中定义好的几种picker选择器,不管是日期选择器还是地区选择器,或是其他的都有定死的样式和内容。例如但是大多数开发程序的情况下还是需要自己写样式的,或是内容的。例如:-wxml <view class="free-btns" style="margin-top: 10vh;background:none;"> <button class="free-btn" bindta原创 2017-10-13 18:11:57 · 14703 阅读 · 1 评论 -
微信小程序 —— 解决自定义弹窗出现后,蒙层下的页面仍可以滚动的问题
在微信小程序开发中,会碰到自定义弹窗出现后,蒙层下面的页面仍可以滚动的问题。例如:解决方法:1. 先点击出现蒙层时,页面的最外层view:height:100vh (灵活设置,蒙层出现时height:100vh;,反之height: ;)2. 在蒙层的最外层view中加入catchtouchmove=”preventTouchMove” -wxml <view class="Montmor原创 2017-11-30 09:54:33 · 15058 阅读 · 3 评论 -
微信小程序 —— 苹果机的兼容总结
苹果机的下拉刷新微信小程序在app.json中配置 “enablePullDownRefresh”: true,(true不能加双引号)原创 2017-11-20 09:25:09 · 4525 阅读 · 0 评论 -
thinkphp5 —— 引入public目录下的css/js路径问题
总目录:index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>LECHENG 管理后台</title> <link rel="stylesheet" href="../../public/index/css/index.css"/> <script src="..原创 2017-12-01 11:55:42 · 15444 阅读 · 0 评论 -
微信小程序 —— 微信小程序解析html富文本插件wxParse
下载并把wxParse放到小程序的目录中下载地址https://github.com/icindy/wxParse把wxParse放在与page同一级目录 wxParse里的emojis包是可要可不要的。引用wxParse - wxml中<import src="../../wxParse/wxParse.wxml" /><view cl...原创 2017-11-24 09:14:42 · 8773 阅读 · 0 评论 -
微信小程序 —— 在微信小程序里面退出小程序
微信小程序的开发文档中没有直接完成这样功能的api,但是可以用 wx.navigateBack 来实现。1. 如果在index.wxml中直接退出; onLoad: function () { wx.showModal({ title: '提示', content: '您的帐户已冻结,请联系客服解除。客服电话' + app.globalD原创 2018-01-17 20:50:16 · 39083 阅读 · 6 评论 -
微信小程序 —— web-view组件配置及使用
web-view 组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。bug&tips:每个页面只能有一个,会自动铺满整个页面,并覆盖其他组件。网页与小程序之间不支持除JSSDK提供的接口之外的通信。在iOS中,若存在JSSDK接口调用无响应的情况,可在的src后面加个#wechat_redirect解决。微信小程序使用web-view组件开发原创 2017-11-03 11:05:53 · 8116 阅读 · 2 评论 -
微信小程序 —— 多选选中之后改变样式( 2 )
WXMLview class="flex-wrap" wx:for="{{comments}}" wx:key="{{comments}}"> <image mode='widthFix' src="{{item.url}}"></image> <view class="left"> <view class="top">原创 2017-11-13 09:42:49 · 5224 阅读 · 1 评论 -
微信小程序 —— 多个div(多个微信小程序view)横向排列的便捷方法
在写自适应div( web端 )或view(微信端)的布局时,可以用以下俩种方法进行便捷布局 :利用外层div或外层view的display : flex ; flex-flow : row;利用外层div或外层view的white-space:nowrap;属性 white-space属性值 normal 默认。空白会被浏览器忽略。 pre 空白会被浏览器保留。其行为方式类原创 2017-10-19 11:12:27 · 35488 阅读 · 0 评论 -
微信小程序 —— 图片自适应后去掉底部的白边
在微信小程序中有一个图片的小bug,当一个image放到一个view中,或者是一个页面放入一个长长的image,宽度和高度的自适应很好实现,但是实现之后图片的底部依旧会有一个白边。例如- 小图(无需占满整个屏幕的)解决代码 - wxml <view class="free-images"> <image src="{{image_src}}"></image> </view> - wxss原创 2017-10-12 14:37:47 · 18786 阅读 · 0 评论 -
微信小程序 —— 自定义长圆形view
很多情况下遇到的圆形都是用“border-radius: 50%;”做的,但是遇到 这种效果的呢?换成以前的我,果断ps一张图片做背景,可这个始终不是解决办法。通过“ border-radius: 0.8em; ” 可以解决这个问题。 em: 1em 等于当前的字体尺寸。 2em 等于当前字体尺寸的两倍。 例如,如果某元素以 12pt 显示,那么 2em 是24pt。 在原创 2017-10-11 23:05:27 · 8519 阅读 · 0 评论 -
微信小程序 —— button按钮去除border边框
在开发微信小程序组件框架时,我遇到了一个问题,微信小程序中的button组件有特定的css,背景可以用:“background:none”去掉,但是边框再用“border : none”去掉就不可以了,这也是微信小程序与h5的不同之处。但是在微信小程序中使用:after选择器就可以实现这一功能。原创 2017-10-11 22:11:46 · 63502 阅读 · 4 评论 -
微信小程序 —— 上传文件到服务器(例:上传图片到服务器)
上传图片到服务器:1.先在前端写一个选择图片的区域来触发wx.chooseImage接口并用wx.setStorage接口把图片路径存起来。-wxml <view class="shangchuan" bindtap="choose"> <image style="width:100%;height:100%;" src="{{tempFilePaths}}"></image> <原创 2017-11-07 11:32:28 · 13124 阅读 · 2 评论 -
微信小程序 —— 动态决定页面元素显示或隐藏的技巧
在微信小程序开发中,经常遇到一些由后台控制显示(is_open : 1)或者隐藏(is_open : 0),有俩种办法:复杂办法1.先在元素的class中 class=’{{show?’true’:’hidden’}}’2.再在相对应的js中配置show的值,例 data: {show:1,}3.最后在相对应的css中定义.hidden{display:none;}简单办法直接在元素原创 2017-10-13 13:39:00 · 16015 阅读 · 0 评论 -
FreeUI 微信小程序的组件框架使用详情介绍
开源代码github地址:https://github.com/wushuxuan/PockerUI码云库地址:https://gitee.com/wushuxuan/PockerUI概述PockerUI是我个人开发的开源小程序框架版本,结合了微信的视觉规范,为其他开发者提供统一的类库。包含 badge、btn、capsule、card、cell、color、dialog、form、helper、i原创 2017-10-17 18:17:07 · 6474 阅读 · 4 评论 -
微信小程序 —— 多个view左右对齐的巧用方法(display:flex布局)
在以前写web端代码的时候,遇到俩个,三个的div平铺在一个大div中我都会用“width: 50%;display:inline-block;”这种方法来搞定,但是这样的写法很low,而且会经常有一种情况出现: 左边右边总有一个不能很好的对称但是现在有简单一个方法,可以解决这个问题: 在最外层的view(div)中加“ display: flex; ”.free-all{ disp原创 2017-10-13 11:52:27 · 48215 阅读 · 1 评论 -
微信小程序 —— 多选checkbox选中之后改变样式
原理:通过checkChange来监听所有checkbox的变化,监听函数通过e.dtail.value得到一个被选中的数组,通过选中数组checkArr[],来给原先的数据数组items[]的被选中对象的check属性置true,没有被选中的置false,在我们的wxml中,通过判断每个对象的checked属性来给他一个”is_checked”的class。wxml: <checkbox-gro原创 2017-11-09 17:20:56 · 13736 阅读 · 3 评论 -
微信小程序 —— 解决加载页面时控制台报错页面中的图片加载错误,但是图片依旧显示
在点一个链接跳到下一个页面的时候,有时候会出现:Failed to load image /pages/Image/Image : the server responded with a status of 404 (HTTP/1.1 404 Not Found) 的报错,例如:这里尽量不要把初始的变量放在onLoad函数里,把他直接定义在页面的初始数据中data里例如:原创 2017-10-16 09:40:20 · 5573 阅读 · 0 评论 -
Taro —— 开发微信小程序总结
Taro官网:https://nervjs.github.io/taro/GETTING-STARTED.html#安装及使用1、安装:npm install -g @tarojs/cli2、创建项目:taro init movies3、编译预览:小程序# npm script$ npm run dev:weapp# 仅限全局安装$ taro bu...原创 2018-06-29 09:41:03 · 3842 阅读 · 2 评论