• 微信小程序把玩(三十二)Image API


    这里写图片描述

    选择图片时可设置图片是否是原图,图片来源。这用的也挺常见的,比如个人中心中设置头像,可以与wx.upLoadFile()API使用

    主要方法:

    wx.chooseImage(object)

    这里写图片描述

    wxml

    <!--监听按钮-->
    <button type="primary" bindtap="listenerButtonChooseImage">点击我选择相册</button>
    <!--通过数据绑定的方式动态获取js数据-->
    <image src="{{source}}" mode="aspecFill" style=" 640rpx; height: 640rpx"/>
    

    js

    Page({
      data:{
        // text:"这是一个页面"
        source: ''
      },
      /**
       * 选择相册或者相机 配合上传图片接口用
       */
      listenerButtonChooseImage: function() {
          var that = this;
          wx.chooseImage({
              count: 1,
              //original原图,compressed压缩图
              sizeType: ['original'],
              //album来源相册 camera相机 
              sourceType: ['album', 'camera'],
              //成功时会回调
              success: function(res) {
                  //重绘视图
                  that.setData({
                      source: res.tempFilePaths
                  })
              }
          })
      },

    wx.previewImage(object)

    这里写图片描述

    这又是一个奇葩API真实搞不懂怎么用这个。先模仿下官方咋使用但是没有效果,搞懂了在补充下自己的使用

    wxml

    <!--图片预览-->
    <button type="primary" bindtap="listenerButtonPreviewImage">展示图片</button>

    js

    Page({
      data:{
        // text:"这是一个页面"
        source: ''
      },
    
      /**
       * 预览图片 又一个奇葩接口
       */
      listenerButtonPreviewImage: function() {
          wx.previewImage({
              current: 'http://img.souutu.com/2016/0511/20160511055648316.jpg',
              urls: [
                  'http://img.souutu.com/2016/0511/20160511055648316.jpg',
                   'http://img.souutu.com/2016/0511/20160511055650751.jpg',
                   'http://img.souutu.com/2016/0511/20160511054928658.jpg'
                   ],
                   //这根本就不走
                   success: function(res) {
                       console.log(res);
                   },
                   //也根本不走
                   fail: function() {
                       console.log('fail')
                   }
          })
      }
    
    
    })
  • 相关阅读:
    设置eclipse编码
    前端基础知识
    微信小程序
    jQuery下拉框
    Vue-cli的安装
    vue的数据交互形式
    node安装和小测试
    shui
    JQ-滚动条下拉无限的加载数据
    HTML-video全屏
  • 原文地址:https://www.cnblogs.com/twodog/p/12141186.html
Copyright © 2020-2023  润新知