【微信小程序】自己遇到的问题和解决方法 （有水货有干货，持续更新）

这一篇是写给我自己看的，是我写小程序时遇到的一些问题，现在看来很普通，但是为了纪念我的青春，我还是决定写出来来鼓励我自己继续进步。

1、onShow，在页面显示的时候触发此函数，当页面中出现新页面或者遮盖后都会触发，比如地图的选择，和照片的选择等，在返回的时候都会触发此函数，但是在多数情况下这种是不需要执行onShow刷新页面的，这时候为了区分是上个页面返回触发的onShow还是本页面遮盖触发的onShow，需要加一个参数用来判断触发的情景。

2、不用的生命周期函数最好去掉：

①可以减少代码量；

②使代码更加清晰；

③能够减少出错

3、避免把局部变量存储为全局变量供其他页面使用，因为这样的操作，会使从其他渠道进来本页面的时候变量为空。

4、wx:if 和 wx:for 不能写在同一个标签上。

5、setData 虽然处理的很快，但仍需要时间，要考虑产生异步的情况。

6、频繁触发require请求数据，造成数据错误。要在请求函数中加入防抖程序。

7、form表单中添加图片，更换图片以及视频操作，要注意将新老图片区分开。老的图片已经上传过，不能与新加入的图片一起上传。

8、小程序分享页面使用系统默认截图的时候出现 页面高度过高，分享时候截取的图片为黑色的情况，解决方法：分享页面的时候采用自定义图片。

9、newDate 和 getTime 在ios 和 Android 的端的差异：

① new Date()

     a、如时间格式为 "2020-4-9 00:00:00"  

           在Android上可以直接用 new Date() 解析

           在IOS上需要先将时间格式中的" - "换成" / "   如  2020/4/9 00:00:00

           "2020-4-9 00:00:00".replace( /-/g,'/')   然后再使用new Date() 解析

①：ios端，使用getTime方法 只能识别到 "YYY-MMM-DDD"，也就是年月日

②：Android端， 使用getTime方法，能够识别到 "YYY-MMM-DDD  hh:mm:ss", 也就是年月日 时分秒

 

10、小程序js页面，避免在page外部设置变量，在page外部设置的变量为页面的全局变量，不会随着页面的重新载入而重置，也不会随着页面的销毁而销毁。

11、系统默认一段不含空格的字母或数字串为一个单词，系统默认不会从一个单词中间断行。

       解决办法： ①：word-break:break-all ：只对英文起作用，以字母为换行依据

                          ②：word-wrap:break-word ：只对英文起作用，以单词作为换行依据。

12、表单元素可以放置在<from></from>标签之外的任何地方，点击提交按钮仍然合一收集到当前页面的所有表单元素的值。

13、object.assign()：es6新增属性  用于将所有可枚举属性的值从一个或多个源对象复制到目标对象，并返回目标对象。

        用法： object.assign( { } , source1 , source2  ); 

                    这三个参数分别为 目标对象， 资源1 和 资源2 ；

        用途：①：合并对象  （函数中的参数合并用的居多）       ②：深拷贝对象

        注意：后放入的资源若与之前的资源有重复的部分，那么后放入的资源的这部分会覆盖其前放入的资源。

14、switch语句中  case 与 值之间的判断 用的是   ===  全等。

15、小程序中，如果一个 数组/对象 属性值改变了，那么之前引用的这个数组也会跟着变化，在语法上叫做 “引用赋值”

16、小程序 事件传参 data-xxx  中， xxx无论大小写，获取的时候都以小写为准。

17、小程序 input 框出现文字未占满 input 框情况下被隐藏或者换行

        原因：因为 input 的默认尺寸单位为rem；当你的input宽度为百分比的时候，会出现上述情况

        解决办法： 外层包裹view，百分比宽度作用于外部view，input默认撑满view即可。

18、if 判断有无花括号的意义

        ①无花括号    if 判断下 的第一行代码 归if 管

        ②有花括号    花括号内的代码 都 归 if 管

19、url传参 ? 和 & 之后的字段之间不能有空格， 否则会报错

20、小程序中如果图片资源体积过大，在开发者工具上可正常显示，在手机上预览则加载不了图片

21、wx:for-item  指定数组当前元素的变量名 ( 多维数组时使用 ) 

        wx:for-index 指定数组当前元素的下标 ( 多维数组时使用 )

        wx:for-items 等同于 wx:for  ,  不建议试用，容易与 wx:for-item  记混淆

22、元素设置flex布局之后 子元素的float、clear、vertical-align属性失效

23、wxs注意事项： 

        注意：不能调用 javascript 中定义的函数或者变量，也不能调用小程序提供的 API，他的运行环境和 javascript 是隔离的

         ① 不支持let，声明变量用var

         ② 不能使用new Date() 获取当前时间，应该使用getDate获取。

 24、 json 数据的删除  用 delete    比如 delete json.aaa;

 25、 str.split(“分隔符”)  将字符串以分隔符为表示切割成数组

           Array.join("分隔符")   将数组以分隔符为连接转化为字符串

 26、在image中 mode 设置为 widthFix 可以不改变图片尺寸比例，自适应展示图片

         但是在实际页面中，该模式下的图片，初次加载时，图片会先被拉长，然后正常，视觉效果及其不好。

         解决办法：height：auto;