1. Add the following code to the client_index.html file:
<script type="text/javascript">
if(window.plus){
plusReady()
}else{
document.addEventListener('plusready',plusReady,false)
}
function plusReady(){//Here is the guide page displayed every time you enter the application. How to display the guide page in development depends on the specific situation.
var guide = plus.webview.create('guide.html',"guide");
guide.show();
}
</script>
2. Create image folder, add the diagram of boot map; create CSS folder, introduce mui.min.css, mui.css; create JS folder, introduce mui.js file, mui.min.js file, etc.
3. Add guide.html, the code is as follows:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="css/mui.min.css" rel="stylesheet" /> <style type="text/css"> body { background-color: black; } .guide-img { width: 100%; } #start { position: absolute; bottom: 40px; width: 60%; left: 20%; } </style> </head> <body> <div class="mui-content"> <div class="mui-slider mui-fullscreen"> <div class="mui-slider-group"> <div class="mui-slider-item"> <a href="javascript:;"> <img class="guide-img" src="image/cbd.jpg"> </a> </div> <div class="mui-slider-item"> <a href="javascript:;"> <img class="guide-img" src="image/muwu.jpg"> </a> </div> <div class="mui-slider-item"> <a href="javascript:;"> <img class="guide-img" src="image/shuijiao.jpg"> </a> </div> <div class="mui-slider-item"> <a href="javascript:;"> <img class="guide-img" src="image/yuantiao.jpg"> <button class="mui-btn mui-btn-blue mui-btn-outlined" type="button" id="start">Start experiencing</button> </a> </div> </div> </div> </div> <script src="js/mui.min.js"></script> <script type="text/javascript"> mui.init(); mui.plusReady(function() { /** * Get system status bar height * http://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.getStatusbarHeight */ var sh = plus.navigator.getStatusbarHeight(); /** * Get device screen height resolution and width resolution * http://www.html5plus.org/doc/zh_cn/device.html#plus.screen.resolutionHeight * http://www.html5plus.org/doc/zh_cn/device.html#plus.screen.resolutionWidth */ var h = plus.screen.resolutionHeight; var w = plus.screen.resolutionWidth; /** * Set the height of the picture. The picture here is not standard; * In the actual development, we suggest that you make iPhone 6plus standard pictures; */ var imgs = document.querySelectorAll(".guide-img"); for(var i = 0, len = imgs.length; i < len; i++) { imgs[i].style.height = (h - sh) + "px"; imgs[i].style.width = w + "px"; } /** * Close start page manually * http://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.closeSplashscreen */ plus.navigator.closeSplashscreen(); document.getElementById("start").addEventListener("tap", function() { /** * Set the value of launchFlag to the local storage, that is, the startup ID; * http://www.html5plus.org/doc/zh_cn/storage.html#plus.storage.setItem */ plus.storage.setItem("launchFlag", "true"); mui.openWindow({ url: "main.html", id: "main", extras: { mark: "gudie" //In the same way, this is just a logo, which is not used in actual development; } }); }); }); /** * Rewrite mui.back(), and nothing will be executed. On the contrary, the user will return to the entry page; */ mui.back = function() {}; </script> </body> </html>
Note: to replace the url of mui.openWindow in guide.html with your home address, you can use the address under the root directory or the network address (http: / / or https: / /), such as:
mui.openWindow({ url: "", //mian.html Or as https://www.baidu.com/ id: "main", extras: { mark: "gudie" //In the same way, this is just a logo, which is not used in actual development; } });
After the above execution, you can run it on the real machine to view the effect of the boot map page.
Here is the guide page displayed every time you enter the application. How to display the guide page in development depends on the specific situation.
If you need to only show the boot map for the first time:
In the client_index.html file:
var launchFlag = plus.storage.getItem("launchFlag"); if(launchFlag == true) { //Not the first time } else if(!launchFlag){ //first var guide = plus.webview.create('guide.html',"guide"); guide.show(); }
Add the label setting of launchFlag in the guide.html, and set the value of launchFlag to the local storage, i.e. the startup ID; set the label to true when you click "use now" in each boot map:
plus.storage.setItem("launchFlag", "true");
Above, the effect can be achieved.
Attachment:
Official document address: http://ask.dcloud.net.cn/article/13011
Source address: https://github.com/erinwxl/wap2app-guide