全网稀缺的快应用开源项目-熊宝儿歌故事QuickApp

栏目: 软件资讯 · 发布时间: 6年前

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

全网稀缺的快应用开源项目-熊宝儿歌故事QuickApp

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

全网稀缺的快应用开源项目-熊宝儿歌故事QuickApp
全网稀缺的快应用开源项目-熊宝儿歌故事QuickApp
全网稀缺的快应用开源项目-熊宝儿歌故事QuickApp
全网稀缺的快应用开源项目-熊宝儿歌故事QuickApp

以下所有 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 git@github.com: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 []:Val.china@foxmail.com  #邮箱
 
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
复制代码

<<<<<<< HEAD


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

JavaScript凌厉开发

JavaScript凌厉开发

张鑫 黄灯桥、杨彦强 / 清华大学出版社 / 2010 年4月 / 49.00元

本书详细介绍Ext JS框架体系结构,以及利用HTML/CSS/JavaScript进行前端设计的方法和技巧。作者为Ext中文站站长领衔的三个国内Ext JS先锋,在开发思维和开发经验上有着无可争议的功力。 本书包含的内容有Ext.Element.*、事件Observable、Ext组件+MVC原理、Grid/Form/Tree/ComboBox、Ajax缓存Store等,并照顾JavaSc......一起来看看 《JavaScript凌厉开发》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

URL 编码/解码
URL 编码/解码

URL 编码/解码

html转js在线工具
html转js在线工具

html转js在线工具