微信小程序授权页面
这里也是比较简单的
直接复制粘贴就可以用,可能图片位置不对。。
<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. ...
随机推荐
- 03 . Docker数据资源管理与网络
Docker数据卷 在容器中管理数据主要有两种方式 # 数据卷(Data volumes) # 数据卷容器(Data volume containers) # 数据卷是一个可供一个或多个容器使用的特殊 ...
- pytorch和tensorflow的爱恨情仇之定义可训练的参数
pytorch和tensorflow的爱恨情仇之基本数据类型 pytorch和tensorflow的爱恨情仇之张量 pytorch版本:1.6.0 tensorflow版本:1.15.0 之前我们就已 ...
- shiro入门学习--使用MD5和salt进行加密|练气后期
写在前面 在上一篇文章<Shiro入门学习---使用自定义Realm完成认证|练气中期>当中,我们学会了使用自定义Realm实现shiro数据源的切换,我们可以切换成从关系数据库如MySQ ...
- PADS Layout VX.2.3 灌铜之后只显示灌铜外框,没有显示整块铜皮
操作系统:Windows 10 x64 工具1:PADS Layout VX.2.3 使用Copper Pour功能,画了一个灌铜区,并分配了网络. Tools > Pour Manager,打 ...
- object-fit 详解
contain 被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比. 整个对象在填充盒子的同时保留其长宽比,因此如果宽高比与框的宽高比不匹配,该对象将被添加"黑边". cov ...
- [转载]volitale关键字详解
来看这个代码: int fun(int& a) { int b = a; int c = a; return a+b+c; } int main() { int a=1; //........ ...
- 多测师讲解python _类(原始版)_高级讲师肖sir
# Python中的类: '''定义一个类:class +名称=类 在类当中定义:def +名称=实例方法(self)与类平齐def +名称=普通函数定义一个函数:def +名称=函数在函数中:函数( ...
- 题解:SDOI2017 新生舞会
题解:SDOI2017 新生舞会 Description 学校组织了一次新生舞会,Cathy 作为经验丰富的老学姐,负责为同学们安排舞伴. 有 \(n\) 个男生和 \(n\) 个女生参加舞会.一个男 ...
- 会用Docker的人都别装了,这多简单呐
学术又官方的说法 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器或Windows 机器上,也可以实现虚拟化,容器是 ...
- ▶ 0001 No application 'E:\www\go\blog' found in your GOPATH
go mod 配置 beego 首先cmd bee new blog go mod init 然后复制到任意目录 bee run 就会报错, 要退出该目录,进入上级目录 bee run blog 才行