请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

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

2
回复
103
查看
[复制链接]

3

主题

11

帖子

70

积分

 楼主| 2019-1-4 15:38:55 显示全部楼层 |阅读模式
本帖最后由 curry 于 2019-1-4 16:45 编辑

先上文档: 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>

  8. <style>
  9.   .demo-page {
  10.     flex: 1;
  11.     flex-direction: column;
  12.     align-items: center;
  13.     padding: 36px;
  14.   }
  15.   .title {
  16.     font-size: 54px;
  17.     margin-bottom: 18px;
  18.     color: #000000;
  19.   }
  20. </style>

  21. <script>
  22.   export default {
  23.     private: {
  24.       text: '欢迎使用快应用卡片',
  25.       des: '卡片是一种轻量级的快应用,快应用卡片使快应用能够在其他app和系统里提供可扩展的app功能'
  26.     }
  27.   }
  28. </script>
复制代码


注意: 页面内不能引用静态资源,可以引用系统能力,比如fetch,router等,需要先在配置的features里引入;具体可以看文档。



实际开发的时候,我发现快应用工具很容易产生缓存,退出重进也不能更新,我的做法是将卡片路由重新命名,比如加上1234....等调试完成再还原;
另外卡片通过路由可以跳转到快应用,可以携带参数,注意接收参数的时候需要使用public,不能用protected,protected只接受应用内传参。

总体跟着文档还是比较方便的。

回复

使用道具 举报

188

主题

341

帖子

3190

积分

2019-1-7 10:15:05 显示全部楼层
感谢楼主分享~~~
回复

使用道具 举报

0

主题

1

帖子

5

积分

昨天 20:49 显示全部楼层
实际开发的时候,我发现快应用工具很容易产生缓存,退出重进也不能更新,我的做法是将卡片路由重新命名,比如加上1234....等调试完成再还原;

大佬这句话救了我
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册