OperaMini合作项目极致模式解决方案
OperaMini的合作项目在极致模式上不能运行，查到这篇文章
https://forums.opera.com/topic/18290/opera-mini-allows-few-sites-for-javascript-to-run-on-its-client-in-extreme-mode/5
大意是极致模式不支持JavaScript
我们向operaMini方合作人员做了咨询，具体的答案为
1 .页面支持简单的JS 测试过xhttp ajax请求，没问题
2 .页面支持jQuery，但分版本，最好不用
3 .页面不支持高级的css语法，如背景渐变
了解到通用的解决方案为PHP做服务端渲染，页面中所有的轮播图，跑马灯，倒计时，等dom的动态效果均不可行。需要去掉这块设计。
做了前端解决方案调研
express + vue服务端渲染，可以请求成功。贴出demo,仅供参考。
const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()
var fs = require('fs')
server.get('/css/*', (req, res) => {
res.end(fs.readFileSync('.' + req.url, 'utf-8'))
})
server.post('/login', (req, res) => {
res.end('{"msg":"success"}')
})
server.all('/success', (req, res) => {
res.end('login success')
})
server.get('/', (req, res) => {
console.log('req', req.query)
console.log('req', req.url)
const app = new Vue({
data: {
headerLeftIcon: true,
headerTitle: 'Login',
count: '',
password: 'password',
path: '/returnUrl',
callbackData: null,
height: '',
passNumber: '',
eye: 'https://cdn.caiqr.com/eye2.png',
signImg: 'https://cdn.caiqr.com/sign.png',
passImg: 'https://cdn.caiqr.com/password.png',
isPink: false,
isPink2: false,
showClose: false,
showBefo: true,
hiddenBefo: false,
},
template: fs.readFileSync('./index.template.html', 'utf-8')
})
const context = {
title: 'hello',
meta: ''
}
renderer.renderToString(app, context, (err, html) => {
if (err) {
res.status(500).end('Internal Server Error')
return
}
res.end(`
<html>
<head>
<meta charset=utf-8>
<link rel=icon type=image/x-icon href=favicon.ico>
<link rel="shortcut icon" type=image/x-icon href=favicon.ico>
<link rel=bookmark type=image/x-icon href=favicon.ico>
<meta name=keywords
content="Lucky, Go, Lucky Go, Win, KSh 1, Bonus, Game, Gamble, Bet, iPhone, Play, Share, Coupon">
<meta name=description
content="Welcome to Lucky Go! One of the world’s leading online gambling platform. Here you can EASY WINNING up to KSh 1,000,000. Deposit Bonus for New Player.">
<meta name=format-detection content="telephone=no">
<meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
<meta http-equiv=X-UA-Compatible content="IE=edge">
<title>Luckytitle>
<style>
.main {
min-height: 100%;
}
#sign-in {
height: 100%;
position: relative;
background: red;
z-index: 520;
}
#sign-in, body, html {
width: 100%;
height: 100%;
}
.signtop {
position: absolute;
left: 0;
top: 0;
width: 1.94rem;
height: 1.94rem;
z-index: -1;
}
.signbot {
position: absolute;
right: 0;
bottom: 0;
width: 1.6rem;
height: 1.6rem;
z-index: -1;
}
.header-container, .header-content {
width: 100%;
height: .44rem;
}
.header-content {
background: none!important;
background-image: none!important;
position: absolute!important;
}
.header-content {
position: fixed;
top: 0;
left: 0;
line-height: .44rem;
color: #fff;
text-align: center;
background: linear-gradient(0deg,#f02149,#ff614e);
z-index: 9;
display: -ms-flexbox;
display: flex;
}
.header-container, .header-content {
width: 100%;
height: .44rem;
}
.header-content p {
-ms-flex: 1;
flex: 1;
position: relative;
}
.header-content p:nth-child(2) {
-ms-flex: 7;
flex: 7;
font-size: .18rem;
}
.header-content p span {
display: block;
width: .2rem;
height: .2rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
#sign-in .sign-title {
width: 100%;
height: .75rem;
font-size: .54rem;
line-height: .75rem;
font-weight: 600;
text-align: center;
color: #fff;
margin-top: .21rem;
}
#sign-in .user {
width: 3.26rem;
height: 1.4rem;
margin: .16rem auto 0;
background: hsla(0,0%,100%,.3);
border-radius: .04rem;
}
#sign-in .user .user-name {
position: relative;
}
#sign-in .user .user-name2, #sign-in .user .user-name, #sign-in .user .user-password {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: left;
justify-content: left;
-ms-flex-align: center;
align-items: center;
width: 100%;
margin: 0 auto;
height: .6rem;
padding: .045rem 0;
}
#sign-in .user .user-name2 img, #sign-in .user .user-name img, #sign-in .user .user-password img {
width: .24rem;
height: .24rem;
margin: 0 .22rem;
}
#sign-in .user .user-name2 input, #sign-in .user .user-name input, #sign-in .user .user-password input {
display: block;
width: 2rem;
height: .24rem;
line-height: .24rem;
outline: none;
border: none;
background: none;
color: #fff;
font-size: .14rem;
margin-right: auto;
margin-left: -.15rem;
}
#sign-in .user .user-name2 img, #sign-in .user .user-name img, #sign-in .user .user-password img {
width: .24rem;
height: .24rem;
margin: 0 .22rem;
}
#sign-in .user .user-name2, #sign-in .user .user-name, #sign-in .user .user-password {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: left;
justify-content: left;
-ms-flex-align: center;
align-items: center;
width: 100%;
margin: 0 auto;
height: .6rem;
padding: .045rem 0;
}
#sign-in .user .user-name2 img, #sign-in .user .user-name img, #sign-in .user .user-password img {
width: .24rem;
height: .24rem;
margin: 0 .22rem;
}
#sign-in .login, #sign-in .sign-up {
display: block;
width: 3rem;
height: .5rem;
margin: .3rem auto 0;
border-radius: .64rem;
border: none;
background: #fff;
font-size: .16rem;
color: #f02149;
outline: none;
}
#sign-in .sign-up {
background: none;
color: #fff;
margin-top: .2rem;
position: relative;
}
#sign-in .login, #sign-in .sign-up {
display: block;
width: 3rem;
height: .5rem;
margin: .3rem auto 0;
border-radius: .64rem;
border: none;
background: #fff;
font-size: .16rem;
color: #f02149;
outline: none;
}
.forget {
width: 100%;
color: #fff;
font-size: .12rem;
text-align: center;
height: .4rem;
line-height: .4rem;
margin-top: .04rem;
margin-bottom: 1rem;
}
html,
body {
-webkit-text-size-adjust: none !important;
}
@media screen and (min-width: 320px) {
html {
font-size: 84.375px !important;
}
}
@media screen and (min-width: 330px) {
html {
font-size: 87.5px !important;
}
}
@media screen and (min-width: 340px) {
html {
font-size: 90.625px !important;
}
}
@media screen and (min-width: 350px) {
html {
font-size: 93.75px !important;
}
}
@media screen and (min-width: 360px) {
html {
font-size: 96.875px !important;
}
}
@media screen and (min-width: 370px) {
html {
font-size: 100.0px !important;
}
}
@media screen and (min-width: 380px) {
html {
font-size: 103.125px !important;
}
}
@media screen and (min-width: 390px) {
html {
font-size: 106.25px !important;
}
}
@media screen and (min-width: 400px) {
html {
font-size: 109.375px !important;
}
}
@media screen and (min-width: 410px) {
html {
font-size: 112.5px !important;
}
}
@media screen and (min-width: 420px) {
html {
font-size: 115.625px !important;
}
}
@media screen and (min-width: 430px) {
html {
font-size: 117.75px !important;
}
}
@media screen and (min-width: 440px) {
html {
font-size: 120.875px !important;
}
}
@media screen and (min-width: 450px) {
html {
font-size: 124.0px !important;
}
}
@media screen and (min-width: 460px) {
html {
font-size: 127.125px !important;
}
}
@media screen and (min-width: 470px) {
html {
font-size: 130.25px !important;
}
}
@media screen and (min-width: 480px) {
html {
font-size: 133.375px !important;
}
}
@media screen and (min-width: 490px) {
html {
font-size: 136.5px !important;
}
}
@media screen and (min-width: 500px) {
html {
font-size: 139.625px !important;
}
}
@media screen and (min-width: 639px) {
html {
font-size: 142.75px !important;
}
}
@media screen and (min-width: 719px) {
html {
font-size: 145.875px !important;
}
}
@media screen and (max-width: 319px) {
html {
font-size: 149.0px !important;
}
}
body {
font-size: 0.12rem;
}
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Correct the font size and margin on \`h1\` elements within \`section\` and
* \`article\` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
-webkit-box-sizing: content-box;
box-sizing: content-box;
/* 1 */
height: 0;
/* 1 */
overflow: visible;
/* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd \`em\` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
/* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd \`em\` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent \`sub\` and \`sup\` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
/* 1 */
font-size: 100%;
/* 1 */
line-height: 1.15;
/* 1 */
margin: 0;
/* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
/* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
/* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from \`fieldset\` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* \`fieldset\` elements in all browsers.
*/
legend {
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* 1 */
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding: 0;
/* 3 */
white-space: normal;
/* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to \`inherit\` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
#sign-in {
height: 100%;
position: relative;
background: -webkit-gradient(linear, left top, left bottom, from(#FF724E), to(#F02149));
background: linear-gradient(to bottom, #FF724E, #F02149);
z-index: 520;
}
style>
head>
<body>
<div>${html}div>
body>
<script>
/* *******************
* growingIO统计代码
******************** */
const _vds = [];
window._vds = _vds;
(function () {
_vds.push(['setAccountId', 'afeb3126183bcebe']);
(function () {
const vds = document.createElement('script');
const s = document.getElementsByTagName('script')[0];
vds.type = 'text/javascript';
vds.async = true;
vds.src = ('https:' === document.location.protocol ? 'https://' : 'http://') + 'assets.growingio.com/vds.js';
s.parentNode.insertBefore(vds, s);
})();
})();script>
<script>
function login () {
//创建异步对象
var xhr = new XMLHttpRequest();
//设置请求的类型及url
//post请求一定要添加请求头才行不然会报错
xhr.open('post', '/login' );
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送请求
var mobile = document.getElementById('mobile').value
console.log(mobile)
var password = document.getElementById('password').value
console.log(password)
xhr.send('mobile='+mobile+"&password="+password);
xhr.onreadystatechange = function () {
// 这步为判断服务器是否正确响应
if (xhr.readyState == 4 && xhr.status == 200) {
window.location.href = '/'+JSON.parse(xhr.responseText).msg;
}
};
}
script>
html>
`)
})
})
server.listen(8080)
console.log("server is start listen 8080")
<div data-v-1bf60420 id="sign-in">
<img data-v-1bf60420 src="https://cdn.caiqr.com/signtop.png" class="signtop">
<img data-v-1bf60420 src="https://cdn.caiqr.com/signbot.png" class="signbot">
<div>
<div data-v-1bf60420 class="header-container">div>
<div data-v-1bf60420 class="header-content" :class="{'absolute-header': ''}">
<p>
<span>
<img id="goBack" v-show="headerLeftIcon" src="https://cdn.caiqr.com/go-pre.png"/>
span>
p>
<p class="centerTitle">{{headerTitle}}p>
<p class="rightTitle" id="goConfirm">
<span>
<img v-show="''" :src="headerRightIcon"/>
span>
p>
div>
div>
<p data-v-7d9213b4 class="sign-title">Luckyp>
<div data-v-7d9213b4 class="user">
<div data-v-7d9213b4 :class="{bg:isPink, 'user-name': showBefo, 'user-name2': hiddenBefo}">
<img data-v-7d9213b4 :src="signImg" >
<input data-v-7d9213b4 id="mobile" type="text" name="telNum" placeholder="Phone" v-model="count" maxlength="11" @blur="getPhone">
<img data-v-7d9213b4 src="https://cdn.caiqr.com/close2.png" id="close" v-show="showClose">
div>
<div data-v-7d9213b4 class="user-password" :class="{bg:isPink2}">
<img data-v-7d9213b4 :src="passImg" alt="">
<input data-v-7d9213b4 id="password" :type="password" placeholder="Password" maxlength="16" v-model="passNumber" @blur="verifiers">
<img data-v-7d9213b4 v-show="passNumber" :src="eye" id="toggleType">
div>
div>
<button data-v-7d9213b4 class="login" id="sign" onclick="login()">Log inbutton>
<button data-v-7d9213b4 class="sign-up" id="goRegister">Create my accountbutton>
<p data-v-7d9213b4 id="goForget" class="forget">Forget the password?p>
div>有问题欢迎留言。