小程序实际开发注意事项
谈谈我在小程序开发中遇到的一些坑
最近在写一个招新小程序，本来在学的时候感觉挺容易的，但是在实际开发中就会遇见那些奇奇怪怪的坑然后在那里卡很久花费了很多时间，于是我就把这些记录下来了。这篇文章主要是写我在完成这个小程序过程中遇到的问题，会持续更新到我完成这个小程序。
1. 登录授权
当用户进入小程序的时候，如果我们要获取用户的头像和昵称，就需要向让用户授权。在以前微信小程序开发中，是可以用getUserInfo来获取，但是现在要通过getUserProfile来获取用户信息，详见 小程序官方公告。
从中可以看到，现在我们要是用getUserInfo获取用户的头像和昵称，就是默认的匿名数据，而不会有进入小程序的那个用户的头像昵称，效果如下：
因此如果要获取用户的真实信息的话，就要通过getUserProfile来获取，在这里贴上 getUserProfile的开发文档。其中要注意dec是必须传递的参数，而且，这个接口在获取用户信息时，需要页面产生点击事件（例如 button 上 bindtap 的回调中）后才可调用，每次请求都会弹出授权窗口，用户同意后才会返回 userInfo。
不过如果你不想经过授权就获取用户的头像和昵称，也可以通过标签 open-data直接获取。
// 获取头像 <open-data type="userAvatarUrl"></open-data> // 获取昵称 <open-data type="userNickName"></open-data> 复制代码
2. 合法域名
在开发的时候，我们经常为了方便开发，开启“不校验合法域名”，这就是为什么出现了在开发者工具中和预览中结果不同的原因，如果想要相同，应该取消详情中的“不校验合法域名，....”。如果还是不一样的话还有一个问题就是可能你接口写错了hhh，可以尝试以下真机调试看看接口是否出问题了。不过在日常开发还是检查把这个“不校验合法域名，...”开着的。
3. 确认类型
在我们设置动画或者设置一些其他属性的时候，一定一定要注意这个属性值到底是number类型还是string，这两者容易混，所以在确定类型之后要让这个值toString一下或者parseInt一下。比如下面这个例子，刚开始我没有加parseInt字段，在电脑上预览时没有问题的，但是在我真机调试的时候它就不动了。我才发现此时left: NaN rpx。因此一定要确认好类型。
4. 适配不同型号手机
在做下面这个动画的时候，尽管我都是使用rpx来设置高度，但还是出现了在ipad中不适配的情况。我调了好久都没办法在两种设备上面适配。所以我最后是通过给手机和ipad设置不同的样式来实现适配。通过wx.getSystemInfoSync()来获取型号，用正则匹配来修改样式。
5. cookie
小程序开发中我们需要获取到后端给的cookie进行请求验证，但不同于浏览器，微信并不会自动帮我们保存cookie，我们要维持会话需要自己来保存cookie，在请求的时候在请求头加上cookie。我这里用的是本地存储。
wx.setStorageSync('cookie', e.cookies[0]); 复制代码
6. 层级问题
小程序中，在真机调试的时候，发现textarea标签的层级太高，导致文字浮在上面，影响布局。可以用下面这个方法。cover-view
作者：Mannqo
链接： https://juejin.cn/post/6991124557897662495
来源：稀土掘金
文章被以下专栏收录
