Understand the life cycle and route jump of small programs

​

 ​ edit

Catalog

Preface

One 、 Talk about wechat applet briefly

1、 In terms of structure and style

2、 When invoking wechat ecosystem functions

Two 、 Applet life cycle  

3、 ... and 、 Applet route jump

1. Through components navigator Jump

2. adopt api Jump wx.navigateTo() , wx.navigateBack(), wx.redirectTo() , wx.switchTab(), wx.reLanch()

summary

---

Preface

         Wechat applet It is an application that can be used without downloading and installing , It implements the application “ Within reach ” The dream of , Users can scan or search to open the application . Also embodies “ Go as soon as you use it ” Idea , Users don't have to worry about installing too many apps . Applications will be everywhere , Ready to use , But there is no need to install or uninstall . For developers , Wechat applet development threshold is relatively low , It's not as difficult as it is APP, It can satisfy simple basic application , Suitable for life service offline shops and conversion of non rigid demand low frequency applications . Wechat applet can realize message notification 、 Offline scanning 、 Seven functions of official account number and so on . among , Official account , Users can jump between official account and wechat applet .

---

One 、 Wechat applet and vue contrast

​ edit

1、 In terms of structure and style

         Applet provides some commonly used tags and controls , such as ： view, The main layout element of the applet , Be similar to html Labeled div, You can also completely like control div That way to control view. scroll-view, If you want to scroll , It is not necessary to use view To do overflow,scroll-view Provides more powerful functions , By referring to The adjustment of the number , You can control the direction of the roll , Triggered events and so on

         The configuration file app.json There's another parallel app.js file , Is a small program script code . We can listen and process in this file The life cycle function of the applet 、 Declare global variables , At every page In the directory js Do the business operations for the current page . But the app's The script logic of the page is JsCore Run in ,JsCore Is an environment without window objects , So it cannot be used in scripts window, You also cannot manipulate components in a script , So we use it a lot zepto/jquery Such libraries are also unavailable .

         the other one app.wxss file , This is the global style , All pages will be called , Under each project directory wxss It's a partial sample Type file , No contamination with other directories , Feel free to use style names .

He provided WXSS(WeiXin Style Sheets) It's a style language , have CSS Most features , You can think of it as a set of simplified versions css. At the same time in order to more suitable for the development of WeChat applet , Also on the CSS It has been expanded and modified , Directly help us do part of the adaptation work 了 , Such as his rpx（responsive pixel）, You can adapt to the width of the screen , Set the screen width to 750rpx. If in iPhone6 On , The screen width is 375px, share 750 Individual physical pixels , be 750rpx = 375px = 750 Physical pixel ,1rpx = 0.5px = 1 Physical pixel .

​ edit

2、 When invoking wechat ecosystem functions

Wechat applet provides corresponding api, For example, you need to modify a avatar , have access to wx.chooseImage、
Get geographic location information  wx.getLocation、

file save  wx.FileSystemManager.saveFile wait

Two 、 Applet life cycle  

​ edit

• onReady Life cycle function -- Listening page first rendering completed
• onShow Life cycle function -- Monitor page display
• onHide Life cycle function -- Monitor page hidden
• onUnload Life cycle function -- Monitor page uninstall
• onPullDownRefresh Page related event handler -- Monitor user pull-down action
• onReachBottom Handling function of page pull bottom event
• onShareAppMessage Users click the top right corner to forward
• onPageScroll Handling function of page scrolling triggering event
• onTabItemTap Now it's tab When the page , Click on tab Trigger when

3、 ... and 、 Applet route jump

1. Through components navigator Jump

Set up url Property specifies the path to jump , Set up open-type Property specifies the type of jump （ can

choose ）,open-type The attributes of are redirect, switchTab, navigateBack

The code is as follows （ Example ）：

// redirect  Corresponding  API  Medium  wx.redirect  Method <navigator url="/page/redirect/redirect?title=redirect" open-type="redirect"> Open on current page </navigator>// navigator  Component default  open-type  by  navigate<navigator url="/page/navigate/navigate?title=navigate"> Jump to a new page </navigator>// switchTab  Corresponding  API  Medium  wx.switchTab  Method <navigator url="/page/index/index" open-type="switchTab"> Switch  Tab</navigator>// reLanch  Corresponding  API  Medium  wx.reLanch  Method <navigator url="/page/redirect/redirect?title=redirect" open-type="redirect">// Close all pages , Open to a page in the app // navigateBack  Corresponding  API  Medium  wx.navigateBack  Method <navigator url="/page/index/index" open-type="navigateBack"> Close current page , Return to the previous page or multi-level page </navigator>

2. adopt api Jump
wx.navigateTo() , wx.navigateBack(), wx.redirectTo() , wx.switchTab(), wx.reLanch()

The code is as follows （ Example ）：

wx.navigateTo({url: 'page/home/home?user_id=1' //  page  A})wx.navigateTo({url: 'page/detail/detail?product_id=2' //  page  B})//  Jump to page  Awx.navigateBack({delta: 2 // Return to the specified page })//  Close current page , Jump to a page in the app .wx.redirectTo({url: 'page/home/home?user_id=111'})//  Jump to tabBar page （ stay app.json Registered in tabBar page ）, At the same time, turn off other non - tabBar page .wx.switchTab({url: 'page/index/index'})//  Close all pages , Open to a page in the app .wx.reLanch({url: 'page/home/home?user_id=111'}) It's used here url Data requested by the network .

---

summary

         That's what we're going to talk about today , This article simply introduces the life cycle and route jump method of wechat applet , And the vue Comparison of projects , I hope that's helpful

​ edit

​