差别

这里会显示出您选择的修订版和当前版本之间的差别。

--- primary:快速上手_制作第一个app2 [2017/03/21 00:42]
admin
+++ — (当前版本)
@@ 行 1: / 行 1: @@
-如果您是空降到这里直接看如果开发App的话，很抱歉，还是请你先看上一节[[primary:快速上手_制作第一个app|快速上手：制作第一个APP]]我们到底做了什么。
-====== 快速上手：制作第一个App ======
-上一节中，我们已经通过完整的工作流程介绍了如果通过App-Link创建一个新闻APP应用的数据服务。那么，本章，我们继续来继续完成前端代码的编写。
-===== 前端编写说明 =====
-App-Link平台为了减少你写代码的追求，我们自动帮你生成了各种语言的前端代码开发包，你只需要在**应用管理**的接口开发栏目中下载相关的源代码开发包，并引用到你的项目中，直接调用相关方法就可以获取数据。
-{{:primary:接口开发.png?direct|}}
-===== 纯HTML版本新闻网页应用 =====
-----
-首先，我们尝试使用AJAX方式的代码开发包，来完成网页前端的交互。首先我们在点击下载AJAX方式的源代码。下载后我们会看到到文件如一下：
-{{:primary:ajax接口开发包代码.png?direct|}}
-然后，我们在jquery.js的文件目录下，创建一个index.html文件，代码如下：
-<code>
-<!DOCTYPE html>
-<html>
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-    <title>API调用测试</title>
-    <meta charset="utf-8" />
-    <script src="jquery-2.2.3.min.js"></script>
-    <!--引用App-Link的服务调用文件-->
-    <script src="api/api.config.js"></script>
-    <script src="api/news.js"></script>
-</head>
-<body>
-    <div>
-        <ul id="newslist">
-        </ul>
-    </div>
-    <hr />
-    <div id="news">
-        <h3 class="title"></h3>
-        <div class="content"></div>
-        <p>发布日期：<span class="published_date"></span></p>
-        <p>查看人数：<span class="viewed_count"></span></p>
-    </div>
-</body>
-<script>
-    $(document).ready(function () {
-        var news = new NewsApi();
-        news.list(null, function (data) {
-            data = JSON.parse(data);
-            for (var i = 0; i < data.length; i++) {
-                var newsitem = data[i];
-                $("#newslist").append("<li newsid='" + newsitem.id + "'>" + newsitem.title + " -- " + newsitem.published_date + "</li>")
-            }
-            $("#newslist li").click(function () {
-                var id = $(this).attr("newsid");
-                news.get(id, function (data) {
-                    data = JSON.parse(data);
-                    $("#news .title").html(data.title);
-                    $("#news .content").html(HtmlUtil.htmlDecodeByRegExp(data.content));
-                    $("#news .published_date").html(data.published_date);
-                    $("#news .viewed_count").html(data.viewed_count);
-                    news.updateviewcount({ "id": id });
-                });
-            });
-        });
-    });
-</script>
-</html>
-</code>
-这段代码很简单，显示新闻列表，点击其中一个后显示新闻内容并显示新闻详情，同时更新阅读数。详细代码不再解释，你看到的是，这个过程中，我们一句SQL语句或者和App-Link相关的代码都没有写，就直接完成了一个新闻网站了。
-{{:primary:ajax新闻网站.png?direct|}}
-===== TypeScript版新闻APP =====
-----
-同样的，我们下载TypeScript版的开发代码包，得到以下代码源文件，将代码都复制到SRC目录下，就可以直接进行开发。
-{{:primary:typescript接口开发包代码.png?direct|}}
-接下来我们用IONIC命令创建news-list和news的页面，过程略。我们下图展示的是如果获取新闻列表的数据
-news-list新闻列表的TS文件代码如下：
-<code>
-import { Component } from '@angular/core';
-import { NavController } from 'ionic-angular';
-import {NewsApi} from '../../providers/news.api';
-import {NewsPage} from '../news/news';
-@Component({
-    selector: 'page-home',
-    templateUrl: 'home.html',
-    providers: [NewsApi]
-})
-export class HomePage {
-    constructor(public navCtrl: NavController, public newsApi: NewsApi) {
-    }
-    list = [];
-    ionViewDidLoad() {
-        var json = {};
-        var obj = this;
-        this.newsApi.listInDB(json, function (data) {
-            obj.list = data;
-        });
-    }
-    open(id) {
-        var nav = this.navCtrl.push(NewsPage, { "id": id });
-    }
-}
-</code>
-news新闻详情的TS文件代码如下：
-<code>
-import { Component } from '@angular/core';
-import { NavController, NavParams } from 'ionic-angular';
-import {NewsApi} from '../../providers/news.api';
-import {AppUtil} from '../../app/app.util';
-/*
-  Generated class for the News page.
-  See http://ionicframework.com/docs/v2/components/#navigation for more info on
-  Ionic pages and navigation.
-*/
-@Component({
-  selector: 'page-news',
-  templateUrl: 'news.html',
-  providers: [NewsApi]
-})
-export class NewsPage {
-    constructor(public navCtrl: NavController, public navParams: NavParams, public newsApi: NewsApi) {}
-    info = { content:""};
-  ionViewDidLoad() {
-      var id = this.navParams.get("id");
-      this.newsApi.get(id).then(data => {
-          this.info = data;
-          this.info.content = AppUtil.HtmlDecode(this.info.content);
-		  this.newsApi.updateviewcount({"id":id});
-      });
-  }
-}
-</code>
-代码和网页版差不多，依然是获取列表数据，点击展示详情同时更新浏览次数。你依然发现，我们也是不需要写任何和App-Link的代码和配置环境，直接就把代码复制到SRC，你就直接可以开发你的APP于App-Link平台的数据服务进行交互。
-{{:primary:typescript新闻app.png?direct|}}

App-Link知识库

用户工具

站点工具

差别

页面工具