小程序提供了一个简单、高效的应用开发框架和丰富的组件及API，帮助开发者在微信中开发具有原生 APP 体验的服务。本文提及的案例为小程序搭建时常用种类，如需全面了解，可查阅官方文档（官网->首页->文档）。注意，查阅搜索时要输入api全称。
一、生命周期
1.1 小程序的生命周期
小程序生命周期，在小程序根目录下文件里设置。每个小程序都需要在 中调用 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 => {
-
// 发送 到后台换取 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) {
-
("页面生命周期：onLoad加载")
-
},
-
onReady() {
-
("页面生命周期：onReady第一次渲染完成")
-
//1.操作节点（没有window，,document）
-
//创建一个选择器
-
const query=();
-
//选中h1节点，获取它的边界
-
query.select(".h1").boundingClientRect();
-
//获取窗口的位置信息
-
().scrollOffset();
-
//执行命令返回结果
-
(function(res){
-
//获取元素的边界信息，bottom,top,right,left,height,width
-
(res[0]);
-
//窗口信息，scrollHeight,scrollLeft,scrollWidth,scrollTop
-
(res[1]);
-
})
-
-
},
-
onShow() {
-
("页面生命周期：onShow页面前台显示")
-
},
-
// onShareTimeline
-
onShareTimeline(){
-
-
},
-
onHide() {
-
("页面生命周期：onHide页面后台运行")
-
},
-
onUnload() {
-
("页面生命周期：onUnload页面页面被卸载")
-
-
},
-
onPullDownRefresh() {
-
-
},
-
onReachBottom() {
-
-
},
-
-
/**
-
* 用户点击右上角分享
-
*/
-
onShareAppMessage() {
-
//默认以当前页面的截图
-
//实际中可以网络请求一个数组，从数组随机的获取一组参数
-
return {
-
title:"送你50元现金",
-
path:"/pages/yidian/yidian",
-
imageUrl:"图片路径"
-
}
-
},
-
//分享到朋友圈
-
-
onPageScroll(e){
-
//当页面滚动距离大于100时显示回到顶部
-
if(>100){
-
({showtop:true});
-
}else{
-
({showtop:false});
-
}
-
},
-
goTop(){
-
//页面滚动到0的位置，时间为600毫秒
-
(
-
{
-
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
()同步获取系统信息，一般常用到的系统信息有statusBarHeight状态栏高度、windowWith/Height可用窗口的宽/高、safeArea安全区域、model手机型号、system系统 iOS/Android、batteryLevel电量等。
路由api，常用到有({}) 跳转、()重定向、()切换底部栏、()返回等。
2.2 网络请求
wx.request()，参数及含义：url请求地址、data数据（post）、timeout超时、header请求头 通常添加contentType Authorization token、method方法、success成功的回调函数、fail失败的回调函数、complete 无论成功或失败都会执行（通常会结束加载提示）等。
-
({
-
url:url,
-
method:option.method,//请求的方法，默认为get
-
data:option.data,
-
header,
-
success(res){
-
//请求成功
-
resolve(res.data);
-
},
-
fail(err){
-
//04对错误进行处理
-
({
-
title: '加载失败',
-
icon:"none"
-
})
-
//请求失败
-
rejects(err);
-
},
-
complete(){
-
//关闭加载提示
-
();
-
}
-
})
2.3 文件下载与上传
() 下载文件；
() 上传文件（图片）。
.js文件
-
page({
-
data: {
-
pic:"/it/u=3176572196,1731961520&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=500"
-
},
-
upFile(){
-
var that=this;
-
//选择媒体
-
({
-
count:1,//媒体数量
-
success(res){
-
(res);
-
//获取选择的第0个图片的临时地址
-
var tempFile=[0].tempFilePath;
-
({
-
filePath: tempFile,
-
name: 'file',
-
url: '/ajax/',
-
success:res=>{
-
(res);
-
//转换为json对象
-
var data=(res.data);
-
//更新图片信息
-
({pic:""+data.pic})
-
}
-
})
-
}
-
})
-
},
-
downPic(){
-
({
-
url: this.data.pic,
-
success(res){
-
(res);
-
({
-
filePath: ,
-
success(){
-
//提示保存成功
-
({
-
title: '下载成功',
-
icon:"none"
-
})
-
}
-
})
-
-
}
-
})
-
})
.wxml文件
-
<view>
-
()下载文件
-
</view>
-
<image src="{{pic}}" bindtap="downPic" mode="aspectFill"/>
-
<button type="warn" bindtap="upFile">上传文件</button>
2.4 界面
显示模态框；
显示提示，icon的类型有success、 fail、 err、 none；
显示加载；
({})设置页面顶部栏标题。
-
showTip(){
-
wx.setNavigationBarTitle({
-
title: 'api讲解',
-
})
-
wx.showLoading({
-
title: '加载中',
-
})
-
setTimeout(()=>{
-
wx.hideLoading()
-
},1000)
-
wx.showToast({
-
title: 'hello',
-
icon:"none"
-
})
-
wx.showModal({
-
title:"需要观看广告",
-
content:"每天试用两次"
-
})
-
},
2.5 获取用户信息
()获取用户信息。
三、button开放能力
内置组件button有一个open-type属性，值类型为string，常用到的合法值有：share触发用户转发、getPhoneNumber获取用户手机号、getUserInfo获取用户信息、chooseAvatar获取用户头像等。