小程序开发.mdwx.loadFontFace,动态加载网络字体。文件地址需为下载类型。iOS 仅支持 https 格式

2019.12.27

需求：先获取信息，在获取手机号

需求：从一个小程序怎么跳转到另外一个小程序

配置："navigateToMiniProgramAppIdList": ["wxe5f52902cf4de896"]

{
    "pages": ["pages/index/index", "pages/logs/index"],
    "navigateToMiniProgramAppIdList": ["wxe5f52902cf4de896"]
}

小程序跳转:wx.navigateToMiniProgram

wx.navigateToMiniProgram({
  appId: '',
  path: 'page/index/index?id=123',
  extraData: {
    foo: 'bar'
  },
  envVersion: 'develop',
  success(res) {
    // 打开成功
  }
})

另外一个小程序接收

从一个小程序跳到另一个小程序 2019.12.18

小程序引入背景图片

使用行内实现

<view class="warp" style="background-image:url('../../images/welcome.png')">

</view>

使用images图片，需要定位

2019.12.16

小程序引入外部字体库

ui设计了font-family:STXingkai-SC-Light,STXingkai-SC;的字体，如图，但是小程序不支持。

font-family:STXingkai-SC-Light,STXingkai-SC;

无法加载本地字体资源:

VM2246:1 Failed to load local font resource /pages/togetherLife/Xingkai.ttc-do-not-use-local-path-./pages/togetherLife/index.wxss&4&7 the server responded with a status of 500 (HTTP/1.1 500 Internal Server Error)

首先小程序字体文件是无法放在本地的@font-face{ src: url(不支持相对路径的引用); }
wx.loadFontFace,动态加载网络字体。文件地址需为下载类型。iOS 仅支持 https 格式文件地址。

解决:

将下载的字体包上传到了CDN上，但是字体包很大，有3M以上，调试时公司网络下载需要500ms左右，所有会消耗很多用户流量,并且安卓手机测试时不支持。

.life_des {
  padding: 47rpx 52rpx 76rpx;
  font-size: 26rpx;
  font-family: 'HYWaiWaiTiJ';
  color: #525252;
}

@font-face{
  font-family: 'HYWaiWaiTiJ';
  src: url("https://saas-1252311027.cos.ap-shanghai.myqcloud.com/font/HYWaiWaiTiJ.ttf");
  font-style: normal;
  font-weight: normal;
}

 wx.loadFontFace({
      family: self.data.fontFamily,
      // source: 'url("https://sungd.github.io/Pacifico.ttf")',
      source: 'url("https://saas-1252311027.cos.ap-shanghai.myqcloud.com/font/HYWaiWaiTiJ.ttf")',
      success (res) {
        console.log(res,'success')
        self.setData({
          loaded: true
        })
      }
})


 <view class="life_des {{loaded?'font_loaded':''}}" >
    —— 不知不觉，猫咪已经相当于人类的21岁了。往后余生，我们还会彼此相伴下去。
</view>
.font_loaded{
   font-family:'HYWaiWaiTiJ';
   font-style: initial;
   font-weight: normal;
}

最终解决：不引用字体库，直接做了个斜体显示区别

.life_des {
  font-size: 26rpx;
  font-family: 'Arial, Helvetica, sans-serif';
  font-style: italic;
  font-weight: 300;
  color: #525252;
}

2019.12.12

scroll-view点击改变scroll-left

scroll-view

scroll-left：设置横向滚动条位置
scroll-into-view：根据id（id不能以数字开头）锚地定位

<scroll-view class='scroll_view' scroll-x="{{true}}"
      scroll-with-animation='{{true}}'
      scroll-left='{{scrollLeft}}'>
      
</scroll-view>

动态获取view标签的宽高(页面+组件)

组件中 2019.12.17

Component({
    lifetimes: {
        attached: function () {
          // 在组件实例进入页面节点树时执行
    
        },
        detached: function () {
          // 在组件实例被从页面节点树移除时执行
        },
        ready: function(){
          console.log('ready');
          this._queryMultipleNodes ();// 获取节点信息
    
        }
    },
    methods: {
       _queryMultipleNodes (){
        const obj = wx.createSelectorQuery().in(this);
        obj.select('.luckybag_box').boundingClientRect(res => {
            console.log(res, '=====')
        }).exec();    
      }
 
 }
})

页面中

if (index >= 3 && RecordsList.length >= 4) {
  var obj = wx.createSelectorQuery();
  obj.selectAll('.catTag').boundingClientRect(function (rect) {
    if (rect[index + 1]) {
      let rectAry = rect.slice(3, index + 1)
      //console.log(rectAry, 'rect===') // 前一个 当前 下一个
      var widthAll = rect[index].width;
      rectAry.forEach(v => {
        widthAll += (v.width + 20)
      })
    
      that.setData({
        scrollLeft: widthAll + 'px'
      }, () => {
        console.log(that.data.scrollLeft, 'scrollLeft==')
      })
    }
     
  })
  obj.exec();
}

wxs中使用正则

 var a = getRegExp('[\d.]+', 'g') //str.match(/[\d.]+/g)
 var num = str.match(a)

WXS 语法参考

WXS 模块
变量
注释
运算符
语句
数据类型
基础类库

使用富文本rich-text

rich-text 下一行内容自动换行了

<view class="contentStyle">
    <rich-text class="weight_style" nodes='{{tools.weighRransform(items.content)}}'></rich-text>
    {{items.desc?items.desc:''}}
</view>

 result = '<div>体重: ' + num[0] + 'KG<img class ="weight_img" src="https://s3.cn-north-1.amazonaws.com.cn/nfs.gemii.cc/rekord/9882d7cc-6d69-4f38-b91f-57f794a3a2a1.png"></img><span class="weight_down"> ' + num[1] + 'KG</span></div>'

使用自定义tabbar遇到的bug

高度问题

使用自定义tabbar之后，html中的view会被遮挡，此时要给滑动区域的view添加一个padding-bottom（是因为会用到onReachBottom页面上拉触底事件的处理函数）,为了区分刘海手机，应用到env:

margin-bottom: env(safe-area-inset-bottom);

z-index问题（真机上iphone11）

.tab-bar 设置的z-index: 900;,遮罩层设置了.modalWrapper设置的z-index: 999;,但是遮不住。

排查问题之后发现，是因为设置了page设置了-webkit-overflow-scrolling: touch;

自定义弹框中设置`padding-bottom:env(safe-area-inset-bottom) ;`无效

原先没有这个问题，是最进开发中出现了这个问题，排查结果之后发现是因为写了box-sizing: border-box;.盒子模型。

原先代码：

{
    margin-bottom:env(safe-area-inset-bottom);
    box-sizing: border-box;
}

今天发现safe-area-inset-bottom有效，但是margin-bottom会使得底部显示原有的背景色。

修改代码

{
    padding-bottom:env(safe-area-inset-bottom) ;
    //box-sizing: border-box;
}

box-sizing

border-box尺寸计算公式:

width = border + padding + 内容的宽度 height = border + padding + 内容的高度

border-box不包含margin

刘海问题

网页适配 iPhoneX

适配安卓手机和苹果刘海手机

安卓手机无效

{
     padding: 60rpx 40rpx calc(48px - 20px + env(safe-area-inset-bottom)) 40rpx;
}

解决：通过wx.getSystemInfo()判断

 <view class="index_view fadeIn" style="background: {{status!=2?'#fff':'#F3F3F3'}};padding-bottom:{{isIphoneX?'calc(48px + env(safe-area-inset-bottom))':'48px'}};"></vie>

ios上下滑动不流畅

给page 或者最外层的view添加-webkit-overflow-scrolling: touch;

page{
  display: block;
  min-height: 100vh;
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
}

撑高view

page{
  display: block;
  min-height: 100vh;
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
}

.index_view {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  min-height: 100vh;
  padding-bottom:calc(48px + env(safe-area-inset-bottom)) ;
}

border+渐变+圆角

小程序开发.md