What is a quick app

To put it simply, Kuaiyu is a new application jointly launched by ten major domestic mobile phone manufacturers such as Xiaomi, Huawei and OV. No installation, seconds open, experience comparable to native. It also offers the same entry points as native apps: app store, search page, etc.

Pre-development preparation

We’ll show you how to build, launch, preview, and debug quick app projects. Similar to the official documentation, here I’ve added a few potholes and solutions that I’ve encountered along the way.

Create a project

Install NodeJS

The official said that NodeJS of 6.0 or higher is required, and V6.11.3 is recommended, but my local NodeJS is V9.3.0, so I did not switch to 6.0 because I did not find any abnormality.

Install the hap – toolkit

Hap-toolkit is a quick application developer tool. It helps developers to complete development work through command line tools, including template creation, upgrade, compilation, debugging, and other functions. Similar to the vue – cli.

npm install -g hap-toolkit
Copy the code

After the installation, view the version number to check whether the installation is successful.

hap -V
Copy the code

Create a project

Running the following command creates the directory in the current directory as the root of the project. 

hap init <ProjectName>
Copy the code

This project already contains the initial code for the project configuration and sample pages, and the main structure of the project root directory is as follows.

├ ─ ─ sign RPK package signature module │ └ ─ ─ the debug debugging environment │ ├ ─ ─ certificate. The certificate of pem file │ └ ─ ─ private. Pem private key file ├ ─ ─ the SRC │ ├ ─ ─ │ Common public resources and component files │ └ ─ ─ logo. PNG application icon │ ├ ─ ─ the Demo page directory │ | └ ─ ─ but 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

Install dependencies

npm install
Copy the code

Start the project

compile

npm run build
Copy the code

The compiled dist directory is the final product: the RPK file.

This step can lead to errors (which I did).

Cannot find module '... /node_modules/hap-tools/webpack.config.js'
Copy the code

This is mainly because after creating the project there is a node_module folder with a hap-tools package in it. If NPM install is used to install dependencies, later versions of NPM may empty the original package of node_module and install dependencies again. In this case, manually install haP-Tools

npm install hap-tools
Copy the code

To listen for automatic compilation of source code changes, run the watch command.

npm run watch
Copy the code

At this point you have a quick Hello World app packed up, and now you need to run it on your phone.

preview

First, you need to install your phone debugger.

If you only install the quick app debugger, you will find that the buttons are grey and unclickable. You will also need to install the platform preview debugger, and you will need to install the mobile debugger on the quick app documentation.

Once you’ve installed the debugger, just install the Quick App package on your phone.

Sweep code installed

You need to start a local HTTP server.

npm run server
Copy the code

If the qr code in the command line does not respond to the scan, you can open that address in the browser and scan the code to try (I did), because the qr code in the command line may draw problems.

The local installation

Upload the RPK file to the mobile phone and install it.

Online update

The server address can be set in the upper right corner of the quick application debugger. Run the following command every time you change the code, you can click online Update to update it. You don’t need to scan the code or install it locally every time.

npm run server
npm run watch
Copy the code

debugging

You can preview it on your phone, use the Chrome DevTools debug interface, and view debug logs. The preview on the phone says that other debugging should follow the official steps.

Possible pitfalls: Debugging with Chrome DevTools may not open the debug screen, or the debug screen may be blank. Then check:

  • Click on the mobile debugger to start debugging (clicking will automatically open DevTools on PC Chrome)
  • Make sure your phone and computer are on the same network segment
  • Check agent, set agent to disable agent try (I just set agent devTools blank)

5 minute hands-on tutorial

To a list page and details page as an example of quick application code, data source Thunderbolt film review.

Manifest.json

After configuring the route in manifest.json, you can write the code. Examples of generated templates are shown here. Notice Dynamic routes cannot be configured.

Note that the system interface to be used must be declared in the manifest.json feature. See the manifest documentation for specific configuration items.

{
  "package": "com.xunlei.movie"."name": "Thunder Movie Review"."versionName": "1.0.0"."versionCode": "1"."minPlatformVersion": "101"."icon": "/Common/logo.png"."features": [{"name": "system.prompt" },
    { "name": "system.router" },
    { "name": "system.shortcut" },
    { "name": "system.fetch" },
    { "name": "system.webview"}]."permissions": [{"origin": "*"}]."config": {
    "logLevel": "debug"."designWidth": 640
  },
  "router": {
    "entry": "List"."pages": {
      "List": {
        "component": "index"
      },
      "Detail": {
        "component": "index"
      },
      "About": {
        "component": "index"}}}}Copy the code

The list of

The list component uses the fast application List component, which is Native and provides better scrolling performance for long lists. The List component also has an onscrollBottom event for easy dropdown loading.

The image component is similar to the img tag on the front, but the Alt attribute is different. Alt is used to display a placeholder image, which can only be a local image, before the image is loaded.

The type in the list-item component is mandatory. To realize the reuse of DOM fragments, the DOM structure of the same type attribute is required to be identical. So setting a list-item with the same type attribute is the key to optimizing list scrolling performance.

<template>
  <list class="list-main" onscrollbottom="loadData">
    <list-item class="list-item" type="review" for="{{item in list}}">
      <image  class ="art-pic" 
        src="{{item.img}"
        alt=".. /Common/assets/img/default.png">
      </image>
      <text class="art-title">{{item.title}}</text>
    </list-item>
    <! LoadMore --> loadMore --> loadMore
    <list-item type="loadMore" class="load-more" show="{{hasMore}}">
      <progress type="circular" class="round"></progress>
      <text>To load more</text>
    </list-item>
  </list>
</template>
Copy the code

The quick application network request uses the fetch method, which is in the form of callback, which is not easy to call. The official gave an example encapsulated as a promise, which can be called in the way of async/await.

Export the wrapped fetch method in app.ux for global use, and since the interfaces I use all return JSON, I parse directly at this layer. Json.parse error handling should be paid attention to during actual development.

// app.ux
const natives = {
    /** * network request * @param options * @return {Promise} */
    async fetch (options) {
      const p1 = new Promise((resolve, reject) = > {
        options.success = function (data, code) {
          data = JSON.parse(data.data)
          resolve({ data, code })
        }
        options.fail = function (data, code) {
          reject({ data, code })
        }
        nativeFetch.fetch(options)
      })
      return p1
    }
  }
  // Inject it globally
  const hookTo = global.__proto__ || global
  hookTo.natives = natives
  
  export default {
    natives
  }
Copy the code

Routing hop

<template>
  <list>
     <list-item onclick="{{goDetail(item.id)}}" for="item in list"></list-item>
  </list>
</template>
<script>
import router from '@system.router'
  
export default {
  goDetail (id) {
      router.push({
        uri: '/Detail'.params: { id }
      })
   }
}
</script>
Copy the code

webview

The details page just loads a WebView and requests the details of the movie review with the ID passed from the list page. The body of the movie review is an address stored in the CDN. Declare the use of the WebView interface in manifest.json before using a Web component.

<! -- Detail/indev.ux -->
<template>
  <! -- Template can only have one root node -->
  <div>
    <web src="{{review.body_url}}" id="web"></web>
  </div>
</template>

<script>
  import api from '.. /Common/api/index.js'

  export default {
    data: {
      id: ' '.// The id passed by the list page
      review: {}
    },
    onMenuPress() {
      this.$app.showMenu()
    },
    onInit () {
      this.getReview()
    },
    async getReview () {
      try {
        let data = await api.getReview(this.id)
        this.review = data.cinecism_info || {}
        this.$page.setTitleBar({ text: this.review.title })
      } catch (error) {
        console.log(error)
      }
    }
  }
</script>
Copy the code

Compare with front-end development

The biggest difference between fast application and front-end development is HTML and CSS, because fast application is implemented in a native way, but there is no implementation of all the TAGS of HTML, and the same tag with HTML in the use of some differences.

html

A lot of HTML in quick apps doesn’t work (p, H1, H2, etc.) because it just emulates some HTML tags that will eventually be converted to native components.

In addition, there is a limit to the nested subcomponents of components in fast applications. Not all components can nest subcomponents, and errors will be reported if the nesting is not correct. For example, the following is incorrect:

<! - error - >
<a href="">
 <image src="http://pic.com/1.jpg"></image>
</a>
Copy the code

Text component

Only a, SPAN, text, and label can be used to place text content

Image components

The image component is image, not img, which is similar to img, but the meaning of Alt is different. In the fast application, Alt refers to the placeholder map before the image is loaded, which can only be a local address.

<image src="http://pic.com/1.jpg" alt="1.jpg"></image>
Copy the code

other

Form components, video components and other components are consistent with the front end, and there are some special components of fast application, such as star rating components, progress bar components, list components and so on.

css

  • Display can only be Flex or None
  • Position can only be Fixed or None
  • The length units are px and %

Unlike traditional Web pages, PX is a unit of width relative to the project configuration baseline, and has been adapted to mobile screens, similar to REM. The base width can be configured in mainifest. Json.

javascript

The basic syntax is available, as is ES6, and the Babel dependency has been installed in the project. Some browser-specific apis may differ. For example, the data store uses the fast application interface storage.

Compared with the Vue

Since our team mainly uses the Vue technology stack for development, let’s compare the similarities and differences between fast applications and Vue syntactic. Quick apps look similar to Vue, but there are big differences.

  • All have the concept of instruction, but the writing method is different, currently can not customize the instruction
<! Vue syntax on the left and fast application syntax on the right
v-for => for
v-show => show
v-if => if
template => block
slot => slot
Copy the code
  • Quick application of routing is through the configuration filemanifest.jsonIt is configured. The application in the instance is the same as vue-router
  • Both have the concept of components, and components are introduced in slightly different ways
// vue
import child from './childComponent'
/ / application
<import name="child" src="./childComponent"></import>
Copy the code
  • Events are listened on and fired similarly to Vue, both$on $off $emit, listener native component events are written differently
<! --vue-->
<div v-on:click="handleClick"><div>
<div @click="handleClick"><div>
<! -- Quick application -->
<div onclick="{{handleClick()}}"><div>
Copy the code
  • Intercomponent communication is similar to pure Vue in that it can be powered or mounted on global objects
  • None of the Vue ecosystems work, such as Vuex, there is currently no plugin mechanism

The advantages and disadvantages

advantages

  • Provides many system functions, such as sharing, notification, scanning QR code, adding ICONS to the desktop
  • Good user experience, no download, seconds open, small memory footprint
  • Native apps can be associated

disadvantages

  • You have to register an account for each platform
  • There was no INTEGRATED development environment, debugging was cumbersome, and DevTools was clunky
  • The maximum size of an RPK file is 1 MB
  • Domestic mobile phone manufacturers launched, naturally is not support ios

conclusion

I still encountered a lot of bugs when writing the demo, mainly in the HTML and CSS parts. Like our company front-end and reconstruction is separate, reconstruction is only responsible for writing HTML + CSS, front-end is responsible for writing logic interface and other miscellaneous things, fast application and small program this form is very troublesome for reconstruction, can not write a code everywhere.

There was also a problem with the review text being displayed on the details page. The body of our movie review is a pile of HTML tags on THE CDN, without style, and there may be some tags incompatible with quick application, so we load the page in the way of WebView. But I don’t know how to inject CSS into the WebView, so the page is messy.

In general, the form of fast application is good for users, who can experience some functions of the APP before downloading it. Fast apps are fast because they have a lot of native optimizations, but also because they are so small that users can’t feel them, which means they can’t be complicated.

The code address

Github.com/greenfavo/q…

Reference documentation

Quick application development documentation

Scan a concern about the thunder front public number

Author: Karen

Proofreading: small transparent front end