~~~xml
<template>
<!--用户登录之后再获取手机号-->
<view class="container" style="position:fixed;left:0;right:0;background: url(../xcximg/img.jpg) no-repeat;background-size: cover;">
<view class="btns">
<button type="default" open-type="getUserInfo" @getuserinfo="getUserInfo" class="wx">微信登录</button>
<view @click="login(1)" class="tels">手机号登录</view>
</view>
<view class="tel_cont" v-show="isShowTel">
<view class="mask"></view>
<view class="tel">
<view><text class="bold font30 color_black mr20">xxx</text>申请</view>
<view class="bold font30 color_black mt30">获取您的手机号</view>
<view class="tel_btns dflex center" style="">
<button type="default" class="wxbtn cancel" @click="cancel()">取消</button>
<button type="default" open-type="getPhoneNumber" class="wxbtn sure" @getphonenumber="getPhoneNumber">允许</button>
</view>
</view>
</view>
</view>
</template>
<script>
import {checkTelNum} from '../../common/js/common.js'
import {mapState,mapMutations} from 'vuex'
let url = null;
export default {
data() {
return {
tel: '',
pwd: '',
isShowTel: false,
userinfo:[],
phone:[],
isUser: false
}
},
onShow() {
},
onLoad() {
this.openid = '';
this.session_key = '';
url = uni.getStorageSync('currentUrl');
this.getLoginCode()
},
methods: {
...mapMutations(['getLogin','getWxLogin']),
cancel(){
this.isShowTel = false;
uni.removeStorage({
key: 'isUser'
})
},
//存储信息
saveWxdata(){
this.$httpRequest('POST','api接口',{
phone: JSON.stringify(this.phone),
userinfo: JSON.stringify(this.userinfo),
openid: this.openid,
session_key: this.session_key
}).then(res=>{
})
},
getPhoneNumber(e){
//console.log('手机号',e)
if(!e.detail.encryptedData){
//只授权了用户信息,没有授权手机号
uni.removeStorage({
key: 'isUser'
})
}else{
//用户信息、手机号均授权,才授权成功跳转页面
let {encryptedData,iv} = e.detail;
this.phone.push({
encryptedData: encryptedData,
iv: iv
})
uni.switchTab({
url: url
})
this.saveWxdata();
this.isUser = true;
this.getWxLogin(this.isUser)
}
this.isShowTel = false;
},
getUserInfo(){
console.log(1)
let _this = this;
_this.userinfo = [];
_this.phone = [];
uni.getUserInfo({
provider: 'weixin',
success: function(infoRes) {
console.log('信息',infoRes)
let {avatarUrl,city,country,gender,language,nickName,province} = infoRes.userInfo;
_this.userinfo.push({
avatarUrl: avatarUrl,
city: city,
country: country,
gender: gender,
language: language,
nickName: nickName,
province: province
})
console.log(_this.userinfo)
uni.getSetting({
success(res) {
//授权后直接获取用户手机
if(res.authSetting['scope.userInfo']){
_this.isShowTel = true;
}else{
//console.log('没有授权')
}
}
})
},
fail(res) {
//console.log(res)
uni.showToast({
title: '授权失败',
icon: 'none',
duration: 1500
})
}
});
},
//获取openid 和 session_key
//appid secret 微信后台获取 授权类型,此处只需填写 authorization_code
getdata(code){
let url = 'https://api.weixin.qq.com/sns/jscode2session?appid='+'appid'+'&secret='+'secret'+'&js_code='+code+'&grant_type=authorization_code';
uni.request({
method: 'get',
url: url,
data:'',
header: {
"Content-Type": "application/x-www-form-urlencoded"
},
success:(res) => {
//console.log(res)
this.openid = res.data.openid;
this.session_key = res.data.session_key;
},
fail:(err) => {
//也可以写code判断
console.log(err);
},
complete:() => {
}
})
},
//获取登录code
getLoginCode(){
let _self = this;
uni.login({
provider: 'weixin',
success: function(loginRes) {
console.log('code',loginRes);
_self.getdata(loginRes.code)
},
})
},
login(type){
uni.navigateTo({
url: './login'
})
}
}
}
</script>
<style scoped>
.btns{
display: flex;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
}
.btns view,.btns .wx{
width: 630upx;
margin:114upx 60upx 0;
border-radius: 44upx;
background:#5178C8;
text-align: center;
line-height: 80upx;
color: #fff;
font-size: 30upx;
}
.btns button.wx{
font-size: 34upx;
line-height: 100upx;
}
.btns view.tels{
background: transparent;
border: 2upx solid #999;
}
.tel_cont{width: 100%;}
.tel_cont .mask{width: 100%;height: 100%;position: fixed;left: 0;right: 0;top: 0;background: rgba(0,0,0,.5)}
.tel{height: 400upx;background:#fff;position: fixed;bottom: 0;left: 0;right: 0;border-radius: 10upx;padding: 30upx 30upx ;}
.tel_btns .sure{background: #3BA0FF;margin-left: 30upx;}
.wxbtn::after{border: 0;}
.tel_btns .cancel{color: #303030;background: #DDDEE0;}
.tel_btns .wxbtn{padding: 0 70upx;}
.tel_btns{margin-top: 120upx;justify-content: center;}
.wxbtn{background: none;color: #fff;font-size: 26upx;font-weight: bold;margin: 0;padding-left: 10upx;}
</style>
~~~
- 空白目录
- thinkcmf的权限管理
- thinkcmf+unicmf添加页面
- Thinkphp5做后台 Uni-app做前台解决跨域问题
- 组件
- h5跨域-uniapp
- thinkphp5 auth 教程
- thinkphp5Auth类
- uniapp添加与编辑的差别
- 常见的请求方式
- uni 单选回显数据_uniapp 页面跳转传值和接收
- uni-app 单选/多选/滑动 demo
- 关于uniapp checkbox多选框如何传值传数据
- uniApp 多选框checkbox ,判断是否选中
- uniapp添加复选框和获取复选框的值
- uni-app中全选多选单选
- uniapp多选框CheckBox 数据接收
- uniapp下拉列表单选框复选框实战demo(编辑或详情页)
- uni-data-CheckBox-OK
- js 字符串数组转换成数字数组
- js把字符串转为数组对象
- js中数组对象字符串的相互转换
- JS怎么把字符串数组转换成整型数组
- 小程序开发
- tp5.1跨域请求
- uniapp-h5跨域
- 新增
- order
- uni-app中调取接口的三种方式与封装uni.request()
- uView-checkbox
- 给u-view的u-select赋值
- uView-下拉框、复选框、单选框 数据发送及接收
- CURD操作
- thinkphp5.1增删改查
- TP5.1添加数据成功之后返回自增主键id
- Thinkphp实战之Request默认值except only 以及过滤参
- uni-app跨域解决方案
- thinkphp5.1+uni-app接口开发中跨域问题解决方案
- tp6 + uniapp 前后端跨域解决方案
- uniapp-token相关
- uniapp request请求封装包含token兼容多端,简单易用
- CORS.php
- ThinkPHP6 API开发前后端分离用户信息保存在后端的方法
- thinkphp的jwt(JSON Web Token)身份验证
- thinkphp6增删改查
- PHP模拟GET,POST请求
- php模拟get、post发送请求的6种方法
- thinkphp6
- uniapp封装网络请求
- thinkphp6搭建后端api接口jwt-auth
- uniapp实现APP微信登录流程
- [uni-app] 中保持用户登录状态
- 详解vue中localStorage的使用方法
- vue 实现通过vuex 存储值 在不同界面使用
- dispatch:异步操作,数据提交至 actions ,可用于向后台提交数据
- ThinkPHP6.0 + Vue + ElementUI + axios 的环境安装到实现 CURD 操作
- tp6错误集
- TP6 模型插入/添加数据,自动插入时间(自动时间戳)
- 手机不开机维修思路
- thinkphp6解决vue跨域问题
- 从0基础获取短视频去水印解析接口制作
- thinkphp5 删除缓存
- thinkPHP,怎么把json文件里面的数据导入数据库
- 数字转字符php
- php – 直接用curl下载远程文件
- thinkphp – 直接用curl下载远程文件
- apiAdmin安装
- echart
- thinkphp开发小程序推广分享带参数二维码生成
- php同比增加函数
- PHP获取同比上周、上一个月,上一个季度,去年时间区间
- “前3秒”金句100例,赶紧收藏起来!
- PHP配合微信公众号生成推广二维码
- thinkphp5+php微信公众号二维码扫码关注推广二维码事件实现
- 获取当前时间上一周的开始时间和结束时间
- TP6 查找指定工作日
- PHP 获取当天、近一周、本周、上月、本月、本季度、上季度时间方法大全
- php获取今日、昨日、本周、本月 日期方法
- Tp5+mysql按年季度月周日小时查询时无数据的时间段补0方法
- mysql按天统计的时候,该天没有数据也要统计为0
- 列出一星期的日期 无数据补0
- thinkphp6本周 上周 周一 周末日期
- 补全日期 无数据补0
- php+pv统计代码实现,Laravel 10 行代码实现简单的网站 pv uv 统计
- 通过API获取ip地址以及城市和运营商
- 获取访客信息
- 13行代码实现微信小程序设置概率触发激励视频阅读文章
- uniapp 微信小程序 获取场景值和场景值个性化参数
- 微信小程序分享小程序码的生成(带参数)以及参数的获取
- 小程序推广分享带参数二维码生成
- uniapp微信小程序生成对应页面二维码
- uniapp获取当前页面url
- uniapp微信小程序--微信登录
- 微信小程序,生成小程序码中scene参数的存放和获取问题
- uni-app 微信小程序生成二维码带参数
- uni-app 微信小程序如何把图片保存到本地相册?
- thinkPHP5使用assign()传递富文本,前端解析成HTML标签
- tp6解析编辑器里面的html标签原样输出
- PHP判断url链接是否被百度收录
- 微擎安装模块时提示 Failed to connect to we7.rewlkj.com port 80: Timed out
- 小程序码生成
- thinkphp开发小程序推广分享带参数二维码生成0
- tp3.2伪静态
- apiadmin安装教程-2022.8更新
- autojs事件代码
- uuuu
- thinkphp6: API 多版本控制