微信小程序撸图片小试手

Github项目地址
https://github.com/dubaiyouyue/xcx

//2017.03.29
更新：
1.图片保存到本地
2.图片长按操作
3.打开远程图片
4.图片预加载
5.代码优化
index.js

//index.js
Page({
  data: {
    url: "",
    title: "正在加载...",
    imgcss:'',
    modalHidden: true
  },
  onLoad: function(options) {
    // Do some initialize when page load.
    this.setData({
      title:'正在加载...'
    })
    var that = this;
    wx.request({
      url: 'https://lizhenqiu.com/xcxrequest.php',
      header: {
          'content-type': 'application/json'
      },
      success: function(res) {
        //console.log(123)
        that.setData(res.data)
    /*this.setData({
      title:'正在加载...'
    })*/
      }
    })
  },
  onReady: function() {
    // Do something when page ready.
    //getApp().getUserInfo
    //console.log(getApp().globalData)
    //this.setData(getApp().globalData)
  },
  onShow: function() {
    // Do something when page show.
  },
  onHide: function() {
    // Do something when page hide.
  },
  onUnload: function() {
    // Do something when page close.
  },
  onPullDownRefresh: function() {
    // Do something when pull down.
    this.setData({
      title:'正在加载...'
    })
    var that = this;
    wx.request({
      url: 'https://lizhenqiu.com/xcxrequest.php', //仅为示例，并非真实的接口地址
      header: {
          'content-type': 'application/json'
      },
      success: function(res) {
        //console.log(123)
        that.setData(res.data)
        /*that.setData({
          title:'正在加载...'
        })*/
      }
    })
    wx.stopPullDownRefresh()
  },
  onReachBottom: function() {
    // Do something when page reach bottom.
  },
  onShareAppMessage: function () {
   // return custom share data when user share.
        /*this.setData({
          src:'https://lizhenqiu.com/xcxrequest.php?dimg='+this.data.src
        })*/
    return {
      title: 'lizhenqiu.com',
      path: '/page/index/index'
    }
},
  // Event handler.
  /*viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    })
  },
  customData: {
    hi: 'MINA'
  }*/
  imgload:function(){
    this.setData({
      title:'下拉刷新',
      imgcss:'1'
    })
  },
  imgerror:function(){
    this.setData({
      title:'加载失败！'
    })
    /*this.setData({
      title:'正在加载...'
    })*/
    var that = this;
    wx.request({
      url: 'https://lizhenqiu.com/xcxrequest.php', //仅为示例，并非真实的接口地址
      header: {
          'content-type': 'application/json'
      },
      success: function(res) {
        //console.log(123)
        that.setData(res.data)
        that.setData({
          title:'正在加载...'
        })
      }
    })
  },
    // 长按
    onlongclick: function() {
        //this.setData( { modalHidden: false });
          wx.previewImage({
            current: this.data.src, // 当前显示图片的http链接
            urls: [this.data.src] // 需要预览的图片http链接列表
          })
    },
    // 保存
    onSaveClick: function( event ) {
        var mUrl = "";
        var that=this;
        if( event.currentTarget.dataset.url != null )
            mUrl = event.currentTarget.dataset.url;
        //console.log( "download：" + mUrl );
        //saveImage( mUrl );

          that.setData( {
              modalHidden: true
          });

          if(!mUrl){
            wx.showToast({
              title: '保存失败！',
              mask:"true",
              image:"/screenshots/fail.png",
              duration: 2000
            })
            return false;
          }
            wx.showToast({
              title: '正在保存...',
              mask:"true",
              icon:"loading",
              duration: 200000
            })
          wx.downloadFile( {
              url: mUrl,
              type: 'image',
              success: function( res ) {
                  /*console.log( "download success" );
                  that.setData( {
                      hidden: true,
                      toastHidden: false,
                      toastText: "恭喜你，图片保存成功"
                  });*/
                  var tempFilePaths = res.tempFilePath
                  //console.log( res );
                  wx.saveFile({
                    tempFilePath: tempFilePaths,
                    success: function(resss) {
                      //var savedFilePath = resss.savedFilePath
                      //console.log( savedFilePath )
                        wx.showToast({
                          title: '保存成功',
                          mask:"true",
                          image:"/screenshots/Success.png",
                          duration: 2000
                        })

                    }
                  })


              },
              fail: function( res ) {
                  /*console.log( "download fail" );
                  that.setData( {
                      hidden: true,
                      toastHidden: false,
                      toastText: "保存失败，请稍后再试"
                  });*/
                  wx.showToast({
                    title: '保存失败！',
                    mask:"true",
                    image:"/screenshots/fail.png",
                    duration: 2000
                  })
              },
              complete:function(res){
                  //console.log( "download complete" );
              }
          })

    },
    // 取消
    onCancelClick: function( event ) {
        this.setData( { modalHidden: true });
    }
})

index.wxml

<!--index.wxml-->
<view class="title">
  <icon type="waiting" size="30" class="icmm nnnssf{{imgcss}}" />
  <icon type="waiting_circle" size="20" class="icmm nnnssf{{imgcss}}" />
  <text class="titlesize">{{title}}</text>
  <icon type="success" size="20" class="icmm nnnss{{imgcss}}" />
  <icon type="download" size="30" class="icmm nnnss{{imgcss}}" />

  <view style="text-align: center;"  bindlongtap = "onlongclick">
    <image mode="widthFix" style="width:100%;" class="nnnss{{imgcss}}" src="{{src}}" bindload="imgload" binderror="imgerror"></image>
  </view>

  <modal title="是否保存图片？" confirm-text="保存" cancel-text="取消" data-url="https://lizhenqiu.com/xcxrequest.php?dimg={{src}}" 
      hidden="{{modalHidden}}" bindconfirm="onSaveClick" bindcancel="onCancelClick">
  </modal>
  <view class="tttip nnnss{{imgcss}}"><image src="/screenshots/tip.png" style="width:16px;height:16px;vertical-align:bottom;"></image>长按操作图片</view>
</view>

index.wxss

/**index.wxss**/
.title{
text-align: center;
margin: 12px;
}
.titlesize{
  font-size:12px;
  color:green;
}
.nnnss,.nnnssf1{
  display: none;
}
.icmm{
  vertical-align:middle;
}
.tttip{
  text-align:right;
  color:#999;
  font-size:12px;
  margin-top:6px;
}

源代码下载
//end 更新
旧版本：
index.js

//index.js
Page({
  data: {
    title: "正在加载..."
  },
  onLoad: function(options) {
    // Do some initialize when page load.
    this.setData({
      title:'正在加载...'
    })
    var that = this;
    wx.request({
      url: 'test.php', //仅为示例，并非真实的接口地址
      data: {
        x: '' ,
        y: ''
      },
      header: {
          'content-type': 'application/json'
      },
      success: function(res) {
        //console.log(123)
        that.setData(res.data)
    /*this.setData({
      title:'正在加载...'
    })*/
      }
    })
  },
  onReady: function() {
    // Do something when page ready.
    //getApp().getUserInfo
    //console.log(getApp().globalData)
    //this.setData(getApp().globalData)
  },
  onShow: function() {
    // Do something when page show.
  },
  onHide: function() {
    // Do something when page hide.
  },
  onUnload: function() {
    // Do something when page close.
  },
  onPullDownRefresh: function() {
    // Do something when pull down.
    this.setData({
      title:'正在加载...'
    })
    var that = this;
    wx.request({
      url: 'test.php', //仅为示例，并非真实的接口地址
      header: {
          'content-type': 'application/json'
      },
      success: function(res) {
        //console.log(123)
        that.setData(res.data)
        /*that.setData({
          title:'正在加载...'
        })*/
      }
    })
    wx.stopPullDownRefresh()
  },
  onReachBottom: function() {
    // Do something when page reach bottom.
  },
  onShareAppMessage: function () {
   // return custom share data when user share.
    return {
      title: 'lizhenqiu.com',
      path: '/page/index/index'
    }
  },
  // Event handler.
  /*viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    })
  },
  customData: {
    hi: 'MINA'
  }*/
  imgload:function(){
    this.setData({
      title:'下拉刷新',
      imgcss:'1'
    })
  },
  imgerror:function(){
    this.setData({
      title:'加载失败！'
    })
  }
})

index.wxml

<!--index.wxml-->
<view class="title">
  <text class="titlesize">{{title}}</text>
  <icon type="info" size="6" />
  <icon type="download" size="6" />
</view>
<view style="text-align: center;"><image mode="widthFix" class="nnnss{{imgcss}}" src="{{src}}" bindload="imgload" binderror="imgerror"></image></view>

微信小程序开发文档
 在微信小程序里实现图片预加载组件

小程序运行效果

Github微信小程序示例 - 小相册
 微信小程序《美女图集》Demo下载（调用远程API获取图片，本地保存图片）html51.com-MeinvPic.zip

Comments 评论区

广西南宁市 2017-03-28 17:27

PHP输出中文JSON字符串

<?php
$arr = array ('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
echo json_encode($arr);
?>

#⁰

广西南宁市 2017-03-29 14:17

php读取一张网络图片并输出给浏览器

<?php
header('content-type: image/png'); 
echo file_get_contents($imgurl);
?>

广西南宁市 2017-04-10 17:42

微信小程序页面跳转传递参数

<span style="font-size:24px;"><!--index.wxml-->  
<view class="btn-area">  
  <navigator url="../navigator/navigator?title=我是navigate" >跳转到新页面</navigator>  
  <navigator url="../redirect/redirect?title=我是redirect" redirect>在当前页打开</navigator>  
</view></span>

在navigatort.wxml中通过js代码可以获取到title,代码如下
//navigatort.js

Page({  
  onLoad: function(options) {  
    this.setData({  
      title: options.title  
    })  
  }  
})

Comment Form 留下评论

正在回复 #0

粘贴图片、拖拽文件，或点上面的按钮上传 图片会自动插入 [img] 标签，其他附件会自动插入 [attach] 标签。

正在上传...

提交前会先拉起旧项目同款第三方人机验证。

不再要求填写昵称；reply 会生成一条带楼层回链的新评论，quote 会附带完整引用块，并保持评论锚点跳转。