微信小程序--小程序系统API
文章目录小程序系统API1.网络请求1.1网络请求的基本使用小示例1.2网络请求-工具函数封装2.小程序中展示弹窗3.小程序中使用分享4.小程序登录流程解析及代码演练5.小程序实现页面的跳转5.1 navigator组件主要就是用于界面的跳转重点:数据传递-传递方式分析5.1 通过系统API进行跳转小程序系统API1.网络请求1.1网络请求的基本使用微信提供了专属的API借口,用于网络请求:wx.
文章目录
小程序系统API
1.网络请求
1.1网络请求的基本使用
微信提供了专属的API借口,用于网络请求:wx.request(Object object)
几个关键的属性:
- url:请求地址(必传)
- data:请求参数
- method:请求方式
- success:成功时回调
- fail:失败时回调
小示例
//3.post请求,并且携带参数
wx.request({
url: 'http://httpbin.org/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: 'http://httpbin.org'
}).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.调用页面对象的setData
home.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 获取当前的页面栈,决定需要返回几层。
具体作用于类似的组件相同,传递参数方式也类似
更多推荐
所有评论(0)