提交 36b08661 编写于 作者: taohebin@dcloud.io's avatar taohebin@dcloud.io

补充长列表详情示例

上级 e17775ca
<template> <template>
<view> <view class="article-content">
<text>{{content}}</text>
</view> </view>
</template> </template>
<script> <script>
export default {
data() { export default {
return { data() {
return {
} content: "",
}, }
methods: { },
onLoad(event) {
} this.content = event["content"] ?? "";
} },
</script> methods: {
}
<style> }
</script>
</style>
<style>
.article-content {
padding: 0 30rpx;
overflow: hidden;
font-size: 30rpx;
margin-bottom: 30rpx;
}
</style>
...@@ -53,7 +53,6 @@ import JSONObject from 'com.alibaba.fastjson.JSONObject'; ...@@ -53,7 +53,6 @@ import JSONObject from 'com.alibaba.fastjson.JSONObject';
const jsonArr = JSON.parse(content); const jsonArr = JSON.parse(content);
jsonArr?.forEach((res)=>{ jsonArr?.forEach((res)=>{
const json = res as JSONObject; const json = res as JSONObject;
console.log("json :",json);
const title = json["title"] as string; const title = json["title"] as string;
const subTitle = json["subTitle"] as string; const subTitle = json["subTitle"] as string;
const img = json["img"] as string; const img = json["img"] as string;
...@@ -71,7 +70,6 @@ import JSONObject from 'com.alibaba.fastjson.JSONObject'; ...@@ -71,7 +70,6 @@ import JSONObject from 'com.alibaba.fastjson.JSONObject';
temp = temp.concat(items); temp = temp.concat(items);
} }
listData = temp; listData = temp;
console.log("size :",listData.size);
} }
setTimeout(()=>{ setTimeout(()=>{
...@@ -80,7 +78,7 @@ import JSONObject from 'com.alibaba.fastjson.JSONObject'; ...@@ -80,7 +78,7 @@ import JSONObject from 'com.alibaba.fastjson.JSONObject';
}, },
goDetail(e: Item) { goDetail(e: Item) {
uni.navigateTo({ uni.navigateTo({
url: 'pages/component/long-list/detail/detail' url: 'pages/component/long-list/detail/detail?content=' + e.detail
}); });
}, },
onRefresherrefresh() { onRefresherrefresh() {
......
[{ [{
"title": "灵魂拷问:你做的应用安全吗?", "title": "灵魂拷问:你做的应用安全吗?",
"subTitle": "功能都能实现,至于安全嘛", "subTitle": "功能都能实现,至于安全嘛",
"img": "static/list-mock/safe.png", "img": "static/list-mock/safe.png",
"detail": "12345678" "detail": "每个工程师,每个测试人员,在验收项目的时候,对功能需求的满足,心里是有底的。甚至也可以模拟大并发来测试应用的性能。
},{ 但要问你交付的应用是否安全? 那不管工程师还是测试, 心里都没底
"title": "云对象-重新定义前后端交互", 安全是一个独立且专业的事情, 如果不是一个优秀的黑客, 很难发现应用的众多安全问题。
"subTitle": "更清晰的逻辑、更少的代码、更低的协作成本、更好的语法提示", 普通工程师和测试人员是无法达到这个水平的。
"img": "static/list-mock/unicloud.png", 由于http的无状态特性, 服务器很难识别客户端的真伪。 这是一个真实请求, 还是伪造的假客户端? 一个貌似简单的识别问题, 难住了很多人。
"detail": "12345678" 网络传输的数据, 在中间被各种路由器和不规范的运营商偷窃和劫持。
}, 如果您的应用有如下特征, 就非常容易被黑客盯上:
{ 1. 应用中有大量有价值的数据
"title": "庆贺:uni-app海外月活设备过亿", 2. 提供优惠、 促销
"subTitle": "2022,让我们卷向海外吧", 3. 提供激励视频等奖励分发
"img": "static/list-mock/internation.png", 攻击者为了你的数据, 或者为了褥你的羊毛, 可以破解你的网络请求、 伪造假的客户端去请求你的服务器。
"detail": "12345678" 你原本期待给正常用户提供福利, 以拉新或促活, 结果一场促销后, 正常用户没得到好处, 全给黑客褥走了。
}] 让普通工程师和测试人员具备黑客能力是不现实的, DCloud为开发者赋能, 解决了这些安全顾虑。
\ No newline at end of file 在uni安全网络里, 可靠解决了如下2个老大难问题: 如何确认这个客户端, 真的是你的合法客户端?
客户端和服务器的通信, 如何安全加密?
在过去, 客户端和服务器是强分离的, 它们使用不同的技术开发, 中间通过无状态的http协议交流。
现在, DCloud同时提供了端引擎uni - app和云引擎uniCloud, 统一了技术栈, 在uni - app开发的客户端和uniCloud开发的服务器之间, 使用了更安全的网络通信机制。
安全网络仅支持App和微信小程序。 其他小程序和web无法保证客户端不被伪造。
使用步骤:
1. 在uniCloud控制台选定服务空间, 在安全网络设置页面绑定uni - app的客户端appid
2. 使用DCloud云打包来打包这个appid的客户端( 要在manifest勾选安全网络模块)
这样, 这个客户端和这个服务空间之间就建立了安全网络。 云端可以准确识别客户端的真伪, 可以在uniCloud控制台直接设置拒绝非法客户端连接您的服务空间。
这条安全网络, 几乎不会对请求速度等性能指标产生影响, 同时又可以识别假客户端、 马甲包。
另外, 还可以在指定的网络请求中做内容加密。 不管是云对象请求还是云函数的callFunction, 都可以设置secret( 一个bool参数) 来对通信内容加密。
secret参数设为true时, 这些内容将被加密传输, 无法被中间的路由器或伪造客户端解密。
注意内容加密是影响请求速度的, 加解密耗时与内容的数据量有关。 数据量小时, 可以忽略影响; 数据量大时, 需自己进行实际测试来评估体验。
uni安全网络还可以鉴别客户端的包名、 签名证书, 识别客户端设备是否被root或越狱, 禁止非法设备访问。
uni安全网络需要开发者在uniCloud上开通, 但并不收费。
如此高安全的保障, 在商业项目中都需要花掉不少银子来采购。 但DCloud免费给uniCloud开发者提供。 "
}, {
"title": "云对象-重新定义前后端交互",
"subTitle": "更清晰的逻辑、更少的代码、更低的协作成本、更好的语法提示",
"img": "static/list-mock/unicloud.png",
"detail": "从2000年开始,xml作为数据交换格式开始流行,服务器拼接xml接口,客户端js获取xml内容,动态修改页面。
几年后, 数据量更小的json替代了xml。
移动互联网到来后, 因为客户端分裂, 加剧了接口的泛滥。
一转眼, 接口已经玩了20年了。 其他技术飞速发展, 而前后端交互却一直是接口, 没有什么创新。
js已经有了import、
export, 为什么调用后端接口, 不能像调用一个前端模块一样呢?
serverless, 让这一切开始了变化。
亚马逊lambda提出了云函数的概念, 不再使用restful的url, 但仍然是基于json交换前后端数据。
uniCloud最初也以支持云函数为开始, 但我们发现这仍不够优雅、 简洁、 直观、 统一。
从HBuilderX 3.4 开始, uniCloud推出了“ 云对象”, 让调用云端服务, 真正变成像调用前端模块一样简单。
云对象: 服务器编写API, 客户端调用API, 不再开发传输json的接口。 思路更清晰、 代码更精简。
比如服务端编写一个云对象news, 该对象导出若干方法: add()、 getList()、 getDetailById()、 softDel()、 changeContent()、 allowPublic()、 addComment()、 getComments()
...等。
客户端的js则可以
import 这个news云对象, 然后直接调用add等方法。
HBuilderX中在uniCloud / cloudfunctions目录新建云函数 / 云对象, 选择类型为云对象, 起名为news。 打开云对象入口index.obj.js, 导出一个add方法。
然后在客户端的js中, import这个news对象, 调用它的add方法。
更多强大功能
1. 预处理与后处理
无论请求云对象的哪个方法, 开始前都会经过_before方法, 结束会执行_after方法。 这有助于统一的提前校验和格式化错误。
2. 云对象的返回值兼容uniCloud响应体规范
云对象返回值默认为uniCloud响应体规范, 方便客户端统一拦截错误。
无论网络异常, 还是token过期, 都可以统一拦截提示。
详见uniCloud响应体规范
3. 自动显示交互界面
每次写客户端联网的代码时, 开发者都免不了重复写一堆代码: 先调用loading等待框, 联网结束后再关闭loading, 如果服务器异常则弹出提示框。
当然, 这些UI策略都可以自定义。
4. URL化
为了历史兼容考虑, 云对象同时提供了URL化方案。 开发者仍然可以把一个云对象转换为一个http的url接口。
总结
使用云对象带来的诸多好处:
1. 更清晰的逻辑
2. 更精简的代码
3. 更少的协作成本( 以及矛盾图片)
4. 客户端调用时在ide里有完善的代码提示, 方法参数均可提示。( 传输json可没法在ide里提示)
5. 自动支持uniCloud响应体规范, 方便错误拦截和统一处理 "
},
{
"title": "庆贺:uni-app海外月活设备过亿",
"subTitle": "2022,让我们卷向海外吧",
"img": "static/list-mock/internation.png",
"detail": "在刚过去的4月,uni-app 在中国以外的国家,无论以 uv 还是以 ip 口径统计,月活跃设备均突破 1亿 大关。
平台方面, 这些活跃设备主要来自于 App 和 web, 也有小部分小程序。
国家分布方面, 遍布全球两百多个国家, 各大洲、 各种语言均有分布。
用户量排名靠前的前10个国家是: 印度、 美国、 菲律宾、 巴西、 印度尼西亚、 尼日利亚、 土耳其、 越南、 马来西亚、 英国。
这些应用有海外开发者开发的当地应用, 但大部分应用是由中国开发者开发的出海应用。
作为世界工厂的中国, 制造能力向海外溢出; 而另一方面, 中国的数字化开发能力也在向海外加速溢出。 坦白讲, 中国的开发工程师数量、 数字应用制造能力, 对全球大多数国家而言不是一个级别的。
在过去一年里, DCloud在国际化方面做了很多事, 不管是HBuilder、 uni - app、 还是uniCloud, 均提供了国际化方案, 帮助中国开发者更便利的出海。
一、 HBuilder推出英文版
除了中英文, HBuilder还开放制作各国语言包, 支持双向文字流, 即从右向左的文字。
uni - app全面支持国际化
1. 从前端到原生均支持国际化
2. 从应用到框架均支持国际化
3. 从vue到nvue均支持国际化
4. 双向文字流。 从右向左的文字比如阿拉伯文也可以正常显示
5. 海外主流sdk支持: 开发者出海不止需要多语言, 海外的主流SDK适配也是必需品。 uni - app 的map、 pay、 login、 push均支持海外主流SDK。
H5、 App平台 Google地图
App平台 支付支持 Paypal、 Stripe、 Google Pay、 Apple IAP
App平台 登录支持 Google、 Apple、 Facebook
App平台 推送支持 Google FCM
插件市场还有众多其他海外SDK的支持插件
DCloud提供了 hello i18n 示例来演示各种国际化使用方法。
可以在 HBuilder 新建项目界面 获取 hello i18n 示例, 也可以在插件市场下载: https: //ext.dcloud.net.cn/plugin?id=6462
uniCloud终端用户可视数据国际化
uniCloud的 DB Schema 中涉及字段的显示名称、 错误格式提示语, 这些也均支持国际化。
uniCloud阿里云版也支持海外加速。
-
配套开源生态的国际化
uni ui、 uni - starter、 uni - admin等重要开源项目均支持国际化。
中国的数字应用数量, 已经是世界顶级。 活跃的app、 小程序、 web网站, 数量上千万。 庞大的需求孕育出庞大的生产能力。
中国仍然有很多机会, 但已经内卷严重。 与此同时, 其他国家其实也迫切的需要数字化, 他们需要中国的数字应用制造能力。
DCloud已经为开发出海应用制作了大量轮子。 今年的插件大赛, DCloud还将设立专门预算奖励支持国际化的优秀插件。
现在天时地利都具备, 就等你来开发应用了!
2022, 让我们卷向海外吧。 "
}
]
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册