微信小程序开发之路（四）

上周由于国庆小长假的缘故未能及时更新文章，在此说声抱歉，之后将继续周更。

好久没有写有关微信小程序的文章了，今天继续讲讲小程序的一些容易踩到的“坑”。

一、图片上传须使用wx.uploadFile()，而不是使用wx.request()

微信小程序专门提供了一个用于上传文件的API，那就是wx.uploadFile()。如果想要上传图片，同样得用该方法，并且一般情况下都是要与wx.chooseImage()结合使用。通过wx.chooseImage()可以选择本地图片或者直接拍照而返回一个临时的图片路径，再将这个临时路径传入wx.uploadFile()中后通过第三方服务器返回线上路径，这样之后我们才能随时获取到这张图片。

当然，有时候我们也可能在提交表单的时候需要提交图片，这时候我们才要用到wx.request()，提交的图片路径就是通过wx.uploadFile()返回的线上路径，而不是通过wx.chooseImage()返回的临时路径。

这两个方法的具体用法可以直接参考开发文档：https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-file.html#wxuploadfileobject。

二、微信小程序的加载动画家族

1. 下拉刷新动画

① onPullDownRefresh()
在 Page 中定义 onPullDownRefresh 处理函数，监听该页面用户下拉刷新事件，需要用户手动下拉才能触发。

② enablePullDownRefresh
需要在config（文件后缀为.json）的window选项中设置enablePullDownRefresh为true后onPullDownRefresh()才有效。

③ wx.startPullDownRefresh()
开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致，使用该方法无需用户手动下拉也能触发下拉刷新动画。

④ wx.stopPullDownRefresh()
当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新动画。

2. 导航条加载动画

① wx.showNavigationBarLoading()
在当前页面显示导航条加载动画。

② wx.hideNavigationBarLoading()
隐藏导航条加载动画。

3. 提示框加载动画

① wx.showLoading()
显示 loading 提示框, 需主动调用wx.hideLoading()才能关闭提示框。

② wx.hideLoading()
隐藏 loading 提示框。

三、page.json只能设置 app.json 中的 window 配置项的内容，并且不能写window这个键

这个“坑”看起来虽小，但是一旦你一不小心踩到了，很可能很难发现问题所在，因为就算你在page.json中写法与app.json一致，也就是说把window这个键也写进去了，小程序并不会报错，只是不会出现你想要的效果。

比如，你只想在某个页面实现下拉刷新效果，那么你在该页面的 config 中可以这样配置：

{
  "navigationBarTitleText": "下拉刷新动画",
  "enablePullDownRefresh": true
}

但是，如果你一不小心在前面加了个"window":，那么问题就来了，页面这时无法实现下拉刷新，然后你说我明明配置了"enablePullDownRefresh": true啊，接着就很有可能在这个小问题上纠结很久，所以需要谨记：page.json中不能写window这个键。

四、微信小程序中含有Imoji图片的用户昵称存储问题如何解决？

这里涉及后端数据库的问题，有时候提交表单时需要获取用户昵称并提交到数据库，但是有些用户昵称中会带有Imoji图片，这时直接保存到数据库可能会出现无法识别的问题，解决方法是将数据库字段格式改成utf8mb4格式就好。