Explorar el Código

1. iconfont使用assets下的font
2. 优化main.tsVue挂载到dom节点

yunxing hace 4 años
padre
commit
58188af8d9

+ 1 - 1
public/index.html

@@ -11,7 +11,7 @@
         <meta http-equiv="Cache" content="no-cache" />
         <!-- <meta name="viewport" content="target-densitydpi=device-dpi,width=750,user-scalable=0" /> -->
         <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
-        <link rel="stylesheet" href="//at.alicdn.com/t/font_2072883_81hqakjsv38.css" />
+        <!-- <link rel="stylesheet" href="//at.alicdn.com/t/font_2072883_81hqakjsv38.css" /> -->
         <title><%= htmlWebpackPlugin.options.title %></title>
     </head>
     <body>

La diferencia del archivo ha sido suprimido porque es demasiado grande
+ 34 - 6
src/assets/fonts/iconfont.css


BIN
src/assets/fonts/iconfont.eot


La diferencia del archivo ha sido suprimido porque es demasiado grande
+ 21 - 0
src/assets/fonts/iconfont.svg


BIN
src/assets/fonts/iconfont.ttf


BIN
src/assets/fonts/iconfont.woff


BIN
src/assets/fonts/iconfont.woff2


+ 29 - 20
src/main.ts

@@ -4,14 +4,9 @@ import router from './router'
 import store from './store'
 // 引入lib-flexible
 import 'lib-flexible'
-// import './assets/fonts/iconfont.css';
+import './assets/fonts/iconfont.css';
 Vue.config.productionTip = false
-// 引入使用fastclick
-// 移动端点击有300ms延迟,主要是为了解决双击缩放,浏览器等待300ms以判断是否是双击操作。
-// 可以采用引入fastclick.js的方式解决移动端300ms延迟的问题
-// @ts-ignore
-// import FastClick from 'fastclick'
-// FastClick.attach(document.body)
+
 
 import VConsole from 'vconsole'
 // new VConsole()
@@ -22,19 +17,12 @@ if (process.env.NODE_ENV === 'production' && process.env.VUE_APP_RealEnv !== 'pr
     // new VConsole()
 }
 const ua = navigator.userAgent
-
-// console.log('wdith:', window.screen.width)
-// console.log('height:', window.screen.height)
-// console.log('clientWidth:', document.body.clientWidth)
-// console.log('clientHeight:', document.body.clientHeight)
-
-// 打包后,监听deviceready事件,处理 部分设备 不能使用cordova插件方法的问题
-/* 打包后,不是 1.阿里云的test环境(http://60.205.177.43/wandaBmGuideH5Test) 2.完成内网测试环境(http://10.199.204.88/wandaBmGuideH5/) -->
-   即 阿里云的正常环境(http://60.205.177.43/wandaBmGuideH5) , 万达正式环境  
-   使用deviceready 
-*/
-if (process.env.NODE_ENV === 'production' && !['alyTest', 'test'].includes(process.env.VUE_APP_RealEnv)) {
+//
+let flag = false
+// 打包后,使用cordova插件,需要监听deviceready事件
+if (process.env.NODE_ENV === 'production' && ua.match(/(iPhone | Android)/)) {
     window.addEventListener('deviceready', function() {
+        flag = true
         new Vue({
             router,
             store,
@@ -42,13 +30,34 @@ if (process.env.NODE_ENV === 'production' && !['alyTest', 'test'].includes(proce
         }).$mount('#app')
     })
 } else {
-    // 开发环境
+    flag = true
     new Vue({
         router,
         store,
         render: (h) => h(App),
     }).$mount('#app')
 }
+// 如果直接在电脑上预览,2s后,dispatch deviceready
+setTimeout(() => {
+    if (flag) {
+        return
+    }
+    const myEvent = new CustomEvent('deviceready', {
+        detail: {
+            title: 'This is deviceready!',
+        },
+    })
+    window.addEventListener('deviceready', function(event) {
+        console.log('deviceready success')
+    })
+    // 随后在对应的元素上触发该事件
+    if (window.dispatchEvent) {
+        window.dispatchEvent(myEvent)
+    } else {
+        window.fireEvent(myEvent)
+    }
+}, 2000)
+
 // new Vue({
 //     router,
 //     store,