The opening

Wrote a small program fast two years, no study nw. Js kernel principle, didn’t go to hack a small layer of program implementation, just about development experience, after all, small procedures and modern development experience sent a piece, many browsers h5 always tied, familiar with the process of development to the small program in addition to introduce their own experience, will also include a few good reference links. This article is optimized based on the native development experience. Please ignore webpy. (Why not frame? No need.)

The body of the

Style layout

  • Iconfont files use ali iconfont
  • The introduction of global common style files in conjunction with blue Fox enables rapid development of pages
<! --app.wxss file --> @import './ margin-wxss '; @import './color.wxss'; @import './font.wxss'; @import './layout.wxss'; @import './btn.wxss'; @import './price.wxss'; @import './line.wxss'; @import './ignore.wxss'; <! --index.wxml--> <view class="ft14 c9">xxx</view>Copy the code

Recommend to introduceasync/await

// How to use the page
const regeneratorRuntime = require("regenerator-runtime");
Copy the code

#### Performance optimization

  • SetData can be updated with a key
<! Reduce the amount of data between the render layer and the logical layer -->this.setData({
    data[0] :'xxx'
})
Copy the code
  • Pictures | dom lazily IntersectionObserver (data – lazy field not too good, because will be one-time loading screen images)
  • The first screen to optimize
    • To streamline the dom
    • Lazy loading
    • Interface layer data simplification, front-end production rendering work
    • On the CDN
  • Conditional on T sub s

Using the optimization

  • The component calls Page to find the current Page class using the hack getCurrentPage function
<! --component.js--> __pageFunc(api, cb) {const originPage = getCurPage();
      const oriApi = originPage[api];
      originPage[api] = mixOpts= > {
        oriApi.call(originPage, mixOpts);
        console.log('--- mix Comp ---', api, mixOpts);
        cb && cb();
      };
    }
Copy the code

The framework is recommended

  • Wxpage extremely lightweight micro channel small program development framework
  • Fundebug Reports monitoring reports
  • WxRequest Request encapsulation
  • The TS version requests WeRequest

Refer to the link

  • Micro store programmers small program optimization suggestions
  • I’m thinking about the process of doing front-end builds

conclusion

A year ago started with small program development is really not fun, but this does not affect the use of its effect and promotion. Applets provide apis that allow the H5 to achieve a near-native experience, as well as convenience. I think this is also the reason why small programs are easy to accept, whether developers or users.