# 学习
文章目录
前言
学习使我快乐!提示:以下是本篇文章正文内容,下面案例可供参考
一、api工厂
这是一个前端Paas中台,全面支持Web & 小程序 & App 开发!
通过中台开发你的应用,你将无需写接口,无需写后台,无需买服务器!
微信只是授权给我们,可以拿到用户账号的数据,登录注册需要提交到我们的服务器(公司服务器),使用api工厂模拟微信服务器登录和注册等接口,返还我们需要的openid,token等信息,
api工厂地址
{domain}换成自己专属域名
实际使用的路径为
“https://api.it120.cc/whz/user/wxapp/login”
二、封装网络请求路径
1.创建http文件夹,新建config.js,放置请求路径
export default {
//取自前端api工厂我的专属服务器
"registor":"/user/wxapp/register/complex",//注册
"login":"/user/wxapp/login",//登陆
"userDetail":"/user/detail"//用户详细信息
}
2.新建Request.js,封装函数
export const Request=function (url,method,data) {
let p=new Promise((resolve,reject)=>{
wx.request({
url: url,
method:method,
//请求头依据情况设置
header:{
'Content-Type': 'application/x-www-form-urlencoded'},
data:Object.assign({
},data),
success(res){
resolve(res)
},
fail(err){
reject(err)
}
})
})
return p;
}
3.新建index.js 作为入口文件
import {
Request} from './request'
// console.log(Request);
const baseUrl='https://api.it120.cc/whz' //公共域名
import url from './config'
//注册
function registor(data){
console.log(data);
return Request(baseUrl+url.registor,"post",data)
}
//登录
function login(data){
return Request(baseUrl+url.login,'post',data)
}
//用户详细信息
function userDetail(data){
return Request(baseUrl+url.userDetail,'get',data)
}
export default {
registor,login,userDetail
}
代码如下(示例):
import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
import warnings
warnings.filterwarnings('ignore')
import ssl
ssl._create_default_https_context = ssl._create_unverified_context
4.挂载到全局对象,在页面中引入全局对象并调用
//app.js
import http from './http/index'
App({
http,
……
})
//页面
var app=getApp()
app.http.方法().then(res=>{
})
代码如下(示例):
data = pd.read_csv(
'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())
三、关于微信小程序的接口
前言
朋友推荐你个小程序,你刚一打开就弹窗请求获取你用户信息,你有些许反感;你打开个小程序,发现首页特别有趣,功能很好玩,你想体验更多,然后点击登录,授权你的名字,开始大杀四方
wx.getUserInfo()
获取用户信息的接口,该方法必须得到用户授权才能使用,在初始化加载中无法使用,点击事件无法调用,必须授权后调用此接口才能返回用户信息。
授权会触发弹框,就那个是否允许获取数据那个弹框。
官方文档
wx.getUserInfo()官方说明
如何获取用户授权
<button open-type="getUserInfo" bindgetuserinfo="login">立即登录</button>
微信官方提供的方法,点击它会出现允许授权弹框,授权后执行回调函数,你可以通过e.detail.userInfo拿到用户数据;
login(e){
// console.log(e.detail.userInfo);
if(!e.detail.userInfo){
//点击拒绝后弹框
wx.showToast({
title: '登陆失败',
icon:"none"
})
return
}
//已经能拿到头像等信息了,但还要执行后续代码获取token和openid
this.setData({
avatar:e.detail.userInfo.avatarUrl,
nickname:e.detail.userInfo.nickName,
showlogin:true
})
this.registor() //授权后执行函数回调,去注册登录啥的
},
wx.login()
调用接口获取登录凭证(code)。通过凭证进而换取用户登录态信息,包括用户的唯一标识(openid)及本次登录的会话密钥(session_key)等。用户数据的加解密通讯需要依赖会话密钥完成。
这个接口是静默执行的,不会弹窗。
你可以在初始化的时候调用此方法,拿到code去完成简单注册.
详细注册需要获取用户数据(wx.getUserInfo()),跟code一起完成详细注册,这样注册的账号才会跟你的微信有关联。
wx.authorize()
提前向用户发起授权请求,获取某项授权.scope属性表示请求的权限,只能写一个;可执行三种回调函数
success 成功回调
fail 失败回调,拒绝请求后可以弹窗提示下
complete 成功失败都会执行的回调
此接口允许在onLoad生命周期中调用,也可以通过事件调用;调用后会弹窗。拒绝授权后不会再次弹窗,貌似需要重进或删除小程序才行,但你可以在右上角设置里面更改权限设置来实现
wx.authorize({
scope: 'scope.record',
success(res){
console.log(res)
},
})
完整流程
- wxml中写两个view,分别是未登录的样式,登录后的样式,使用hidden或wx:for设置隐藏显示
<view wx:if="{
{showlogin}}" class="header-box">
<image class="avatar" src="{
{avatar}}"></image>
<view class="r">
<view class="uid">用户ID:</view>
<view class="nick">{
{
nickname}}</view>
</view>
</view>
<view wx:else class="header-box">
<image class="avatar" src="/images/nologin2.png"></image>
<button open-type="getUserInfo" bindgetuserinfo="login">立即登录</button>
</view>
- js 授权后获取用户信息
login(e) {
let that = this
console.log(e);
if (!e.detail.userInfo) {
//点击拒绝授权的情况
wx.showToast({
title: '登陆失败',
icon: "none"
})
return
}
let iv = e.detail.iv //加密算法的初始向量
let encryptedData = e.detail.encryptedData //加密的数据
//存下头像和数据
this.setData({
avatar: e.detail.userInfo.avatarUrl,
nickname: e.detail.userInfo.nickName,
showlogin: true
})
that.registor(iv,encryptedData) //注册函数
},
- 注册请求,实际开发中看情况判断用户是否是老用户
registor(iv,encryptedData){
let that=this
wx.login({
//开始登录
success(res) {
let code = res.code //获取动态凭据
app.http.registor({
code, iv, encryptedData }).then(res => {
//先请求一次注册路径,判断有没有注册过
console.log(res);
if (res.data.code != 10000) {
//没有注册过
wx.showToast({
title: '注册成功',
})
}
that.getOpenId() //登录函数
//没注册过会注册成功,注册过会显示已经注册过,看需求如何定义用户是否注册过
})
},
})
},
- 登录请求
getOpenId() {
//向后台发送code,获取token和uid
wx.login({
success(res) {
// console.log(res);
let code = res.code
app.http.login({
code }).then(res => {
console.log(res); //返回的是openid,uid,token
res = res.data;
if (res.code != 0) {
// 登录错误
wx.showModal({
title: '无法登录',
content: res.msg,
showCancel: false
})
return;
}
// 本地存储token和id
wx.setStorageSync('token', res.data.token)
wx.setStorageSync('uid', res.data.uid)
})
},
})
},
总结
太累了,日后待我学的更精通了在进行完善;有意见欢迎指教,诚惶诚恐,不胜感激