初学微信小程序（按关键字排列）-- 杂乱

一、image组件的说明

• scaleToFill 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
• aspectFit 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
• aspectFill 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
• widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
• heightFix 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变 2.10.3
• top 裁剪模式，不缩放图片，只显示图片的顶部区域
• bottom 裁剪模式，不缩放图片，只显示图片的底部区域
• center 裁剪模式，不缩放图片，只显示图片的中间区域
• left 裁剪模式，不缩放图片，只显示图片的左边区域
• right 裁剪模式，不缩放图片，只显示图片的右边区域
• top left 裁剪模式，不缩放图片，只显示图片的左上边区域
• top right 裁剪模式，不缩放图片，只显示图片的右上边区域
• bottom left 裁剪模式，不缩放图片，只显示图片的左下边区域
• bottom right 裁剪模式，不缩放图片，只显示图片的右下边区域

  PS: aspectFill 与 widthfix 都是保持宽高比不变

  aspectFill同样保持图片的宽高比不会变形。但它让图片完全填满整个容器，类似于scaleToFill这种模式。不同的是，scaleToFill会改变图片的宽高比，而aspectFill不会。
  Widthfix 宽度不变，高度自动变化，保持原图宽高比不变。
  Widthfix属性的最大特点是，图片将不会按照设定的尺寸呈现，比如设置image宽度为750px，高度为340px，如果设置mode=widthfix，则图片最终不会按照750px和340px呈现，除非原始图片切好是这个尺寸。这个属性让宽缩放至指定尺寸，再动态计算高度

二、web-view

承载网页的容器。会自动铺满整个小程序页面，个人类型的小程序暂不支持使用

例如 js

// 跳转到某个详情页
 getCommunityDetail(noticeId) {
    wx.request({
      url: app.baseData.URL + "/comm/appInterface/noticeDetail?noticeId=" + noticeId + "&Access-Token=" + wx.getStorageSync("token"),
      data: {},
      method: "post",
      header: {
        "content-type": 'application/json'
      },
      success: res => {
        console.log("tab", res.data);
        let url = res.data.obj.detailUrl.split("?")[0]
        wx.redirectTo({
          url: "../noticeDetail/noticeDetail?url=" + url + "&id=" + res.data.obj.noticeId,
        })
      }
    })

  },

wxml

<!--pages/noticeDetail/noticeDetail.wxml-->
// 携带参数跳转到指定页面
<web-view src="{{url}}">

</web-view>

三、微信小程序操作dom元素节点 wx.createSelectorQuery()

wxml

<view>
    <text class="title" id="productServe">产品服务</text>
    <text class="title" id="enterpriseServe">企业服务</text>
    <text class="title" id="normalServe">常用应用</text>
</view>

js

Page({
  //声明节点查询的方法
  queryMultipleNodes: function() {
    const query = wx.createSelectorQuery()                // 创建节点查询器 query
    query.select('#productServe').boundingClientRect()    // 这段代码的意思是选择Id=productServe的节点，获取节点位置信息的查询请求
    query.select('#enterpriseServe').boundingClientRect() // 这段代码的意思是选择Id=enterpriseServe的节点，获取节点位置信息的查询请求
    query.select('#normalServe').boundingClientRect()     // 这段代码的意思是选择Id=normalServe的节点，获取节点位置信息的查询请求
    query.selectViewport().scrollOffset()                 // 这段代码的意思是获取页面滑动位置的查询请求
    query.exec((res) => {
      res[0].top                                          // #productServe节点的到页面顶部的距离
      res[1].width                                        // #enterpriseServe节点的宽度
      res[2].height                                       // #normalServe节点的高度
    })
  }
})

console.log(res) 输出节点信息详情