Bear boa Song Story QuickApp

  • Online open source address github.com/lishuaixing… Give it a like!
  • Quick application development documentation

All of the following apis are provided by the product company and obtained from the Internet. The acquisition and sharing may infringe the rights and interests of the product. If told to stop sharing and using, I will delete this page and the whole project in time. Please understand the situation and abide by the product agreement.

In order to facilitate learning and testing and ensure the benefits of the original company, this project adopts easy-mock to simulate background data.

Project introduction

Bear boa song story based on the fast application technology development, music, video, parenting information flow three big modules, music module is relatively complex, contains a set of complete music player logic, and quick application of pit is more, so the increased difficulties of implement, and other modules are forms of information flow, contains the commonly used on refresh, drop-down load logic.

The directory structure

├ ─ ─ sign RPK package signature module │ └ ─ ─ the debug debugging environment │ ├ ─ ─ certificate. The certificate of pem file │ └ ─ ─ private. Pem private key file ├ ─ ─ the SRC │ ├ ─ ─ API request interface │ ├ ─ ─ common Public resources and component files │ ├ ─ ─ components component files │ ├ ─ ─ pages page directory │ | └ ─ ─ index. The ux page file, customizable page names │ ├ ─ ─ app. Ux app file, the script can be introduced, Expose public data and methods such as │ └ ─ ─ the manifest. Json project configuration files, configure application ICONS, such as page routing └ ─ ─ package. The json defining project needs of the various modules and configuration informationCopy the code

Project installation

    git clone[email protected]: lishuaixingNewBee/babySongQuickapp. Git NPM install open two terminal window: NPM run watch NPM run server If an error occurs during subsequent operations, the Cannot find Module is displayed'... /node_modules/hap-tools/webpack.config.js', run hap Update -- force onceCopy the code

Compile the package

Special note: if you need to publish to the app market is android app as well need to signature file NPM run build compiled project directory in /build generated in the app path is /dist/.rpkCopy the code

Add release signature

Run the openssl command to generate signature files private.pem and certificate.pem, for example: Openssl req -newkey rsa: 2048-nodes -keyout private.pem -x509 -days 3650 -out certificate.pem (Key length, Create a release directory under the project's sign directory. Copy the private key file private.pem and certificate file certificate.pem to Country Name (2 letter code) [XX]:CN# Country code (China)
State or Province Name (full name) []:BeiJing   # Province (Beijing)
Locality Name (eg, city) [Default City]:BeiJing   # City (Beijing)
Organization Name (eg, company) [Default Company Ltd]:tact  # Company name
Organizational Unit Name (eg, section) []:   # don't fill in
Common Name (eg, your name or your server[]:[email protected] # Email Address Please enter the following 'extra'Attributes to be sent with your certificate request A challenge password []: # optional company name []: Private key file private.pem and certificate file crtificate.pemCopy the code

Release package

Before distributing the package, add the release signature, then run NPM run release in the root directory of the project to generate the application path /dist/.signed. RPK if you need to use the debug signature temporarily, You can use NPM run release -- --debug note: The debug signature is public and security cannot be guaranteed. Do not use the debug signature to sign officially launched applications and save your signature file.Copy the code

Frequently asked questions during development

For some basic questions, I will not go into details about the components, we go to see the documentation. I mainly talk about some pits.

  1. About style components 
    - Quickly apply the default Flex layout, so let's beforefloat,position doesn't work. - Background-image does not support network path - box-shadow property is not supported (many styles do not support it), use background image if you want to implement it - webFont is not supported, it will be added later - SVG images are incompatible with Huawei application platform. - Huawei Application platform has a compatibility problem with animation, which will be resolved in the next release. - Tabs cannot be nested any more. If you have such a requirement, Please refer to the div component simulation TAB in part 1 of the tutorial - to achieve the z-index layer effect use stack-swiper - swiper does not support sliding direction changes - list-item component DOM structure is inconsistent, be sure to givetype="* * *"Different names to distinguish, otherwise will also flash back, and componentifChange to show otherwise, it changes the DOM structure. For now, use <list-itemtype="{{index}}"> solveCopy the code
  2. About framework APIS
-parent component prop pass parameters. If the property name is defined as a camel, as in prop2Object, then use -concat when passing data externally, as in: Prop2-object-slider only has a callback for end after the slider is finished. There is no callback during the slider process. Changing the value will trigger the change event. - Component does not have onDestroy hook, useifWill not be triggered. - No selectionChange is triggered when text changes and the cursor moves (1030 is said to be added). - Are there any events like TouchStart and TouchEnd (make sure 1030 adds them)? - this.$forceUpdate() is equivalent to vue's this.$forceUpdate(), instance re-rendering (quick application to solve some unknown bug page rendering issues).Copy the code
  1. Rewrap the FETCH interface
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(' Request address:${url}`);
    const res = await this.fetch(method, url, data)
    if (this.isSuccess(res)) {
      return JSON.parse(res.data);
    } else {
      console.warn('Request error');
      throw this.requestException(res);
    }
  }
  static fetch(method, url, data) {
    returnnew Promise((resolve, reject) => { nativeFetch.fetch({ method, url, data, success: resolve, fail: reject }) }) } static isSuccess(res) { const quickappCode = res.code; // Quick application request errorif(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); }} // Global registration //export default base
const injectRef = Object.getPrototypeOf(global) || global
injectRef.$http = http
Copy the code

○ Update records

2018.11.23

- Ask partners to maintain projects togetherCopy the code