这些小程序技巧，你敢说你一个用不到？

本身从一手看官方文档到撸过6个小程序，本身填了很多坑，也在微信社区见证了小程序一次次改版

• 分享一些以前记录的经常使用小技巧
• 我的能力有限，解决小问题，欢迎讨论指正

都是小技巧，废话很少说，上代码！

改变小程序原生组件大小

微信官方提供了一些基本组件，可是有的组件没有提供相似size的属性，咱们只须要一个css就能够解决,以radio为例：

小程序picker组件的range-key不生效

小程序picker使用过程当中发现按官方文档写完，提示列表渲染为[Object Object]，先看文档：

使用场景为若是传入组件是对象数组，你须要设置range-key来设置显示该数组中的哪一个value为列表显示内容

按照官方文档，问题出在range-key的类型，由于在{{}}中使用的都是相应数据，也就致使传入组件的不是一个string值，正确的使用方法为：

为range-key使用一个单引号包起来，或者直接使用nickname，不使用{{}}

小程序修改单页面的背景颜色

设置小程序的页面背景颜色，一开始设置了一个全局的背景颜色，在app.json的widows对象中进行设置

后来在页面中第一反应也是使用单独的json文件设置，

果断发现，没有卵用啊，页面背景仍是灰色:

解决方法，在对应的wxss文件中设置一个page类：

小程序路由传参，传递对象参数

小程序的传参方式都是经过拼接在url后面进行传参，一般只须要绑定传参id，将id绑定为{{item.id}}，在点击事件里面使用event.currentTarget的方式接受

但当你确实像要传递的参数为对象时，尤为是父子对象， 传输以前能够将对象转为json字符串

可是由于url的长度有限，对象太长，结果发现拼接在URL以后不完整，致使以后解析不出来， 因此路由传参对象时要注意，传参的对象不能太长。

接收方式：

小程序单独设置data中对象的具体属性值

这是一个新手和老手可能都会遇到的问题，由于小程序全部数据要响应，必须使用this.setData()方法， 那如今假设我有这样一个数据：

我执行只想为addressData的address属性赋一个值该怎么作？ 也许你会这样：

No，No，你不须要这样，你只须要：

就这么简单，若是你没用过你必定很兴奋，不要着急咱们把问题升级！假设我如今的数据变成了这样：

咱们如今只想把discountList数组中选中对象的click值变为1，怎么办？

No，No，你会发现这样是不行的，我教你一个简单方法：

可是！每次都要定义变量看起来就躁！因此还要再简单！再简单！

小程序接口加密时去除昵称数据含有的reshuffle表情（例如emoji）

你有没有碰见过，你要对每一个用户的微信昵称就行接口发送给后台，可是他随机的报错了…… 个人天，由于每次接口都要通过MD5加密，须要将获取的用户昵称一块儿加密发送到后台，开始毫无知觉拿过来直接扔进去加密，直到用后台人员的微信测试，中文验签失败，几周前已经调整过中文验签的签名算法，后来发现……

他的微信昵称里有3个“屁”……

具体是什么屁……

你打开你的输入法的emoji你会发现，里面有各类表情，其中就有一个屁…… 因而想到的方法，将特殊符号先去除，替换成指定符号，再扔进去加密，上代码：

至于为何不是去除特殊表情，一开始第一反应是去除就行了，后来想到万一还有人只用特殊表情作昵称……那存进去的就是空字符串，到时候拿出来显示为空的，视觉很差看。

小程序class中使用三元表达式

代码简单至极，和vue通用

去除小程序swiper组件的滚动条

小程序自带swiper组件在滚动到时候会用滚动条出现，有时候为了页面的干净，因此……干掉它！

小程序跳转写绝对路径

忘记为啥用到了，反正最后弄明白了，路径拼接以‘/’开始，你总会用到

小程序多行文本溢出显示省略号

这个问题，其实问题不大，可是解决了一会，主要缘由有2个：

1. 一开始考虑使用单行超出省略号的方式来作：

   

这是单行文本的方式，一开始想着加固定高度，后来发现设备像素问题，出现有的设备会遮住半行，忽然以为不对，应该不是这样作。

2. 被设备像素问题误导，去查找是否是不一样设备里行高变化了 后来查询到的多行注释文本里，使用伪类太麻烦，因而查到一种样式：

   

这种css只适用于webkit和移动端，因而完美使用在小程序上，可是记得不能设置固定高度！！

小程序页面设置页面高度100%

放代码：

关键代码是父元素设置position: fixed;height: 100%;width: 100%; 注意了里面的子元素不要再使用fixed，使用absolute基于父元素定位

小程序点击事件阻止冒泡处理

这个时候会出现一种状况，当我点击view时，他会跳转到指定页面，当我点击view里面的image时，他会跳转2遍指定页面，第一反应就是当年作的第一个前端项目出现的新的认知，事件冒泡。

解决方法：

在小程序中事件分为冒泡事件和非冒泡事件：

冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

其中有一行字单独说明了：

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定能够阻止冒泡事件向上冒泡。

小程序map组件不显示坐标，且出现了bing地图的标识

map地图组件使用:

使用map的过程当中出现一个问题，在onload方法中调用接口，对data中的lng和lat进行赋值，而后发现，map实际显示地图为空，没有坐标，并且下方出现了bing地图的标志，顿时懵逼，难道map组件使用的不是腾讯地图的坐标？是bing地图的坐标？不会这么丧良心吧……

后来研究发现，map组件的组件渲染是优先于接口setData的异步赋值的，致使map的渲染过程当中实际上longitude和latitude值都为空，且map只渲染一次。

最后拯救的方法是使用wx:if

初始化mapOn为false，接口赋值lng和lat以后将mapOn赋值true，渲染map！

小程序按钮点击css效果

小程序自带的button组件是有点击效果的，可是一旦自定义了class你发现 他就是一个方块，点了也是那样静静的呆在那里，没有视觉点击感……每每大多数状况下，咱们都要本身定义按钮样式 因而本身写了一套通用的小程序点击按钮效果

终于再也不那么死板……

最后

• 欢迎讨论指正，欢迎点赞呀~
• 刚完成的博客：http://118.126.111.172/ ，基于Vue+Egg.js+MySql，欢迎访问~~
• Github源码：github.com/pangxiaolon… ，欢迎给星星~~