【分享】oppo负一屏卡片开发

curry

先上文档： oppo开放平台 快应用卡片开发指引 设计： 先将卡片原型发给oppo方的设计，然后他们提供卡片设计稿，按照设计稿写页面即可，注意一些细节，比如不能有背景等 调试： 1. 下载 快应用安装包 和 卡片运行环境安装包 到手机上；卡片运行环境安装包安装挺顺利，快应用安装包一直装不了，提示已经有了，但是我没装过啊，桌面上也没有啊，找了半天，发现是oppo自带的（黑人问号❓），找到应用管理，卸载，然后重新安装，终于桌面上有了； 2. 在手机根目录，创建名称为cards的文件夹；把包含卡片的快应用rpk包复制到cards文件夹中；在桌面上找到名为「快应用」的App并打开，选择「快应用卡片」，点击相应的卡片（秒开）即可看到卡片。我发现按照文档里这个步骤，怎么也显示不了卡片，然后根据应用里的提示创建了 rpks 文件夹，终于实现了预览。 但是这样的调试方法每次都需要打包，太麻烦了，我是先利用快应用调试器，跟开发快应用的一个页面一样，这个可以实时预览，开发好后，再修改相应的配置，变成卡片。 配置：

1. "router": {
2. "entry": "Home",
3. "pages": {
4. "Home": {
5. "component": "index"
6. }
7. },
8. "widgets": {
9. "CardDemo/Normal": {
10. "name": "Normal",
11. "decription": "快应用卡片普通示例",
12. "component": "index",
13. "path": "/CardDemo/Normal",
14. "features": []
15. }
16. }

复制代码

页面：

1. <template>
2. <!-- template里只能有一个根节点 -->
3. <div class="demo-page">
4. <text class="title">{{text}}</text>
5. <text class="content">{{des}}</text>
6. </div>
7. </template>
9. <style>
10. .demo-page {
11. flex: 1;
12. flex-direction: column;
13. align-items: center;
14. padding: 36px;
15. }
16. .title {
17. font-size: 54px;
18. margin-bottom: 18px;
19. color: #000000;
20. }
21. </style>
23. <script>
24. export default {
25. private: {
26. text: '欢迎使用快应用卡片',
27. des: '卡片是一种轻量级的快应用，快应用卡片使快应用能够在其他app和系统里提供可扩展的app功能'
28. }
29. }
30. </script>

复制代码

注意： 页面内不能引用静态资源，可以引用系统能力，比如fetch，router等，需要先在配置的features里引入；具体可以看文档。 实际开发的时候，我发现快应用工具很容易产生缓存，退出重进也不能更新，我的做法是将卡片路由重新命名，比如加上1234....等调试完成再还原； 另外卡片通过路由可以跳转到快应用，可以携带参数，注意接收参数的时候需要使用public，不能用protected，protected只接受应用内传参。 总体跟着文档还是比较方便的。

管理员

感谢楼主分享~~~

从不卖队友

实际开发的时候，我发现快应用工具很容易产生缓存，退出重进也不能更新，我的做法是将卡片路由重新命名，比如加上1234....等调试完成再还原；

大佬这句话救了我

curry

从不卖队友 发表于 2019-1-16 20:49 大佬这句话救了我

哈哈，那就好，也不知道有没有更好的办法

瓜瓜上神

另外卡片通过路由可以跳转到快应用，可以携带参数，注意接收参数的时候需要使用public，不能用protected，protected只接受应用内传参

说出来你可能不信，大佬另一句话救了我

1429715206@qq.c

给大佬666，刚好需要

硬核聚视

感谢