微信小程序入坑体验

1、分享页面

 /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: '这是一个转发标题',
      path: '/pages/firstPage/firstPage' 
      //这里的路径直接就写 在app.json 里面的路径前面加一个/
    }
  }

2、按钮悬浮底部：关键代码position: fixed;bottom: 0;
按钮的布局设置成如下：

.buttonView {
  background-color: #f1f1f1;
  position: fixed; 
  bottom: 0; // 如果是想固定在顶部 设置 top：0；
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
}
⚠️ 按钮悬浮底部会导致列表页被遮挡，找了很多方法是把列表页的布局设置成如下
 .scrollView {
  background-color: #f1f1f1;
  margin-bottom: 60px; //如果是悬浮在底部margin-bottom 设置成底部部view 的高度
}
  margin-top: 60rpx; //如果是悬浮在顶部margin-top 设置成顶部view 的高度
}

⚠️⚠️⚠️但是，还没完呢，设置margin-bottom之后在模拟器显示正常，但是在iPhone真机没效果还是会被遮挡，top 不会被遮挡，查询很久无果，也可能是自己太菜小白一个，最后只能用笨方法在列表底部加一个固定高度的空白view，哪位大神已经解决的可以请教一下

3、页面传值（正向传值）
A页面跳转到B页面并传值给B

  A跳转地方
   var item = this.data.citys[e.currentTarget.id]
    wx.navigateTo({
      url: '../../pages/areaList/areaList?xzqhszdm=' + item.xzqhsz_dm + '&cityName=' + item.xzqhmc,
    })

B
  /**
   * 生命周期函数--监听页面加载
  */
  onLoad: function (options) {
   获取需要的值
    const paramStr = { "xzqhjc": "3", "sjxzqhszdm": options.xzqhszdm }
    XNW_Ruquest_XZQH.xnwXZQH(paramStr, (res) => {
      console.log(res);
      this.setData({
        citys: res.area,
        cityName: options.cityName
      })
    }, (err) => {
      console.log(err);
    });
  },

4、页面反向传值
B返回到A页面，同时回传值给A

B页面需要返回的地方
var item = this.data.citys[e.currentTarget.id]
    item.xzqhmc = this.data.cityName + '  ' + item.xzqhmc
    let pages = getCurrentPages();//当前页面
    let prevPage = pages[pages.length - 2];//上-个页面
    prevPage.setData({  //A页面的data
      selectCity: item,
    })
    wx.navigateBack({
    })

在A页面
/**
  * 生命周期函数--监听页面显示
  */
    onShow: function () {
        const city = this.data.selectCity
      }  
    },

此处有一个补充，如果是一次返回多个页面，比如 A-B-C ,C直接返回A，设置delta: 2

wx.navigateBack({
      delta: 2 //返回上上页面
    })

5、蒙层实现

WXSS文件

.popBg {
  display: none;
  position: fixed;
  left: 0%;
  width: 100%;
  height: 100%;
  top: 0px;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.7;
  opacity: 0.50;
  filter: alpha(opacity=70);
  align-items: center;
  justify-content: center;
}
 
.popList {
  display: none;
  text-align: center;
  position: absolute;
  top: 30%;
  left: 10%;
  right: 10%;
  width: 80%;
  justify-content: center;
  max-height: 35%;
  background-color: white;
  z-index: 1002;
  overflow: auto;
  border-radius: 5px;
}

.popCell {
  background-color: #fff;
  border-bottom: 0.5px solid #f1f1f1;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.popTitle {
 font-size: 13px;
 color: #666;
 align-self: center;
}

WXML文件

<!-- 蒙层 -->
<view class='popBg'  bindtouchstart='hidePopView' style='display:{{display}}'></view>
<view class="popList" bindtap='hidePopView'
      style='display:{{display}}'>
  <view wx:for="{{popList}}" class='popCell' bindtap='popSelectAction' id='{{index}}'>
   <label class='popTitle'>{{item.swjgmc}}</label>
  </view>    
</view>

⚠️⚠️解决显示蒙层，底部列表仍可滑动的问题

/*解决页面出现蒙层时，底部列表仍可滑动*/
.tripList_root{ 
  top:40px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  z-index: 0;
}
WXML 中当显示蒙层时 calss 设置tripList_root
<view class="{{showBg?'tripList_root':''}}">
 <view style='height: 40px;' wx:for="{{showArray}}" bindtap='clickNext' id='{{index}}'>
  <view class='contentView'> 
   <text class='title'> {{item.mc}}
   </text>
  </view>
 </view>

最终实现效果

8A1DD633-3979-4A4B-B54A-F35A7AFF04E1.png

6、scrollview横向滑动
如果scrollview外层有view宽度要设置
scrollView的子视图要设置display: inline-block;

   .scrollView {
  width: 100%;
  border-top: 1rpx solid #f1f1f1;
  border-bottom: 1rpx solid #f1f1f1;
  padding-left: 30rpx;
  background: #fff;
  white-space: nowrap; //一定要有⚠️⚠️
  height: 85rpx;
}

7、小程序图片显示大小跟自己设置的不一样，这个问题把我郁闷了好久

image.png

解决方法:给图片设置flex-shrink:0;

image.png