With the approval and on-line of our fast application, there should be a fast application stomp pit experience here. The fast application developed by our company just involves the streaming services of audio, video and Feeds. Now I would like to share the problems I have encountered in the development.

Project structures,

Hap init <project_name> // Generate a quick application project scaffoldcdProject_name NPM install // Install depends on NPM run build // Package quick application, Output build and dist folder NPM run watch // Automatically compile NPM run server when changes are detected // Start server on another terminalCopy the code

Cannot find Module Cannot find Module if you run NPM run build after NPM install. /webpack.config.js exception, please re-execute hap update –force. This is because the later version of NPM will check and delete some folders under node_modules during NPM install, causing an error. Hap update –force will re-copy the hap-Toolkit folder to node_modules

Project released

Since we use debug signature in the development environment, official release to the application market requires official 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]:gdlb  # Company name
Organizational Unit Name (eg, section) []:   # don't fill in
Common Name (eg, your name or your server[]: # Email Address []: # Email Please enter the following 'extra'Attributes to be sent with your certificate request A challenge password []: # optional company name []: # copy the private key file private.pem and the certificate file certificate.pem to the release directoryCopy the code

Custom root configuration

Js or CSS files may need to be introduced in the development. In order to facilitate the preparation of relative paths, you can set the alias (alias) to facilitate the application. To do this, create a config folder in the SRC directory and create a webpack.config.js file in it. After all, you are using WebPack, just like writing a Vue project.

const path = require('path')
module.exports = {
postHook: function(webpackConf, options){
  webpackConf.resolve.alias = Object.assign(webpackConf.resolve.alias || {}, {
    '@src': path.join(process.cwd(), 'src')}}}Copy the code

Problems encountered during development

The layout style

Write fast application at the beginning, because before is the development of small programs, and then to fast application is particularly not adapted to. 1. The home page layout is flex by default, the rest of the floating layout has nothing. 2 CSS used to write, suddenly can not write is not adapt to. To achieve the z-index effect, use the Stack component. 4. A large number of CSS styles are not supported, such as Bulr and box-shadow, which can only be implemented with background images. 5. Background-image 1030 versions do not support network paths 6. Huawei platform is incompatible with SVG and animation. 7. Border-radius The GIF image does not take effect. Font face is only supported for 1030+.Copy the code
component
  • list-item
As one of the most used components, it is necessary to give the list item component type inconsistencytype="* * *"Different names to distinguish, otherwise will flash back. Solution: <list-itemtype="{{index}}">
Copy the code
  • swiper
Swiper is also a component with a high frequency of occurrence, but in actual use, there are few bugs, but few open functions, such as vertical sliding direction setting is not supported. By the way, I'll teach you to customize dots <div class="swiper-container">
    <stack>
      <swiper class="swiper" autoplay="true" indicator="false" interval="2000" loop="true" onchange="swiperChange">
        <block for="(index, item) in data">
          <image class="wrap-img" src="{{item.image}}" onclick="bindViewTap(item)" />
        </block>
      </swiper>
      <div class="dots">
        <block for="(index, item) in data">
          <div class="dot {{index === swiperCurrent ? 'active' : ''}}"></div>
        </block>
      </div>
    </stack>
  </div>
  <script>
    exportDefault {swiperChange(e) {this.swiperCurrent = e.idex}} </script> Use the onchange event to make changesCopy the code
  • tabs 
    No more tabs can be nested inside tabs, and the div component simulates tabs externally if such a requirement existsCopy the code
  • slider
Slider is a slider that only gets a callback from end when the slider is finished. If the slider changes its value, the change event will be triggered. The official demo has jet lag to distinguish it.Copy the code
  • web
1. When web components communicate with native pages (System.postMessage). For example, www.xxx.com? Id =1 goes to www.xxx.com? Id =2. There are more honey bugs on Huawei models.Copy the code
  • video
The video component, since I used itifAfter rendering, it can't call its method immediately, but also print is there, official reply, probably not ready. this.$forceUpdate(a) / *setTimeout Fix honey bug */ // this$element("video") && this.$element("video").pause()
    this.$element("video") &&setTimeout(()=>{this.$element("video").pause()},30);
Copy the code

The onDestroy hook is missing from the component, which will be added later.

interface

  • Audio interface
The audio interface is particularly frustrating. 1. There is no interface to get the current playing state, it is said that 1050 will join. audio.ontimeupdate = () => { this.isplaying =true// As kuaiju does not provide an interface to get playback status, this is resolved for now. } 2. Ontimeupdate does not stop immediately after onPause is complete. Audio. Onpause = () => {/* I use the music notification bar on the notification bar to close the ontimeUpdatelet globalTime = this.$app.$def.globalTime
          clearTimeout(globalTime)
          globalTime = setTimeout(() => {
            this.isplaying = false}, 20)} 3. When the page triggers onDestroy, onHide must remember to destroy unnecessary callbacks.Copy the code
  • $watch
This method should be avoided because it differs between 1020 and 1030. The watcher on 1030 does have a lag in response compared to 1020.Copy the code
  • $forceUpdate()
this.$forceUpdate() is somewhat similar to vue's this.$forceUpdateIf the developer expects DOM operations to be performed immediately when the data is updated, use: this.$forceUpdate(a); It is not recommendedCopy the code
  • Disabled new Function, eval
    evalThese are easy to inject malicious code, so small programs, quick applications disabled. In fact, it is afraid of you afraid you hot update, bypass the audit, do whatever you want to operate. But you do want to use itevalOr you can implement one yourself. Reference - the front end and compilation principle - write a JS interpreter in JS "https://segmentfault.com/a/1190000017241258Copy the code