uni-app实现用接口编写新闻

一、uni-app 是一个使用 vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。

二、uni-app官网上(官网)有各种可以学习组件包括内置组件、常用的有:视图容器组件里的,view,scroll-view,swiper等,还有表单组件,如button、form、input、radio、switch、slider,媒体组件、路由与页面跳转组件等组件,和扩展组件里的,表单验证组件,API等功能,要实现用接口,编写新闻网页,首先要用到uniapp里面的uni.request的API组件,uni.request是发起网络请求的意思,它的参数包括:

参数 类型 必填 默认值 说明 平台差异
URL string 开发者服务器接口地址
data Object/String/ArrayBuffer 请求的参数 App 3.3.7 以下不支持 ArrayBuffer 类型
header Object 设置请求的 header,header 中不能设置 Referer App、H5端会自动带上cookie,且H5端不可手动修改
method string get 有效值详见下方说明

等一些,参数,其中url是必填参数,是请求接口的路径,要实现开发新闻网页,要用请求的新闻的路径接口,这是利用uniapp和接口编写新闻网页的关键API,其他的代码则包括页面的渲染,利用{ {}}模板来渲染视图,视图的渲染大多是数组遍历渲染,图片的渲染,和{ {}}渲染,接下来就是在标签中编写储存数据、方法、uni.request请求通过在方法中,编写,然后将接口里的新闻内容渲染到视图中。

其中还可以将接口里用户的登录信息储存到本地缓存里,通过uni.setStorage来实现异步储存数据,获取用户的数据则是通过un.getStorage来异步获取储存,

uni.setStorage 是Uni-app框架提供的一种本地缓存数据的方法,用于将数据存储在客户端本地,以便下一次使用该应用时快速访问。其语法格式如下:

uni.setStorage({
    key: 'key',// 缓存数据的键名
    data: 'value',// 要缓存的数据
    success: function () {
        console.log('缓存数据成功')
    }
})

- `key`:缓存数据的键名,可以用于唯一标识缓存数据。
- `data`:要缓存的数据,可以是任何类型的数据,例如JavaScript对象、数组、字符串等。
- `success`:缓存数据成功后的回调函数。

当我们使用 `uni.setStorage` 方法将数据存储在客户端本地后,可以使用 `uni.getStorage` 方法来获取存储的数据。其语法格式如下:

uni.getStorage({
    key: 'key',// 要获取数据的键名
    success: function (res) {
        console.log(res.data)
    }
})

- `key`:要获取数据的键名。
- `success`:获取数据成功后的回调函数,返回一个对象,其中 `data` 属性存储了缓存的数据。

需要注意的是,缓存的数据大小不应超过5MB,如果需存储更大量的数据,可以考虑使用本地文件存储或云存储等方式。同时,也要注意不要过度依赖本地缓存,需要根据实际情况选择合适的方式进行数据存储和管理。

其中这个组件包括同步和异步的储存,同步储存和同步获取储存为uni.setStorageSync(),uni.getStorageInfoSync()同步获取当前 storage 的相关信息,这样子就能实现跨页面获取数据了。

三、uni-app还有后端的云数据库和云函数,不仅包含前端的各种组件和请求还有后端的uniCloud里的数据库和云函数,uniCloud 是 DCloud 联合阿里云、腾讯云,为开发者提供的基于 serverless 模式和 js 编程的云开发平台,这使得开发成本大幅下降、开发效率大幅提升、上线和迭代速度大幅提速;所以用uni-app来编写代码实现网页的开发和小程序的开发都非常方便,

UniCloud是由DCloud官方推出的一款云开发平台,专门为Uni-app开发者提供云端支持。UniCloud提供了一套便捷的云开发解决方案,包括云函数、云数据库、云存储等功能,可以为开发者提供稳定高效的云端支持。

使用UniCloud,开发者可以不用自己搭建服务器或使用云服务商提供的服务,无需关注复杂的运维问题,实现对接口的调用以及数据的存储和管理。同时,UniCloud提供了一些方便的命令行工具和代码示例,可以帮助开发者更快更方便地进行开发。

在使用UniCloud时,开发者需要先按照提示进行云环境的创建和配置,然后通过云函数和云数据库等组件来实现后端功能的开发和部署。在前端即Uni-app中,可以使用uniCloud JS SDK将前后端连接起来,从而实现数据的传递和调用。

四、

uni-app 支持接入uni-ad广告联盟,开发者可实现一次开发,多端变现

uni-ad 支持开屏、信息流、激励视频、视频流、悬浮红包、推送等丰富的广告形式;

uni-ad 聚合了全网所有主流广告源,包括腾讯优量汇、字节穿山甲、快手、百度、华为、360、Sigmob等十几家广告源以及自有广告客户,并通过优秀比价算法,提供了更高的广告出价。

uni-ad 利用现有十几亿活跃用户数据以及多年的技术沉淀来不断升级广告优化策略,通过更有效的匹配、更好的竞价策略、更好的分层算法,让开发者获取更高的广告收益。

1、uni-ad的广告源

  • App端的广告源由腾讯优量汇、字节穿山甲、快手、百度、华为、360、Sigmob广告联盟等主流广告渠道以及部分DCloud直投广告聚合组成
  • H5端的广告源由百度、DCloud直投广告聚合组成
  • 微信小程序端的广告源由DCloud代理腾讯广告和部分DCloud直投广告聚合组成。同时微信小程序端也支持微信自带的广告。DCloud快捷广告有更低的开通门槛
  • 其他小程序端由小程序平台提供,不在uni-ad后台注册,而在这些小程序自身的平台注册

uni-ad支持平台

App平台
  • 信息流(Banner)
  • 激励视频广告
  • uniMP激励视频广告
  • 全屏视频广告
  • 插屏广告
  • 沉浸视频流广告
  • 短视频内容联盟组件
  • 互动游戏

你可能感兴趣的:(uni-app,前端)