小程序提供了一个简单、高效的应用开发框架和丰富的组件及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获取用户头像等。

微信小程序常用api使用相关推荐

微信小程序-常用api
文章目录微信小程序-常用api 路由 wx.switchTab(Object object) wx.navigateTo(Object object) wx.navigateBack(Object ...
【小程序开发必备】微信小程序常用API全介绍，附示例代码和使用场景
文章目录 1.网络请求相关API 1.1 wx.request 1.2 wx.uploadFile 1.3 wx.downloadFile 1.4 wx.connectSocket 2.页面跳转相关A ...
微信小程序常用api总结
内容待写... ≧◔◡◔≦ 滑到底啦~ // 1.0 小程序接收传递过来的参数onLoad: function (options) {var str= options.str; //接收到的参数 st ...
【小程序】微信小程序常用api的使用，附案例（建议收藏）
1- 前言这是微信小程序常用的几个API,特地总结一下: 学会使用微信官方文档 · 小程序 2- 界面 2.1 wx.setNavigationBarTitle() 标题栏文本 wx.setNav ...
微信小程序-常用API开发技巧学习笔记
常用API开发技巧学习笔记第一章认识微信小程序前后端分离的开发方式小程序的特点小程序对开发者的影响学习小程序需要的基础第二章小程序环境搭建与开发工具介绍小程序开发环境没有小程序号对 ...
微信小程序常用API封装
主要是为了在项目中使用时不需要每次都通过wx. 获取使得同样代码冗余主要是为了在项目中使用时不需要每次都通过wx. 获取使得同样代码冗余主要是为了在项目中使用时不需要 ...
从0到一开发微信小程序（6）—小程序常用API
文章目录其他相关文章 1.小程序API 1.1.路由 1.1.1.navigateTo(保留当前页面,跳转到应用内的某个页面,可以带参数) 1.1.2.redirectTo(关闭当前页面,跳转到应用 ...
vc++6.0获取磁盘基本信息_微信小程序——常用功能2：微信小程序用户登录，申请用户授权并获取用户基本信息...
微信小程序--常用功能2:申请用户授权并获取用户基本信息为了更好的用户体验,很多时候我们想要获取用户的基本信息,从而实现将信息呈现到用户界面.给用户划分地域.给用户分类等功能. 但是要想获取用户信息 ...
微信小程序常用视图容器组件
微信小程序常用视图容器组件 1.组件概述 2.常用的试图容器组件 2.1 view 2.1.1 案例 2.2 scroll-view 2.2.1 案例 2.3 swiper 2.3.1 案例 1.组件 ...

微信小程序常用api使用