第六章总结小程序

最新推荐文章于 2024-09-15 07:15:20 发布

烂抹布

最新推荐文章于 2024-09-15 07:15:20 发布

阅读量458

点赞数 10

文章标签：小程序

本文链接：https://blog.csdn.net/weixin_51485373/article/details/137640467

版权

1.网络API

微信小程序处理的数据通常从后台服务器获得，再将处理结果保存到后台服务器。微信原生API接口或第三方API提供了各类接口实现前后端交互。

1.1发起网络请求

//.wxml代码
<button type="primary"bindtap="getbaidutap">获取HTML数据</button>
<textarea value='{{html}}'auto-heightmaxlength='0'></textarea>
//.js代码
Page({
  data:{
    html:''
  },
  getbaidutap:function(){
    var that=this;
    wx.request({
      url: 'http://www.baidu.com',
      data:{},
      header:{'Content-Type':'application/json'},
      success:function(res){
        console.log(res);
        that.setData({
          html:res.data
        })
      }
    })
  },
})

//.wxml代码
<view>邮政编码：</view>
<input type="text" bindinput="input" placeholder="6位邮政编码"/>
<button type="primary" bindtap="find">查询</button>
<block wx:for="{{address}}">
<block wx:for="{{item}}">
<text>{{item}}</text>
</block>
</block>
 
//.js代码
Page({
  data:{
    postcode:'',
    address:[],
    errMsg:'',
   error_code:-1
  },
  input:function(e){
        this.setData({
          postcode:e.detail.value,
        })
        console.log(e.detail.value)
      },
      find:function(){
        var postcode=this.data.postcode;
        if(postcode!=null&&postcode!=""){
          var self=this;
          wx.showToast({
            title: '正在查询请稍后……',
            icon:'loading',
            duration:10000
          });
          wx.request({
            url: 'http://v.juhe.cn/postcode/query',
            data:{
              'postcode':postcode,
              'key':'0ff9bfccdf14746e067de994eb5496e'
            },
            header:{
              'Content-Type':'application/json',
            },
            method:'GET',
            success:function(res){
              wx.hideToast();
              if(res.data.error_code==0){
                console.log(res);
                self.setData({
                  errMsg:'',
                  error_code:res.data.error_code,
                  address:res.data.result.list,
                })
              }
              else{
               self.setData({
                 errMsg:res.data.reason||res.data.reason,
                 error_code:res.data.error_code
               })
              }
            }
          })
        }
      }
})

1.2上传文件


Page({
  data:{
    img:null,
  },
  uploadimage:function(){
    var that=this;
        wx.chooseImage({
          success:function(res){
            var tempFilePaths=res.tempFilePaths
            upload(that,tempFilePaths)
          }
        })
       function upload(page,path){
         wx.showToast({
           icon:"loading",
           title: '正在上传',
         }),
         wx.uploadFile({
           filePath: 'path[0]',
           name: 'file',
           url: 'http://localhost/',
           success:function(res){
             console.log(res);
             if(res.statusCode!=200){
               wx.showModal({
                 title:'提示',
                 content:'上传失败',
                 showCancel:'false'
               })
               return;
             }
             var data=res.data
             page.setData({
               img:path[0]
             })
           },
      fail:function(e){
        console.log(e);
          wx.showModal({
            title: '失败',
            content: '上传失败',
               showCancel:false 
              })
            },
            complete:function(){
              wx.hideToast();
            }
          })
        }
      }
})

1.3下载文件

//.wxml代码
<button type="primary" bindtap="downloadimage">下载图片</button>
<image src="{{img}}" mode="widthFix" style="width: 90%;height: 500px;"></image>
//.js代码
Page({
  data:{
    img:null,
  },
  downloadimage:function(){
    var that=this;
        wx.downloadFile({
          url: 'http://images/index5.jpg', success:function(res){
            console.log(res); 
            that.setData({
              img:res.tempFilePath
            }) 
          }
       })
      }
    })

2.多媒体API

2.1图片API

2.1.1选择图片或拍照

//.js代码
wx.chooseImage({
  count:2,
  sizeType:['original','compressed'],
  sourceType:['album','camera'],
  success:function(res){
    var tempFilePaths=res.tempFilePaths
    var tempFiles=res.tempFiles;
    console.log(tempFilePaths)
    console.log(tempFiles)
  }
})

2.1.2预览图片

wx.previewImage({
  current:"http://bmob-cdn-16488.b0.upaiyun.com/2018/02/05/2.png",
  urls: ["http://bmob-cdn-16488.b0.upaiyun.com/2018/02/05/1.png",
  "http://bmob-cdn-16488.b0.upaiyun.com/2018/02/05/2.png",
  "http://bmob-cdn-16488.b0.upaiyun.com/2018/02/05/3.png"
],
})

2.1.3获取图片信息

wx.chooseImage({
  success:function(res){
    wx.getImageInfo({
      src: 'res.tempFilePaths[0]',
      success:function(e){
        console.log(e.width)
        console.log(e.height)
      }
    })
  }
})

2.1.4 保存图片到系统相册

wx.chooseImage({
  success:function(res){
    wx.saveImageToPhotosAlbum({
      filePath: 'res.tempFilePaths[0]',
       success:function(e){
        console.log(e)
        }    
      })
  },
})

2.2录音API

2.2.1开始录音

wx.startRecord({
  success:function(res){
var temFilePath=res.tempFilePath
  },
  fail:function(res){
  },
})
    setTimeout(function(){
      wx.stopRecord()
    },1000)

2.3音频播放控制API

2.3.1播放语音

wx.startRecord({
  success:function(res){
var temFilePath=res.tempFilePath
wx.playVoice({
  filePath: 'tempFilePath',
  complete:function(){
  }

2.3.2暂停语音

wx.startRecord({
  success:function(res){
var temFilePath=res.tempFilePath
wx.playVoice({
  filePath: 'tempFilePath',
})
setTimeout(function(){
      wx.pauseVoice()
    },5000)
}
}）

2.3.3结束语音

wx.startRecord({
  success:function(res){
var temFilePath=res.tempFilePath
wx.playVoice({
  filePath: 'tempFilePath',
})
setTimeout(function(){
      wx.stopVoice()
    },5000)

2.4音乐播放控制API

//.wxml代码
<view class="con">
<image class="bgaudio" src="{{changedImg music.coverImg:'images/picture.png'}}" />
<view class="control-view">
  <image src="/images/index2.jpg" bindtap="onPositionTap" data-how="0"/>
  <image src="/images/{{isPlaying? 'pause':'play'}}.png"bindtap="onAudioTap"/>
  <image src="/images/index3.jpg" bindtap="onStopTap"/>
  <image src="/images/index4.jpg" bindtap="onPositionTap" data-how="1"/>
</view>
</view>
//.js代码
Page({
  data:{
    isPlaying:false,
    coverImg,
    changedImg:false,
    music:{
      "url":'https://t1.kugou.com/song.html?id=afH0LbaCLV2',
      "title":'空空——神话',
      "coverImg":
      "https://p3fx.kgimg.com/stdmusic/240/20231202/20231202235038510632.jpg"
    },
  },
  onLoad:function(){
    this.onAudioState();
  },
  onAudioTap:function(event){
    if(this.data.isPlaying){
      wx.pauseBackgroundAudio();
     }else{
       let music=this.data.music;
       wx.playBackgroundAudio({
         dataUrl: 'music.url',
         title:music.title,
         coverImgUrl:music.coverImg
       })
    }
  },
  onStopTap:function(){
    let that=this;
    wx.stopBackgroundAudio({
      success:function(){
        that.setData({isPlaying:false,changedImg:false});
      }
    })
  },
  onPositionTap:function(event){
    let how=event.target.dataset.how;
    wx.getBackgroundAudioPlayerState({
      success:function(res){
        let status=res.status;
        if(status==1){
          let duration=res.duration;
          let currentPosition=let.currentPosition;
          if(how=="0"){
            let position=currentPosition-10;
            if(position<0){
               position=1;
            }
               wx.seekBackgroundAudio({
                 position: position,
               });
               wx.showToast({ title:'快退10s',duration:500});
          }
          if(how=="1"){
            let position=currentPosition+10;
            if(position>duration){
              position=duration-1;
            }
            wx.setBackgroundAudio({
              position:position
            });
            wx.showToast({
              title: '快进10s',duration:500
            });
          }
        }else{
            wx.showToast({
              title: '音乐未播放',duration:800
            });
          }
      }
    })
  },
  onAudioState:function(){
    let that=this;
   wx.onBackgroundAudioPlay(function(){
   that.setData({isPlaying:true,changedImg:true});
     console.log("on play");
   });
   wx.onBackgroundAudioPause(function(){
    that.setData({isPlaying:false});
      console.log("on pause");
    });
  wx.onBackgroundAudioStop(function(){
    that.setData({isPlaying:false,changedImg:false})
    console.log("on stop");
  });
}
})
//.wxss代码
.bgaudio{
height: 350rpx;
width: 350rpx;
margin-bottom: 100rpx;
}
.control-view image{
  height: 64rpx;
  width: 64rpx;
  margin: 30rpx;
}

3.文件API

3.1保存文件

//.js代码
saveImg:function(){
  wx.chooseImage({
    count:1,
    sizeType:['original','compressed'],
    sourceType:['album','camera'],
    success:function(res){
      var tempFilePaths=res.tempFilePaths[0]
      wx.saveFile({
        tempFilePath:tempFilePaths,
        success:function(res){
          var saveFilePath=res.saveFilePath;
          console.log(saveFilePath)
        }
      })
    }
  })
}

3.2获取本地文件列表

//.js代码
wx.getSaveFileList({
  success:function(res){
    that.setData({
      fileList:res.fileList
    })
  }
})

3.3获取本地文件的文件信息

//.js代码  
wx.chooseImage({
    count:1,
    sizeType:['original','compressed'],
    sourceType:['album','camera'],
    success:function(res){
      var tempFilePaths=res.tempFilePaths[0]
      wx.saveFile({
        tempFilePath:tempFilePaths,
        success:function(res){
          var saveFilePath=res.tempFilePath;
          wx.getSavedFilePath({
            filePath:saveFilePath,
            success:function(res){
              console.log(res.size) 
            }
      })
    }
  })
}
})

3.4删除本地文件

//.jsdm
wx.getSaveFileList({
  success:function(res){
    if(res.fileList.length>0){
      wx.removeSavedFile({
        filePath:res.fileList[0].filePath,
        complete:function(res){
          console.log(res)
        }
      })
    }
  }
})

3.5打开文档

//.js代码
wx.downloadFile({
  url: 'http://localhost/fm2.pdf',
  success:function(res){
    var TempFilePath=res.tempFilePath;
    wx.openDocument({
      filePath: 'tempFilePath',
      success:function(res){
        console.log("打开成功")
      }
    })
        }
      })