文章目录
小程序系统API1.网络请求1.1网络请求的基本使用小示例 1.2网络请求-工具函数封装 2.小程序中展示弹窗3.小程序中使用分享4.小程序登录流程解析及代码演练5.小程序实现页面的跳转5.1 navigator组件主要就是用于界面的跳转重点：数据传递-传递方式分析 5.1 通过系统API进行跳转小程序系统API
1.网络请求
1.1网络请求的基本使用
微信提供了专属的API借口，用于网络请求：wx.request(Object object)
几个关键的属性：
url：请求地址（必传）data：请求参数method：请求方式success：成功时回调fail：失败时回调
小示例
//3.post请求，并且携带参数wx.request({url: '/post',method: 'POST',data:{name: 'coderwhy',age: 18},success: function(res){console.log(res);},fail: function(err){//错误时调用的函数console.log(err);}})
1.2网络请求-工具函数封装
封装的好处：
降低网络请求和wx.request的耦合度使用Promise的方法去回调
//network.js 对request的封装module.exports = options => {return new Promise((resolve, reject) => {wx.request({url: options.url,method: options.method || 'GET',data: options.data || {},success: resolve,fail: reject})})}//home.js 对封装的request的调用const request = require('../../server/network')//import request from '../../server/network'onLoad: function (options) {//首页加载完成后，发送网络请求 //promise最大的好处就是防止出现回调地狱request({url: ''}).then(res => {console.log(res);}).catch(err => {console.log(err);})}
2.小程序中展示弹窗
展示弹窗的四种方式：showToast, showModal, showLoading, showActionSheet
1）showToast 特点：有文字有图标，显示一定时间后消失
wx.showToast({// title: '你好啊',title: '成功',icon: 'success',duration: 5000,mask: true, //蒙版success: function(){console.log('展示弹窗成功')},fail: function(){console.log('展示弹窗完成')}})//可以将图标改为图片，采用image属性
2） showModal 有确定和取消按钮，有标题和文本
3） showLoading 显示加载，可以设置时间
4） showActionSheet 从底部弹出弹框
小结
各个弹框可以设置内容和颜色，以及展示成功，和展示失败的函数，以及蒙版的使用具体详见文档
注意
wx.showLoading 和 wx.showToast 同时只能显示一个wx.showLoading 应与 wx.hideLoading 配对使用
3.小程序中使用分享
两种方式：
点击右上角菜单按钮，之后点击转发
在页面的js文件中添加
onShareAppMessage: function(options) {//有三个字段，用于自定义转发内容// title, path, imageUrl//路径非常重要，用于决定，打开分享时进入哪一个页面return {title: 'hello world',path: '/pages/home/home.wxml' , imageUrl: '图片地址' //默认截图}}
点击某个按钮，直接转发
open-type=“share”
<button size='mini' open-type="share">分享</button>
4.小程序登录流程解析及代码演练
登录流程图：
调用wx.login获取code调用wx.request发送code到我们自己的服务器将登录状态的标识token进行存储，以便下次再用请求需要登录态标识接口时，携带token
5.小程序实现页面的跳转
页面跳转的两种方式：通过navigator组件和通过wx的API跳转
5.1 navigator组件主要就是用于界面的跳转
<navigator url="/pages/detial/detial">跳到详情页</navigator>
navigator组件有open-type属性，有几个常用取值
navigate 对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能redirect 关闭当前页面，跳转到应用内的某个页面，但不允许跳转到tabbar页面，并且不能返回；switchTab 跳转到tabBar页面，关闭其他所有非tabBar页面reLaunch 关闭所有页面，打开应用中某个页面navigateBack 自定义返回操作
<!-- 自定义返回 --><navigator open-type="navigateBack">返回</navigator><!-- delta="2" 返回两个层级 --><navigator open-type="navigateBack" delta="2">返回</navigator>
重点：数据传递-传递方式分析
1.首页向详情页传递数据在跳转地址后加上queryString，以键值对的方式书写，
在跳转到的detial页面的js文件中，有onLoad函数，options参数中有传递过来的信息
<navigator url="/pages/detial/detial?name=why&age=18&height=1.88">跳转到详情页</navigator>
2.详情页向首页返回数据
可以在详情页的onUnload生命周期函数中进行实现
// 1.获取首页的页面对象// getCurrentPages 返回当前所有活跃的页面const pages = getCurrentPages();// console.log(pages);const home = pages[pages.length - 2]//2.调用页面对象的setDatahome.setData({title:'呵呵呵'})
5.1 通过系统API进行跳转
常见跳转的API
wx.navigateTo(Object object)
保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。wx.redirectTo(Object object)
关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。wx.switchTab(Object object)
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面wx.navigateBack(Object object)
关键参数：delta返回的页面数，如果 delta 大于现有页面数，则返回到首页。
关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。
具体作用于类似的组件相同，传递参数方式也类似
如果觉得《微信小程序--小程序系统API》对你有帮助，请点赞、收藏，并留下你的观点哦！
