微信小程序开发之三级联动地址选择器

1、小程序解析json数据

json数据："{state: "success", resMsg: "上传成功", url: "http://7xo3ms.com1.z0.glb.clouddn.com/FmQI_SSAu4DYCYx8-Z9x7mVYxyVY"}"
获取url的值：JSON.parse(res.data).url;

2、动态添加控件
利用数组动态添加组件，根据数组的个数来控制组件的显示

1）xml部分
<view wx:for="{{checkbox}}"  wx:key="">
    <checkbox>checkbox</checkbox>
</view>
<view>
  <button bindtap="insert">增加按钮</button>
</view>

2）数据及按钮点击事件
Page({
 data: {
    checkbox: [],
  },
 insert: function() {
    var cb = this.data.checkbox;
    cb.push(this.data.checkbox.length);
    this.setData({
      checkbox: cb
    });
  },
})

3、在Page({ data: {}})中定义的属性，在其他地方取值和赋值的方式

Page({
  data: {
    taskTypeArray: ['上门安装', '到店维修', '预约维修', '换门'],
},

 insert: function() {
    // 取值：用“this.data.属性”来取值
    var cb = this.data.checkbox;
    cb.push(this.data.checkbox.length);
    // 赋值：“this.setData({属性：值})”来赋值
    this.setData({
      checkbox: cb
    });
  },

})

4、图片选择并上传到后台

 wx.chooseImage({
      count: 1, // 限制选取照片的张数，默认9
      sizeType: ['original', 'compressed'], // 设置高清图还是压缩图，默认两者
      sourceType: ['album', 'camera'],   // 设置相册选择还是相机选择，默认两者
      success: function (res) {
        // 新选择图片的本地路径
        var newImagePath = res.tempFilePaths;
        wx.uploadFile({
          url: 'http://192.168.0.104:8080/fileUpload/image',
          filePath: res.tempFilePaths[0],
          // 跟后台沟通好的参数名
          name: 'file',
          success: function (res) {
            var state = JSON.parse(res.data).state;
            if (state == "success") {
              var url = JSON.parse(res.data).url;
              // 存放图片上传路径数组加1️
              uploadImagePaths.push(url);
              _this.setData({
                imagesUpload: uploadImagePaths
              })
              // 存放本地图片路径数组加1️
              imagePaths.push(newImagePath);
              _this.setData({
                tempFilePaths: imagePaths
              })
            } 
            console.log(JSON.parse(res.data));
            console.log(JSON.parse(res.data).url);
          },
          fail: function (res) {
            console.log("上传失败：" + res.data);
          }
        })
      }
    })

5、图片上传后台代码（包含七牛图片上传）

@Controller
@RequestMapping("/fileUpload")
public class ApiQiNiuController {
 @Autowired
 private TokenService tokenService;

 
 @RequestMapping(value = "/image", method = RequestMethod.POST)
 @ResponseBody
 public Map<String, String> imageUpload(@RequestParam(value="file",defaultValue="") CommonsMultipartFile file) {
  if(null == file){
   Map<String, String> map = new HashMap<String, String>();
   map.put("status", "fail");
   map.put("resMsg", "文件为空");
   return map;
  }
 
  String showimg = new String();
  if (file.getSize() != 0) {
   try {    
   showimg = tokenService.uploadFile(file);   
   if (StringUtil.isNotBlank(showimg)) {
   }
  } catch (Exception e) {
    // TODO: handle exception
   }
  }
  Map<String, String> map = new HashMap<String, String>();
  map.put("resMsg", "上传成功");
  if (StringUtil.isBlank(showimg)) {
   map.put("state", "fail");
  }else {
   map.put("state", "success");
  }
  map.put("url", showimg);
  return map;
 }
 
}

5、后台json串转对象

 var dataSource;
        if(typeof json != 'object') {
          if(json != null) {
            json = json.replace("\ufeff", "");
            var jsonObj = JSON.parse(json);
            dataSource = jsonObj;
          }
        }