宁皓网 微信小程序：接口 有大用

来自 https://ninghao.net/course/5229#info

在我的百度网盘  ninghao-sandbox-master.zip    ninghao-sandbox-v2-master.zip

在 http://github.com/ninghao     里面也有  https://github.com/ninghao/ninghao-sandbox

https://github.com/ninghao/ninghao-sandbox-v2 

我们先了解一下微信小程序里面的跟网络相关的接口 .. 小程序可以请求我们后端应用的接口，你可以在本地配置一下，让互联网可以直接访问到我们的在本地开发环境上的服务 .. 宁皓网有个专门的课程，叫《在互联网访问本地开发环境》，里面介绍了具体的方法 ..

在微信小程序里面可以请求的地址我们需要先去配置一下 .. 登录到小程序的后台 .. 打开设置 .. 开发设置 ..

在服务器域名，这里，我们可以把自己的后端服务的地址放到这里 .. 这里我的后端服务测试地址是 sandbox.ninghao.net ..

这里填写好了服务的地址以后 .. 可以再打开微信的开发者工具 ..

打开详情 . 域名信息 .. 这里会出现我们设置的域名 ..

我需要的后端服务接口是在本地电脑上 .. 位置是在桌面上的 ninghao-sandbox .. 在宁皓网的 github 仓库里面，你可以找到这个项目 ..

进来以后，启动一下 .. npm start

再新建一个标签 .. 用 ssh 打个通道 ..

ssh -vnNT -R 7689:localhost:8080 root@42.120.40.68

具体的方法，你可以参考 《在互联网访问本地开发环境》 这个课程 ..

现在我可以直接通过互联网 .. 访问到在我本地的开发环境上搭建的服务 .. 地址是 https://sandbox.ninghao.net ..

来自 https://ninghao.net/video/5231#info

我准备了一个 api 页面，可以在这里去试验一下小程序的接口 .. 先打开页面的视图文件 .. 在里面添加一个按钮 .. 一组 button .. 按钮上的文字是 push me .. 在按钮上绑定一个 tap 事件 .. 这个事件可以用页面的 tapHandler 方法来处理 ..

这个按钮的样式，我已经在页面的样式文件里定义好了 ..

再打开页面的主逻辑文件 .. 在里面可以添加一个 tapHandler 方法 .. 给它一个 event 参数 .. 在这个事件处理方法里面，先试一下用 wx.request 接口 ..

它可以发出 http 请求，请求可以是各种不同的类型 .. 比如 GET ，POST，PUT，或者 DELETE 等等 ..

用这个接口，我们可以向自己的应用后端接口请求数据 .. 也可以把数据从小程序这里发送给我们的后端接口去处理 ..

给它一个对象参数 .. 里面是一些配置选项 .. 先添加一个 url ，设置一下请求的地址 ..

我的后端接口的地址是 https://sandbox.ninghao.net

再添加一个 success 方法 .. 成功收到后端服务接口返回来的数据以后会执行这个回调函数 ..

收到的数据在它的 response 参数里面 .. 在函数里面，可以把收到的响应 log 到控制台上检查一下 ..

到微信开发者工具上去试一下 .. 点一下这个 push me 按钮 ... 稍等一会儿 .. 控制台上会显示请求返回来的东西 ..

具体的数据，会在这个 data 属性里面 .. header 是响应里的一些头部信息 .. 下面这个 statusCode 是响应的状态码 ..

来自 https://ninghao.net/video/5233#info

我们可以再试一下 post 类型的请求 .. 它可以把数据发送给我们的后端服务接口 .

先打开我们的后端服务接口 .. 打开一个新的目录 .. 就是桌面上这个 ninghao-sandbox ..

在这个 index.js 里面，可以再添加一个接口 ..

app.post .. 地址是 / .. reqeust .. response .. 再把表示请求的 request 下面的 body 属性输出到控制台上 ..

回到微信小程序 .. 在 api 这个页面的主逻辑里面 .. 改造一下这个事件处理方法 .. 它里面用了 wx.request 这个接口 ..

默认它用的方法是 GET .. 这里可以添加一个 method.. 把请求用的 HTTP 方法设置成 POST ..

这样这个请求里面可以带点数据 .. 添加一个 data .. 里面是要发送给后端服务的数据 .. 这里可以手工添加一点数据 .. 一个 message .. 对应的值是 hola ..

再去试一下 ..

点一下小程序上面的这个按钮 .. 会用 wx.request 接口发出一个 POST 类型的请求 .. 请求的地址是我们的后端服务接口 .. 请求里会带着数据 .. 里面有个 message，对应的值是 hola ..

你会发现，应用的后端接口会收到用 wx.request ，接口做的事就是把这个数据 log 到了控制台上 ..

来自 https://ninghao.net/video/5234#info

wx.chooseImage 可以在手机相册里选择图片，或者用相机拍照 .. 这里我们用一下这个接口 .. wx.chooseImage .. 给它一个对象参数，可以配置一下这个接口的用法 ..

count 可以设置最大可以选择的图片的数量，默认它的值是 9 .. sizeType 可以设置图片尺寸的类型 .. 它是一个数组 .. 里面有个 original 表示原图 .. 还有一个 compressed 表示压缩之后的图片 .. 默认这两个类型都有 ..

sourceType 是图片来源的类型 .. 可以是 album ，来自手机相册 .. 还可以是 camera，用手机的相机直接拍照 ..

另外还可以设置一下回调 .. 添加一个 success ，成功选择了图片以后会调用这个函数 .. 一个参数，可以是 response .. 把它 log 到控制台上检查一下 ..

回到开发者工具 .. 点一下页面上的这个按钮 .. 在模拟器上测试，这里会打开一个选择文件的窗口 .. 选择一个图像文件 ..

如果是在手机上测试的 .. 会打开手机的相册，让我们选择图片 .. 也可以选择用相机去拍照 .. 如果 sourceType 里面只有 camera，点击这个按钮会直接打开相机去拍照 ..

在控制台上会输出选择之后的结果 ..

里面有两个主要的属性 .. tempFilePaths .. 它里面是一组文件的路径 .. tempFiles ，里面是一组文件对象 ..

来自 https://ninghao.net/video/5236#info

现在我想在选择了一些图片以后，找个地方把这些图像显示出来 .. 先在页面的主逻辑里面，添加一个数据，名字可以是 images .. 选择图片成功以后，图片的路径列表会在 tempFilePaths 里面 ..

这里用一下 this.setData ，设置一下页面上的数据，要设置的是 images .. 对应的值就是 response 下面的 tempFilePaths ..

视图

再去修改一下页面视图 .. 在这个按钮的下面，先用一组 view .. 它是图像列表的大的包装 .. 上面用一个 wx:if ，做点判断，看一下 images 的 length 是不是大于 0 ，就是看一下有没有要显示的图像 .. 上面再加上一个自定义的类，名字是 preview

里面再包装一个 view，在上面用一个循环，wx:for .. 要循环的是页面上的 images 数据 .. 再用 wx:key 设置一下 key ..

这个 view 里面包装的就是要显示的图像 .. 用一个 image 组件 .. 它的 src 属性就是要显示的图像的路径 .. 这里绑定一个 item，这是循环的时候默认的项目的名字 .. 然后添加一个 mode 属性，设置一下图像的模式，这里把它设置成 aspectFill .. 这样要显示的图像会保持它原有的比例，填满它的包装容器 ..

再打开页面的样式 .. 添加点自定义的样式 .. 设置一下 .preview 下面的 image .. 先来点内边距 .. 大小是 2px，再加点外边距 .. 大小也是 2px .. width，宽度设置成 80px .. 再用 height 设置一下高度，大小也是 80px ..

回到开发者工具 .. 点一下这个按钮 ... 选择几张图片 ... 这样选择的图片会显示在按钮的下面 ...

来自 https://ninghao.net/video/5237#info

点击界面上的图像，会显示一个图像预览窗口，这个功能可以使用一下 wx.previewImage 这个接口 .. 在这个 image 组件上面，可以 bind 一个 tap 事件，这个事件用 preview 来处理 ..

在页面的主逻辑里面再添加一个 preview 方法 .. 接收一个 event 参数 .. 在这个事件处理方法里面，用一下 wx.previewImage ，给它一个对象，里面可以配置一下这个接口的使用 ..

先添加一个 urls 属性 .. 它的值就是一组要预览的图像文件的地址列表 .. 这里可以用一下 this.data.images .. 我们会把选择的图像路径列表放在页面数据里的 images 属性这里 ..

回去预览一下 .. 选择几张图片 .. 然后点击图像 .. 这样会出现一个预览图像的窗口.. 左右滑动，可以预览这种图像 ..

默认这个图像预览会从第一张图像开始 ..

current

再回去设置一下 .. 在这个 image 组件的上面，可以再添加一个自定义的属性，名字是 data-src .. 给它绑定一个 item ..

然后在 previewImage 这个接口里面，再添加一个 current .. 设置一下当前要预览的图像地址 .. 它的值可以是 event.target.dataset.src

再去预览一下 . 先选择几张图像 ...

然后点击其中的一张图像 .. 这样打开预览窗口的时候，当前显示的就是我们点击的这张图像 ..

来自 https://ninghao.net/video/5238#info

下面去准备一个处理上传文件请求的后端服务接口 .. 宁皓网有个专门的课程介绍了 Node 应用的上传文件的方法 ..

这个视频我们再去准备一下这个可以上传文件的后端服务接口 .. 你可以不用跟着做，我会把代码 push 到 ninghao-sandbox 这个仓库里 .. 到时候你可以看一下 ..

先给项目安装两个包 .. multer ，还有 lokijs ..

npm install multer lokijs --save

回到项目 .. 创建一个新的文件，放在 src 目录的下面，名字是 upload.js

upload

先导入 multer ..

再创建一个文件过滤器 .. 名字是 fileFilter .. 这里设置了允许上传的文件的类型 ..

下面创建一个 upload .. 里面设置了上传的文件保存的位置 .. 就是这个 uploads 目录 ..

下面再导出这个 upload ..

db

再创建一个文件 .. 放在 src 的下面，名字是 db.js .. 里面配置一下数据库 .. 先导入 loki ..

添加一个 loadCollection 函数，它可以给我们创建或者获取到指定的数据库里的集合 ..

下面再创建一个数据库 .. 这个数据库文件会保存在 uplaods 目录的下面，名字是 uploads.json ..

然后再导出 loadCollection ... 还有 db

接口

打开 index.js .. 导入刚才创建的 db .. 把里面的 loadCollection 还有 db 提取出来 ..

再导入 upload .. 把它提取出来 ..

下面可以创建一个上传文件用的接口 .. router.route('/uploads') .. .. 用一下 post 方法 .. 里面用一下 upload 的 array ，它可以处理多个文件的上传 .. 上传的元素的名字可以叫 uploads .. 数量最多可以是 9 个文件 ..

后面是一个 async 函数 .. 里面先得到了数据库里指定的集合，也就是 uploads 这个 collection ...

这里用了集合的 insert ，把上传的文件相关的信息存储在了数据库里 .. db.saveDatabase() 保存了一下数据库 ..

最后再 response 一个结果 ...

测试

现在我们这个可以上传文件的接口就准备好了 .. 可以先测试一下 ... 找一个 REST 客户端 ... 比如 Insomnia ..

配置一个请求 .. 方法是 POST .. 请求的地址是 localhost:8080/api/uploads ...

再添加一个主体 .. 类型是 Multipart Form .. 添加一个元素 .. 名字是 uplaods .. 类型是 file .. 选择一个文件 ...

再发送一下这个请求 ..

会响应返回保存到数据库之后的结果 .. 再回到项目看一下 ... 在项目的 uploads 目录的下面，会包含刚才我们通过 REST 客户端上传的这个图像文件 ...

uploads.json 是我们的应用的数据库文件 ..

push

下面我再去做一次提交 ... 添加文件上传接口

再 push 到远程 ... git push origin master

完成以后，可以打开 github .. 找到 ninghao-sandbox 这个仓库 ..

https://github.com/ninghao/ninghao-sandbox 

可以看一下项目的 commit ... 你会发现刚才我做的这次提交 ... 在这里你可以查看这次提交都修改了哪些地方 ..

来自 https://ninghao.net/video/5240#info

wx.uploadFile 这个接口可以把文件上传到后端服务 .. 在这个选择图像接口的成功回调里面，我们可以试一下 wx.uploadFile ，去把选择的图像文件上传到后端服务 ...

先用一下 response.tempFilePaths 的 map 方法，这个 tempFilePaths 是一组图像文件的路径 .. 使用数组的 map 方法，处理一下每个文件路径 .. 给它一个函数 .. 参数的名字可以是 filePath ..

主体里面用一下 wx.uploadFile .. 给这个接口一个对象，去配置一下它 .. 先添加一个 url 属性，它的值就是我们的后端服务用来处理文件上传的接口 .. 我的接口地址是 sandbox.ninghao.net/api/uploads

再添加一个 filePath 属性，设置一下要上传的文件的路径 .. 这里可以使用 filePath 来表示 .. 然后是 name，设置一下元素的名字 .. 我们的处理上传文件的后端服务接口期待这个名字是 uploads ...

这里就是在 upload，array 方法里面设置的这个 uploads ...

然后添加一个 success 回调 ... 一个参数是 response，我们把它输出到控制台上检查一下 ..

测试

先把之前上传到后端服务的文件还有数据库删除掉 ..

回到微信开发者工具 .. 选择几个图像文件 ... 稍等一下 .. 控制台会输出几个对象 .. statusCode 是 200，说明后端服务已经成功的处理了上传文件的请求 ..

不过这里还有两个 502 的状态 .. 意思是我们的后端服务有点问题 .. 这个是因为我们的后端服务用了 nodemon 监视了应用的变化，默认只要应用里的文件有变化，它都会重新启动服务 .. 所以会导致这里我们看到的这个 502 的错误 ..

找到 uploads 目录 .. 删掉里面所有的东西 ..

打开后端应用 .. 新建一个 nodemon.json ，它是 nodemon 的配置文件 .. 这里添加一个 ignore .. 设置一下要忽略掉的东西 .. 添加一个 uploads/* ..

再打开 .gitignore .. 项目的 uploads 目录下面的东西不应该放在版本控制里，所以在这里忽略掉 uploads 目录下面的所有的东西 ..

再去关掉服务 .. 然后重新再启动一下 ..

回到开发者工具 .. 选择几张图片 ... 这次会成功的把所有选择的图像文件上传到我们的后端服务 ... 你可以看到返回的状态码都是 200 ... 找到 uploads 目录，可以预览一下上传上来的这些图片文件 ..

来自 https://ninghao.net/video/5241#info

上传文件的时候，我打算显示一个文件上传的进度 .. wx.uploadFile 这个接口会返回上传任务 .. 起个名字，可以是 uploadTask ..

这个上传任务有两个方法，一个是 onProgressUpdate，它会监视上传的变化 .. 还有一个是 abort ，它可以取消上传任务 ..

我们用一下 uploadTask 下面的 onProgressUpdate .. 给这个方法一个函数参数 .. 响应的东西可以用 response 表示 ..

这个 response 里面有一些有用的属性，比如表示上传进度的百分比，上传了多少数据，一共要上传多少数据等等 ..

progress

先在页面的数据里，添加一个 progress，用它表示文件上传的进度 .. 它的值应该是一个数组，因为可以需要上传多个文件 ..

然后在这个 map 方法里，再添加一个 index，表示索引 ..

在找到 onProgressUpdate .. this.data.progress[index]，设置一下 progress 数据里面的某个项目的值 .. 让它等于 response 下面的 progress 这个属性的值 .. 这个属性的值就是文件上传的百分比 ..

下面再用一下 this 的 setData .. 要设置的是 progress ，对应的值是 this.data.progress .. 因为我要实时的在页面上显示这个进度的变化 ..

视图

打开页面的视图 .. 在这个 image 组件里面，再包装一个 progress 组件，它可以显示进度 .. 一个 percent 属性 .. 绑定输出一个 progress 下面的对应的项目 ..

回到开发者工具，可以去测试一下 ...

选择几个图像文件 ... 现在上传的时候会在图像的下面显示一个上传的进度 ...

来自 https://ninghao.net/video/5242#info