一，常用的内置api
- 下载图片
- 上传图片
- 分享到朋友圈
- 获取用户信息
- 模态框
- 滚动监听
- 获取设备信息
- 路由
- dom节点操作
（1）下载图片
<view>
<button type="primary" bindtap="downImg" >下载图片</button>
<image src="{
{pic}}" module="aspectFill" bindtap="downImg"/>
</view>
downImg() {
wx.downloadFile({
url: this.data.pic,
success(res) {
console.log(res);
//把临时文件保存到相册（需要用户授权）
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success() {
//提示保存成功
wx.showToast({
title: '下载图片成功',
icon: 'none'
})
}
})
}
})
},
效果展示：
（2）上传图片
<view>
<button type="warn" bindtap="upImg">上传图片</button>
</view>
upImg(){
var that =this;
wx.chooseMedia({
count:1,
success(res){
console.log(res)
//获取 选择 的第 0 个图片临时地址
var tempFile=res.tempFiles[0].tempFilePath;
//执行上传操作
wx.uploadFile({
filePath: tempFile,
name: 'file',
url: 'http://dida100.com/ajax/file.php',
success:res=>{
console.log("@@@",res);
console.log("为转换前",res.data)
//转化为js对象
var data=JSON.parse(res.data)
console.log("转换后",data)
//更新图片信息
that.setData({
pic:"http://dida100.com"+data.pic})
}
})
}
})
},
效果展示：
（3）分享到朋友圈
1.在onShareAppMessage()这个方法里面声明
onShareAppMessage() {
//默认当前页面的截图
//在实际中，可以网络请求一个数组，从随机回去一组参数
return{
title:'送红包了',
path:'/pages/index/index',
imageUrl:'https://img.tukuppt.com/png_preview/00/09/44/RNu32K5RpD.jpg!/fw/780'
}
},
2.点击按钮进行分享
<button type="warn" open-type="share">分享给朋友领红包</button>
onShareTimeline(){
return{
title:'送朋友',
// path:'/pages/index/index',
path:'?age=18&name=mumu',
imageUrl:'https://img.tukuppt.com/png_preview/00/09/44/RNu32K5RpD.jpg!/fw/780'
}
},
（4）滚动监听
<view class="showTop" bindtap="goTop" wx:if="{
{showTop}}">
回到顶部
</view>
//页面滚动
onPageScroll(e){
console.log(e); //打印出scrollTop
if(e.scrollTop>100){
//当页面的滚动距离大于100 时候 显示回到顶部
this.setData({
showTop:true})
}else{
//否则就回到页面
this.setData({
showTop:false})
}
},
开始时先隐藏回到顶部按钮，当鼠标滚动的距离大于100时让按钮显示
//回到顶部
goTop(){
wx.pageScrollTo({
//页面滚动到0 的位置，事件为600毫秒
duration:600,
scrollTop:0
})
},
点击回到顶部时，滚轮慢慢滚到顶部！
（5）模态框提示
<button type="primary" bindtap="showTip">提示</button>
showTip() {
wx.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#ff6600',
animation: {
duration: 400,
timingFunc: 'easeIn'
}
})
wx.setNavigationBarTitle({
title: '微信api',
})
wx.showLoading({
title: '我不会停的',
})
setTimeout(() => {
wx.hideLoading()
}, 3000)
},
（6）获取设备信息
wx.getSysteminfosync
- 状态栏高度（statusBarHeight）
- 可用窗口的宽 （windowWidth）
- 可用窗口的高（windowHeight）
- 安全区域 （safeArea）
- 手机型号 （system）
- 电量（batteryLevel）
（7）路由
- wx.navigateTo({})- 跳转
- wx.redirect-重定向
- wx.switchTab()-切换底部栏
- wx.navigateBack()-返回
（8）网络请求
wx.request()
- url:请求的地址
- data数据（post）
- timeout：超时事件
- method:方式post|get|put|delete
- success:成功时执行的回调函数
- fail失败时执行的回调函数
- complete完成：成功失败都执行，结束加载提示
（9）dom节点操作
onReady() {
console.log("页面生命周期,onReady第一次渲染完成 ")
//1.操作节点（没有window，document.getxxx,document.getElement）
//创建一个选中器
const query = wx.createSelectorQuery()
//选中h1节点，获取他的边界
query.select('.h1').boundingClientRect()
//获取窗口的位置信息
query.selectViewport().scrollOffset()
//执行命令返回结果
query.exec(function (res) {
// 获取元素的边界信息
/* left: 0 right: 320 top: 0 width: 320 */
console.log(res[0])
//窗口信息scrollHeight: 504 scrollLeft: 0 scrollTop: 0 scrollWidth: 320
console.log(res[1])
})
},
二，微信小程序的生命周期
（1）小程序的生命周期
- onLaunch页面启动执行
- onHide后台切换时执行
- onShow页面显示时执行
- onError发生错误时执行
（2）页面的生命周期
- onLoad页面加载时执行
1.发起网络请求
2.获取页面传递的参数
3.页面本地存
4.初始化
2.onReady页面初次渲染完成
3.onShow前台页面显示时执行
4.onHide后台运行时执行
5.unonLoad写在onLoad
