微信小程序授权页面
这里也是比较简单的
直接复制粘贴就可以用,可能图片位置不对。。
<template>
<view id="imporwer">
<image src="../static/image/people.jpg" ></image>
<view class="title">课程点评</view>
<view class="t1">您尚未登陆</view>
<view class="t2">需要获取您的授权后进入商城</view>
<view class="b1" @tap="notUp">暂不登录</view>
<view class="b2" >立即登陆 <button class='testbutton' open-type="getUserInfo" @getuserinfo="getuserinfo" withCredentials="true"></button></view>
</view>
</template> <style lang="scss" scoped>
#imporwer{
position: fixed;
left: 0;top: 0;
width: 100%;height: 100%;
background: #ededed;
letter-spacing: 1px;
color: #7b7b7b;
display: flex;
align-items: center;
flex-direction: column;
image{
width: 220rpx;height: 220rpx;
border-radius: 50%;margin: 80rpx 0 40rpx 0;
}
.title{
font-size: 35rpx;color: #3a3a3a;
}
.t2,.t1{
font-size: 29rpx;
}
.t1{
margin-top: 40rpx;
}
.b1{
margin: 100rpx 0 40rpx 0;
background-color: #acabab;
}
.b2{
background-color:#009944;
position: relative;
.testbutton{
position: absolute;
top: 0;left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
color: #FFFFFF;
}
.b1,.b2{
text-align: center;line-height: 85rpx;
width: 420rpx;height: 85rpx;border-radius: 40rpx;
font-size: 37rpx;
}
}
</style>
微信小程序授权页面的更多相关文章
- 微信小程序 - 授权页面
小程序授权方式更改以后,我们只有两种选择. 1.在主页使用遮罩层,类似这样的(会造成一点卡顿) 2.新增登陆授权页(经过反复的思考,我还是觉得用这个好) 这个也不错: https://blog.csd ...
- 完整微信小程序授权登录页面教程
完整微信小程序授权登录页面教程 1.前言 微信官方对getUserInfo接口做了修改,授权窗口无法直接弹出,而取而代之是需要创建一个button,将其open-type属性绑定getUseInfo方 ...
- 微信小程序:页面配置 page.json
微信小程序:页面配置 page.json 一.页面配置 page.json 如果整个小程序的风格是蓝色调,那么可以在 app.json 里边声明顶部颜色是蓝色即可. 实际情况可能不是这样,可能你小程序 ...
- 微信小程序开发--页面结构
一.微信小程序开发--页面文件组成 [page.name].js 页面逻辑文件,用于创建页面对象,以及处理页面生命周期控制和数据处理 [page.name].wxml wxml指的是Wei Xin M ...
- 微信小程序前端页面书写
微信小程序前端页面书写 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 一.数据绑定 1. 普通写法 <view ...
- 图解微信小程序---实现页面的跳转与返回操作
图解微信小程序---实现页面的跳转与返回操作 代码笔记 操作步骤 第一步:在app.json配置文件中,创建跳转页面 第二步:编写首页跳转(注意跳转方式,和设置点击样式类名) 第三步:编写首页样式 第 ...
- uni-app开发经验分享二十: 微信小程序 授权登录 获取详细信息 获取手机号
授权页面 因为微信小程序提供的 权限弹窗 只能通用户确认授权 所以可以 写一个授权页面,让用户点击 来获取用户相关信息 然后再配合后台就可以完成登录 <button class="bt ...
- 微信小程序之页面路由
路由方式 简介 对于路由的触发方式以及页面生命周期函数如下: 路由方式 触发时机 路由前页面 路由后页面 初始化 小程序打开的第一个页面 onLoad, onSHow 打开新页面 调用 API w ...
- 微信小程序授权获取用户详细信息openid
小程序获取用户的头像昵称openid之类 第一种使用wx.getUserInfo直接获取微信头像,昵称 wx.getUserInfo({ success: function (res) { that. ...
随机推荐
- 拉格朗日乘子法 Lagrange multipliers
- 使用Redis做消息队列
基于内存的单线程数据库,使Redis的线程安全性极高.而Redis的双向链表数据类型(List)天生就可作为消息队列存储消息. 在这里就不说消息队列的等等一些优点.但是补充一下Redis的List类型 ...
- 商品现货数据不好拿?商品季节性难跟踪?一键解决没烦恼的Python爬虫分享
更多精彩内容,欢迎关注公众号:数量技术宅.探讨数据分析.量化投资问题,请加技术宅微信:sljsz01 季节性在大宗商品的交易中至关重要 大宗商品交易中,特别是在期货市场,由于商品价格周期的存在,季节性 ...
- Python中字符串有哪些常用操作?纯干货超详细
- VMware ESXi 客户端连接控制台时,提示“VMRC 控制台连接已断开...正在尝试重新连接”的解决方法
故障描述: 通过 VMware vSphere Client 连接到安装 VMware ESXi 虚拟环境的主机时,当启动其中的虚拟机后,无法连接到控制台. 选择"控制台"时,控制 ...
- kafka配置文件详解
kafka的配置分为 broker.producter.consumer三个不同的配置 一 .BROKER 的全局配置最为核心的三个配置 broker.id.log.dir.zookeeper.con ...
- Mac zsh中所有命令失效
参考文章 https://blog.csdn.net/hujincai_55/article/details/95680245?utm_medium=distribute.pc_relevant.no ...
- logback.xml demo
如何关闭 org.apache.zookeeper.clientcnxn 的(控制台大量输出)debug 日志 1.在项目resources路径下新建 logback.xml 2.然后把下面的代码co ...
- scp带密码拷贝文件
应用场景:将B服务器的文件传输到A服务器.核心命令: sshpass -p 123456 scp ubuntu@192.168.52.1:/home/ubuntu/"TEST"'' ...
- jmeter_02_目录文档说明
jmeter目录文档说明 bin目录是可执行文件 jmeter.bat 是启动文件 可以启动jmeter. 使用notpad++ 等文本编辑器打开 bat文件 可以配置jvm的参数 比如堆内存[Hea ...