微信小程序开发手记之六：API

来源：互联网发布：单页seo卖产品编辑：程序博客网时间：2024/06/16 06:38

准备工作

API中有关于网络的接口，需要配置合法域名，如果不想配置，可以直接在开发工具中设置，如下图
这里写图片描述

如果没有在开发工具中设置，也没有设置合法域名，运行时爆出如下错误
这里写图片描述

wx.request

该API既支持http请求，也支持https请求。

对于网络请求，小程序大大减轻了我们的工作量，不需要再次解析json，只需要将data的结构设置的与返回的json即可。

Page({    onLoad:function(e){      var that = this      wx.request({        url: 'http://web.juhe.cn:8080/environment/air/cityair?city=beijing&key=.....自己的key....',        data: {},        method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT        // header: {}, // 设置请求的 header        success: function(res){          // success          console.log("statusCode:"+res.statusCode);          var dataBean = res.data          console.log("success",dataBean.resultcode)          console.log("success",dataBean.reason)          that.setData({             "resultcode":dataBean.resultcode,               "reason":dataBean.reason,               "error_code":dataBean.error_code,             "result":dataBean.result          })        },        fail: function(res) {          // fail          console.log("faile")        },        complete: function(res) {          // complete          console.log("complete")        }      })    },    data:{      "resultcode":"",        "reason":"",        "error_code":0,        "result":[            {                "citynow":{                    "city":"",                    "AQI":"",                    "quality":"",                    "date":""              },                "lastTwoWeeks":{                    "1":{                        "city":"",                        "AQI":"",                        "quality":"",                        "date":""                  }                }            }        ]    }})

<view>    <text>{{result[0].citynow.quality}}</text></view>

wx.chooseImage，wx.previewImage和wx.getImageInfo

先看效果图
这里写图片描述

Page({    data:{      paths:[]    },    choosePic:function(){      var that = this      wx.chooseImage({        count: 9, // 最多可以选择的图片张数，默认9        sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有        sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有        success: function(res){          // success          that.setData({            paths:res.tempFilePaths          })        },        fail: function(res) {          // fail        },        complete: function(res) {          // complete        }      })    },    prePic:function(e){      wx.previewImage({        // current: 'String', // 当前显示图片的链接，不填则默认为 urls 的第一张        urls: this.data.paths,        success: function(res){          // success        },        fail: function(res) {          // fail        },        complete: function(res) {          // complete        }      })    },    getImageInfo:function(e){      var path = this.data.paths[0]      wx.getImageInfo({        src: path,        success: function(res){          // success          console.log(res.width)          console.log(res.height)          console.log(res.path)          wx.showToast({            title:res.width+"*"+res.height          })         },        fail: function(res) {          // fail          wx.showToast({            title:'faile'          })                  },        complete: function(res) {          // complete          // wx.showToast({//成功，失败与完成的showtoast不能同时设置，否则complete中的会冲掉前面设置的。          //   title:'complete'          // })          }      })    }})

<view class="demo-view-5">    <button class="bc_text" type="primary" bindtap="choosePic">选择图片</button>    <button class="bc_text" type="primary" bindtap="prePic">预览图片</button>    <button class="bc_text" type="primary" bindtap="getImageInfo">获取图片信息</button>    <view class="weui-uploader__bd" style="margin-left: 25rpx;">        <block wx:for="{{paths}}">            <view class="image_parent">                <image src="{{item}}" class="image_pre" mode="aspectFill"></image>            </view>        </block>        <view class="weui-uploader__input-box">            <view class="weui-uploader__input" bindtap="choosePic"></view>        </view>    </view></view>

.demo-view-5{    display:block;    height:1500rpx;    flex-direction: column;    background-color: #E8E8E8;    margin-bottom: -4px;    margin-right: -9px;    overflow: hidden;}.bc_text{    margin: 20rpx;    background-color: #FFFFFF;    width:700rpx;}.image_pre{    display: block;    width: 150rpx;    height: 150rpx;}.image_parent{    float: left;    margin-right: 9px;    margin-bottom: 9px;}.weui-uploader__input {  position: absolute;  z-index: 1;  top: 0;  left: 0;  width: 100%;  height: 100%;  opacity: 0;}.weui-uploader__input-box {  float: left;  position: relative;  margin-right: 9px;  margin-bottom: 9px;  width: 77px;  height: 77px;  border: 1px solid #D9D9D9;}.weui-uploader__input-box:before,.weui-uploader__input-box:after {  content: " ";  position: absolute;  top: 50%;  left: 50%;  -webkit-transform: translate(-50%, -50%);          transform: translate(-50%, -50%);  background-color: #D9D9D9;}.weui-uploader__input-box:before {  width: 2px;  height: 39.5px;}.weui-uploader__input-box:after {  width: 39.5px;  height: 2px;}.weui-uploader__input-box:active {  border-color: #999999;}.weui-uploader__input-box:active:before,.weui-uploader__input-box:active:after {  background-color: #999999;}.weui-uploader__bd {  margin-bottom: -4px;  margin-right: -9px;  overflow: hidden;}

wx.startRecord，wx.stopRecord，wx.playVoice，wx.pauseVoice，wx.stopVoice

效果图如下：
这里写图片描述

Page({  data:{    path:"path"  },  startRecord:function(e){    var that = this    wx.startRecord({      success: function(res){        // success        console.log("start-success")        that.setData({          path:res.tempFilePath        })      },      fail: function(res) {        // fail        console.log("start-fail")      },      complete: function(res) {        // complete      }    })  },  stopRecord:function(e){    wx.stopRecord({      success: function(res){        // success        console.log("stop-success")      },      fail: function(res) {        // fail        console.log("stop-fail")      },      complete: function(res) {        // complete      }    })  },  playVoice:function(e){    wx.playVoice({      filePath: this.data.path,      success: function(res){        // success        console.log("play-success")      },      fail: function(res) {        // fail        console.log("play-fail")      },      complete: function(res) {        // complete      }    })  },  pauseVoice:function(e){    wx.pauseVoice({      success: function(res){        // success        console.log("pause-success")      },      fail: function(res) {        // fail        console.log("pause-fail")      },      complete: function(res) {        // complete      }    })  },  stopVoice:function(e){    wx.stopVoice({      success: function(res){        // success        console.log("stop-success")      },      fail: function(res) {        // fail        console.log("stop-fail")      },      complete: function(res) {        // complete      }    })  }})

<view class="demo-view-5">    <button class="bc_text" type="primary" bindtap="startRecord">开始录音</button>    <button class="bc_text" type="primary" bindtap="stopRecord">录音结束</button>    <button class="bc_text" type="primary" bindtap="playVoice">播放录音</button>    <button class="bc_text" type="primary" bindtap="pauseVoice">暂停播放录音</button>    <button class="bc_text" type="primary" bindtap="stopVoice">停止播放录音</button>    <text class="bc_text">{{path}}</text></view>

.demo-view-5{    display:block;    height:1500rpx;    flex-direction: column;    background-color: #E8E8E8;    margin-bottom: -4px;    margin-right: -9px;    overflow: hidden;}.bc_text{    margin: 20rpx;    background-color: #FFFFFF;    width:700rpx;}

wx.uploadFile

图片上传的方法如下

Page({  data:{     "src":"",    "status": 0,    "msg": "msg",    "data": {        "successCount":0 ,        "urlList": []    }  },  choosePic:function(){    var that = this    wx.chooseImage({      count: 9, // 最多可以选择的图片张数，默认9      sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有      sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有      success: function(res){        // success        that.setData({          src:res.tempFilePaths[0]        })      },      fail: function(res) {        // fail      },      complete: function(res) {        // complete      }    })  },  uploadImage:function(){    var that = this    wx.uploadFile({      url: 'http:...',      filePath:this.data.src,      name:'collection',      // header: {}, // 设置请求的 header      // formData: {}, // HTTP 请求中其他额外的 form data      success: function(res){        // success        var bean = JSON.parse(res.data)        that.setData({          "status":bean.status,          "msg":bean.msg,          "data":bean.data        })      },      fail: function(res) {        // fail        console.log("upload-fail")      },      complete: function(res) {        // complete      }    })  }})

<view class="demo-view-5">    <button class="bc_text" type="primary" bindtap="choosePic">选择要上传的图片</button>    <button class="bc_text" type="primary" bindtap="uploadImage">上传图片</button>    <text class="bc_text">{{msg}}</text>    <image src="{{data.urlList[0]}}" mode="aspectFill"></image></view>

.demo-view-5{    display:block;    height:1500rpx;    flex-direction: column;    background-color: #E8E8E8;    margin-bottom: -4px;    margin-right: -9px;    overflow: hidden;}.bc_text{    margin: 20rpx;    background-color: #FFFFFF;    width:700rpx;}

踩坑记录

其中有一个很坑的地方，这个接口是我在app项目中找出来的，app上可以完美运行，解析json都没出问题，但在这里就出了问题，下面是上传成功的回调，如下

success: function(res){        // success        var bean = JSON.parse(res.data)        that.setData({          "status":bean.status,          "msg":bean.msg,          "data":bean.data        })      },

刚开始的时候，var bean = res.data，结果设置的status，msg，data值都是undefined，搞得有点怀疑人生。后来将res.data再解析一下，也就是写成：var bean = JSON.parse(res.data)，这样就成功了。

文件下载的demo如下

效果图如下：
这里写图片描述

Page({  data:{    src:"../../../image/cat.jpg",    success:false  },  downloadVedio:function(){    var that = this    wx.downloadFile({      url: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1492582586&di=3c8a3277ee28b8d357176910e535ce6f&src=http://r001.joyme.com/r001/image/2012/07/81/5FB12B816020EFFB99A1AC6CD28A6C72.jpg",      // type: 'image', // 下载资源的类型，用于客户端识别处理，有效值：image/audio/video      // header: {}, // 设置请求的 header      success: function(res){        // success        console.log("success")        that.setData({          src:res.tempFilePath,          success:true        })      },      fail: function(res) {        // fail        console.log("fail")      },      complete: function(res) {        // complete      }    })  }})

<view class="demo-view-5">    <button class="bc_text" type="primary" bindtap="downloadVedio">下载图片</button>    <text wx:if="{{success}}" class="bc_text">成功</text>    <image src="{{src}}" ></image></view>

.demo-view-5{    display:block;    height:1500rpx;    flex-direction: column;    background-color: #E8E8E8;    margin-bottom: -4px;    margin-right: -9px;    overflow: hidden;}.bc_text{    margin: 20rpx;    background-color: #FFFFFF;    width:700rpx;}

wx.getLocation，wx.openLocation

获取当前经纬度，并在地图中显示。在手机上显示的比较准，在开发工具上显示的偏离很大。

效果图如下
这里写图片描述

Page({  data:{    latitude:"",    longitude:""  },  getLocation:function(){    var that = this    wx.getLocation({      type: 'gcj02', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标      success: function(res){        // success        that.setData({          latitude:res.latitude,          longitude:res.longitude        })      },      fail: function(res) {        // fail      },      complete: function(res) {        // complete      }    })  },  openLocation:function(e){    var that = this    wx.openLocation({      latitude: that.data.latitude, // 纬度，范围为-90~90，负数表示南纬      longitude: that.data.longitude, // 经度，范围为-180~180，负数表示西经      scale: 28, // 缩放比例      // name: 'name', // 位置名      // address: 'address', // 地址的详细说明      success: function(res){        // success      },      fail: function(res) {        // fail      },      complete: function(res) {        // complete      }    })  }})

<view class="demo-view-5">    <button type="primary" class="bc_text" bindtap="getLocation">获取当前位置</button>    <button type="primary" class="bc_text" bindtap="openLocation">显示当前位置</button></view>

.demo-view-5{    display:block;    height:1500rpx;    flex-direction: column;    background-color: #E8E8E8;    margin-bottom: -4px;    margin-right: -9px;    overflow: hidden;}.bc_text{    margin: 20rpx;    background-color: #FFFFFF;    width:700rpx;}

wx.createMapContext如下

效果图如下
这里写图片描述

Page({  onReady:function(e){    this.mapCtx = wx.createMapContext("wisely")  },  getCenterLocation:function(){    this.mapCtx.getCenterLocation({      success:function(res){        console.log(res.longitude)        console.log(res.latitude)      }    })  },  moveToLocation:function(){    this.mapCtx.moveToLocation()    console.log("move")  }})

<view class="demo-view-5">    <map id="wisely" show-location style="width:750rpx;height:500rpx"/>     <button type="primary" class="bc_text" bindtap="getCenterLocation">获取中心点位置</button>    <button type="primary" class="bc_text" bindtap="moveToLocation">移动回原来位置</button></view>

.demo-view-5{    display:flex;    height:1500rpx;    background-color: #E8E8E8;}.bc_text{    margin: 20rpx;    background-color: #FFFFFF;    width:700rpx;}

wx.chooseLocation

属性请看这里。

效果图如下：

这里写图片描述

Page({  chooseLocation:function(){    wx.chooseLocation({      success: function(res){        // success        console.log(res.name)        console.log(res.address)        console.log(res.longitude)        console.log(res.latitude)        console.log("-------------------------------")      },      fail: function(res) {        // fail      },      complete: function(res) {        // complete      }    })  }})

<view class="demo-view-5">     <button type="primary" class="bc_text" bindtap="chooseLocation">选择位置</button></view>

从动图可以看出，第一次选中位置时，并没有打印语句，应该是失败了，第2次和第3次成功打印。

wx.scanCode

Page({  scan:function(){    wx.scanCode({      success: function(res){        // success        wx.showToast({          title:"success"        })      },      fail: function(res) {        // fail        wx.showToast({          title:"fail"        })      },      complete: function(res) {        // complete      }    })  }})

<view class="demo-view-5">     <button type="primary" class="bc_text" bindtap="scan">点击扫码</button></view>

wx.showModal

效果图如下
这里写图片描述

Page({  showDialog:function(e){    wx.showModal({      title:'title',      content:'content',      showCancel:true,      // cancelText:'cancel',      cancelColor:'#0000FF',      // confirmText:'confirm',      confirmColor:'#FF0000',      success:function(res){        if(res.confirm){          console.log("确定")        } else if(res.cancel){          console.log("取消")        }      }    })  }})

<view class="demo-view-5">     <button type="primary" class="bc_text" bindtap="showDialog">点击弹窗</button></view>

.demo-view-5{    display:flex;    height:1500rpx;    background-color: #E8E8E8;}.bc_text{    margin: 20rpx;    background-color: #FFFFFF;    width:700rpx;}

踩坑记录

cancelText，confirmText不能设置，一旦设置了其中某一个，窗口就不会弹出。
res.cancel永远为false，所以只需要判断res.confirm是否为true即可

wx.showActionSheet

效果图如下
这里写图片描述

Page({  showActionSheet:function(e){    wx.showActionSheet({      itemList:['a','b','c','d','e'],      itemColor:'#FF0000',      success:function(res){        console.log(res.tapIndex)        console.log('----success--')      },      fail:function(res){        console.log("----"+res.errMsg)        console.log('----fail--')      }    })  }})

<view class="demo-view-5">     <button type="primary" class="bc_text" bindtap="showActionSheet">点击弹出列表</button></view>

.demo-view-5{    display:flex;    height:1500rpx;    background-color: #E8E8E8;}.bc_text{    margin: 20rpx;    background-color: #FFFFFF;    width:700rpx;}

踩坑记录

细心看上面的动图就能发现，我在点击了“取消”之后，先运行了fail的方法，然后又运行了success的方法，这个应该是个bug。

wx.showLoading，wx.hideLoading

效果图如下
这里写图片描述

Page({  show:function(){    wx.showLoading({      title:'正在加载',      success:function(res){      }    })  },  hide:function(){    wx.hideLoading()  }})

<view class="demo-view-5">     <button type="primary" class="bc_text" bindtap="show">展示loading</button>     <button type="primary" class="bc_text" bindtap="hide">隐藏loading</button></view>

.demo-view-5{    display:flex;    height:1500rpx;    background-color: #E8E8E8;}.bc_text{    margin: 20rpx;    background-color: #FFFFFF;    width:700rpx;}

踩坑记录

这个API很有问题，在上面的图片中，当loading在前台时，还可以点击下面的按钮，隐藏掉它。这就意味着在loading显示时，还可以操作下面的组件，loading的作用貌似就没有了，毕竟它的一个作用就是防止用户点击下面的内容。

0 0