【微信小程序-初级实战】商品/表单编辑

标题又名：

1、option页面传值取值，页面重置（option参数清除）
2、uploadfile/downloadfile对商品图的首次&再次提交（单图）

环境/工具：

使用微信小程序原生开发工具实现。
链接外部服务器。

效果：

用户点击某商品的编辑按钮，进入该商品的编辑页面（页面展示用户已填写的信息与原来的图片），用户进行修改操作后，点击提交，内容保存至服务器。编辑页面刷新，option参数清空。

分解：

同效果

实现思路：

1.编辑按钮上绑定待传参数（一般为商品id），并添加点击跳转对应页面的动作，数据存在：e.currentTarget.dataset.xxx中，跳转到tabbar页面用：wx.reLaunch,其他页面用wx.navigateTo
2.编辑页面中，通过option.xxx获得商品id,从后台获取相关的内容。
- 基本数据类型的话，用post获取就🆗
- ==包含图片时，图片需要用wx.downloadfile下载到本地，获得到一个临时地址再处理（因为uploadfile针对本地路径）==缺少这一步的话，会报错uploadFile:fail createUploadTask:fail file not found
3.提交时，使用wx.uploadfile对数据进行提交。
4.完成提交后，刷新当前页面。（不刷新的话，用户从别的页面再次进入时还是之前的商品）

简单例子：

使用了vant组件。可以看出是在一个循环的商品列表里。

<van-button hairline type="default" data-goodsID="{{item.goodsid}}" bind:click="editGoods">编辑</van-button>

JS部分

  // 编辑商品
  editGoods(e) {
    const goodsid = e.currentTarget.dataset.goodsid
    wx.reLaunch({
      url: '../xxx/xxx?goodsid=' + goodsid,
    })
  },

编辑页：option.goodsid读取后访问后台获得原商品信息。参考实现思路的过程即可。
在提交的返回中加如下语句，完成提交后当前页面的刷新：

  wx.reLaunch({
    url: './xxx',
  })

不足：

1.只实现了单图的回传与重新上传的效果，如果是多图，要考虑使用串行回传或上传的效果。

参考：

1.uploadFile:fail createUploadTask:fail file not found错误原因&处理
2.常见问题解决
微信小程序通过options页面传值，解决options获取数据undefined