微信小程序学习笔记（二）之填坑网页

微信小程序的部分操作和网页的不同，这里将我踩过的坑都填上。

微信小程序填坑

1. 如何实现微信小程序文本的连续空格

可修改代码如下：

<text>你好   你好      你好\n</text>
<text space='nbsp'>你好   你好      你好\n</text>
<text space='ensp'>你好   你好      你好\n</text>
<text space='emsp'>你好   你好      你好\n</text>

效果如下：

2.如何实现微信小程序的背景渐变

.box{
  background: linear-gradient(to bottom right,  #cecece, #000000);
  border-radius: 30rpx;         //设置框框的弧度
}

效果如下：

3. 如何实现微信小程序上传文件

正常的实现可以直接调用wx.uploadFile()方法。

wx.uploadFile({
          url: 'https://www.xxxx',      //后台服务器接口
          filePath: tempFilePaths[0],
          name: 'file',                 //后台表单接受的参数名
          headers: {
            'Content-Type': 'form-data'  
          },
          success: function (res) {
            console.log(res);
            }
          }
        })

这里可能涉及到对服务器端返回的数据的处理，需要拿到json字符串中的数据。可以先将json字符串转为json对象，通过对json对象的操作，拿到里面的内容。

var json = JSON.parse(res.data);   //转成json对象
console.log(json.msg);         //获取json对象里的名为msg的数据内容

如果是将json对象变为json字符串

var jsonstr=JSON.stringify(jsonObj);     //返回一个新字符串

拿到后端传过来的数据后，可能要对data中的数据进行赋值，甚至可能涉及到对数组的操作。

 var newArray = [{ msg: " "  ,  resp: json.msg}];      //将刚刚拿到的数据写进数组里
 if (res.data) {
    that.setData({                               //通过setData的方法，对数据进行赋值
    increase: false,
    message: that.data.message.concat(newArray),            //注意数组的连接方式
  })
}

后台使用spring mvc框架，具体可以看下一篇文章

4. 如何实现微信小程序wx.request上传字符串

wx.request的POST可以实现上传字符串，并返回服务器的信息。自我感觉大部分人踩坑的原因都是那个header的问题，所以一定要好好看看鸭。

wx.request({
      url: 'https://www.xxx',         //服务器的接口
      data:{
        msg: this.data.msg,        //设置要上传的名称和数据
      },
      header: {          // 一定要注意这个header的设置
        "Content-Type": "application/x-www-form-urlencoded"         
      },
      method:'POST',      //设置方法
      success: function (res) {
        console.log(res.data)
        console.log(res.data.xx)       //直接获取数据中的元素value
      } 
    });

同3拿到返回后的数值可能要在success回调函数中设置数据数值。

var newArray = [{ msg: that.data.msg ,  resp: res.data.msg, }];
if (res.data) {
  that.setData({
    message: that.data.message.concat(newArray),
  })
}

若提示that undefined， 就在request()的外面加上

var that = this
wx.request({ });

5. 如何实现微信小程序的canvas保存图片

可以直接调用wx.canvasToTempFilePath()将canvas输出为一张图片，然后通过wx.saveImageToPhotosAlbum()将输出的图片保存到本地。

wx.canvasToTempFilePath({

      fileType:'jpg',
      quality:1,            //图片质量0-1   1为默认，最好
      canvasId: 'myCanvas', 
      success: function (res) {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
        })
      }
    })

微信小程序canvas保存图片到相册，在电脑上没什么问题，但在真机上测试的时候，可能会遇到，下载的图片一片黑的情况。
此时就需要在画图之前对画板进行一次手动涂色，整体涂成白色。

clearAll:function(){
    this.ctx = wx.createCanvasContext('myCanvas')    
    let query = wx.createSelectorQuery();
    query.select('.canvas_area').boundingClientRect().exec((res) => {       //选出要涂色的区域
      this.canvas = res[0];
      this.ctx.setFillStyle('#ffffff');
      this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
      this.ctx.draw();
    });
  },

有了这个函数，只需在页面onload时，调用即可。