WeChatアプレット開発ログイン認証機能

この記事では、WeChat ミニプログラムでのログイン認証機能の開発方法を紹介しますので、ミニプログラム開発を学習している友人の参考になれば幸いです。

#WeChat アプレット開発ログイン検証機能

要件の説明:

一部のページに追加ログイン確認のために、ユーザーがログインしていない状態でページに入ると、ページは自動的にログイン ページにリダイレクトされます。ログイン検証が成功したら、ログイン開始ページに戻ります。

推奨される学習:

小規模プログラム開発

実装のアイデア:

現在ログインしているユーザー オブジェクト (userInfo) とグローバル メソッドを保存するグローバル変数を作成するログインの有効性を検証するために使用され (checkLoginInfo())、現在のページのフル パスを取得するために使用されるグローバル メソッド (getCurrentUrl())。

ログイン制限を追加する必要があるページの page.onLoad イベントについては、checkLoginInfo() メソッドを呼び出して現在のログイン ステータスを確認します。ログインしていない場合は、ログイン ページにリダイレクトされます。

ログイン検証に合格すると、ログイン情報がグローバル変数 userInfo に保存され、ログイン開始ページに戻ります。

主要なコードと注意事項:

app.js

data:{
    userInfo:null,//用户登录存储对象
    loginUrl:../login/login,
},
checkLoginInfo:function(url){//验证登录状态
    if(this.data.userInfo==null){
        return url;
    }else{
        return ;
    }
},
getCurrentUrl:function(){//获取当前页面全路径
    var url=getCurrentPages()[getCurrentPages().length-1].__route__;
    url=url.replace(eapdomain/src/pages,..);//替换路径全路径。修改该路径为相对路径
    return url;
}

注: getCurrentUrl メソッドでは、最終的に URL が返されると、replace メソッドが呼び出されます。 wx.redirectTo の url パラメータには相対パスが必要なためです。そこで、ここで変換してみました。

login.js

var app=getApp();
Page({
    data:{
        backUrl:null,
        loginName:null,
        passWord:null
    },
    onLoad:function(options){
        this.setData({
        backUrl:null
    });
    // 页面初始化 options为页面跳转所带来的参数
    //console.log(options.backUrl);
    this.setData({
        backUrl:options.backUrl
    });
    },
    inputClick:function(event){
        //动态 对 paga.data 进行赋值
        //id与 数据项 一一对应
        var objId=event.currentTarget.id;
        var paraObj={};
        paraObj[objId]=event.detail.value;
        this.setData(paraObj);
        //console.log(event.currentTarget.id);
        //console.log(this.data);
    },
    onReady:function(){
        // 页面渲染完成
    },
    onShow:function(){
        // 页面显示
    },
    onHide:function(){
        // 页面隐藏
    },
    onUnload:function(){
        // 页面关闭
    },
    loginClick:function(){
        var loginName=this.data.loginName;
        var passWord=this.data.passWord;
        if(loginName!=null&&passWord!=null){
            var backUrl=this.data.backUrl;
            // wx.redirectTo({
            //   url:\'eapdomain/src/pages/pageCreate/pageCreate\'
            // })
            app.data.userInfo={
            loginName:loginName,
            passWord:passWord
        };
        wx.redirectTo({
        url: backUrl
        });
        //   wx.redirectTo({
        // //目的页面地址
        //       url: \'pages/logs/index\',
        //       success: function(res){},
        //   })
        }else{
        this.setData({
            loginName:null,
            passWord:null
            });
        }
    }
})

ここにInputClickイベントがあります。フロントコントロールIDに基づいてpage.dataデータに値を割り当てます。

PHP 中国語 Web サイト、多数の

thinkphp チュートリアル 、学習へようこそ!

以上がWeChatアプレット開発ログイン認証機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。