随笔分类 - 微信小程序
摘要：最近在uniapp打包成微信小程序的项目中第一次用到了MQTT。使用比较简单，但是还是遇到了一些问题。在此记录一下。 官方文档：MQTT Github 官方MQTT测试工具：MQTTX。测试工具使用说明 MQTT的js文件：mqtt.min.js 先上一点注意事项： （1） MQTT.js 一个 M
阅读全文
摘要：函数防抖和函数节流都是老生常谈的问题了。这两种方式都能优化 js 的性能。有些人可能会搞混两个的概念。所以，我以自己的理解，来解释这两个概念的含义。并且列举在小程序中这两个方法的使用。 函数防抖： 英文 debounce 有防反跳的意思，大致就是指防止重复触发。 那么，函数防抖，真正的含义是：延迟函
阅读全文
摘要：这次遇到个问题： 1. 动态的添加指定的view内容。。嗯。。很简单。。wx:for就搞定 2. 动态添加的内容中有input，最终获取值的时候，要获取到所有input的值并且是一个数组。。嗯。。 3. 动态删除指定的已经添加的view内容。。 思路： 1. wx:for 循环view，添加一个，w
阅读全文
摘要：以前写过一篇3d轮播，就是这篇，使用的方法比较笨拙，而且代码不简洁。这次发现swiper也能实现同样的效果。故记录一下。 先看看效果： wxml： （1） previous-margin 和 next-margin 表示前边距和后边距，官网文档有说明的。 （2） swiperChange 就是swi
阅读全文
摘要：文字的多行处理在dom元素中很好办。但是canvas中没有提供方法，只有通过截取指定字符串来达到目的。 那么下面就介绍我自己处理的办法： wxml： canvas肯定要一个画板容器啦，记得设置宽高哦，小程序中默认宽高是300px和150px js：在page中 （1） measureText（）.w
阅读全文
摘要：我以前一直以为微信小程序不能动态获取view元素的宽高。但是自从看到： wx.createSelectorQuery() 这个api接口，以前的某些问题就能得到解决了。。。 那么，这个api接口怎么用呢？ 首先，这个接口会返回一个对象实例。 下面的就是返回的对象实例 obj 的所有内容。 返回的 o
阅读全文
摘要：知识点：组件，animation，获取当前点击元素的索引与内容 微信小程序中没有select下拉选项框，所以只有自定义。自定义的话，可以选择模板的方式，也可以选择组件的方式来创建。 这次我选择了组件，这样只需引入组件和添加数据，其它的不用管，就能实现多个地方重复使用了。 第一步：创建组件所需的文件
阅读全文
摘要：微信小程序获取用户当前位置有三个方式： 1. wx.getLocation（多与wx.openLocation一起用） 获取当前的精度、纬度、速度。不需要授权。当type设置为gcj02 返回可用于wx.openLocation的坐标2. wx.chooseLocation 需要授权，打开地图选择位
阅读全文
摘要：效果如下： 我用了很笨的方法实现的，大致就是： 1.当前点击的div（view）如果前后都有内容，那么，当前div（view）就设置到中间，前一个就设置到左边，前一个的前面所有全部设置到最左边，后面一个设置到右边，后面所有设置到最右边 2.当前点击的div（view）如果前面无内容，即第一个，那么，
阅读全文
摘要：效果图： 实现原理：点击按钮，往需要动画的div中添加或移除拥有动画效果的class。 由于微信小程序中不能操作page这个根节点，所以，只有用一个div（view）来模仿page根节点。 1.结构 上面的是最主要的结构，其它的内容就不贴了。 (1) isFix是切换动画名的状态 (2) r-box
阅读全文
摘要：pc或者移动端实现换肤功能还是比较简单的，大致就是需要换肤的css，还有正常的css；把当前皮肤类型存入本地；然后通过js读取并判断当前应该加载哪套css。 由于微信小程序没有操作wxss的api，所以实现的方式有点不一样，大致如下： 1.需要换肤的wxss，正常的wxss。 2.每个页面都引入换肤
阅读全文
摘要：怎样实现jq中的slideUp或者slideDown这种动画效果呢，我的思路是用css3的transform: translateY（）属性，给需要动画的元素添加上一个动画class。 先上效果图： 1.蒙层的结构： 注意：三元运算符里的slideup和slidedown一定要加上引号 2.蒙层的其
阅读全文
摘要：需求：发送页面通过url传值，接收页面获取值。 发送页面的js 或者发送页面用navigate 组件：<navigate url="xxx?id=10"></navigate > 如果id是page里面data的数据。是动态的，那么可以写成： <navigate url="xxx?id={{pid}
阅读全文
摘要：小程序中的轮播图很简单，官方都有例子的，但是唯一的缺陷就是swiper是固定死的150px高度，这样如果传入的图片大于这个高度就会被隐藏。辣么，怎样让图片自适应不同分辨率捏。 我的思路是：获取屏幕宽度，获取图片的宽高，然后等比设置当前屏幕宽度下swiper的高度。 1.结构 swiper的各个属性在
阅读全文
摘要：在微信小程序中怎样实现获取验证码的倒计时功能捏，倒计时的原理是一样一样的，就是某些地方需要注意。 第一步：结构 注意：微信小程序中要用到两个按钮，不像HTML里面直接一个按钮就解决了。如果非要一个按钮的话，就需要把不变的内容即“获取验证码”与“秒后重新发送”装在一个数组里面，然后判断什么时候选择显示
阅读全文
摘要：1. √ 这种错误多半是该js文件中没有Page这个方法，就算是空的js也必须要把Page（{ }）写上去 2. √ 这种错误多半是该json文件没有内容，所以必须要加上{ }，就算是空内容也要加上{ }。 补一句：小程序里json文件中不允许有注释不然会报错。 3. 未解决 这个问题我不知道怎么解
阅读全文
摘要：微信小程序里面的自带弹窗icon只有两种，success和loading。有时候用户输入错误的时候想加入一个提醒图标，也可以使用wx.showToast中的image来添加图片达到使用自定义图标的目的；但是如果图标是字体，或者提醒的内容有很长捏（小程序中提醒的内容最多只能设置7个字，多了会被隐藏），
阅读全文
摘要：1.下载阿里图标，解压出来之后有个.css文件 然后复制这css里面的所有代码 2.新建一个wxss文件，例如我新建的就是iconfont.wxss，然后把刚才复制的所有代码，复制到这个文件里面去。 3.在需要使用到图标的页面导入该wxss文件。例如： 这样在该wxml页面就可以使用图标了
阅读全文
摘要：1.安装less。 安装好node之后，打开运行-->cmd-->进入安装node的文件夹目录-->输入 npm install -g less. 然后自动就会在C:\Users\Administrator\AppData\Roaming\npm\node_modules这个目录下安装好less了。
阅读全文
浙公网安备 33010602011771号