这里也是比较简单的

直接复制粘贴就可以用,可能图片位置不对。。

<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. 微信小程序 - 授权页面

    小程序授权方式更改以后,我们只有两种选择. 1.在主页使用遮罩层,类似这样的(会造成一点卡顿) 2.新增登陆授权页(经过反复的思考,我还是觉得用这个好) 这个也不错: https://blog.csd ...

  2. 完整微信小程序授权登录页面教程

    完整微信小程序授权登录页面教程 1.前言 微信官方对getUserInfo接口做了修改,授权窗口无法直接弹出,而取而代之是需要创建一个button,将其open-type属性绑定getUseInfo方 ...

  3. 微信小程序:页面配置 page.json

    微信小程序:页面配置 page.json 一.页面配置 page.json 如果整个小程序的风格是蓝色调,那么可以在 app.json 里边声明顶部颜色是蓝色即可. 实际情况可能不是这样,可能你小程序 ...

  4. 微信小程序开发--页面结构

    一.微信小程序开发--页面文件组成 [page.name].js 页面逻辑文件,用于创建页面对象,以及处理页面生命周期控制和数据处理 [page.name].wxml wxml指的是Wei Xin M ...

  5. 微信小程序前端页面书写

    微信小程序前端页面书写 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 一.数据绑定 1. 普通写法 <view ...

  6. 图解微信小程序---实现页面的跳转与返回操作

    图解微信小程序---实现页面的跳转与返回操作 代码笔记 操作步骤 第一步:在app.json配置文件中,创建跳转页面 第二步:编写首页跳转(注意跳转方式,和设置点击样式类名) 第三步:编写首页样式 第 ...

  7. uni-app开发经验分享二十: 微信小程序 授权登录 获取详细信息 获取手机号

    授权页面 因为微信小程序提供的 权限弹窗 只能通用户确认授权 所以可以 写一个授权页面,让用户点击 来获取用户相关信息 然后再配合后台就可以完成登录 <button class="bt ...

  8. 微信小程序之页面路由

    路由方式 简介 对于路由的触发方式以及页面生命周期函数如下: 路由方式 触发时机 路由前页面 路由后页面 初始化 小程序打开的第一个页面   onLoad, onSHow 打开新页面 调用 API w ...

  9. 微信小程序授权获取用户详细信息openid

    小程序获取用户的头像昵称openid之类 第一种使用wx.getUserInfo直接获取微信头像,昵称 wx.getUserInfo({ success: function (res) { that. ...

随机推荐

  1. jQuery中使用$.each()遍历数组时要注意的地方

    使用jQuery中 $.each()遍历数组,要遍历的数组不能为空(arry!="") 例如:           $.each(arry, function (i, item)  ...

  2. CAS 原子操作

    理会CAS和CAS: 有时候面试官面试问你的时候,会问,谈谈你对CAS的理解,这时应该有很多人,就会比较懵,当然,我也会比较懵,当然我和很多人的懵不同,很多人可能,并不知道CAS是一个什么东西,而在我 ...

  3. background-size 详解

    backgroun-size:cover; .是按照等比缩放铺满整个区域.主要用于图片比div小的时候,将图片按照某一边的比例扩大以填充整个div背景. .优点:图片不会被拉升,且实用于div长度和宽 ...

  4. 天啦噜!知道硬盘很慢,但没想到比 CPU L1 Cache 慢 10000000 倍

    前言 大家如果想自己组装电脑的话,肯定需要购买一个 CPU,但是存储器方面的设备,分类比较多,那我们肯定不能只买一种存储器,比如你除了要买内存,还要买硬盘,而针对硬盘我们还可以选择是固态硬盘还是机械硬 ...

  5. CDH5部署三部曲之三:问题总结

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  6. 深入了解Redis(7)-缓存穿透,雪崩,击穿

    redis作为一个内存数据库,在生产环境中使用会遇到许多问题,特别是像电商系统用来存储热点数据,容易出现缓存穿透,雪崩,击穿等问题.所以实际运用中需要做好前期处理工作. 一.缓存雪崩 1.概念 缓存雪 ...

  7. 0基础如何更快速入门Linux系统?学完Linux有哪些就业方向?

    Linux系统是使用Linux内核及开源自由软件组成的一套操作系统,是一种类UNIX系统,其内核在1991年10月5日由林纳斯·托瓦兹首次发布. 它的主要特性:Linux文件一切皆文件.完全开源免费. ...

  8. 单调队列+线性dp题Watching Fireworks is Fun (CF372C)

    一.Watching Fireworks is Fun(紫题) 题目:一个城镇有n个区域,从左到右1编号为n,每个区域之间距离1个单位距离节日中有m个烟火要放,给定放的地点ai,时间ti当时你在x,那 ...

  9. xuexi0.2

    1.数据结构就是研究数据如何排布和如何加工. 2.数组的目的是为了管理程序中类型相同,意义相关的变量. 3.数组的优势是比较简单,可以通过访问下标来进行随机访问.数组的限制:元素类型必须相同,数组的大 ...

  10. HTML <big> 标签

    HTML <big> 标签 什么是<big> 标签? <big> 标签呈现大号字体效果. 使用 <big> 标签可以很容易地放大字体.这简直不能再简单了 ...