uniapp相关

内置头部导航组件

• 高度默认： 44px

生命周期函数

created > onLoad > onShow > mounted

关于uniapp尺寸计算和转换关系

console.log(uni.upx2px(100))// 结果：48 
// 通过以上的upx 转换 px 结果知道
//100upx = 100/2 - 2 = 48 px
// 48px = （48 + 2）*2 = 100 upx

.scroll-box {
    // 以是屏幕高度 640为参考
    // 100vh => 640px
    // 100upx => 100/2 - 2 = 48px (自己定义头部区域)
    // 92upx => 92/2 - 2 = 44px(uniapp 自带头部导航高度)
    //calc(100vh - 100upx - 92upx) =>  640 - 48 - 44 = 648px（滚动区域的高度）
    height: calc(100vh - 100upx - 92upx);
    background-color: #f00;
}

H5平台中咋样隐藏导航条

    // /deep/ .uni-scroll-view ::-webkit-scrollbar {
    //     width: 0;
    //     height: 0;
    //  color: transparent;
    //     background-color: transparent;
    // }
    // /deep/::-webkit-scrollbar {
    //  width: 0;
    //     height: 0;
    //     background-color: transparent;
    //  color: transparent;
    // }

注意

当隐藏过导航条后，同时也会隐藏对应的边框样式，所以当我们操作滚动区域某一个盒子，我们尽量不要添加 边框激活状态。

H5中指定滚动

/* //选项卡 */
    .nav-bar {
        border-top: 1px solid #F8F8F8;
        position: relative;
        z-index: 10;
        height: 90upx;
        white-space: nowrap;
        box-shadow: 0 2upx 8upx rgba(0,0,0,.06);
        background-color: #fff;
        .nav-item{
            display: inline-block;
            width: 150upx;
            height: 90upx;
            text-align: center;
            line-height: 90upx;
            font-size: 30upx;
            color: #303133;
            position: relative;
            &:after{
                content: '';
                width: 0;
                height: 0;
                border-bottom: 4upx solid #3AA426;
                position: absolute;
                left: 50%;
                bottom: 0;
                transform: translateX(-50%);
                transition: .3s;
            }
        }
        .current{
            color: #3AA426;
            &:after{
                width: 50%;
            }
        }
        
    }
    /* //滑动区域 */
    .swiper-box {
        height: calc(100vh - 88upx - 90upx);
        overflow: hidden;
        .swiper-item {
            height: 100%;
            background-color: #3F536E;
            .scroll-box {
                height: 100%;
                .content {
                    height: 2000upx;
                }
            }
        }
    }
    

H5检测是否安装app 公司业务拓展到微信，qq和支付宝；在这些平台打开的h5页面需要唤起app实现一些功能；

• js通过ua标识判断h5页面是否内嵌在app内

var userAgent = navigator.userAgent.toLowerCase();//获取UA信息
if(userAgent.indexOf("ezhouxing") != -1){//判断ua中是否含有和app端约定好的标识ezhouxing
        alert(包含);
    }

• 判断是否安装过app

$(function () {
  var name,value;
  if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
      // 判断useragent，当前设备为ios设备
      window.location.href = "XXX://"; // iOS端URL Schema
      window.setTimeout(function() {
          window.location = "https://itunes.apple.com/cn/app/XXX/"; // appstore下载地址
      },  2000);
  } else if (navigator.userAgent.match(/(android|Android);?/i)) {
      window.location.href = "scheme://XXXX"; /***打开app的协议，有安卓同事提供***/
      window.setTimeout(function(){
          window.location = "http://XXXXX/android.apk"; /***打开app的协议，有安卓同事提供***/
      },2000);
  }
});

H5/微信小程序/app-分享

https://www.cnblogs.com/IT-study/p/10101250.html

app首次流程

启动页 =》 引导页 =》 登录页 =》 业务主页

app与H5通讯

ios把方法定义到window
window.webkit.messageHandlers.IOSmethod.postMessage("ios)
android把方法定义到window
window.android.androidmethod
H5把方法定义到window
window.h5.H5method

定义完后，APP与H5相互调用彼此的定义的方法即可

小程序之间的相关跳转

uni.navigateToMiniProgram({
appId: 'appid',
path: "path",
success: res => {
    // 打开成功
    console.log("打开成功", res);
},
fail: err => {
    console.log(err);
}
});

咋样解决小程序中的富文本图片溢出？

filters: {
            /**
             * 处理富文本里的图片宽度自适应
             * 1.去掉img标签里的style、width、height属性
             * 2.img标签添加style属性：max-width:100%;height:auto
             * 3.修改所有style里的width属性为max-width:100%
             * 4.去掉<br/>标签
             * @param html
             * @returns {void|string|*}
             */
            formatRichText (html) { //控制小程序中图片大小
                let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
                    match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
                    match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
                    match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
                    return match;
                });
                newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
                    match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
                    return match;
                });
                newContent = newContent.replace(/<br[^>]*\/>/gi, '');
                newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
                return newContent;
            }   
        }

uniapp 不管小程序与app都可以分包处理项目，包括静态资源也可以分包

https://www.jianshu.com/p/4f9cf9442fae

敬请期待