标签：
在这篇文章中，我们将使用Ubuntu SDK所提供的online account API来访问微博的API并显示所需要的内容。这篇文章的重点是展示如何使用online account API的使用。我们最终显示的画面如下：
更多关于应用开发的资料可以在地址:https://developer.ubuntu.com/zh-cn/apps/qml/
<?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>
<?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>
import Ubuntu.OnlineAccounts.Plugin 1.0
OAuthMain {}
<?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>
{
"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"
}
Files {
filter: "*.service"
}
Files {
filter: "*.application"
}
Files {
filter: "*.provider"
}
import QtQuick 2.0
import Ubuntu.Components 0.1
import Ubuntu.Components.ListItems 0.1 as ListItem
import Ubuntu.OnlineAccounts 0.1
import Ubuntu.OnlineAccounts.Client 0.1
import "weiboapi.js" as API
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: root.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)
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
}
Text {
id: text
x: image.width + 10
width: parent.width - image.width - 20
height: parent.height
text: {return JSON.parse('' + JSON.stringify(user) + '').name }
}
}
}
}
}
AccountServiceModel {
id: accountsModel
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.setup.exec();
} else {
// hide the button since the account has already been created
createAccountBtn.visible = false
}
}
}
////////////////////////////////////////////////////////////////////////////////////// weibo
//home status
function 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() );
}
如何使用Ubuntu online account API来创建微博应用
标签：
原文地址：http://blog.csdn.net/ubuntutouch/article/details/44173131
