Vue Mobile End Project Summary

Using Vue Project wrote a mobile project, and then the project abruptly out of the component, has been busy writing RN project no time to summarize the experience, this morning finally resolved to write a summary.

1, Position:absolute: When the location of different mobile phone browser version is not the same, there is a compatibility problem, so to be modified to fixed, and then use Left:calc (50%-1rem) to locate;

2, Event.touches[0].pagey: Mobile event touchstart,touchmove,touchend, the finger in the Vue sliding object is to pass in $event to use event.touches[0]. Pagey equivalent;

3, back to the top: according to the Touchend event to determine whether the value of Document.body.scrollTop is greater than 1000来 control to return to the top button display and hide;

4, the window positioning: postion:absolute; left:50%; top:50%; Margin-top:-HEIGHT/2; Margin-left:-WIDTH/2;

5, Localstorage: The storage object is stored in the string json.stringify (), when the object is taken (Json.parse ());

6, @input: In real-time monitoring the value of input, focus and blur can not meet the needs of the time when the input event may be used;

7. Share components: (1) <a href= "Http://service.weibo.com/share/share.php?appkey=&title=&url=&searchPic=false &style=simple "target=" _blank "> Share to Weibo </a>;

8, left and right sliding effect: The time can use Overflow-x:auto, but there will be problems on the Apple phone, to solve the Compatible method is:-webkit-overflow-scrolling:touch;

9, the mobile side use Baidu share when:

Created () {

Window._bd_share_main && Window._bd_share_main.init ()
},
Mounted () {
Window._bd_share_main && Window._bd_share_main.init ()
},

Otherwise, Baidu sharing will appear click two times only to appear the Share button, at the same time in the index.html to make the corresponding configuration;

10, asynchronous rendering: In the Vue project, sometimes due to the cause of the DOM rendering problems, not get the corresponding node, in the use of this. $nextTick is invalid, you can use settimeout to wait for the DOM to load and execute the function, but it is not recommended, There will be performance problems;

11, mobile H5 Implementation upload Image: HTTP://JAVASCRIPT.RUANYIFENG.COM/HTMLAPI/FILE.HTML#TOC0, recommend to see this, using the H5 API Readasdataurl, Gets the Base64 encoded Data-uri object returned by the picture. , and then go back to the background to request the return picture path, in processing the picture display, there are two options: (1) Do not request the background, directly render pictures (2) Base64 request backstage, rendering pictures, there is the deletion of the time to keep and database synchronization;

12, mobile side does not support Select, their own div analog select drop-down effect;

13, request the parameter: When the parameters are passed when the URL contains #, the background may not recognize #, you need to encode the use of encodeURI (), encodeURIComponent ();

14, Hybrid: When interacting with the native, when passing parameters to iOS, use window.location.href = "next://"; then iOS can accept the next parameter;

15, navigation Hook: To determine the time to leave a route to execute a method Route1.beforeeach (to, from, next) = {

if (From.path = = '/theme_detail ') {
Console.log (88888)
}
Next ()
})；

Export Default Route1

16, iphone5s incompatible Display:flex: Treatment method: Display:-webkit-flex;-webkit-box; Flex:1; -webkit-flex:1;-webkit-box-flex:1;

17, native and iOS interaction, iOS use third-party library Webviewjavascriptbridge, native call JS method, in JS when using the method: A JS file global configuration Const BRIDGEMIXIN = {

methods: {
Setupwebviewjavascriptbridge (callback) {
if (window. Webviewjavascriptbridge) {return callback (Webviewjavascriptbridge);}
if (window. wvjbcallbacks) {return window. Wvjbcallbacks.push (callback); }
window. Wvjbcallbacks = [callback];
var wvjbiframe = document.createelement (' iframe ');
WVJBIframe.style.display = ' none ';
Wvjbiframe.src = ' https://__bridge_loaded__ ';
Document.documentElement.appendChild (wvjbiframe);
SetTimeout (function () {Document.documentElement.removeChild (wvjbiframe)}, 0)
}
}
}
Export {
Bridgemixin
}, and then on the called Page, This.setupwebviewjavascriptbridge (bridge) {
Bridge.registerhandler (' Testjavascripthandler ', function (data, responsecallback) {
var responsedata = {' Javascript Says ': ' Right back atcha! '
Alert (data)
Responsecallback (responsedata)
};

18, when the data more can use the route outside wrapped a layer of keep-alive, to load the Router-view, so that again into this route will not reload, such as enter the page to see 14 lines, and then click into the next page, return when the direct positioning is 14 lines;

19. native JS Implementation scroll to the top

Document.body.scrollTop Get Internet Explorer scrolltop for Chrome and other browsers Scrolltop,document.documentelement.scrolltop
Let x = Document.body.scrollTop | | Document.documentElement.scrollTop;
Let timer = setinterval (function () {
x = x-10;
if (x < 100)
{
x = 0;
Window.scrollto (X,X);
Clearinterval (timer);
}
Window.scrollto (x, x);
}, "10");

20, how to build the project in the local run up, the config below the index.js in the Assetspublicpath to change.

21, the Address bar to add the icon when it is used is webpack packaging, so this icon to be placed under the static file;

22, how to add station label to the website: the online generation of the ICO station superscript, is generally 16*16, will make a good station label named Favicon.ico, put in the project root directory, and then in the first page of the

<link rel= "shortcut icon" href= "/favicon.ico"/>

<link rel= "Bookmark" href= "/favicon.ico"/>

23. The use of these restricted elements in a custom component can cause problems, such as:

<table>
<my-row>...</my-row>
</table>
Custom components <my-row> content that is considered invalid, resulting in errors when rendering. The workaround is to use the special is property:
<table>
<tr is= "My-row" ></tr>
</table>

24. when Vue sets the request header:

Vue.http.interceptors.push (Request, next) =>{
Request.headers.set (' Logincode ', this.logincode);
Next ((response) = {
return response
});
});

25, plug-in development: Declaration plug-in, write plug-in, register plug-in use plug-in

26. vue.mixin ({//The code here executes before the created of each component, including the root component)

Created:function () {
Console.log ("Component Start loading")
}
}), that is, this code is executed in a sequential manner before the created method;

27, if it is addressed to a method such as the methods attribute, if the component itself has the test method, does not first execute the plug-in test method, then executes the component's test method, but executes only one, and takes precedence to execute the component itself the same name method. This needs attention.

28, want to get the value of the child component is obtained through a custom event, child component this. $emit (EventName, params), parent component Listener event get parameter V-on:eventname=eventname,eventname (params) { Console.log (params)},

Report:

vue2.0 Related Documents
http://vuefe.cn/Chinese Documents
http://vuejs.org/guide/website Original Document
http://router.vuejs.org/zh-cn/index.html vue-router2.0 Chinese Documents
http://vuex.vuejs.org/en/index.html vuex2.0 English Documents
Https://github.com/bhnddowinf/vuejs2-learn V2 Learning Program

Vue Mobile End Project Summary