微信小程序授权页面
这里也是比较简单的
直接复制粘贴就可以用,可能图片位置不对。。
<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. ...
随机推荐
- vue实现语音播报功能
1,创建一个js文件 (voicePrompt.js) function voicePrompt (text){ new Audio('http://tts.baidu.com/text2audio? ...
- SpringSecurity原理
一.认证的两种方式的介绍 1. 基于Session的认证方式 在之前的单体架构时代,我们认证成功之后都会将信息存入到Session中,然后响应给客户端的是对应的Session中数据的key,客户端会将 ...
- fastjson配置序列化过滤转换
@Configuration@EnableWebMvcpublic class WebConfig implements WebMvcConfigurer { @Override public voi ...
- ansible-初始playbook安装nginx
1. ansible-初始playbook安装nginx 1) 创建一个ansible存放路径 1 [root@test-1 scripts]# mkdir -p /ansible/nginx/{co ...
- 重装Windows系统 入门详解 - 基础教程
重装Windows系统 入门详解 - 基础教程 JERRY_Z. ~ 2020 / 10 / 13 转载请注明出处!️ 目录 重装Windows系统 入门详解 - 基础教程 一.说明 二.具体步骤 ( ...
- 【idea】重装系统(格式化C盘后)idea无法导入maven(jdk重装了,版本不同),结果报错!
[以下部分截图]2019-11-25 09:48:49,045 [ 108964] WARN - #org.jetbrains.idea.maven - Cannot open inde ...
- IDEA项目区模块文件变为红色解决办法
解决方法 先检查文件格式是否为.java格式..class格式就不行. 选择file–>setting–>version Controller,然后把vcs选项选择为none
- rs232转网络
rs232转网络 rs232转网络ZLAN5103可以实现RS232/485/422和TCP/IP之间进行透明数据转发.方便地使得串口设备连接到以太网和Internet,实现串口设备的网络化升级.支持 ...
- Mysql索引(一篇就够le)
我想很多人对mysql的认知可能就是CRUD(代表创建(Create).更新(Update).读取(Retrieve)和删除(Delete)操作),也不敢说自己会用和熟悉mysql,当然我就是其中一个 ...
- 干货分享:用一百行代码做一个C/C++表白小程序,程序员的浪漫!
前言:很多时候,当别人听到你是程序员的时候.第一印象就是,格子衫.不浪漫.直男.但是程序员一旦浪漫起来,真的没其他人什么事了.什么纪念日,生日,情人节,礼物怎么送? 做一个浪漫的程序给她,放上你们照片 ...