这里会显示出您选择的修订版和当前版本之间的差别。
两侧同时换到之前的修订记录 前一修订版 后一修订版 | 前一修订版 | ||
primary:快速上手_制作第一个app2 [2017/03/21 00:06] 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文件,代码如下: | ||
- | |||
- | '' | ||
- | <!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> | ||
- | |||
- | '' |