微信小程序开发之十五—— 图片、文件与缓存

学习前后

上一篇：微信小程序开发之十四 —— 数据表单
下一篇：微信小程序开发之十六 —— 云开发入门

补充

使用weui样式

刚开始写时没注意到，现在补充一下,。

之前的文章也进行了补充：微信小程序开发之五 —— 体验WeUI

首先我们在模板小程序的根目下新建一个style的文件夹(如果已经有了就不用建了)，然后把weui小程序dist/style目录下的weui.wxss文件粘贴到style的文件夹里。

使用开发者工具打开模板小程序的app.wxss文件的第二行添加以下代码：

@import 'style/weui.wxss';

这样weui的css样式就被引入到我们的小程序中啦.

图片操作

官方文档：wx.chooseImage(Object object)
从本地相册选择图片或使用相机拍照。

属性	类型	默认	说明
count	number	9	最多可以选择的图片张数
sizeType	Array	[‘original’,‘compressed’]	所选的图片的尺寸
sourceType	Array	[‘album’,‘camera’]	选择图片来源

object.sizeType的合法值

值	说明
original	原图
compressed	压缩图

object.sourceType的合法值

值	说明
album	从相册选图
camera	使用相机

object.success回调函数
Object res

属性	类型	说明
tempFilePaths	Array	图片的本地临时文件路径列表(本地路径)
tempFiles	Array	图片的本地临时文件列表

res.tempFiles的结构

属性	类型	说明
path	string	本地文件路径(本地路径)
size	number	本地临时文件大小，单位B

上传一张图片

,wxml输入

<button type="primary" bindtap="chooseImage">选择图片</button>
<view wx:if = "{
   {hasImg === true}}">
	<image mode="widthFix" src="img"></image>
</view>
<view>上传的图片</view>

在.js里添加图片数据变量

 data: {
   
    img:"",
    hasImg: false,
  },

根据文档内容设置绑定函数，这里要把this赋值给that，控制台输出会发现进入回调函数后this变成了undefined。

chooseImage:function(e){
   
    console.log(e)
    let that = this
    wx.chooseImage({
   
      count: 9,
      sizeType: ['original','compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
   
        console.log('this是啥', this)
        console.log<