Sqlite 仅在sencha的本机应用程序中首次登录屏幕

我正在sencha touch中开发一款本地应用程序。我想创建一个登录视图，它应该只有第一次才可见。有没有解决问题的建议

Activation.js

Ext.define('FOS.view.Activation', {
    extend: 'Ext.form.Panel',
    alias: "widget.activationview",
    requires: ['Ext.form.FieldSet', 'Ext.form.Password', 'Ext.Label', 'Ext.Img', 'Ext.util.DelayedTask'],
    config: {
        title: 'Login',
        items: [

            {
                xtype: 'label',
                html: 'Activation failed. Please enter the correct credentials.',
                itemId: 'activationFailedLabel',
                hidden: true,
                hideAnimation: 'fadeOut',
                showAnimation: 'fadeIn',
                style: 'color:#990000;margin:5px 0px;'
            },
            {
                xtype: 'fieldset',
                title: ' ',
                items: [
                    {
                        xtype: 'textfield',
                        placeHolder: 'Enter Agency Id',
                        itemId: 'agencyIdTextField',
                        name: 'agencyIdTextField',
            label: 'Agency Id',
                        labelWidth: '40%',
                        //required: true
                    },
                    {
                        xtype: 'textfield',
                        placeHolder: 'Enter App Id',
                        itemId: 'appIdTextField',
                        name: 'appIdTextField',
            label: 'App Id',
                        labelWidth: '40%',
                       // required: true
                    }
                ]
            },
            {
                xtype: 'button',
                itemId: 'activationButton',
                ui: 'action',
                padding: '10px',
                text: 'Activate'
            }
         ],
        listeners: [{
            delegate: '#activationButton',
            event: 'tap',
            fn: 'onActivationButtonTap'
        }]
    },
    onActivationButtonTap: function () {

        var me = this,
            agencyidField = me.down('#agencyIdTextField'),
            appidField = me.down('#appIdTextField'),
            label = me.down('#activationFailedLabel'),
            agencyid = agencyidField.getValue(),
            appid = appidField.getValue();

        label.hide();

        // Using a delayed task in order to give the hide animation above
        // time to finish before executing the next steps.
        var task = Ext.create('Ext.util.DelayedTask', function () {

            label.setHtml('');

            me.fireEvent('activationCommand', me, agencyid, appid);

            agencyidField.setValue('');
            appidField.setValue('');
        });

        task.delay(500);

    },
    showActivationFailedMessage: function (message) {
        var label = this.down('#activationFailedLabel');
        label.setHtml(message);
        label.show();
    }
});

Login.js

Ext.define('FOS.view.Login', {
    extend: 'Ext.form.Panel',
    alias: "widget.loginview",
    requires: ['Ext.form.FieldSet', 'Ext.form.Password', 'Ext.Label', 'Ext.Img', 'Ext.util.DelayedTask'],
    config: {
        title: 'Login',
        items: [

            {
                xtype: 'label',
                html: 'Login failed. Please enter the correct credentials.',
                itemId: 'signInFailedLabel',
                hidden: true,
                hideAnimation: 'fadeOut',
                showAnimation: 'fadeIn',
                style: 'color:#990000;margin:5px 0px;'
            },
            {
                xtype: 'fieldset',
                title: ' ',
                items: [
                    {
                        xtype: 'textfield',
                        placeHolder: 'Enter UserName',
                        itemId: 'userNameTextField',
                        name: 'userNameTextField',
            label: 'UserName',
                        labelWidth: '40%',
                        //required: true
                    },
                    {
                        xtype: 'passwordfield',
                        placeHolder: 'Enter Password',
                        itemId: 'passwordTextField',
                        name: 'passwordTextField',
            label: 'Password',
                        labelWidth: '40%',
                       // required: true
                    }
                ]
            },
            {
                xtype: 'button',
                itemId: 'logInButton',
                ui: 'action',
                padding: '10px',
                text: 'Log In'
            }
         ],
        listeners: [{
            delegate: '#logInButton',
            event: 'tap',
            fn: 'onLogInButtonTap'
        }]
    },
    onLogInButtonTap: function () {

        var me = this,
            usernameField = me.down('#userNameTextField'),
            passwordField = me.down('#passwordTextField'),
            label = me.down('#signInFailedLabel'),
            username = usernameField.getValue(),
            password = passwordField.getValue();

        label.hide();

        // Using a delayed task in order to give the hide animation above
        // time to finish before executing the next steps.
        var task = Ext.create('Ext.util.DelayedTask', function () {

            label.setHtml('');

            me.fireEvent('signInCommand', me, username, password);

            usernameField.setValue('');
            passwordField.setValue('');
        });

        task.delay(500);

    },
    showSignInFailedMessage: function (message) {
        var label = this.down('#signInFailedLabel');
        label.setHtml(message);
        label.show();
    }
});

MainMenu.js

Ext.define('FOS.view.MainMenu', {
    extend: 'Ext.Panel',
    requires: ['Ext.TitleBar'],
    alias: 'widget.mainmenuview',
    config: {
        layout: {
            type: 'fit'
        },
        items: [{
            xtype: 'titlebar',
            title: 'Main Menu',
            docked: 'top',
            items: [
                {
                    xtype: 'button',
                    text: 'Log Off',
                    itemId: 'logOffButton',
                    align: 'right'
                }
            ]
        }],
        listeners: [{
            delegate: '#logOffButton',
            event: 'tap',
            fn: 'onLogOffButtonTap'
        }]
    },
    onLogOffButtonTap: function () {
        this.fireEvent('onSignOffCommand');
    }
});

控制器

Ext.define('FOS.controller.Login', {
    extend: 'Ext.app.Controller',

   config: {
        refs: {
            loginView: 'loginview',
            mainMenuView: 'mainmenuview',
        activationView: 'activationview'
        },
        control: {
        activationView: {
                activationCommand: 'onActivationCommand'
            },
               loginView: {
                   signInCommand: 'onSignInCommand'
            },
            mainMenuView: {
                onSignOffCommand: 'onSignOffCommand'
            }
        }
    },

    // Session token

   // sessionToken: null,

    // Transitions
    getSlideLeftTransition: function () {
        return { type: 'slide', direction: 'left' };
    },

    getSlideRightTransition: function () {
        return { type: 'slide', direction: 'right' };
    },

onActivationCommand: function (view, agencyid, appid) {

        console.log('AgencyId: ' + agencyid + '\n' + 'AppId: ' + appid);

        var me = this,
            activationView = me.getActivationView();

        if (agencyid.length === 0 || appid.length === 0) {

            activationView.showActivationFailedMessage('Please enter your Agency Id and App Id.');
            return;
        }

        activationView.setMasked({
            xtype: 'loadmask',
            message: 'Activating...'
        });

            me.activationSuccess();     //Just simulating success.

    },

    activationSuccess: function () {
        console.log('Activated.');
        var activationView = this.getActivationView();
        loginView = this.getLoginView();
        activationView.setMasked(false);

        Ext.Viewport.animateActiveItem(loginView, this.getSlideLeftTransition());
    },

    onSignInCommand: function (view, username, password) {

        console.log('Username: ' + username + '\n' + 'Password: ' + password);

        var me = this,
            loginView = me.getLoginView();

        if (username.length === 0 || password.length === 0) {

            loginView.showSignInFailedMessage('Please enter your User Name and Password.');
            return;
        }

        loginView.setMasked({
            xtype: 'loadmask',
            message: 'Signing In...'
        });

      /*  Ext.Ajax.request({
            url: '../../services/login.ashx',
            method: 'post',
            params: {
                user: username,
                pwd: password
            },
            success: function (response) {

                var loginResponse = Ext.JSON.decode(response.responseText);

                if (loginResponse.success === "true") {
                    // The server will send a token that can be used throughout the app to confirm that the user is authenticated.
                    me.sessionToken = loginResponse.sessionToken;*/
                    me.signInSuccess();     //Just simulating success.
               /* } else {
                    me.singInFailure(loginResponse.message);
                }
            },
            failure: function (response) {
                me.sessionToken = null;
                me.singInFailure('Login failed. Please try again later.');
            }
        });*/
    },

    signInSuccess: function () {
        console.log('Signed in.');
        var loginView = this.getLoginView();
        mainMenuView = this.getMainMenuView();
        loginView.setMasked(false);

        Ext.Viewport.animateActiveItem(mainMenuView, this.getSlideLeftTransition());
    },
/*
    singInFailure: function (message) {
        var loginView = this.getLoginView();
        loginView.showSignInFailedMessage(message);
        loginView.setMasked(false);
    },*/

    onSignOffCommand: function () {

        var me = this;

       /* Ext.Ajax.request({
            url: '../../services/logoff.ashx',
            method: 'post',
            params: {
                sessionToken: me.sessionToken
            },
            success: function (response) {

                // TODO: You need to handle this condition.
            },
           failure: function (response) {

                // TODO: You need to handle this condition.
            }
        });*/

        Ext.Viewport.animateActiveItem(this.getLoginView(), this.getSlideRightTransition());
    }
});

app.js

//<debug>
Ext.Loader.setPath({
    'Ext': 'touch/src',
    'FOS': 'app'
});
//</debug>

Ext.application({
    controllers: ["Login"],

    name: 'FOS',

    requires: [
        'Ext.MessageBox'
    ],

    views: ['Activation','Login','MainMenu'],



    icon: {
        '57': 'resources/icons/Icon.png',
        '72': 'resources/icons/Icon~ipad.png',
        '114': 'resources/icons/Icon@2x.png',
        '144': 'resources/icons/Icon~ipad@2x.png'
    },

    isIconPrecomposed: true,

    startupImage: {
        '320x460': 'resources/startup/320x460.jpg',
        '640x920': 'resources/startup/640x920.png',
        '768x1004': 'resources/startup/768x1004.png',
        '748x1024': 'resources/startup/748x1024.png',
        '1536x2008': 'resources/startup/1536x2008.png',
        '1496x2048': 'resources/startup/1496x2048.png'
    },

    launch: function() {
        // Destroy the #appLoadingIndicator element
        Ext.fly('appLoadingIndicator').destroy();

        // Initialize the main view

    Ext.Viewport.add([
         { xtype: 'activationview'},
             { xtype: 'mainmenuview' },
         { xtype: 'loginview' }
     ]);
    },

    onUpdated: function() {
        Ext.Msg.confirm(
            "Application Update",
            "This application has just successfully been updated to the latest version. Reload now?",
            function(buttonId) {
                if (buttonId === 'yes') {
                    window.location.reload();
                }
            }
        );
    }
});

//
Ext.Loader.setPath({
“Ext”：“touch/src”，
“FOS”：“应用程序”
});
//
外部应用程序({
控制器：[“登录”]，
名称：“FOS”，
要求：[
“Ext.MessageBox”
],
视图：[“激活”、“登录”、“主菜单”]，
图标：{
“57”：“resources/icons/Icon.png”，
'72'：'resources/icons/Icon~ipad.png'，
“114”：“资源/图标”/Icon@2x.png',
“144”：“资源/图标/图标”~ipad@2x.png'
},
isIconPrecomposed：正确，
startupImage：{
“320x460”：“resources/startup/320x460.jpg”，
“640x920”：“resources/startup/640x920.png”，
“768x1004”：“resources/startup/768x1004.png”，
“748x1024”：“resources/startup/748x1024.png”，
“1536x2008”：“resources/startup/1536x2008.png”，
'1496x2048'：'resources/startup/1496x2048.png'
},
启动：函数（）{
//销毁#appLoadingIndicator元素
Ext.fly（'appLoadingIndicator'）.destroy（）；
//初始化主视图
Ext.Viewport.add([
{xtype:'activationview'}，
{xtype:'mainmenuview'}，
{xtype:'loginview'}
]);
},
未更新：函数（）{
Ext.Msg.confirm(
“应用程序更新”，
“此应用程序刚刚成功更新为最新版本。是否立即重新加载？”，
功能（按钮）{
如果（buttonId==“是”）{
window.location.reload（）；
}
}
);
}
});

我只想要这个激活视图一次。

---

web服务还不可用….

基本上，您所寻找的是类似于大多数网站和本机应用程序上可用的记住我或SSO（单点登录）功能的东西。我自己最近在我的一个应用程序中需要这个

使用sencha，您可以使用HTML5存储。一旦用户成功登录，将某些用户详细信息（如登录状态、访问令牌、用户id等）存储到HTML5数据库中。您可以轻松地在其中存储高达5MB的数据，而且由于sencha运行在webkit等现代web浏览器上，因此您可以使用该api并使用它进行操作

至此，我已经在我的应用程序中创建了一个模型，其中包含各种字段，如用户id、登录状态和访问令牌。例如，您可以创建类似以下内容的模型-

Ext.define('MyApp.model.Userinfo',{
    extend:'Ext.data.Model',
    config:{
        identifier: 'uuid',
        store:'MyApp.store.Userinfo',
        fields:[                 
           {name: 'id', type: 'string' },
           {name: 'userid', type: 'string' },
           {name:'login_status',type:'string'},
           {name:'access_token',type:'string'}
        ]    
    }        
});

您可以根据需要添加字段数量，并为每个字段选择合适的类型。但是您的模型应该具有唯一标识符。使用ST2.0，您可以使用

标识符：'uuid'

为存储分配唯一标识符

然后是商店，它可以像-

Ext.define('MyApp.store.Userinfo',{
   extend:'Ext.data.Store',   
   config:{
       model:'MyApp.model.Userinfo',
       autoLoaded:true,
       autoLoad: true,
       autoSave:true,
       proxy:{
           type:'localstorage',
           id:'userinfo'
       }
   }
});

最后，当登录成功时，您可以使用-

  var userInfoData=Ext.getStore('Userinfo');                                
  userInfoData.removeAll();
  userInfoData.getProxy().clear();
  userInfoData.add({userid:'user_id_to_store',login_status:"true",access_token:'generated_access_token'});
  userInfoData.sync();

最后，在您的

app.js

中，检查此本地存储的条目，并验证访问令牌的可靠性。所以在

launch

方法中

var userInfoData=Ext.getStore('Userinfo');              
if(null!=userInfoData.getAt(0)){
    var status = userInfoData.getAt(0).get('login_status');
    var user_id=userInfoData.getAt(0).get('userid');
    var access_token = userInfoData.getAt(0).get('access_token');   

    //validate access token, check user id and status and load your next view that comes after login    

}else{
    // if reached here, that means user is not logged in.
    // load your login view.  
}

我无法阅读您的全部代码并对其进行编辑。但这是我用过的，到目前为止，它一直在正常工作。您可以根据您的应用程序和要求轻松更改它

---

注意

此代码已有一年多的历史。因此，它可能无法在最新的ST版本（未测试）上工作。

---

但想法是一样的。干杯。：）

你能和我们分享你试过的代码吗？谢谢你的回复…我正在分享我的代码。我是新来的sencha plz帮帮我……这个本地存储在nativa应用程序中有效吗？如果我将sencha应用程序打包到.apk或iOS应用程序中，localstorage将正常工作？@hossamghareb回答中提到的localstorage是HTML5 localstorage。是的，它在ios和android中都可用，但如果您的应用程序是仅在webview中运行的web应用程序，则可以使用它。对于不带webview的本机应用程序，您可以使用sqlite；对于ios，您可以使用核心数据。正如您的评论中所述，您的应用程序是sencha打包的应用程序，那么是的，您可以使用带有sencha提供的API的HTML5 localstorage。