如何使用Ubuntu online account API来创建微博QML应用

来源：互联网发布：python的安装编辑：程序博客网时间：2024/05/18 02:58

在这篇文章中，我们将使用Ubuntu SDK所提供的online account API来访问微博的API并显示所需要的内容。这篇文章的重点是展示如何使用online account API的使用。我们将创建一个简单的QML应用。我们最终显示的画面如下：

更多关于QML应用开发的资料可以在地址:https://developer.ubuntu.com/zh-cn/apps/qml/

１）创建一个最基本的应用

我们还是像以前一样使用我们的Ubuntu SDK来创建一个最基本的weibo QML应用。

这样我们就创建了一个最基本的weibo QML应用。你可以使用热键Ctrl + R来运行它虽然它并不能做什么事。

２）加入online account所需要的文件

我们可以参考文章来对online account API有更深的了解。为了能够访问，需要创建如下的文件：

１）weibo.application

它的具体内容如下：

<?xml version="1.0" encoding="UTF-8"?><application>  <description>Weibo QML</description>  <desktop-entry>weibo.ubuntu_weibo.desktop</desktop-entry>  <services>    <service id="qml-weibo.ubuntu_qmlweibo">      <description>Watch your favorite Weibo messages</description>    </service>  </services></application>

２）weibo.service

它的具体的内容为：

<?xml version="1.0" encoding="UTF-8"?><service>  <type>sharing</type>  <name>Weibo QML</name>  <icon>qml-weibo.png</icon>  <provider>qml-weibo.ubuntu_plugin</provider>  <translations>unity-scope-weibo</translations></service>

３）创建一个plugin文件目录并在它的下面创建

　ａ）Main.qml,　它的内容为：

import Ubuntu.OnlineAccounts.Plugin 1.0OAuthMain {}

b) qml-weibo.ubuntu_plugin.provider，它的内容为：

<?xml version="1.0" encoding="UTF-8"?><provider>  <name>Weibo</name>  <icon>weibo/icon.png</icon>  <translations>unity-scope-weibo</translations>  <plugin>generic-oauth</plugin>  <domains>.*weibo\.com</domains>  <single-account>true</single-account>  <template>    <group name="auth">      <setting name="method">oauth2</setting>      <setting name="mechanism">web_server</setting>      <group name="oauth2">        <group name="web_server">          <setting name="Host">api.weibo.com</setting>          <setting name="AuthPath">oauth2/authorize</setting>          <setting name="TokenPath">oauth2/access_token</setting>          <setting name="RedirectUri">https://api.weibo.com/oauth2/default.html</setting>          <setting name="ResponseType">code</setting>          <setting name="ClientId">your developer key</setting>          <setting type="as" name="AllowedSchemes">['https','http']</setting>          <setting name="ClientSecret">your developer secret</setting>          <setting name="ForceClientAuthViaRequestBody" type="b">true</setting>      </group>      </group>    </group>  </template></provider>

在上面的文件中一定要输入自己的“your developer key”及“your developer secret”。这个你需要在微博API的网站上去申请。整个文件的架构为：

4）修改manifest.json文件如下：

{    "name": "qml-weibo.ubuntu",    "description": "description of qml-weibo",    "architecture": "all",    "title": "qml-weibo",    "hooks": {        "qmlweibo": {            "account-application": "weibo.application",            "account-service": "weibo.service",            "apparmor": "qmlweibo.apparmor",            "desktop": "qmlweibo.desktop"        },        "plugin": {            "account-provider": "plugin/qml-weibo.ubuntu_plugin.provider",            "account-qml-plugin": "plugin/qml"        }    },    "version": "0.1",    "maintainer": "XiaoGuo, Liu <xiaoguo.liu@canonical.com>",    "framework": "ubuntu-sdk-14.10"}

这里添加了account及plugin的一些设置。

５）为了能够让.service，.application及.provider文件能正常得到显示，我们对“qml-weibo.qmlproject”添加如下的东西：

    Files {        filter: "*.service"    }    Files {        filter: "*.application"    }    Files {        filter: "*.provider"    }

到这里，我们已经基本上已经修改或添加好我们所需要的文件。

３）设计应用的UI

我们来修改我们的main.qml文件。我们使用了一个Column的列layout manager来管理我们的控件。

使用一个ListView (accountsList)来显示所有我们相关的账号。这个可以在“系统设置”中的“账号”可以看到

使用一个叫做“createAccountBtn”的按钮来创建一个weibo的online账号
使用另外一个ListView (weiboList)列表来显示微博的内容

import QtQuick 2.0import Ubuntu.Components 0.1import Ubuntu.Components.ListItems 0.1 as ListItemimport Ubuntu.OnlineAccounts 0.1import Ubuntu.OnlineAccounts.Client 0.1import "weiboapi.js" as API/*!    \brief MainView with a Label and Button elements.*/MainView {    id: main    // objectName for functional testing purposes (autopilot-qt5)    objectName: "mainView"    // Note! applicationName needs to match the "name" field of the click manifest    applicationName: "qml-weibo.ubuntu"    /*     This property enables the application to change orientation     when the device is rotated. The default is false.    */    //automaticOrientation: true    property string accesstoken:""    width: units.gu(100)    height: units.gu(90)    Page {        id: root        clip:true        title: i18n.tr("Weibo")        Column {            spacing: units.gu(2)            width: parent.width            ListView {                id: accountsList                anchors.horizontalCenter: parent.Center                anchors.verticalCenter: parent.Center                height: contentHeight                width: parent.width                spacing: units.gu(1)                model: accountsModel                delegate: Rectangle {                    id: wrapper                    width: accountsList.width                    height: units.gu(10)                    color: accts.enabled ? "green" : "red"                    AccountService {                        id: accts                        objectHandle: accountServiceHandle                        onAuthenticated: {                            console.log("reply: " + JSON.stringify(reply));                            var obj = JSON.parse(JSON.stringify(reply));                            console.log("AccessToken: " + obj.AccessToken);                            main.accesstoken = obj.AccessToken;                            // Make the authenticate button invisile                            accountsList.visible = false;                            // Start to get the data                            API.getStatus();                        }                        onAuthenticationError: {                            console.log("Authentication failed, code " + error.code)                            //                          accountsList.headerItem.text = "Error " + error.code                            authenticateBtn.text = displayName + " Error " + error.code + " please do it again";                        }                    }                    Button {                        id: authenticateBtn                        anchors.fill: parent                        anchors.margins: units.gu(2)                        text: i18n.tr("Authenticate %1").arg(model.displayName + " " + model.providerName)                        onClicked: {                            var params = {}                            accts.authenticate(params)                        }                    }                }            }            Button {                id: createAccountBtn                anchors.horizontalCenter: parent.horizontalCenter                width: parent.width                height: units.gu(8)                text: i18n.tr("Request access")                onClicked: setup.exec()            }            ListModel {                id: modelWeibo            }            ListView {                id: weiboList                width: parent.width                height: parent.height                spacing: units.gu(1)                model: modelWeibo                delegate: Rectangle {                    width: parent.width                    height: units.gu(8)                    color: "lightgrey"                    BorderImage {                        id: image                        source: {return JSON.parse('' + JSON.stringify(user) + '').profile_image_url}                        width: parent.height; height: parent.height                        border.left: 5; border.top: 5                        border.right: 5; border.bottom: 5                    }                    Column {                        spacing: units.gu(1)                        x: image.width + 10                        width: parent.width - image.width - 20                        height: parent.height                        Text {                            id: title                            text: {return JSON.parse('' + JSON.stringify(user) + '').name }                        }                        Text {                            id: subtitle                            text: {return model.text }                        }                    }                }            }        }    }    AccountServiceModel {        id: accountsModel        //        serviceType: ""        applicationId: "qml-weibo.ubuntu_qmlweibo"    }    Setup {        id: setup        providerId: "qml-weibo.ubuntu_plugin"        applicationId: "qml-weibo.ubuntu_qmlweibo"        onFinished: {            createAccountBtn.visible = false;        }    }    Component.onCompleted: {        if ( accountsModel.count == 0 ) {            // If there is no such an account, we need to create such one            setup.exec();        } else {            // hide the button since the account has already been created            createAccountBtn.visible = false        }    }}

我们通过设计weiboapi.js文件来帮我们来得到微博的具体的内容：

//////////////////////////////////////////////////////////////////////////////////////     weibo//home statusfunction weiboHomeStatus(token, page , observer){    var url = "https://api.weibo.com/2/statuses/home_timeline.json?access_token=" + token + "&page=" + page    console.log("home status start...")    console.log("url: " + url);    var doc = new XMLHttpRequest();    doc.onreadystatechange = function() {            if (doc.readyState == XMLHttpRequest.HEADERS_RECEIVED) {                console.log(" home status in progress...");            }            else if (doc.readyState == XMLHttpRequest.DONE)            {                if(doc.status != 200) {                    console.log("!!!Network connection failed!")                    observer.update("error", doc.status)                }                else {                    console.log("-- home status succeeded !");                    if(doc.responseText == null) {                        observer.update("null", doc.status)                    }                    else {                        // console.log("home status: done" + doc.responseText)                        console.log("Some data received!")                        var json = JSON.parse('' + doc.responseText+ '');                        observer.update("fine", json);                    }                }            }    }    doc.open("GET", url, true);    doc.setRequestHeader("Content-type", "application/json");    doc.send();}function getStatus() {    // We can get some data from the web and display them    console.log("Going to get some data from web")    function observer() {}    observer.prototype = {        update: function(status, result)        {            console.log("got updated!");            if(status != "error"){                if( result.error ) {                    console.log("result.error: " + result.error);                }else {                    console.log("got updated1!");                    for ( var i = 0; i < result.statuses.length; i++) {                        modelWeibo.append( result.statuses[i] )                    }                }            }else{                console.log("Something is wrong!");            }        }    }    weiboHomeStatus(main.accesstoken, 1, new observer() );}

整个应用的源码在地址　

https://github.com/liu-xiao-guo/weiboqml

当所有的账号文件被成功创建后，我们可以在手机的如下目录看到所有的文件：

0 0