第六章总结小程序

璞玉2024

已于 2024-04-17 19:37:09 修改

阅读量147

点赞数 4

文章标签：小程序

于 2024-04-11 11:50:56 首次发布

本文链接：https://blog.csdn.net/2201_75340424/article/details/137535922

版权

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上传文件

//.wxml代码
<button type="primary" bindtap="uploadimage">上传图片</button>
<image src="{{img}}" mode="widthFix"/>
//.js代码
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开始录音

2.2.2停止录音

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("打开成功")
      }
    })
        }
      })

4.本地数据及缓存

4.1保存数据

//wx.setStorage()接口将数据存储到本地缓存接口指定的key中。
wx.setStorage({
  key:'name',
  data:'sdy',
  success:function (res) {
    console.log(res)
  }
})
//wx.setStorageSync(key，data)是同步接口，其参数只有key和data
wx.setStorageSync('age', '25')

4.2获取数据

//wx.getStorage()接口是从本地缓存中异步获取指定key对应的内容。
wx.getStorage({
  key:'name',
  success:function (res) {
    console.log(res,data)
  },
})
//wx.getStorageSync()从本地缓存中同步获取指定key对应的内容。
try{
  var value=wx.getStorageSync('age')
  if(value){
    console.log("获取成功"+value)
  }
  } catch(e){
 console.log("获取失败")
  }

4.3删除数据

//wx.removeStorage()接口用于从本地缓存中异步移除指定key。
wx.removeStorage({
  key:'name',
  success:function (res) {
    console.log("删除成功")
  },
  fail:function () {
    console.log("删除失败")
  }
})
//wx.removeStorageSync()接口用于从本地缓存中同步删除指定key对应的内容。
try{
  wx.removeStorageSync('name')
}catch(e){

}

4.4清空数据

//clearStorage()接口用于异步清理本地数据缓存，没有参数。
wx.clearStorage({
  key:'name',
  success:function (res) {
   wx.clearStorage()
  },
})
//clearStorage()接口用于同步清理本地数据缓存。
try{
  wx.clearStorageSync('name')
}catch(e){
}

5.位置信息API

5.1获取位置信息

wx.getLocation({
  type:'wgs84',
  success:function (res) {
    console.log("经度"+res.longitude);
    console.log("纬度"+res.latitude);
    console.log("速度"+res.longitude);
    console.log("位置的精确度"+res.accuracy);
    console.log("水平精确度"+res.horizontalAccuracy);
    console.log("垂直精确度"+res.verticalAccuracy);
  },
})

5.2选择位置信息

wx.chooseLocation({
  success:function (res) {
    console.log("位置的名称"+res.name);
    console.log("位置的地址"+res.address);
    console.log("位置的经度"+res.longitude);
    console.log("位置的纬度"+res.latitude);
  },
})

5.3显示位置信息

wx.getLocation({
  type:'gcj02',
  success:function (res) {
    var latitude=res.latitude
    var longitude=res.longitude
    wx.openLocation({
      latitude: latitude,
      longitude: longitude,
      scale:10,
      name:'智慧国际酒店',
      address:'西安市长安区西长安区300号'
    })
  }
})

6.设备相关API

6.1获取系统信息

wx.getSystemInfo({
  success:function (res) {
    console.log("手机型号:"+res.model)
    console.log("设备像素比："+res.pixelRatio)
    console.log("窗口的宽度："+res.windowWidth)
    console.log("窗口的高度："+res.windowHeight)
    console.log("微信的版本号："+res.version)
    console.log("操作系系统版本："+res.system)
    console.log("客户端平台："+res.platform)
  },
})

6.2网络状态

//获取网络状态
wx.getNetworkType({
  success:function (res) {
    console.log(res.networkType)
  },
})
//监听网络状态变化
wx.onNetworkStatusChange(function (res) {
  console.log("网络是否连接："+res.isConnected)
  console.log("变化后的网络类型："+res.networkType)
})

6.3拨打电话

wx.makePhoneCall({
  phoneNumber: '15928266591',
})

6.4扫描二维码

//允许从相机相册扫码
wx.scanCode({
  function:(res)=>{
    console.log(res.result)
    console.log(res.scanType)
    console.log(res.charSet)
    console.log(res.path)
  }
})
//只允许从相机扫码
wx.scanCode({
  onlyFromCamera:true,
success:(res)=>{
  console.log(res)
}
})