Shulou(Shulou.com)06/03 Report--

This article will explain in detail the example analysis of vue development and application for you. The content of the article is of high quality, so the editor shares it for you as a reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

Using the vux UI component Library

Using vue-navigation cached pages, this library enables forward refresh and backward read cache, just like native APP navigation. Using child routing to realize tabbar has bug, which is solved by vuex.

Using lib-flexible to solve Mobile Page adaptation

Make a list.

"dependencies": {"fastclick": "^ 1.0.6", "lib-flexible": "^ 0.3.2", "lodash": "^ 4.17.4", "vue": "^ 2.5.2", "vue-navigation": "^ 1.1.3", "vue-router": "^ 3.0.1", "vuex": "^ 2.1.1", "vuex-i18n": "^ 1.3.1" "vux": "^ 2.7.8"}

Login on Wechat

The application needs to be accessed after login. The function of Wechat login is to enter from any link, determine whether to log in, skip to Wechat authorization without login, and return to the pre-login link after success. Due to the more work done on Wechat authorization for php, Wechat authorization is placed in the php implementation. Let's talk about the implementation process here. History mode is used in the routing method, and the packaged index.html files are rendered with php. Routing path defines a unified format r/xxxx, so that the routes on the PHP side can be matched. As long as the routes in this format are matched to the method of rendering index.html, otherwise, a 404 error will occur on the server during access.

Php-side routing configuration. This is laravel, and other frameworks should be similar.

Route::get ('/', 'HomeController@index')-> middleware (' auth')-> name ("home"); Route::get ('/ r / {query}', 'HomeController@index')-> middleware (' auth')-> name ("home")

Why not use hash mode, because when you use the lower php in hash mode to obtain the source address, you can't get the parameters after #. Although you can pass the parameters to the backend, it's troublesome, so you use history mode, and the same is true for subsequent payment and sharing.

Wechat login process

Open any link xxx.com/r/xxx

First go through the php side to match the route. If the match fails, the page will not be found.

Log in if the match is successful. If you are not logged in, jump to Wechat to log in. Record the current link before you jump, and return the link to the record if you have successfully logged in.

User login status is defined in the index.html page using token,token.

Var TOKEN ='{{$token}}'; / php template variable var HOST = 'http://read.xxx.com';// program api interface domain name var INURL = location.href / / page domain name (used in ios custom sharing)

WeChat Pay

What WeChat Pay wants to solve is the problem of path configuration. Since all our routes are in r/xxxxx format, fill in http://xxx.xxxx.com/r/ directly on Wechat. Please use query for the page parameters that need to be paid. Otherwise, the directory will appear after r, for example, r/goods/id/1 should be replaced with r/goods?id=1, so that as long as you define a path, the whole site can pull the payment.

Custom sharing

Due to the use of the history route pattern, so the ios problem needs to be solved, after the route jump, Android can normal the current path, ios is the path that you first open the application, so you should pay attention when signing, Android takes the current path to sign, ios to take the path to the first time to open the page to sign. This is why it is necessary to define a path to open the application for the first time before the route is initialized. That is, how to sign in index.html. I use axios here.

Key code

Let http = axios.create ({baseURL: HOST +'/ api/', timeout: 10000, headers: {'Accept':' application/json', 'Authorization':' Bearer'+ TOKEN, 'link opened by InUrl': INURL,// for the first time whether IsIos': isiOS// is ios}})

I need three backstage.

$is_ios = request ()-> header ('IsIos'); / / get whether ios$in_url = request ()-> header (' InUrl'); / / get the first open page path $in_url = explode ("#", $in_url) [0]; / / deal with if ($is_ios = = 'true') {$url = $in_url;//ios sign with the first open page path} else {$url = url ()-> previous () / / Android uses the path that requests this API to sign} / / use url to sign

How to initialize after getting the signature?

This.$wechat.config (res.data.wx_config)

This is provided by vux.

Since the application uses page caching, the code that defines custom shared data needs to be executed in activated.

First define an init=false

Mounted starts asking for data to get a signature.

This.$wechat.config (res.data.wx_config) this.$wechat.ready (() = > {this.set_share ()})

Define a method in methods

Set_share () {/ / Custom sharing to moments this.$wechat.onMenuShareTimeline ({title: this.share.title, link: this.share.url, imgUrl: this.share.icon, success: () = > {}}) this.$wechat.onMenuShareAppMessage ({title: this.share.title, desc: this.share.desc, link: this.share.url, imgUrl: this.share.icon})}

Activated definition

Activated () {this.set_share ()}

Reset the custom sharing data when the keep-alive component is activated, otherwise if the page is also scheduled for custom sharing before the return, and the page is not refreshed after the return, the shared data will be the previous one. Just redefine it here.

This is the end of the sample analysis on the development and application of vue. I hope the above content can be helpful to you and learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.