＃学ぶ
記事のディレクトリ
序文
学ぶことは私を幸せにします！ヒント：以下はこの記事の内容です。以下のケースは参照用です。
1つ、APIファクトリ
これは、Webとミニプログラムとアプリの開発を完全にサポートするフロントエンドのPaasミドルステーションです。
ミドルステーションを介してアプリケーションを開発します。インターフェイスを作成したり、バックグラウンドを作成したり、サーバーを購入したりする必要はありません。
WeChatは私たちにのみ許可されています。ユーザーアカウントデータを取得し、ログインと登録をサーバー（会社のサーバー）に送信する必要があります。APIファクトリを使用してWeChatサーバーのログインと登録のインターフェイスをシミュレートし、openid、トークンを返します。および必要なその他の情報、
APIファクトリアドレス
{domain}は独自のドメイン名に置き換えられ、
実際に使用されるパスは
「https://api.it120.cc/whz/user/wxapp/login」です。
2つ目は、ネットワーク要求パスをカプセル化することです。
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())
3.WeChatアプレットのインターフェースについて
序文
友人があなたに小さなプログラムを勧めました。あなたがそれを開くとすぐに、ポップアップウィンドウがあなたのユーザー情報を尋ねました。あなたは少しうんざりしています。あなたは小さなプログラムを開くと、ホームページが特に興味深く、機能が楽しい。もっと体験したいので、クリックしてログインします。名前を承認して、カルテットを殺し始めます。
wx.getUserInfo（）
ユーザー情報を取得するためのインターフェース。このメソッドは、使用する前にユーザーによって承認される必要があります。初期ロード時には使用できません。クリックイベントを呼び出すことはできません。ユーザー情報を返すには、承認後にこのインターフェースを呼び出す必要があります。
承認により、データの取得が許可されているポップアップボックスであるポップアップボックスがトリガーされます。
公式文書
wx.getUserInfo（）公式説明
ユーザー認証を取得する方法
<button open-type="getUserInfo" bindgetuserinfo="login">立即登录</button>
WeChatオフィシャルが提供するメソッドをクリックすると、承認を許可するポップアップボックスが表示され、承認後にコールバック関数を実行します。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（）
インターフェイスを呼び出して、ログイン資格情報（コード）を取得します。次に、資格情報を使用して、ユーザーの一意の識別子（openid）やこのログインのセッションキー（session_key）などのユーザーログインステータス情報を交換します。ユーザーデータの暗号化および復号化通信は、完了するためにセッションキーに依存する必要があります。
このインターフェイスはサイレントに実行され、ポップアップしません。
初期化時にこのメソッドを呼び出して、コードを取得して簡単な登録を完了することができます。詳細
な登録を行うには、ユーザーデータ（wx.getUserInfo（））を取得し、コードと一緒に詳細な登録を完了する必要があります。 WeChatアカウントを持っています。関連付けられています。
wx.authorize（）
特定の承認を取得するために、事前にユーザーへの承認要求を開始します。scope属性は要求された許可を示し、1つだけを書き込むことができ、3つのコールバック関数を実行できます
成功成功コールバック
コールバックに失敗した場合、リクエストを拒否した後にプロンプトをポップアップできます
成功または失敗時に実行される完全なコールバック
このインターフェイスは、onLoadライフサイクルで呼び出すことができます。また、イベントを介して呼び出すこともできます。呼び出し後にウィンドウがポップアップ表示されます。承認を拒否した後、ウィンドウは再びポップアップしません。アプレットを再入力または削除する必要があるようですが、これを実現するには、右上隅の許可設定を変更できます。
wx.authorize({
scope: 'scope.record',
success(res){
console.log(res)
},
})
完全なプロセス
- ログに記録されないスタイルとログイン後のスタイルの2つのビューをwxmlに書き込みます。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)
})
},
})
},
総括する
疲れすぎて、将来はもっと上手に学習できるようになり、完璧になります。コメントを歓迎します。心から心配し、感謝しています。