首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
gordanlee
V2EX  ›  分享创造

分享一个快应用开源项目-熊宝儿歌故事 QuickApp

  •  
  •   gordanlee · 2018-11-26 10:29:19 +08:00 · 1071 次点击
    这是一个创建于 427 天前的主题,其中的信息可能已经有所发展或是发生改变。

    熊宝儿歌故事 QuickApp

    熊宝儿歌故事基于快应用技术开发,且小程序版已经上线欢迎大家体验,由于快应用推出时间不久,网络上关于快应用的资料少之又少,本人也因公司需求进行开发,一路上踩坑无数,并集成友盟统计,完全遵循正式项目,今想把自己的一些经验分享出来,让大家少走弯路,如有错误和意见欢迎大家提出,共同进步。

    banner.png

    首页

    音乐 /视频

    信息流

    以下所有 API 均由产品公司自身提供,本人皆从网络获取。获取与共享之行为或有侵犯产品权益的嫌疑。若被告知需停止共享与使用,本人会及时删除此页面与整个项目。请您暸解相关情况,并遵守产品协议。

    为了方便大家学习和测试,且保证原公司利益,本项目采用 easy-mock 模拟后台数据。

    项目介绍

    熊宝儿歌故事基于快应用技术开发,分音乐、视频、育儿信息流三大模块,音乐模块相对复杂,包含套完整的音乐播放器逻辑,且快应用坑较多,所以实现起来难度加大,其他模块均为信息流方式呈现,包含常用的上拉刷新,下拉加载逻辑。

    目录结构


    ├── sign                      rpk 包签名模块
    │   └── debug                 调试环境
    │       ├── certificate.pem   证书文件
    │       └── private.pem       私钥文件
    ├── src
    │   ├── api                   请求接口
    │   ├── common                公用的资源和组件文件
    │   ├── components            组件文件
    │   ├── pages                  页面目录
    │   |   └── index.ux          页面文件,可自定义页面名称
    │   ├── app.ux              APP 文件,可引入公共脚本,暴露公共数据和方法等
    │   └── manifest.json         项目配置文件,配置应用图标、页面路由等
    └── package.json              定义项目需要的各种模块及配置信息
    

    项目安装

        git clone [email protected]:lishuaixingNewBee/babySongQuickapp.git
        npm install
        打开两个终端窗口分别执行:
        npm run watch
        npm run server
        如果开发者在后续操作中遇到报错 Cannot find module '.../node_modules/hap-tools/webpack.config.js',请运行一次
        hap update — force
    

    编译打包

    特别注意:如果是需要发布到应用市场是安卓应用一样需要签名文件
    npm run build
    编译后的工程目录在 /build
    生成的应用路径为 /dist/.rpk
    

    增加 release 签名

    1、创建私钥:
    通过 openssl 命令等工具生成签名文件 private.pem 、certificate.pem ,如:
    openssl req -newkey rsa:2048 -nodes -keyout private.pem -x509 -days 3650 -out certificate.pem
    (密钥长度,1024 觉得不够安全的话可以用 2048,但是代价也相应增大)
    在工程的 sign 目录下创建 release 目录,将私钥文件 private.pem 和证书文件 certificate.pem 拷贝进去
    
    Country Name (2 letter code) [XX]:CN   #国家代码(中国)
    State or Province Name (full name) []:BeiJing   #省(北京)
    Locality Name (eg, city) [Default City]:BeiJing   #市(北京)
    Organization Name (eg, company) [Default Company Ltd]:tact  #公司名称
    Organizational Unit Name (eg, section) []:   #可不填
    Common Name (eg, your name or your server's hostname) []: #可不填
    Email Address []:[email protected]  #邮箱
     
    Please enter the following 'extra' attributes
    to be sent with your certificate request
    A challenge password []:   #可不填
    An optional company name []:   #可不填
    在工程的 sign 目录下创建 release 目录,将私钥文件 private.pem 和证书文件 crtificate.pem 拷贝进去
    

    发布程序包

    发布程序包前需要增加 release 签名,然后在工程的根目录下运行
    npm run release
    生成的应用路径为 /dist/.signed.rpk
    如果需要临时使用 debug 签名,可以使用
    npm run release -- --debug
    注意: debug 签名由于是公开的,安全性无法保证,一定不要使用 debug 签名签发正式上线的应用,一定要保存好你的签名文件。
    

    开发中常见问题

    如一些基本问题,组件传参啥的我就不仔细讲了,大家去看文档就好了。我主要说一些坑吧。

    1. 关于样式组件问题
      - 快应用默认 flex 布局,所以咱们之前 float,position 啥的都不好使。
      - background-image 不支持网络路径
      - 不支持 box-shadow 属性(很多样式都不支持),想实现的话用背景图去实现
      - 不支持 webfont,据说后期会加上。
      - svg 的图片在华为应用平台有兼容问题。
      - 华为应用平台对动画有兼容性问题,下一版才会解决
      - tabs 内不能再嵌套 tabs,如有此类需求,请参考教程第一部分 div 组件模拟选项卡
      - 要实现 z-index 的图层效果请使用 stack
      - swiper 不支持 滑动方向改变
      - list-item 组件 dom 结构不一致时,一定要给 type="***"不同命名来区别,否则也会闪退,且组件的 if 改为 show 否则,会改变 dom 结构。
      暂时采用<list-item type="{{index}}">解决
      
    2. 关于框架 API
     - 父子组件 prop 传参数,如果属性名称使用驼峰定义,如:prop2Object,那么在外部传递数据时请使用-连接,如:prop2-object
     - slider 组件只有滑动结束后 end 才有回调,进行中没有回调,改变 value 值也会触发 change 事件,无法判断 change 是人为滑动触发,还是改变数据触发的
     - 没有提供获取音频播放状态的接口。
     - 组件没有 onDestroy 钩子,用 if 不会被触发。
     - 无 selectionchange 选中文本改变和光标移动时触发(据说 1030 会加上)。
     - 有没有类似 touchstart  和 touchend 的事件(确定 1030 会加上)。
     - this.$forceUpdate()相当于 vue 的 this.$nextTick()
    
    1. 重新封装 fetch 接口
    import nativeFetch from '@system.fetch';
    import prompt from '@system.prompt';
    const BASE_URL = `https://xxxxxx`;
    class http {
      static async request(method, Aurl, data) {
        let url = Aurl;
        const strRegex = '( https?|ftp|file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]';
        var reg = new RegExp(strRegex);
        if (!reg.test(url)) {
          url = BASE_URL + url;
        }
        console.warn(`请求地址:${url}`);
        const res = await this.fetch(method, url, data)
        if (this.isSuccess(res)) {
          return JSON.parse(res.data);
        } else {
          console.warn('请求错误');
          throw this.requestException(res);
        }
      }
      static fetch(method, url, data) {
        return new Promise((resolve, reject) => {
          nativeFetch.fetch({
            method,
            url,
            data,
            success: resolve,
            fail: reject
          })
        })
      }
      static isSuccess(res) {
        const quickappCode = res.code;
        // 快应用请求错误
        if (quickappCode !== 200) {
          return false;
        }
        const quickappData = JSON.parse(res.data)
        return !(quickappData && quickappData.status !== 0);
      }
      /*异常*/
      static requestException(res) {
        const error = {};
        error.statusCode = res.code;
        const quickappData = res.data;
        if (quickappData) {
          const serverData = JSON.parse(res.data)
          if (serverData) {
            error.serverCode = serverData.status;
            error.message = serverData.msg;
            error.serverData = serverData.data;
          }
        }
        return error;
      }
      static get(url, data) {
        return this.request('GET', url, data);
      }
    
      static put(url, data) {
        return this.request('PUT', url, data);
      }
    
      static post(url, data) {
        return this.request('POST', url, data);
      }
    
      static patch(url, data) {
        return this.request('PATCH', url, data);
      }
    
      static delete(url, data) {
        return this.request('DELETE', url, data);
      }
    }
    // 全局注册
    // export default base
    const injectRef = Object.getPrototypeOf(global) || global
    injectRef.$http = http
    

    ○ 更新记录

    2018.11.23

        -  求小伙伴一起维护项目
    

    3 回复  |  直到 2018-11-29 10:18:26 +08:00
    M0
        1
    M0   2018-11-26 15:07:51 +08:00
    不赖!
    lwghappy
        2
    lwghappy   2018-11-28 15:14:23 +08:00
    快应用刚开始坑太多了,写个静态页面都费劲,直接放弃....

    楼主把公司的项目开源,公司同意吗,哈哈
    gordanlee
        3
    gordanlee   2018-11-29 10:18:26 +08:00
    @lwghappy 公司自己开的公司,我自己同意就行吧。。。
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   777 人在线   最高记录 5168   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 25ms · UTC 22:54 · PVG 06:54 · LAX 14:54 · JFK 17:54
    ♥ Do have faith in what you're doing.