小程序提供了一个简单、高效的应用开发框架和丰富的组件及API，帮助开发者在微信中开发具有原生 APP 体验的服务。本文提及的案例为小程序搭建时常用种类，如需全面了解，可查阅官方文档（官网->首页->文档）。注意，查阅搜索时要输入api全称。

一、生命周期

1.1 小程序的生命周期

        小程序生命周期，在小程序根目录下app.js文件里设置。每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。

        onError 小程序发送错误，用于提示与重启；

        onHide 后台运行，用于停止播放；

        onShow 前台展示，用于恢复播放；

        onLaunch 页面启动，用于本地存储，系统信息获取，登录获取code等。

App({onError(){console.log("小程序生命周期：onError小程序发送错误")},onHide(){console.log("小程序生命周期：onHide小程序后台运行")onShow(){console.log("小程序生命周期：onShow小程序前台展示")},onLaunch() {console.log("小程序生命周期：onLaunch小程序页面启动")// 展示本地存储能力const logs = wx.getStorageSync('logs') || []logs.unshift(Date.now())wx.setStorageSync('logs', logs)// 登录wx.login({success: res => {// 发送 res.code 到后台换取 openId, sessionKey, unionId}})},globalData: {userInfo: null,num:5}
})

1.2  页面生命周期

        对于小程序中的每个页面，都需要在页面对应的 js 文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等。页面的生命周期常用api有以下几种。

        onReady 第一次渲染完成；

        onShow页面前台显示；

        onHide页面后台运行；

        onUnload页面页面被卸载；

        固定回调函数有：onPullDownRefresh下拉属性、onReachBottom上拉触底、onShareAppMessage右上角分享、onShareTimeLine 分享到朋友圈、onPageScroll 当页面滚动时、onTabItemTap 页面底部栏被点击等

.js文件

Page({data: {showtop:false},onLoad(options) {console.log("页面生命周期：onLoad加载")},onReady() {console.log("页面生命周期：onReady第一次渲染完成")//1.操作节点（没有window，document.getElsment,document）//创建一个选择器const query=wx.createSelectorQuery();//选中h1节点，获取它的边界query.select(".h1").boundingClientRect();//获取窗口的位置信息query.selectViewport().scrollOffset();//执行命令返回结果query.exec(function(res){//获取元素的边界信息，bottom,top,right,left,height,widthconsole.log(res[0]);//窗口信息，scrollHeight,scrollLeft,scrollWidth,scrollTopconsole.log(res[1]);})},onShow() {console.log("页面生命周期：onShow页面前台显示")},// onShareTimelineonShareTimeline(){},onHide() {console.log("页面生命周期：onHide页面后台运行")},onUnload() {console.log("页面生命周期：onUnload页面页面被卸载")},onPullDownRefresh() {},onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {//默认以当前页面的截图//实际中可以网络请求一个数组，从数组随机的获取一组参数return {title:"送你50元现金",path:"/pages/yidian/yidian",imageUrl:"图片路径"}},//分享到朋友圈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,})}
})

.wxml文件

<view class="h1">页面的生命周期
</view>
<navigator url="/pages/home/home">home</navigator>
<view><navigator url="/pages/home/home" open-type="redirect">首页-redirect </navigator>
</view>
<view wx:for="{{100}}" wx:key="index">{{item+1}}
</view>
<view class="showtop" wx:if="{{showtop}}" bindtap="goTop">TOP
</view>

 二、微信内置api

2.1 基础api

        wx.getSystemInfoAsync()同步获取系统信息，一般常用到的系统信息有statusBarHeight状态栏高度、windowWith/Height可用窗口的宽/高、safeArea安全区域、model手机型号、system系统 iOS/Android、batteryLevel电量等。

         路由api，常用到有wx.navigateTo({}) 跳转、wx.redirectTo()重定向、wx.switchTab()切换底部栏、wx.navigateBack()返回等。

2.2 网络请求

        wx.request()，参数及含义：url请求地址、data数据（post）、timeout超时、header请求头 通常添加contentType Authorization token、method方法、success成功的回调函数、fail失败的回调函数、complete 无论成功或失败都会执行（通常会结束加载提示）等。

wx.request({url:url,method:option.method,//请求的方法，默认为getdata:option.data,header,success(res){//请求成功resolve(res.data);},fail(err){//04对错误进行处理wx.showToast({title: '加载失败',icon:"none"})//请求失败rejects(err);},complete(){//关闭加载提示wx.hideToast();}})

2.3  文件下载与上传

        wx.downloadFile() 下载文件；

        wx.upLoadFile() 上传文件（图片）。

.js文件

page({
data: {pic:"https://img1.baidu.com/it/u=3176572196,1731961520&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=500"},
upFile(){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);//转换为json对象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"})}})}})
})

 .wxml文件

<view>wx.downloadFile()下载文件
</view>
<image src="{{pic}}" bindtap="downPic" mode="aspectFill"/>
<button type="warn" bindtap="upFile">上传文件</button>

2.4 界面

     wx.showModal 显示模态框；

     wx.showToast 显示提示，icon的类型有success、 fail、 err、 none；

     wx.showLoading显示加载；

     wx.setNavigationBarTitle({})设置页面顶部栏标题。

showTip(){wx.setNavigationBarTitle({title: 'api讲解',})wx.showLoading({title: '加载中',})setTimeout(()=>{wx.hideLoading()},1000)wx.showToast({title: 'hello',icon:"none"})wx.showModal({title:"需要观看广告",content:"每天试用两次"})},

2.5 获取用户信息

        wx.getUserProfile()获取用户信息。

三、button开放能力

        内置组件button有一个open-type属性，值类型为string，常用到的合法值有：share触发用户转发、getPhoneNumber获取用户手机号、getUserInfo获取用户信息、chooseAvatar获取用户头像等。