作为一个前端实习生，来公司接到的第一个比较正式的项目是一个微信小程序的制作（一个物资管理系统小程序），经过一个多星期和后端的配合，这个项目也完成的差不多了，来和大家分享一下自己在做小程序的时候遇到的问题和解决方案吧。
请求接口
在小程序里面，如果我们要请求很多个接口的情况下，不妨创建一个接口文件，如图：
const configAPI = require('../../config'); //引入接口
wx.request({
url: configAPI.getPurchaseOrderByIdAPI, //使用config里面的接口
})
文件传输
在我的小程序里面有一个功能是：未完成的订单在填写好了配送信息【内含上传图片】之后，把图片传给后端保存起来，然后在确认完成配送之后，已完成的订单里要展示我所上传的图片。
我知道小程序中有一个方法wx.chooeseImage可以返回给你一个图片的url，即tempFilePaths，并且返回给你的url可以作为image标签的src地址。但是在这里我的后端要求我传给他文件，所以这里要用到文件传输功能wx.uploadFile
首先我们把上传的图片用wx.chooeseImage转化为网络地址【wx.uploadFile里面的文件路径是网络路径】
wx.chooeseImage的使用方法请见官方文档
chooseImage1() {
const that = this
wx.chooseImage({
count: 5,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
console.log(res)
that.setData({
Warranty: res.tempFilePaths
})
}
})
},
在获取到图片网络地址数组后，我们就可以使用wx.uploadFile传给后端了
wx.uploadFile的用法请见官方文档
for (let i = 0; i < this.data.Warranty.length ; i++) {
wx.uploadFile({
url: configAPI.addFileAPI , //上传文件用到的接口
filePath: this.data.Warranty[i],
name: 'file',
header: {
},
formData: {
},
success: function (res) {
console.log('我把质保书文件传过去了', res)
}
})
}
这里传图片好像一次性只能传一张，所以我这里用了一个简单的for循环
然后就是从后端获取到我上传的文件，因为这里他返回给我的是他处理过后的图片url，所以我在接收的时候要加上后端服务器的IP地址
getPhotos () {
var that = this
wx.request({
url: configAPI.findCredentialsAPI, //获取图片需要的接口
data: {
},
method: 'POST',
dataType: 'json',
header: {"token":that.data.token},
success: function (res) {
const a = []
const b = []
const c = []
for (let i = 0 ; i < res.data.result.length ; i++) {
if (res.data.result[i].imageType == 'WARRANTY_BOOK') {
a.push(configAPI.host + res.data.result[i].fileUrl)
} else if (res.data.result[i].imageType == 'DELIVERY_ORDER') {
b.push(configAPI.host + res.data.result[i].fileUrl)
} else {
c.push(configAPI.host + res.data.result[i].fileUrl)
}
}
that.setData({
deliveryNote: a,
Warranty: b,
groupPhoto: c
})
}
})
},
而且因为这里传递过来的数据是要进行分类放进不同的图片地址数组里面的，所以这里又用了一个for循环和if判断
上传图片时的预览
和我们平时发朋友圈一样，我们在上传图片后是会在原来的位置出现预览图的，并且我们在点击预览图片的时候会出现完整图片并且可以对它进行保存、转发。
这个功能本来我在用原生js写的，然后写了一大半的时候我的leader告诉我小程序其实是有组件可以完成这个功能的【当场心态崩了】，这里给大家介绍一个小程序预览图片的方法：
previewImage1(e) {
const current = e.target.dataset.src
wx.previewImage({
current,
urls: this.data.Warranty //图片url地址
})
},
然后完整的小程序上传预览图片组件请看这个组件库,可以把这个用GitHub克隆到自己本地然后看看有什么组件。
页面跳转
这个是在小程序快完成的时候发现的一个问题，就是在之前的页面里我的页面跳转使用的都是wx.navgateTo，然后在我设置了退出登录的功能后发现：点击小程序左上角的返回的箭头后还是可以看到登陆状态下才能看到的数据。
然后我才知道，微信小程序其实是有五种页面跳转的，其中wx.navgateTo跳转时并不会关闭当前页面，也就是说我们跳走后原页面的数据并不会刷新，而是隐藏了而已，跳转到的那个页面就相当于它的子页面，所以如果你想完成返回上一级页面时自动刷新页面就需要在父页面的onShow生命周期里面调用一下onLoad()
这也就是说，在退出登录的时候，我们要关闭之前所有的页面，所以这里用到wx.reLaunch跳转回登陆页，并且在跳转之前把全局变量重置、缓存清除【因为我的token等数据存在qpp.js全局变量里面了】
小程序的页面跳转的具体知识请见官方文档
微信授权
这里是我觉得最麻烦的地方，因为之前自己做的小程序都是做着玩的小demo，并没有涉及到授权功能，所以在这里就遇到了瓶颈。
我把微信授权分为两种：
- 需要完成认证才能获取的权限【如获取手机号】
- 可以直接通过微信api获取的权限【如获取微信个人信息】
我这里完成了获取个人信息的授权，首先要在wxml文件中定义授权按钮：
<button class='marningTop' open-type="getUserInfo"
bindgetuserinfo="getUserData">授权登录</button>
如果是获取手机号请换成这样的：
<button class='marningTop' open-type="getPhoneNumber"
bindgetphonenumber="getPhoneNumber">授权登录</button>
然后授权信息的js如下【个人信息】：
getUserData () {
// 获取用户信息
wx.getSetting({
success: res => {
if (!res.authSetting['scope.userInfo']) { //判断是否有获取个人信息权限
wx.authorize({
scope: "scope.userInfo" //如果没有就用wx.authorize进行授权
})
// 已经获取用户授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
wx.getUserInfo({
success: res => {
console.log('res', res.userInfo)
// 可以将 res 发送给后台解码出 unionId
this.setData({
'userInfo.nickName': res.userInfo.nickName,
'userInfo.avatarUrl': res.userInfo.avatarUrl
})
app.data.name = res.userInfo.nickName
app.data.url = res.userInfo.avatarUrl
console.log('this.data.userInfo', app.data)
}
})
this.userLogin()
} else {
this.userLogin()
}
},
})
},
这里我们获取到的个人信息是可以存下来用的【个人中心的昵称头像】
但其实我这里授权登录的操作是不完整的【userLogin里面应该用对用户身份验证的步骤】，但是由于客户那边暂时搁置小程序的项目【感觉自己白写了一个多礼拜】所以就没有接着往下写了，如果接下来还会继续这个项目会接着记录的
微信授权详细解释请看官方文档
