The original

It is the first time for me to use UNI-App, and my goal is to make a small program background based on uni-App. The small program framework is UNI-App, but after all uni-App is a small program framework, so there is no vue-router. There is no good method for global encapsulation, based on my own experience, Package a set of self – use framework, currently suitable for small procedures, H5 did not add adaptive code

  • This article only mentions the key points and matters needing attention. The rest is searched by Baidu. This article is based on UNI-App and uses wechat mini program as an example

  • I refine the framework after the link, now write an article to play

Project directory

  • As for scaffolding construction, it depends on the needs of the team to use UNI-app, but it does not affect the use
- apis - Assets - Components - mini-admin - pages - Servers-static-store-utils - apis - Assets - Components - mini-admin - pages - Servers-static-store-utils...Copy the code

UI framework selection

You can use something else because iconfont is easy to use

uview

Uni – app I have seen

Life cycle problem

  • OnLaunch does not support asynchrony among many applets. In short, if asynchrony is written in onLaunch, there will be a sequencing problem with the onLoad of the page. Asynchrony in onLauch may be executed before or after the onLoad of the page
  1. Uni-app applet life cycle page call sequence is onLoad,onShow,mounted, which means that the applet page itself is started first, then JS rendering of the page

The subcontract design

  • The logical design here is that because tabbar pages must be in the main package, there are five pages in the main package, and all other pages are grouped according to functionality

Special execution environment

  1. Separate hot start cold start

  2. In non-DOM environment, you need to write view in advance, because it is sandbox environment, browser environment does not support all methods,Blob,File and so on kAO

How to renovate the ground floor?

  • Applets require the following capabilities
  1. Authority system, different from the traditional small program, need to support the specified page to support the tourist mode, the page authority judgment
  2. Page cache, the first time into the page call API download picture, again into the direct call cache picture, improve the experience
  3. Page burial point, page burial point, collect all burial points on departure and send uniformly
  4. Support uploading binary files (apPLETS without File Blob and other APIS)

Based on the above requirements, there needs to be a unified entry point, which processes the logic in advance before entering the page (i.e. onLoad), and then performs interface rendering of the current page when the page is loaded, such as interface rendering in onShow and obtaining cached page images in onReady

In Vue, there is the vue-Router function library, which can judge the functionality before entering the page. Uni-app, after all, focuses on small programs, which is weak, but we can still overtake on curves!

The page transformation

export default {
    
}
Copy the code
  • In Vue, we often do this because we return a page object with a new page, and this page object is a unique copy of each other. Since it is an object, can we proxy functions such as the life cycle? Using a call the apply? When entering the applet, we first enter the function of our agent, and then visit the page after processing the logic

So I’m trying to get the current page object

const miniPage = function(config) {
  return new MyPage(config);
};

export default miniPage({
   data(){
     return{}
   }
})

Copy the code
  • The this pointer is very important and will result in the page’s this not being found
function MyPage(config){
    console.log(config)
}

Copy the code

  • You can see the life cycle of the current page in the printed confing, cache the life cycle directly in the page with variables, then do their own operations, and then release

  • There are several important points to note

  1. So here I’m redefining onLoad onShow, and I need to define onLoad onShow on the current page, even if you don’t do anything, otherwise the call method won’t find the method on the current page, and it’s going to get an error, okay

function MyPage(config) { console.log(config,'----config') let _this = this; this.lifetimeBackup = {}; const LIFETIME_EVENTS = ["onLoad", "onShow", "mounted"]; // This step tells Vue which lifecycle needs to be modified, LifetimeBackup lifetime_events. forEach((event) => {_this.lifetimeBackup[event] = config[event]; config[event] = function() {}; }); config.onLoad = function(options) { let that = this; let LIFETIME_EVENTS_COPY=['onLoad','mounted']; // Here is the real life cycle to change, do not add meaningless life cycle such as onShow, Init (that). Then ((res) => {lifetime_events_copy.foreach (event => {lifetime_events_copy.foreach (event => {lifetime_events_copy.foreach (event => { _this.lifetimeBackup[event].call(that, options); config[event] = _this.lifetimeBackup[event]; })}); }; config.onShow = function(options) { let that = this; _this.lifetimeBackup['onShow'].call(that, options); config['onShow'] = _this.lifetimeBackup['onShow']; }; config.onHide = function() {}; return config; }Copy the code
  • So I’ve defined an init method here, which is a Promise callback, and yes, after init is done, I’m going to restore the page lifecycle order, and then I’m going to do onLaunch->onLoad->onShow, and while the applet is running, The behavior of always executing the init method before executing the page life cycle is maintained, so we can give more power to the applets

Bottom transformation completed, enhance the small program

Examples of permission design and visitor patterns

Specifically refer to vue-Router and other design, add function points in meta

  1. Create a route folder with index.js as the main entry, recommend subcontracting as the file name, and aggregate to index
import subPackagesA from './subPackagesA.js'

const base=[{
    path:'pages/login/index',
    meta:{
      isChecking:false,
    }
}]

const routes=[
  ...base,
  ...subPackagesA,
  ...subPackagesB
]
export default routes
Copy the code
  • In step 1 of the code above, there is an init function that executes the onLoad page method after init completes, which should be a Promise method, such as calling the interface and executing the page logic after asynchronous method execution

Take the login page as an example

  1. GetCurrentPages gets the path of the current route, and finds the meta field of the route by using the find method of the array.
if(! Currroute.meta. IsCheck){resolve()}else{// Execute global logic getUserInfo(). Then (res=>{resolve()})}Copy the code
  • In this way, the function of a tourist mode is achieved

Burial site design

Sometimes we feel that small programs need to be buried, and the product personnel need to investigate the use degree of the business side of the small program functions, pages and function points need to be buried, in this case, we can do some operations in onHide

  • Use onHide and Store to retrieve data
  1. Maintain an array using the route key of the page. After the array matches, specify the meta field of the page, such as isCheckPoint. If the specified condition is met, the onHide interface can be used to send and receive buried points

There’s a lot more that can be done

Based on page enhancement, in fact, many capabilities can be easily solved, not an example. lazy

What should be paid attention to during the transformation

  1. After all, multi-endpoint adaptation requires a lot of specific judgments, such as __route__ of getCurrentPages, which is not available in H5 and requires flexible configuration

  2. Easycom this file match is very fucked, pay attention to subcontracting main package do not repeat

.

conclusion

  • I have only experienced the original era of uni-App, this uni-App transformation makes me feel that some interviews only need to master uni-App is too low, in fact, I did not have uni-App experience before the transformation, but I still believe that everything can be done. Let alone small program this kind of wheel goods, in fact, still want to pay more attention to the use of the foundation.