微信小程序的封装和登录
常见的交互反馈设计
Toast和模态对话框
在完成某个操作成功之后，我们希望告诉用户这次操作成功并且不打断用户接下来的操作。弹出式提示Toast就是用在这样的场景上，Toast提示默认1.5秒后自动消失
写法
Page({
onLoad: function() {
wx.showToast({
title: '已发送', 弹窗的内容最多7个字
icon: 'success', icon图标
duration: 1500 显示的时间 1500=1.5秒
})
// wx.hideToast() 隐藏Toast
}
})
模态框
Page({
onLoad: function() {
wx.showModal({
title: '标题', 标题
content: '告知当前状态，信息和解决方法', 标题下面的内容
confirmText: '主操作',
cancelText: '次要操作',
success: function(res) {
if (res.confirm) { 点击了确认之后的操作
console.log('用户点击主操作')
} else if (res.cancel) { 点击了取消之后的操作
console.log('用户点击次要操作')
}
}
})
}
})
本地储存
异步存储
写法
wx.setStorage({
data: {}, 需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。
key: 'list', 本地缓存中指定的 key
})
同步存储
写法
wx.setStorageSync('list1', {内容})
读取本地存储
异步取出
写法
wx.getStorage({
key: 'list', 要取出存储的名字
success(res){ 取出来的内容
console.log(res);
}
})
同步取出
写法
wx.getStorageSync('list')
微信小程序的界面跳转
wx.navigateTo：保留当前页面，只能打开非 tabBar 页面，可以跳转传参
wx.redirectTo：关闭卸载当前页面，只能打开非 tabBar 页面，可以跳转传参
wx.switchTab：关闭所有非tabbar页面， 只能打开 tabBar 页面，不可以跳转传参
wx.reLaunch：关闭卸载所有页面，可以打开任意页面，可以跳转传参
wx.navigateBack：返回前面的页面，可以指定返回多少页，如果用过redirectTo，那么被关闭的页面将返回不去，不可以返回传参
微信小程序的请求
wx.request
写法
wx.request({
url: 'https://showme.myhope365.com/api/cms/article/open/list', 接口地址
method: "POST", 请求方式默认get
data: { 参数，get一般需要？拼接
pageNum: 1,
pageSize: 10
},
header: { 不是json方式的需要写
"content-type": "application/x-www-form-urlencoded"
},
success: res => { 请求回来的数据
console.log(res.data.rows)
}
})
参数说明
url 开发者服务器接口地址。注意这里需要配置域名
data 请求的参数
header 设置请求的 header，header 中不能设置 Referer，默认header['content-type'] = 'application/json'
method（需大写）有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
dataType json 回包的内容格式，如果设为json，会尝试对返回的数据做一次 JSON解析
success 收到开发者服务成功返回的回调函数。
fail 接口调用失败的回调函数
complete 接口调用结束的回调函数（调用成功、失败都会执行）
封装请求
function request(options) {
// 请求拦截器
// ...
// 1. 加一些统一的参数，或者配置
if (!options.url.startsWith("https://") && !options.url.startsWith("http://")) {
options.url = "https://showme2.myhope365.com" + options.url
}
// 默认的请求头
let header = {
"cookie": wx.getStorageSync("cookie") || "",
"content-type": "application/x-www-form-urlencoded",
};
if (options.header) {
header = {
...header,
...options.header
}
}
return new Promise((reslove, reject) => {
// 调用接口
wx.request({
// 默认的配置
// 加载传入的配置
...options,
header,
success(res) {
// 响应拦截器，所有接口获取数据之前，都会先执行这里
// 1. 统一的错误处理
if (res.statusCode != 200) {
wx.showToast({
title: '服务器异常，请联系管理员',
})
}
reslove(res)
},
fail(err) {
reject(err)
}
})
})
}
export function get(url, options = {}) {
return request({
url,
...options
})
}
export function post(url, data, options = {}) {
return request({
url,
data,
method: "POST",
...options
})
}
封装之后的写法
需要先引入
import {get} from "../../api/http"地址是封住的文件地址
使用
get(`地址?${拼接}`).then((res) => {
this.setData({
title: res.data.data.title,
img1: res.data.data.imgList,
wen: res.data.data.content
})
})
微信小程序的封装和登录相关推荐
- 【 微信小程序请求封装】【进阶版】处理401请求token过期--重新登录--重新发起刚才过期的请求
微信小程序请求封装(拦截器):处理请求过期–重新登录–重新发起刚才过期的请求 env.js //这里使用的接口呢都是自己模拟的,可以根据自己的需求进行添加module.exports={//开发环境的 ...
- 小程序中封装ajax请求,如何在微信小程序中封装网络请求
如何在微信小程序中封装网络请求 发布时间:2021-05-11 16:59:36 来源:亿速云 阅读:95 作者:Leah 这期内容当中小编将会给大家带来有关如何在微信小程序中封装网络请求,文章内容丰 ...
- python写的小程序怎么封装_Promise实现微信小程序接口封装过程
Promise实现微信小程序接口封装过程 发布时间:2020-06-15 13:40:43 来源:亿速云 阅读:419 作者:鸽子 相信很多开发者都遇到过回调地狱的问题.由于微信小程序的API基本都是 ...
- 微信小程序+SpringBoot实现用户登录
微信小程序+SpringBoot实现用户登录 前言 微信小程序越来越吃香了(前话就这么多,嘿嘿) 前端 那就开始吧,登录界面就如此了 wxml内容如下,这是格式化后粘贴过来的,emmm,怪像那回事. ...
- 小程序promise封装post请求_微信小程序promise封装get/post请求
微信小程序promise封装get/post请求 2020-07-04 20:42:49 微信小程序promise封装get/post请求 叶子兔 2018-10-10 08:55:30 1056 ...
- 微信小程序如何封装自己的组件？
在现在前端领域,最常见的话语就是组件化.工程化的内容.所有的框架都在朝着这方面发展.作为前端生态中的新兴热人物小程序的出现,同样支持组件化开发. 在我们的日常开发中,可以封装一些常用的组件达到复用效果 ...
- 【愚公系列】2022年09月 微信小程序-微信小程序实现网页一键登录功能
文章目录 前言 一.微信小程序实现网页一键登录功能 1.旧版登录方法 2.新版登录方法 二.相关第三方包源码 前言 如果微信小程序要获取微信登录的用户信息,需要拿到code去后台换取用户信息,具体步骤 ...
- 微信小程序开发之——用户登录-登录流程(1)
一 概述 新建微信小程序自带用户登录简化 小程序登录流程时序 二 新建微信小程序自带用户登录简化 新建的微信小程序默认有用户登录功能,将多余功能去除后,简化如下 2.1 index.wxml < ...
- 微信小程序如何封装api接口
微信小程序如何封装api接口 一. 小程序接口请求流程 二,域名配置 一定要配置https,小程序上配置的域名必须是域名备案的 三.打开微信开发者工具,打开你的项目,点开详情.确认一下域名是否一一匹对 ...
- 微信小程序简单封装接口
微信小程序接口封装 比如说,现在我要访问后台数据,我面临两个问题: 我可能在多个模块中向后台发送数据请求,每次都需要再写一遍url 地址 当获取数据的地址发生变化时,我需要修改项目中所有的url地址 ...
最新文章
- vue颜色选择器_如何制作？ Vue的颜色选择器！
- redis持久化 mysql_Redis 如何保持和MySQL数据一致
- TurboMail最新版本4.1.0之我见（一）
- 修改ALSM_EXCEL_TO_INTERNAL_TABLE的限制
- Oracle 11g 新特性 -- 自动诊断资料档案库(ADR) 说明
- centos虚拟机根目录空间分配
- Shell入门（十）之echo
- javax包 rpc_javax.xml.rpc和javax.wsdl分别属于哪个jar包？
- 机器学习 Machine Learning- 吴恩达Andrew Ng 第6~10课总结
- MATLAB-imrotate函数
- 位，字节，字符的区别是什么？
- win7计算机进行重镜像,win7镜像重装系统图文教程
- 最新后盾网Smarty框架教程 Smarty重入门到实战教程 共14课
- 修复YYC松鼠短视频系统搜索功能无法使用问题
- 【P4lang】P4数据平面编程实验basic_tunnel
- 哪些英文单词改变时态需要双写末尾字母
- Jdon Framework
- 今天完成了股票自动化交易软件1.2版本了
- 飞凌嵌入式FETMX6Q-C
- H264码流打包分析.整理