这里也是比较简单的

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

<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. Matlab中num2str函数的用法

    转载:https://blog.csdn.net/SMF0504/article/details/51836062 函数功能: 把数值转换成字符串, 转换后可以使用fprintf或disp函数进行输出 ...

  2. 【题解】Product

    \(\color{brown}{Link}\) \(\text{Solution:}\) \(Question:\) \(\prod_{i=1}^n \prod_{j=1}^n \frac{lcm(i ...

  3. MYSQL 50 基础题 (转载)

    MYSQL 50 基础题 (转载) 前言:最近在强化MYSQL 能力 答案在(也是转载处) https://www.cnblogs.com/kangxinxin/p/11585935.html 下面是 ...

  4. [Java 开源项目]一款无需写任何代码,即可一键生成前后端代码的工具

    作者:HelloGitHub-小鱼干 JeecgBoot 是一款基于代码生成器的低代码开发平台,零代码开发.JeecgBoot 采用开发模式:Online Coding 模式-> 代码生成器模式 ...

  5. Vue 网站首页加载优化

    Vue 网站首页加载优化 本篇主要讲解 Vue项目打包后 vendor.js 文件很大 如何对它进行优化 以及开启Vue的压缩 和 nginx gzip 压缩的使用, 其他就是对接口优化等  1. v ...

  6. JVM系列【3】Class文件加载过程

    JVM系列笔记目录 虚拟机的基础概念 class文件结构 class文件加载过程 jvm内存模型 JVM常用指令 GC与调优 Class文件加载过程 JVM加载Class文件主要分3个过程:Loadi ...

  7. nginx完美支持thinkphp3.2.2(需配置URL_MODEL=>1 pathinfo模式)

    来源:http://www.thinkphp.cn/topic/26657.html 第一步:配置SERVER块 server { listen 80; server_name www.domain. ...

  8. Prometheus 系列开篇:为什么要学 Prometheus ?

    「Prometheus 系列开篇:为什么要学 Prometheus ?」首发于[陈树义]公众号,点击跳转到原文https://mp.weixin.qq.com/s/HCS6X3l6nVBw_hAnd6 ...

  9. Linux就该这么学28期——Day05 vim编辑器与Shell命令脚本 (yum配置 网卡配置)

    vim 三种模式: 命令模式 按行操作 dd 剪切.删除 5dd dG   全删 yy 复制光标所在行 p 粘贴 u 撤销操作 / 搜索 /ab n  下一个 N   上一个 输入模式 a 当前光标处 ...

  10. 用-pthread替代-lpthread

    -pthread 在多数系统中,-pthread会被展开为"-D_REENTRANT -lpthread".作为编译参数可以通知系统函数开启多线程安全特性,比如将errno定义线程 ...