一、手机号一键登录
1.开启loading加载动画状态
2.校验当前手机是否支持一键登录,在手机未插卡、流量未开启的情况下会返回code为0,提示信息msg为“当前设备不支持手机号一键登录”
uni.preLogin({...})
3.校验当前用户是否登录,在VueX中获取登陆状态,如果存在已登陆,则返回code为1,提示用户已登录
4.调用云函数,读取SM卡获取用户手机号启动一键登录,调用后台接口,返回接口返回值,并在.catch中统一抛出异常信息,比如用户未授权。
二、封装image图片组件
原因:APP中图片常常涉及点击全屏展示、长按保存功能,且该功能大多涉及到了对手机存储和访问权限的申请和检测,因目前所有的应用市场要求,申请该类权限必须有相关弹窗说明权限申请用途。
步骤:
1. 新建Image组件,监听点击事件,新建一个view或div图层设置100vh和100vw,层级设置999最高,内部节点为原生img标签,用来全屏展示图片。
2. 监听内部原生img标签的长按事件,开启从下到上的1/3屏的展开菜单,这个组件可以用组件库的,我们用的UView2.0,默认第一个菜单选项为【保存图片】,其余菜单项由父组件传入配置option,option为JSON结构,每个对象包含了title菜单名和click点击事件,将title和click绑定在菜单项上,用于拓展组件功能。
3.当用户点击保存图片时:
3.1 开启loading状态显示CSS写好的骨架屏效果
@keyframes shine {
100% {
left: 100%;
}
}
.gujia_ping:after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
transform: skewX(-30deg);
background-image: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.9), transparent);
animation: shine 1.6s infinite ease;
}
3.2 检查用户是否授权储存和读写权限,未授权的情况下系统自动弹窗提示授权(从下到上),并展示提前写好的授权(从上部弹出)说明权限使用说明
// 检查是否进行照相机和存储授权
export const examineAuthorized = () => {
let isTrue = false;
let isWrite = plus.navigator.checkPermission('android.permission.WRITE_EXTERNAL_STORAGE')
let isStorage = plus.navigator.checkPermission('android.permission.READ_EXTERNAL_STORAGE')
console.log("存储权限", isStorage);
console.log("写入权限", isWrite);
if (isStorage == 'authorized' && isWrite == 'authorized') {
// 已经经过授权了
isTrue = true;
} else {
isTrue = false;
}
return isTrue
}
扫描二维码关注公众号,回复:
17521525 查看本文章
