微信小程序
文章平均质量分 68
車句
行好事 莫问前程
展开
-
mpvue项目中使用第三方UI组件库
原文链接最新声明本文编写时间较早,随着时间的推移,mpvue及其周边生态越来越完善,文中的案例已经不适合在项目使用。希望大家参考其他更新的文章~简介微信小程序上线已有一年多时间啦,自美团的mpvue(基于 Vue.js 的小程序开发框架,从底层支持 Vue.js 语法和构建工具体系)问世也过去了好几个月。前端技术日新月异,小程序的UI框架也层出不穷。例如:WeUI: ...原创 2018-07-16 17:57:01 · 49729 阅读 · 12 评论 -
挖坑指南: 微信小程序this.setData({ })的骚操作
如果想设置 this.data.filter.Room 的值, 无法直接通过动态 key 的方式设置selectedFilterItem(e) { var dataset = e.currentTarget.dataset this.setData({ // 直接使用变量的形式是行不通的 filter[dataset.key]: dataset.value }) ...原创 2019-01-05 10:57:07 · 1607 阅读 · 0 评论 -
微信小程序:globalData和Storage数据存储的错误示例
前言在小程序登录是,将返回的用户数据,存储在globalData中和storage中。// 存储的数据是一个对象wx.setStorageSync('userAuthData', user.data.data);this.globalData.userAuthData = user.data.data;之前,数据更新了,为了避免频繁的数据请求,要更新之前的用户数据(更新某字段的值...原创 2018-10-10 18:33:10 · 16875 阅读 · 3 评论 -
微信小程序:惊!CSS导致JS事件未触发...
前言研究navigationStyle:costom,使用自定义的导航。老规矩,先上设计稿:要实现左侧的自定义导航,该导航有一个圆角的边框,圆角的啊~开始移动端经典的1px问题+圆角边框。早期,在.less文件中定义了.border-1px()用于解决移动端1px问题,后期为了兼容圆角边框,又添加了几个变量。// 添加一个设置圆角的.border-1px(@color:...原创 2018-10-08 16:54:22 · 1008 阅读 · 0 评论 -
微信小程序:高德地图在小程序中的实践(含静态地图)
前言前人栽树,后人乘凉。记录下工作的点点滴滴,让同道中人少走弯路~来看看需求和问题:房产相关的项目,详情中需要显示房源地址,底部要有固定的菜单(不是tabbar),房源数据过多,数据超过一屏时,map组件从底部进入,会穿透固定在底部的菜单,导致页面闪烁。开始参考一些行业大佬的产品,发现他们使用的只是一张图片,没有使用原生的map组件去实现,我想可能也是开发中遇到了坑。。鉴于我司...原创 2018-09-29 12:46:46 · 8411 阅读 · 0 评论 -
微信小程序:wx.navigateBack()时弹窗一直显示
前言小程序使用服务需要用户绑定手机号,在进入页面时,判断用户是否授权,未授权的话,弹窗组件(自定义的)显示onShow(){ let isBind = xxx if(!isBind){ // 获取弹窗组件(自定义的)实例 this.bindTip = this.selectComponent('#bindTip') // 调用弹窗组件的方法,显示组...原创 2018-10-11 09:09:38 · 2932 阅读 · 0 评论 -
微信小程序:如何在小程序中使用骨架屏?
原文链接前言骨架屏,就是在页面数据尚未加载前,先给用户展示出页面的大致结构,直到请求数据返回后,再渲染页面,以优化用户体验。骨架屏在前端的应用已经很普遍了,之前接手vue的项目,没能用上,现在开发小程序,想在小程序中试一试。看着美团外卖小程序的骨架屏,很nice~开始没有使用骨架屏的经验,只能靠搜索引擎了。找找找....终于在网上找到一份很好的例子,作者是腾讯的,代码已经在gi...原创 2018-09-20 13:14:36 · 14530 阅读 · 3 评论 -
微信小程序:伪input组件的样式
前言项目中为保持界面设计的一致,需要用view模拟input的样式。开始我们可以通过placeholder-class为input设置holder文字的样式,然后将此样式应用在view上,来看看效果。可以看出,虽然同样适用了holder的样式,但是原生的input组件距离底部的距离更多。审查元素看一看:原来原生input组件,自带min-height属性。解决...原创 2018-09-15 11:23:18 · 5838 阅读 · 0 评论 -
微信小程序:跳坑指南——常见问题总结
前言记录几个微信小程序,在真机上预览遇到的问题。开始上传图片失败描述:在开发工具上传正常,打开调试,上传正常解决:在小程序后台,要添加uploadFile合法域名 下拉刷新不回弹描述:下拉刷新时,页面没有回弹解决:在onPullDownRefresh(){ }中,主动调用wx.stopPullDownRefresh() 导航栏显示加载动画wx.showNavigationBarLo...原创 2018-09-25 15:46:42 · 468 阅读 · 0 评论 -
微信小程序:使用externalClass自定义组件样式
前言之前分享过一篇关于自定义小程序密码/验证码组件的博文,一开始写的时候是解决设置安全密码的需求,现在提现时,也是需要使用到,但是样式稍有不同,所以希望能够通过自定义样式,实现复用。开始看官方文档,万变不离其宗。官方文档就是最基本的游戏规则,我们可以根据官方的示例,照葫芦画瓢,实现我们自己的功能。实践在密码输入组件中,声明externalClass字段:在使用组件的页...原创 2018-09-19 16:45:46 · 15571 阅读 · 1 评论 -
微信小程序:如何在{{}}中使用函数?WXML+WXS
前言在项目中涉及到百分比的计算,js浮点数运算会出现精度问题,造成小数位数过多,因此想在模板语法中对值进行相应的处理。开始按照常规用法,使用js中的toFixed()进行处理:<view>¥{{(cashMoney*0.02).toFixed(2)}}手续费(费率2%)</view>报错,无法直接使用,也不能调用js中的方法。实践既然{{...原创 2018-09-19 09:54:39 · 25107 阅读 · 2 评论 -
微信小程序:外部字体引用以及遇到的一些问题(字体图标/字体文件)
前言设计稿中,有用到手机未内置的第三方字体。如何在微信小程序中使用呢?开始触类旁通,小程序的wxss语法与css是一致的。我们首先想到的是@font-face{}。没错,它就是今天的主角~在正式开始之前,我们先来看看两个常见的概念:字体文件:引用该类型文件,控制文字的显示形态。字体图标:使用字体代替图标显示。一开始,参照网上的方法,将对应的字体文件,上传到https://...原创 2018-09-12 11:38:47 · 25994 阅读 · 4 评论 -
微信小程序:有赞小程序UI( vant-weapp ) actionsheet组件源码窥探
原文链接前言还是微信小程序项目,虽然有一些优秀的第三方组件,但是秉持高度还原UI设计稿的原则,没有直接在项目中使用。遇到一些类似的逻辑时,可以参考一下这些开源项目的实现方式。难的往往只是某一个点,有时候我们需要的只是一张地图(PS:来自硬派脱口秀节目《知识就是力量》)。开始为什么研究actionsheet组件?因为项目中设计较多的交互动画,想要自己同一封装,可多处使用。一方面可...原创 2018-09-06 13:17:18 · 37937 阅读 · 3 评论 -
微信小程序:自定义验证码/密码输入框组件
前言微信小程序中,要为用户提供安全密码,用于后续的操作。UI设计稿类似微信的安全密码设置,需要两次输入,验证密码一致。之前刚入坑的时候,就收藏了一些小程序相关的好案例,没有前人铺路,也不会有今天的这篇文章。在此特别鸣谢,NAMECZ的博文(https://blog.csdn.net/namecz/article/details/79892451),文章的思路很巧妙。正文项目中多次使用...原创 2018-09-04 16:25:29 · 20664 阅读 · 4 评论 -
mpvue如何传递原生事件参数和自定义参数
原文链接前言写表单,用到一些input组件,需要在表单数据提交前,对数据作简单的校验。虽然最后发现了真正的问题,但还是想记录下这个过程。问题描述只是把电话的验证写在了姓名验证之前,误以为input组件与小程序原生组件同名,以至于无法使用v-model进行数据的双向绑定(其实是可以正常使用的,)。于是,使用小程序原生的bindblur方法,在失去焦点时,手动给变量赋值。开始b...原创 2018-07-20 08:06:35 · 10227 阅读 · 0 评论 -
微信小程序: canvas设置渐变颜色无效
试一试提高基础版本库 试一试~原创 2019-01-11 15:07:20 · 1773 阅读 · 1 评论