2018-12-10 17:32:18 qq_39635302 阅读数 553
  • RIA编程-神奇的FLEX实战

    基于浏览器的富客户端编程,界面比Juery easy ui和extJS的更漂亮,操作更灵活! 而且FLEX的大优势是采用RPC模式,比AJAX速度更快。 在浏览器中播放视频,FLEX编程占据了垄断地位; FLEX还有push模式开发,是非常重要的技术! 这套 视频的开发环境是:myEclipse10+Flash builder4.6

    5337 人正在学习 去看看 肖海鹏
开启弹性布局
display: -webkit-flex;  /* 新版本语法: Chrome 21+ */
display: flex;          /* 新版本语法: Opera 12.1, Firefox 22+ */
display: -webkit-box;   /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */ 


-webkit-flex: 1;        /* Chrome */  
flex: 1;                /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-flex: 1  ;   /* OLD - iOS 6-, Safari 3.1-6 */  

副轴变主轴
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
flex-direction:column;
-webkit-flex-direction:column;


-webkit-justify-content: space-around;
justify-content: space-around;
-webkit-box-pack:justify;
2017-06-23 00:28:23 wozaixiaoximen 阅读数 1929
  • RIA编程-神奇的FLEX实战

    基于浏览器的富客户端编程,界面比Juery easy ui和extJS的更漂亮,操作更灵活! 而且FLEX的大优势是采用RPC模式,比AJAX速度更快。 在浏览器中播放视频,FLEX编程占据了垄断地位; FLEX还有push模式开发,是非常重要的技术! 这套 视频的开发环境是:myEclipse10+Flash builder4.6

    5337 人正在学习 去看看 肖海鹏

vue-cli 默认的 autoprefixer 配置不支持 Safari 8.0 的 Flexbox 属性

出问题的环境

  • iOS 8.1.2
  • 微信6.5.9
  • WKWebView
  • Safari 8.0

但是 autoprefixer 生成的 Flexbox 兼容属性没有display: -webkit-flex

display: -webkit-flex; // 这样才能Safari 8.0
display: flex;

-webkit-flex-direction: column; // 这样才能Safari 8.0
flex-direction: column;

原因是.postcssrc.js(npm run build需在package.json中配置) 中 autoprefixer 配置的兼容低版本还不够低

这里写图片描述

改一下就可以了

这里写图片描述


微信分享会添加参数 ?from=singlemessage&isappinstalled=0

参数的作用

  • 朋友圈 from=timeline&isappinstalled=0
  • 微信群 from=groupmessage&isappinstalled=0
  • 好友分享 from=singlemessage&isappinstalled=0

生成签名的时候需要用到除锚点外的 url,所以浏览器中的 url 要动态获取,否则生成的签名不对。


微信分享接口有次数限制,后台需要做缓存,前端从后台的缓存中获取

2017-03-30 14:43:08 a1015088819 阅读数 2774
  • RIA编程-神奇的FLEX实战

    基于浏览器的富客户端编程,界面比Juery easy ui和extJS的更漂亮,操作更灵活! 而且FLEX的大优势是采用RPC模式,比AJAX速度更快。 在浏览器中播放视频,FLEX编程占据了垄断地位; FLEX还有push模式开发,是非常重要的技术! 这套 视频的开发环境是:myEclipse10+Flash builder4.6

    5337 人正在学习 去看看 肖海鹏

话不多说,上代码,关键在对应的低版本安卓的微信浏览器,需要-webkit-box对应的-webkit-box-orient -webkit-box-pack等的设置。

.flex{

    /* 设置弹性布局 */

    display:-webkit-box;/* android 2.1-3.0, ios 3.2-4.3 */

    display:-webkit-flex;/* Chrome 21+ */

    display:-ms-flexbox;/* WP IE 10 */

    display:flex;/* android 4.4 */

}

.flex-direction-column{

    /* 设置弹性布局的方向,子元素按照在源文档中声明的顺序从上到下显示 */

    -webkit-box-orient: vertical;/* android 2.1-3.0, ios 3.2-4.3 */

    -webkit-flex-direction: column;/* Chrome 21+ */

    -ms-flex-direction: column;/* WP IE 10 */

    flex-direction: column;/* android 4.4 */

}

.flex-1{

   /* 子元素自动占据剩余的空间 */

    -webkit-box-flex:1;/* android 2.1-3.0, ios 3.2-4.3 */

    -webkit-flex:1;/* Chrome 21+ */

    -ms-flex:1;/* WP IE 10 */

    flex:1;/* android 4.4 */

}

.flex-pack-center{

    /* 水平布局下的子元素 水平居中 */

    -webkit-box-pack: center;/* android 2.1-3.0, ios 3.2-4.3 */

    -webkit-justify-content: center;/* Chrome 21+ */

    -ms-flex-pack: center;/* WP IE 10 */

    justify-content: center;/* android 4.4 */

}

.flex-align-center{

    /* 水平布局下的子元素 垂直居中 */

    -webkit-box-align: center;/* android 2.1-3.0, ios 3.2-4.3 */

    -webkit-align-items: center;/* Chrome 21+ */

    -ms-flex-align: center;/* WP IE 10 */

    align-items: center;/* android 4.4 */

}

.flex-pack-justify{

    /* 水平布局下的子元素 2端对齐 */

    -webkit-box-pack: justify;/* android 2.1-3.0, ios 3.2-4.3 */

    -webkit-justify-content: space-between;/* Chrome 21+ */

    -ms-flex-pack: justify;/* WP IE 10 */

    justify-content: space-between;/* android 4.4 */

}
2018-10-23 09:49:17 fanlc8888 阅读数 381
  • RIA编程-神奇的FLEX实战

    基于浏览器的富客户端编程,界面比Juery easy ui和extJS的更漂亮,操作更灵活! 而且FLEX的大优势是采用RPC模式,比AJAX速度更快。 在浏览器中播放视频,FLEX编程占据了垄断地位; FLEX还有push模式开发,是非常重要的技术! 这套 视频的开发环境是:myEclipse10+Flash builder4.6

    5337 人正在学习 去看看 肖海鹏

 

1.容器写法

display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */

display: -moz-box; /* Firefox 17- */

display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */

display: -moz-flex; /* Firefox 18+ */

display: -ms-flexbox; /* IE 10 */ display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

2.其他

/*display*/

.display_flex{

display: -webkit-box;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

}

.display_flex > *{

display: block;

}

.display_inline-flex{

display: -webkit-inline-box;

display: -ms-inline-flexbox;

display: -webkit-inline-flex;

display: inline-flex; }

.display_inline-flex > *{

display: block;

}

/*伸缩流方向*/

.flex-direction_column{

-webkit-box-orient: vertical;

-ms-flex-direction: column;

-webkit-flex-direction: column;

flex-direction: column;

}

/*主轴对齐*/

.justify-content_flex-center{

-webkit-box-pack: center;

-ms-flex-pack: center;

-webkit-justify-content: center;

justify-content: center;

}

.justify-content_flex-end{

-webkit-box-pack: end;

-ms-flex-pack: end;

-webkit-justify-content: flex-end;

justify-content: flex-end;

}

.justify-content_flex-justify{

-webkit-box-pack: justify;

-ms-flex-pack: justify;

-webkit-justify-content: space-between;

justify-content: space-between;

}

/*侧轴对齐*/

.align-items_flex-start{

-webkit-box-align: start;

-ms-flex-align: start;

-webkit-align-items: flex-start;

align-items: flex-start;

}

.align-items_flex-end{

-webkit-box-align: end;

-ms-flex-align: end;

-webkit-align-items: flex-end;

align-items: flex-end;

}

.align-items_center{

-webkit-box-align: center;

-ms-flex-align: center;

-webkit-align-items: center;

align-items: center;

}

.align-items_baseline{

-webkit-box-align: baseline;

-ms-flex-align: baseline;

-webkit-align-items: baseline;

align-items: baseline;

}

/*伸缩性*/

.flex_auto{

-webkit-box-flex: 1;

-ms-flex: auto;

-webkit-flex: auto; flex: auto;

}

.flex_1{

width: 0;

-webkit-box-flex: 1;

-ms-flex: 1;

-webkit-flex: 1;

flex: 1;

}

/*显示顺序*/

.order_2{

-webkit-box-ordinal-group: 2;

-ms-flex-order: 2;

-webkit-order: 2;

order: 2;

}

.order_3{

-webkit-box-ordinal-group: 3;

-ms-flex-order: 3;

-webkit-order: 3;

order: 3;

}



此文非原创,只是为了自己方便翻阅
原文链接:https://www.jianshu.com/p/49cdc1a0b69b

2018-10-19 19:53:00 weixin_30279751 阅读数 24
  • RIA编程-神奇的FLEX实战

    基于浏览器的富客户端编程,界面比Juery easy ui和extJS的更漂亮,操作更灵活! 而且FLEX的大优势是采用RPC模式,比AJAX速度更快。 在浏览器中播放视频,FLEX编程占据了垄断地位; FLEX还有push模式开发,是非常重要的技术! 这套 视频的开发环境是:myEclipse10+Flash builder4.6

    5337 人正在学习 去看看 肖海鹏

此次项目需要兼容 andriod 4.4 ,ios 8 . 故此带来了不少兼容问题

1. vue 项目在本地表现正常,打包后出现部分样式丢失。

如果只是小范围的影响,可以用以下注释跳过 webpack 对 css 的压缩计算 

/*! autoprefixer: off */
    -webkit-box-orient: vertical;
 /* autoprefixer: on */

大范围的样式更改,可以直接修改  / build / webpack.prod.conf.js  文件(相关文章

    // new OptimizeCSSPlugin({
    //   cssProcessorOptions: config.build.productionSourceMap
    //     ? { safe: true, map: { inline: false } }
    //     : { safe: true }
    // }),

为了自动补全css前缀,配置 autoprefixer ,在package.json里面找到 browserslist ,加上

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8",
    "iOS >= 8",
    "Android >= 4.4",
    "Firefox >= 20"
  ]

 "iOS >= 8","Firefox >= 20","Android > 4.4"

 2. vant    vant-swipe (有赞) vh 兼容性

有赞的轮播插件在低版本安卓机中,样式错乱叠堆

原因可能是轮播组件的高度追溯父容器的 height ,而父容器不能固定一个高度,以 height : 100vh ; 替代,但是低版本安卓不兼容,高度错乱,只要在 vue 的 mounted 钩子中重新定义 父容器高度即可

// html
  <van-swipe :style="`height:${viewHeight}px`" :loop="false" :touchable='false' :show-indicators='false'>

// js
mounted(){
this.$nextTick(function(){ let h = $(window).height() this.viewHeight = h }) }

 3. 在 protocol 协议中由于要在 href 中用到回调,需要提前定义好方法,如:

window.location.href = 'protocol://getuserinfo#userinfocallback';

function userinfocallback () {
  // ...
}

但是 webpack 打包后会对方法名进行混淆,在执行回调时找不到 function 而报错。知道了原因就很容易解决了,只要把方法定义为 window 属性即可

window.userinfocallback = (result) => {
  // ...
}

4. 安卓低版本的机子 有可能存在 promise 的兼容问题,webpack 加载 promise 有好几种方式,有些情况下都不行,最暴力的方法就是直接加载一个 promise 的库

// cmd
(c)npm install es6-promise --save-dev

// main.js
import promise from 'es6-promise'
promise.polyfill()

 5. 上线打包时关闭 console

在 / build / webpack.prod.conf.js(生产环境配置文件)中插入以下:

    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false,
          drop_console: true,                // [+]   console
          pure_funcs: ['console.log']        // [+]   移除console
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),        

 6. a标签跳转地址,只改变了路由参数,由于 keep-alive ,页面没有及时刷新

<keep-alive include="a">
  <component>
    <!-- name 为 a 的组件将被缓存! -->
    <!-- 可以保留它的状态或避免重新渲染 -->
  </component>
</keep-alive>


<keep-alive exclude="a">
  <component>
    <!-- 除了 name 为 a 的组件都将被缓存! -->
  </component>
</keep-alive>

页面上 js 部分 

watch: {
   '$route' (to, from) {
      // 页面只是路由参数发生变化时,页面并不刷新,所以需要监听路由变化
      let id = this.$route.params.id
      if(id){
        this.content = ''
        this.getContent(id)
      }
   }
 },

且在 webview 中, a 标签打开新窗口会被禁用,类似   <a href="www.baidu.com" target="_blank"></a>,需去掉 target="_blank"

7. 项目中通过 protocol 从app获取用户信息 

setTimeout(function () {
  window.location.href = 'protocol://getuserinfo#userinfocallback';
}, 0);

把这段代码放在  $(function) 中,但是同一个函数块里的其他方法失效

$(function () {
  // 设置 rem 单位
  setRem(document, window)
  // protocol 获取 token
  setTimeout(function () {
    window.location.href = 'protocol://getuserinfo#userinfocallback';
  }, 0);
  // 设置分享数据
  wnlShare.setShareData({
    url: location.href, // eslint-disable-line
    title: '健康一点——你的健康我关心',
    text: '根据你的身体健康,推荐调养改善建议',
    image: 'https://healthcdn.51wnl-cq.com/67a3b033-296d-dfe7-1809-721579e4f58b.jpg'
  })
})

   wnlShare.setShareData  就不能在正确的阶段执行,app中无法调用分享组件,排查后发现  protocol  需分开运行

window.onload = function () {
  // protocol 获取 token
  setTimeout(function () {
    window.location.href = 'protocol://getuserinfo#userinfocallback';
  }, 0);
}

$(function(){
  // 设置 rem 单位
  setRem(document, window)
  // 设置分享数据
  wnlShare.setShareData({
    url: location.href, // eslint-disable-line
    title: '健康一点——你的健康我关心',
    text: '根据你的身体健康,推荐调养改善建议',
    image: 'https://healthcdn.51wnl-cq.com/67a3b033-296d-dfe7-1809-721579e4f58b.jpg'
  })
  
})

 8. 打包后出现 webpackJsonp is not defined 

原因是 manifest.js 没有加载完成,window没有定义webpackJsonp ,优先调用了 vendor.js 和 app.js 中的 webpackJsonp,网上很多说法是在 HtmlWebpackPlugin 插件中添加

chunks: ['manifest', 'vendor', 'app'],

但是效果不明显,从问题根源出发,直接在 vendor.js 和 app.js 中添加语句

if (!window.webpackJsonp) location.reload()

若 webpackJsonp 未定义,强制刷新,由于此过程短暂,刷新的行为在用户界面无感

转载于:https://www.cnblogs.com/_error/p/9818444.html

没有更多推荐了,返回首页