微信小程序生命周期

小程序生命周期

onLaunch 启动（本地存储，登录）
onShow前台展示开始播放与运行
onHide后台运行（停止播放与运行）
onError发生错误（监听处理错误）

App({onError(){console.log("小程序生命周期：onError小程序发送错误")// 提示与重启},onHide(){console.log("小程序生命周期：onHide小程序后台运行")// 停止播放},onShow(){console.log("小程序生命周期：onShow小程序前台展示")// 恢复播放},onLaunch() {console.log("小程序生命周期：onLaunch页面启动")// 本地存储，系统信息获取，登录获取code// 展示本地存储能力const logs = wx.getStorageSync('logs') || []logs.unshift(Date.now())wx.setStorageSync('logs', logs)

页面的生命周期

生命周期

onLoad 加载完毕（获取页面传参，初始化，网络请求，本地出错）
onReady首次渲染完毕（获取节点）
onShow前台显示
onHIde后台运行
onUnload 页面被卸载

固定回调函数

onPullDownRefresh 下拉属性
在json中配置 enablePullDownRefresh
停止下拉刷新 wx.stopPullDownRefresh()
onReachBottom 上拉触底
onShareAppMessage 右上角分享
onShareTimeline 分享到朋友圈
onPageScroll 页面滚动
e.scrollTop 页面滚动的距离
wx.pageScrollTo({ duration: 600, scrollTop:0, }) //将页面滚动到指定的位置 //也可以指定滚动到指定的元素
onTabItemTap 页面底部栏被点击

节点信息

const query = wx.createSelectorQuery() //创建一个选择器
query.select('.h1').boundingClientRect() //选中h1节点获取他的边界
query.selectAll('.h1').boundingClientRect() //选中所有h1节点获取他的边界
query.selectViewport().scrollOffset(); //获取窗口的位置信息
query.exec(function(res){}) //执行查询操作放回结果

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){// 获取元素的边界信息，bottom，top ，left，right，height，widthconsole.log(res[0]);// 窗口信息 scrollHeight  scrollLeft: 0  scrollTop: 0  scrollWidth: 320console.log(res[1]);})// create创建Selector选择器，query查询；bounding边界Client客户界面Rect区域// Viewport视口，scrollOffset滚动与偏移},

button的开放能力

open-type：
share 触发分享
getPhoneNumber 获取用户的手机号
getUserInfo 获取用户信息
chooseAvatar 获取用户的头像
都会弹框需要授权

微信小程序内置api

界面
网络请求
用户头像
登录
图片与文件
系统信息
网络

wx.getSystemInfoSync() 同步获取系统信息

onLoad(options) {var sys = wx.getSystemInfoSync();console.log(sys);}

下载与上传图片文件

<view class="title">网络</view>
<view>wx.request（）网络请求</view>
<view>wx.downloadFile 下载文件</view>
<view>wx.saveImageToPhotosAlbum 保存图片到相册</view>
<view>wx.uploadFile 下载</view>
<view>wx.chooseMedia 选择图片或者视频</view>
<view> wx.chooseImage 从相册选择图片</view>
<image src="{{pic}}" mode="aspectFill" bindtap="downPic"></image>
<button type="warn" bindtap="upImg">上传图片</button>

       data: {pic:"https://img1.baidu.com/it/u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"},//上传图片upImg(){var that  =  this;// 选择图片// wx.chooseImage({// 选择媒体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);// 转换为js对象var data = JSON.parse(res.data);// 更新图片信息that.setData({pic:"http://dida100.com"+data.pic})}})}})},//下载图片downPic(){wx.downloadFile({url: this.data.pic,success(res){console.log(res);// 把临时文件保存到相册(需要用户授权)wx.saveImageToPhotosAlbum({filePath: res.tempFilePath,success(){// 提示保存成功wx.showToast({title: '下载图片成功',icon:"none"})}})}})},

模态框与提示信息

<view class="title">界面</view>
<view>wx.showModal 模特框</view>
<view>wx.showToast 提示</view>
<view>wx.showLoading 加载提示</view>
<view>wx.setNavigationBarTitle 标题栏文本</view>
<view>wx.setNavigationBarColor 设置导航栏的颜色</view>
<button size="mini" bindtap="showTip">提示</button>

 showTip(){wx.setNavigationBarTitle({title: 'api讲解',})wx.setNavigationBarColor({frontColor: '#ffffff',backgroundColor: '#ff0000',animation: {duration: 400,timingFunc: 'easeIn'}})wx.showLoading({title: '加载中...',})setTimeout(()=>{wx.hideLoading();},2000)},

获取用户信息

<view class="title">开放能力</view>
<view>wx.getUserProfile 获取用户信息</view>
<view wx:if="{{userInfo.nickName}}"><image style="width: 100px; height: 100px;" src="{{userInfo.avatarUrl}}"></image><view>{{userInfo.nickName}}</view>
</view>
<button wx:else size="mini" bindtap="getUser">
获取用户信息
</button>

 onLoad(options) {var sys = wx.getSystemInfoSync();console.log(sys);// 本地获取用户信息var userInfo = wx.getStorageSync('userInfo')||{};// 更新用户信息this.setData({userInfo})},getUser(){var that = this;wx.getUserProfile({desc: '需要获取您的昵称',success:res=>{console.log(res);// 更新本地用户信息that.setData({"userInfo":res.userInfo})// 存储用户信息到本地wx.setStorageSync('userInfo', res.userInfo)}})},}

触发分享

 <!-- 必须是用户主动点击才能触发 --><button size="mini" type="primary" open-type="share">分享给朋友赚现金</button>

  data: {showTop:false,},
onShareAppMessage() {// 默认以当前页面的截图// 实际中，可以网络请求一个数组，从数组随机的获取一组参数return {title:"送你50元现金红包",path:"/pages/yidian/yidian",imageUrl:"https://img1.baidu.com/it/u=2192736850,1088345825&fm=253&fmt=auto&app=138&f=JPEG?w=375&h=500"}},// 分享到朋友圈onShareTimeline(){// 不返回也是有个默认的当前页面效果的return {title:"给，这是你喜欢的",query:"?name=mumu&age=18",imageUrl:"https://img1.baidu.com/it/u=2192736850,1088345825&fm=253&fmt=auto&app=138&f=JPEG?w=375&h=500"}},

回顶效果

 <view wx:for="{{100}}" wx:key="item">{{item+1}}</view><view class="top" wx:if="{{showTop}}" bindtap="goTop">top</view>

// 当页面滚动时候onPageScroll(e){//  当页面的滚动距离大于100时候显示回到顶部if(e.scrollTop>100){this.setData({showTop:true})}else{// 否则隐藏回到顶部this.setData({showTop:false})}},// 回到顶部goTop(){// 页面滚动到0的位置，时间为600毫秒wx.pageScrollTo({duration: 600,scrollTop:0,})}})

微信小程序生命周期与内置api相关推荐

微信小程序生命周期函数（内置钩子函数）
微信小程序生命周期函数(内置钩子函数) 1:应用生命周期生命周期说明 onLaunch 小程序初始化完成时触发,全局只触发一次 onShow 小程序启动或从后台进入前台时(页面显示) onHide ...
浅析微信小程序生命周期之应用生命周期
浅谈微信小程序生命周期之应用生命周期参考:微信小程序官方文档微信小程序生命周期可分为应用生命周期.页面生命周期和组件生命周期,本文结合微信官方文档浅析微信小程序的应用生命周期.从注册一个小程序生命 ...
微信小程序开发：微信小程序生命周期总结
前言在微信小程序开发中,关于微信小程序API的使用是必备技能,但是关于微信小程序的生命周期也是首先要了解和掌握的知识点.尤其是现在的前端开发领域,关于前端的各种框架和技术都要会,而且微信小程序的语法 ...
vue生命周期+微信小程序生命周期详解
文章目录 1 vue生命周期 1 明确 2 小程序生命周期 1 应用生命周期 2 页面生命周期页面之间跳转 3 组件生命周期 4 应用生命周期影响页面生命周期 5 总结参考链接 1 vue生命周期 ...
微信小程序——生命周期
生命周期 1.概念 2.分类 3.生命周期函数 4.生命周期函数的分类 5.应用的生命周期函数 6.页面的生命周期函数 1.概念生命周期(Life Cycle)是指一个对象从创建 -> 运行 ...
微信小程序-生命周期
为什么今天突然总结一下微信小程序的生命周期呢?因为突然发现这个知识点忘得有点干净.所以今天就看一下微信小程序的生命周期是怎么个事吧! 目录生命周期生命周期的分类生命周期函数的作用生命周期函数的 ...
微信小程序显示loading效果，微信小程序节流效果，微信小程序生命周期，微信小程序组件的创建与使用
一.显示loading效果文档地址:wx.showLoading(Object object) | 微信开放文档请求前显示loading 效果,请求结束后隐藏loading // 在请求模块中 ...
微信小程序生命周期
小程序的生命周期是指小程序的启动-运行-销毁的过程在小程序中,生命周期分为两类应用生命周期指小程序从启动->运行->销毁的过程页面生命周期特指小程序页面的加载->渲染-&g ...
微信小程序生命周期及（bindtap和catchtap）点击事件
小程序生命周期: data:{} 页面的初始数据: data的后面可以写wxml中绑定的事件,如showPopup() {}: onLoad:function(options){} 监听页面加 ...

微信小程序生命周期与内置api