微信小程序日常知识储备及开发遇到的坑

一：微信小程序日常知识储备

1、小程序解析json数据

json数据："{state: "success", resMsg: "上传成功", url: "https://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: 'https://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;
 }

}

跨页面传值

设置id，传递给全局变量：

<!--home.wxml-->
<view class="time-card" bindtap="goglobal" id='1'>

<!--home.js-->
goglobal:function(e){
var id=e.currentTarget.id;
getApp().data.tem_data=id;
wx.navigateTo({
    url:'../content/content'
})
},

<!--content.js-->
onLoad:function(){
var that = this;
var i = getApp().data.tem_data;

二：微信小程序开发遇到的坑

分享者：Lefe，原文地址

一：不是‘’，而是``

页面之间进行传值时，我错误的写成了

bindMenu: function(event){
    wx.navigateTo({
        url: 'category?name=${event.currentTarget.dataset.name}'
    })
 },

这样的写法是错误的需要这样写，url不是使用的单引号：

bindMenu: function(event){
    wx.navigateTo({
        url: `category?name=${event.currentTarget.dataset.name}`
    })
 },

二：创建文件小技巧

你还在一个个文件创建吗？比如我想创建help文件，我需要创建help.js, help.wxml,help.wcss,help.json,这样很麻烦，微信为我们提供一个简单的方法：
直接在app.json文件中添加你想创建的目录就行，他会自动创建help.js, help.wxml,help.wcss,help.json，文件。

  "pages":[
    "pages/me/help"
  ],