小程序开发技巧总结

• 将本地资源上传到服务器UploadTask wx.uploadFile(Object object)

  这里要说一下，我这边的需求是先把图片上传到开发者服务器，然后再从开发者服务器把图片读取保存到另一个系统所在的服务器上。读取图片的时候不用下载图片，我上传图片的时候会在数据库一个表保存图片的相关信息，列表id,图片名称，在开发者服务器的所在路径等一些相关用到的字段。
  

第一步：先上传图片到开发者服务器,客户端发起一个 HTTPS POST 请求，其中 content-type 为 multipart/form-data

//上传图片，将本地资源上传到开发者服务器
  uploadImage: function(e) {
    var that = this;
    that.setData({
      shipmentid: e.target.dataset.shipmentid
    });
    var listArr = [];
    var uploadImgCount = 0;
    var uploadArr = [];
    var imgLength = 0;
    for (var i = 0; i  {
                //console.log("res:"+res.data);
                uploadImgCount++;
                uploadArr.push(res.data);

                //判断是否上传完毕
                if (uploadImgCount == imgLength) {

                  //显示数据，调用处理列表图片的方法，只修改所选运单的回单数即可
                  this.addImageList(2, uploadImgCount);
                  //保存操作的列表数到TMS数据表
                  let row = {
                    ShipmetId: this.data.newBillList[index].ShipmetId,
                    EarliestPickTime: this.data.newBillList[index].EarliestPickTime,
                    FromAddress: this.data.newBillList[index].FromAddress,
                    ToAddress: this.data.newBillList[index].ToAddress,
                    DriverName: this.data.newBillList[index].DriverName,
                    LicenseNumber: this.data.newBillList[index].LicenseNumber,
                    DocumentsCnt: uploadImgCount,
                    ImageList: uploadArr
                  }
                  this.setData({
                    saveImageList: row
                  });

                  //保存图片到TMS
                  this.saveImage();

                }
              },
              fail: res => {
                console.log("uploadImage fail:" + res);
                wx.hideToast();
                wx.showModal({
                  title: '错误提示',
                  content: '上传图片失败',
                  showCancel: false,
                  success: function(res) {}
                });

              }
            });
          }

        }

      }
    }
  }

这里大家一定很关心我的后台代码是如何编写的，我是参考第一个链接做的。

参考资料：
微信小程序实现图片上传功能

.NET WebAPI实现图片上传

第二步：把图片从开发者服务器读取并保存到另一个服务器

这里当时因为POST数据以及'content-type'，还有JSON.stringify也卡住了好久(知识点不扎实)

//保存图片
  saveImage: function(e) {
    //console.log("新json字符串:" + JSON.stringify(this.data.saveImageList));
    wx.request({
      url: app.globalData.apiurl + '/api/NoUploadBackBill/SaveImageFile',
      data: JSON.stringify(this.data.saveImageList),
      header: {
        'content-type': 'application/json',
        'Authorization': "BasicAuth " + util.getToken()
      },
      method: "POST",
      success: res => {
        console.log(" POST success：" + res.data.Message);
        if (res.data.Code == "0") {
          wx.showToast({
            title: '上传成功',
            icon: 'none',
            mask: true,
            duration: 2000
          });
        } else {
          wx.showToast({
            title: '上传图片到服务器失败:' + res.data.Message,
            icon: 'none',
            mask: true,
            duration: 2000
          });
        }
      },
      fail: res => {
        console.log("saveImage fail：" + res.data);
      }
    });
  },

这里大家一定也会关心数据的转换，这里贴一下后台代码:

    //接收参数为dynamic类型
    public IHttpActionResult SaveImageFile(dynamic obj){
   var s = JsonConvert.SerializeObject(obj);
   //实例化一个能够序列化数据的类
   JavascriptSerializer js = new JavascriptSerializer(); 
   //将json数据转化为对象类型
   var entity = js.Deserialize(s);  
   }

还有数据读取以及保存，这里使用文件流FileStream处理,从图片转换为二进制流读取，这里是调用web service处理的。具体代码不在我这边，就没有办法贴出来啦~

参考链接：
WebAPI 接口参数

15. WebAPI 找到了与该请求匹配的多个操作

找到了与该请求匹配的多个操作的解决办法

WebApi 找到了与该请求匹配的多个操作

WebAPI post传递参数2、实体作为参数

16. 小程序自适应单位rpx

这个rpx我原来不知道是微信小程序推出了新尺寸单位。直到我做完功能测试发现没有自适应。因为我在里面惯性使用了px和em。后来看这个参考链接就全部改过来了，然后页面在不同的设备不会溢出啦。参考链接如下：

细解小程序自适应单位rpx

最后，想说所遇到的问题点几乎都经过查阅资料解决。在知识红利的时代，大家无私分享自己的所学，在此非常感谢分享开发总结的伙伴。诚挚感谢！