第六章总结

已于 2024-04-17 19:54:54 修改
阅读量143 收藏 4
点赞数 1
文章标签： php 前端 服务器
于 2024-04-10 22:00:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46316324/article/details/137534875
版权

6.1 网络API

6.1.1 发起网络请求

6.1.1.1 

属性

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

6.1.1.2

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代码
 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:'https://v.juhe.cn/postcode/query',
        data:{
          'postcode':postcode,
          'key':'0ff9bfccdf147476e067de994eb5496e'
        },
        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
            })
          }
        }
      })
    }
  },
运行结果图

6.1.1.3

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代码
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:'https://v.juhe.cn/postcode/query',
        data:{
          'postcode':postcode,
          'key':'0ff9bfccdf147476e067de994eb5496e'
        },
        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
            })
          }
        }
      })
    }
  },
运行结果图

6.1.2 上传文件

属性

wxml代码

<button type="primary"bindtap="uploadimage">上传图片</button>
<image src="{{img}}"mode="widthFix"/>
js代码
 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({
         url:"http://localhost/",
         filePath:path[0],
         name:'file',
         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();
         }
       })
     }
   },
运行结果图

6.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://localhost/1.jpg",
      success:function(res){
        console.log(res)
        that.setData({
          img:res.tempFilePath
        })
      }
    })
  },
})
运行结果图

6.2 多媒体API

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.预览图片

属性

js代码
  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"]
  })
运行结果图

3.获取图片信息

属性

js代码
 wx.getImageInfo({
    src: 'src',
  })({
    success:function(res){
      wx.getImageInfo({
        src:res.tempFilePaths[0],
        success:function(e){
          console.log(e.width)
          console.log(e.height)
        }
      })
    }
  })
运行结果图

4.保存图片到系统相册

属性

js代码
wx.saveImageToPhotosAlbum({
    filePath: 'filePath',
  })({
    success:function(res){
      wx.saveImageToPhotosAlbum({
        filePath: res.tempFilePaths[0],
        success:function(e){
          console.log(e)
        }
      })
    },
  })
运行结果图

6.2.2 录音API

1.开始录音

属性

js代码
 wx.startRecord({
    success:function(res){
      var tempFilePath=res.tempFilePath
    },
    fail:function(res){
 
    }
  }),
  setTimeout(function() {
    wx.stopRecord();
  }, 10000)
运行结果图

2.停止录音

属性

js代码
 wx.startRecord({
    success:function(res){
      var tempFilePath=res.tempFilePath
    },
    fail:function(res){
 
    }
  }),
  setTimeout(function() {
    wx.stopRecord();
  }, 10000)
运行结果图

6.2.3 音频播放控制API

1.播放语音

属性

js代码
 wx.startRecord({
     success:function(res){
       var tempFilePath=res.tempFilePath
       wx.playVoice({
         filePath:tempFilePath,
         complete:function(){
 
         }
       })
     }
   })
运行结果图

2.暂停播放

属性

js代码
wx.startRecord({
     success:function(res){
       var tempFilePath=res.tempFilePath
       wx.playVoice({
         filePath:tempFilePath
       })
       setTimeout(function(){
         wx.pauseVoice({
           filePath:tempFilePath
         })
         setTimeout(function(){
           wx.pauseVoice()
         },5000)
       })
     }
   })
运行结果图

3.结束播放

属性

js代码
 wx.startRecord({
     success:function(res){
       var tempFilePath=res.tempFilePath
       wx.playVoice({
         filePath:tempFilePath
       })
       setTimeout(function(){
         wx.stopVoice()
       },5000)
     }
   })
运行结果图

6.2.4 音乐播放控制API

1.播放音乐

属性

2.获取音乐播放状态

属性

3.控制音乐播放进度

属性

9.案例展示

wxml代码

<view class="container">
<image class="bgaudio" src="{{changedImg?music.coverImg:'/images/logs.png'}}"/>
<view class="control-view">
<image src="/images/logs.png"bindtap="onPositionTap" data-how="0"/>
<image src="../../images/{{isplaying?'pause':'play'}}.png" bindtap="onAudioTap"/>
<image src="/images/logs.png" bindtap="onStopTap"/>
<image src="/images/news.png" bindtap="onPositionTap" data-how="1"/>
</view>
</view>

wxss代码

.bgaudio{
  height: 350rpx;
  width: 350rpx;
  margin-bottom: 100rpx;
}
.control-viewimage{
  height: 64rpx;
  width: 64rpx;
  margin: 30rpx;
}

json代码

{}
js代码
Page({
    data:{
      isplaying:false,
      coverImg:"",
        changedImg:false,
         music:{
           "url":"http://bmob-cdn-16488.b0.upaiyun.com/2018/02/09/117e4a1b405195b18061299e2de89597.mp3",
           "title":"盛晓玫-有一天",
           "coverImg":"http://bmob-cdn-16488.b0.upaiyun.com/2018/02/09/f604297140c9681880cc3d3e581f7724.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=res.currentPosition;
            if(how==="0"){
              let position=currentPosition-10;
              if(position<0){
                position=1;
              }
              wx.setBackgroundAudio({
                position:position
              });
              wx.showToast({
                title: '快退10s',
                duration:500
              });
            }
            if(how==="1"){
              let position=currentPosition+10;
              if(position>duration){
                position=duration-1;
              }
              wx.seekBackgroundAudio({
                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")
      });
    }
  })

6.3 文件API

1.保存文件

属性

js代码
Page({
    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.savedFilePath;
              console.log(saveFilePath)
            }
          })
        }
      })
    }
  })
运行结果图

2.获取本地文件列表

属性

js代码
Page({})
    wx.getFileSystemManager().getSavedFileList({
      success:function (res) {
        that.setData({
          fileList:res.fileList
        })
      }
    })
运行结果图

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.savedFilePath;
              wx.getSavedFileInfo({
                filePath:saveFilePath,
                success:function (res) {
                  console.log(res.size)
                }
              })
            }
          })
        }
   })
运行结果图

4.删除本地文件

属性

js代码
 wx.getSavedFileList({
     success:function (res) {
       if(res.fileList.length>0){
         wx.removeSavedFile({
           filePath:res.fileList[0].filePath,
           complete:function (res) {
             console.log(res)
           }
         })
       }
     }
   })
运行结果图

5.打开文档

属性

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

6.4 本地数据及缓存API

6.4.1 保存数据

属性

1.异步

js代码
  wx.setStorage({
    key:'name',
    data:'sdy',
    success:function (res) {
      console.log(res)
    }
  })
运行结果图

2.同步

js代码
wx.setStorageSync('age','25')
运行结果图

6.4.2 获取数据

属性

1.异步

js代码
wx.getStorage({
  key:'name',
  success:function(res){
    console.log(res.data)
  },
})
运行结果图

2.同步

js代码
try{
  var value=wx.getStorageSync('age')
  if(value){
    console.log("获取成功"+value)
  }
}catch(e){
  console.log("获取失败")
}
运行结果图

6.4.3 删除数据

属性

1.异步

js代码
wx.removeStorage({
  key:'name',
  success:function(res){
    console.log("删除成功")
  },
  fail:function(){
    console.log("删除失败")
  }
})
运行结果图

2.同步

js代码
try{
  wx.removeStorageSync('name')
}catch(e){
  
}
运行结果图

6.4.4 清空数据

1.异步

js代码
wx.getStorage({
  key:'name',
  success:function(res){
    wx.clearStorage()
  },
})
运行结果图

2.同步

js代码
try{
  wx.clearStorageSync()
}catch(e){
  
}
运行结果图

6.5 位置信息API

6.5.1 获取位置信息

属性

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

6.5.2 选择位置信息

属性

js代码
wx.chooseLocation({
  success:function(res){
    console.log("位置的名称:"+res.name);
    console.log("位置的地址:"+res.address);
    console.log("位置的经度:"+res.longitude);
    console.log("位置的纬度:"+res.latitude);
  }
})
运行结果图

6.5.3 显示位置信息

属性

js代码
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.6 设备相关API

6.6.1 获取系统信息

属性

js代码
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.6.2 网络状态

属性

6.6.2.1 获取网络状态

js代码
wx.getNetworkType({
  success:function (res) {
    console.log(res.networkType)
  },
})
运行结果图

6.6.2.2 监听网络状态变化

js代码
wx.onNetworkStatusChange(function (res) {
  console.log("网络是否连接:"+res.isConnected)
  console.log("变化后的网络类型:"+res.networkType)
})
运行结果图

6.6.3 拨打电话

属性

js代码
wx.makePhoneCall({
  phoneNumber: '18092585093',
})
运行结果图

6.6.4 扫描二维码

属性

6.6.4.1 允许从相机和相册扫码

js代码
wx.scanCode({
  success:(res)=> {
    console.log(res.result)
    console.log(res.scanType)
    console.log(res.charSet)
    console.log(res.path)
  }
})
运行结果图

6.6.4.2  只允许从相机扫码

js代码
wx.scanCode({
  onlyFromCamera:true,
  success:(res)=>{
    console.log(res)
  }
})
运行结果图

关于影杀
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
6.第六章总结1
08-08
第六章总结的内容主要聚焦在电子通信中的调制与解调技术以及非线性器件的伏安特性分析。首先，我们讨论了线性频谱搬移，这是一个关键概念，指的是在调制过程中，信号的不同频率成分比例保持不变，允许只搬移部分频谱...
第六章总结与展望.7z
12-31
"第六章总结与展望"这个标题可能指的是一个文档或一系列资料，它涵盖了某个特定技术主题的第六个章节的内容，并对当前研究或实践进行了回顾，同时对未来的发展趋势进行了预测。这种类型的文件常见于学术论文、技术...
计算机组成原理-第6章总结.pdf
10-13
计算机组成原理-第6章总结.pdf
半导体材料：半材第7章总结.doc
11-26
【半导体材料：半材第7章总结】 本章主要探讨了III-V族化合物半导体的外延生长技术，其中重点介绍了几种关键的生长方法，包括金属有机物气相外延生长(MOVPE)、分子束外延生长(MBE)、化学束外延生长(CBE)以及原子层...
操作系统第六章习题.doc
12-06
操作系统第六章习题知识点总结 本文总结了操作系统第六章习题中的相关知识点，涵盖文件管理、文件系统、文件组织、文件访问控制、文件存储管理、文件命名、文件路径、文件访问方式等方面的知识。 一、文件管理 * ...
数据库第六章总结+课后题（2020.4.13作业）
01-19
两个小节，问题的提出和规范化。 主要是规范化，定义比较多 问题的提出 规范化 函数依赖 函数依赖：设R(U)是一个属性集U上的关系模式，X和Y是U的子集。若对于R(U)的任意一个可能的关系r，r 中不可能存在：两个元组...
自动化学科概论-第6章-总结70352PPT文档.pptx
11-17
【自动化学科概论-第6章-总结】 自动化学科概论的第6章主要探讨了自动化学科的专业特点、与其他学科的关系以及其发展前景。这一章深入剖析了自动化技术在现代社会中的地位和作用，强调了它作为多学科交叉领域的核心...
第4章总结1
08-03
【第四章总结】在USACO的学习过程中，第四章是一个重要的转折点，相较于前三章的基础训练，本章引入了更多高级的算法思想和技术，对学习者的技能和理解提出了更高的要求。这一章的学习不仅提升了初学者的编程技巧，...
第6章暨全通关总结1
08-03
在本章"USACO 第六章 暨全通关总结"中，作者ZhenYi为我们提供了对第六章所有题目的归纳与分析，重点强调了实践中应用的算法和策略。这一章主要是一个实践导向的部分，通过解题来提升算法理解和编程能力。以下是关于...
PMP第六版前三章知识点总结
05-28
第六版PMP前三章重要知识点串讲，对项目的基本要素、项目的运行环境、项目经理的角色等知识点总结
化工仪表及自动化第6章.ppt
11-21
《化工仪表及自动化》第六章主要探讨了在化工生产过程中的关键组件——执行器，以及它们在控制系统中的作用。执行器是控制系统的执行部分，负责根据控制器发送的信号调整介质流量，以保持或控制被控变量在设定值或...
通信原理课件通信原理\第六章 总结.doc
05-16
通信原理的课件很详细通信原理\第六章 总结.doc
电力拖动自动控制系统-交流部分第六章-知识点和习题.pdf
06-10
电力拖动自动控制系统交流部分，第六章基于稳态模型的交流电机调速系统的重点难点总结和习题，非常不错适合于复习用。
6第六章组织与组织力量整合.pptx
09-23
6第六章组织与组织力量整合.pptx
第六章关系数据理论2022优秀文档.ppt
11-30
总结来说，第六章关系数据理论涵盖了函数依赖的基本概念、Armstrong公理系统的推理规则以及模式分解的原则和方法，这些都是理解和设计高效、可靠数据库系统的基础。通过对这些理论的理解和应用，可以有效地优化...
第2章 进程管理总结.pdf
06-09
进程管理总结 本资源摘要信息将对进程管理的重要概念和...六、结语 本资源摘要信息对进程管理的概念和技术进行了总结，并结合实践例题来加深理解。了解进程管理的重要性和技术，将有助于更好地设计和实现多进程系统。
第六章ASP的组件2022优秀文档.ppt
11-14
总结来说，第六章“ASP的组件”讲解了如何在ASP环境中实例化和使用服务器组件，特别是强调了Browser Capabilities组件在检测和适应客户端浏览器能力方面的重要性。通过理解这些概念和技术，开发者能够构建更健壮、更...
干法第六章读后感参考.doc
09-16
干法第六章读后感参考.doc
数字设计原理与实践-第六章答案.doc
11-26
本资源总结了数字设计原理与实践第六章的主要知识点，涵盖了数字逻辑电路的设计和实现、DeMorgan 等效符号、逻辑函数的表示和简化、数字电路的时序分析和优化等方面的内容。 1. 数字逻辑电路的设计和实现 数字逻辑...
总结认知神经科学第六章
最新发布
02-15
第六章主要内容是关于认知神经科学中的注意力。注意力是认知系统中的一个重要组成部分，是指个体对外界刺激的选择性关注。 在本章中，可以学习到注意力的种类和作用，例如分配注意力和维持注意力；注意力的神经机制...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值