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

微信小程序生命周期

小程序生命周期

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，width
       console.log(res[0]);
       // 窗口信息 scrollHeight  scrollLeft: 0  scrollTop: 0  scrollWidth: 320
       console.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,
      })
    }
  })