微信：小程序学习笔记（3）

这几天断断续续查看小程序的开发。在熟悉的过程，发现微信提供的这个开发工具还没完善，提示代码几乎无法玩。这套东西也是基于vscode。为何不在单独的vscode完善一下？对于维护这套ide而言，对web开发工具还需要时间完善。

1.选择图片

微信小程序提供了一个选择图片的接口，查看了一些图片选择的接口。熟悉这个接口，可以查看如下链接

wx.chooseImage(OBJECT)

    wx.chooseImage({
    count: 1, // 默认9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
      var tempFilePaths = res.tempFilePaths;
      console.log(JSON.stringify(res));
    }

选择图片的时候，发生了一个奇怪事情，在选择项目外的图片不行。而选择项目内的图片是可以的。返回的一个叫res的参数，通过json化可以看到内容。临时的路径tempFilePaths，通过绑定一个图片后，可以显示其选取的内容。设置多张图片会返回一个组列。

{"errMsg":"chooseImage:ok","tempFilePaths":["apptmpfile__880781730_o6zAJs-Eqx6eMblKlbSsiLa1FgnY_1474972522650"]}

2.绑定图片，视图更新

这个框架似乎严格执行了mvc的设计。使用数据驱动方式来驱动视图变化。在普通赋值，视图并不会改变。需要使用setData的内置方法来驱动。

<view class="container2">
  <view class="tabtab">
     <label>首页</label>
     <label>最新</label>
     <label>最热</label>
  </view>
   <view class="panel">
    <button bindtap='onRequest' type="primary" class="searBtn">查询</button>
     <image src="{{imagesrc}}" class="icon"/>
   </view> 
</view>

下面程序，通过点击一个按钮，选取一个图片。图片的链接，我们需要声明一个变量来保存。变量绑定在视图中

 <image src="{{imagesrc}}" class="icon"/>
   </view> 

js代码

//index.js
//获取应用实例
var app = getApp()

Page({
  data: {
      inputValue:"",
      imagesrc:""
  },
  onReady: function (e) {

  },
  onInput:function(event){

      inputValue = event.detail;//记录输入的值
  }
  ,
  onRequest:function(){

    var self = this
        wx.chooseImage({
    count: 1, // 默认9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths;
       //imagesrc = tempFilePaths;

       self.setData({ imagesrc: tempFilePaths})

        console.log(JSON.stringify(res));
    }
   })
  }

})

在更新视图过程，需要调用setData的方式，由于受到作用域的问题，this需要定义一个临时值
var self = this;

在编辑器提供的机制里面，对写不写分号似乎没有严格限制。习惯了分号写起来还是会忍不住添加上了。

选择图片后，我们可以提供json化处理对象，查看返回的对象信息。目前文档里面返回的对象信息并没有提供。这也是文档所缺陷。

console.log(JSON.stringify(res));

发现选取图片的时候，要是不在项目内提供的，返回不到。显示不出来，不知道为什么会这样。

效果图展示：选取后可以展示一张图片。