[微信小程序]微信小程序知识点总结1

1. 自定义导航
如下图：

图片：7.jpg

1.1 窗口配置
 页面json文件中，加如下配置
 
 "navigationStyle": "custom"   //自定义导航
 
1.2 关于微信小程序自定义导航栏时，如何获取手机状态栏和导航栏高度
 https://www.yii666.com/blog/360110.html
 
  let res = wx.getSystemInfoSync();
  let statusHeight = res.statusBarHeight;
   // 注意：此时获取到的值的单位为 'px'


2. 返回上一页
<button bindtap="navigateBack">返回上一页</button>


 navigateBack: function () {
    wx.navigateBack({
      delta: 1, // 返回的页面数，1表示返回上一级页面
      success: function(res) {
        console.log("返回成功");
      },
      fail: function(res) {
        console.log("返回失败");
      },
      complete: function(res) {
        console.log("返回完成");
      }
    })
  }
  
3. 微信小程序设置页面高度为屏幕高度的方法


方法1：


 .page{
 height:100vh;
 }


 
方法2 ：


 <view class="container" style="height: pw_containerHeightpx"></view>
 
 Page({
  data: {
    containerHeight: 0
  },
  onLoad() {
    wx.getSystemInfo({
      success: (res) => {
        this.setData({
          containerHeight: res.windowHeight
        })
      }
    })
  }
})


4. 原生的微信小程序实现判断用户左滑动与右滑动
<!-- index.wxml -->
<view class="container">
  <view class="box" bindtouchstart="touchStart" bindtouchend="touchEnd">
    向左滑动或向右滑动
  </view>
</view>


// index.js


Page({
  touchStart(e) {
    this.startX = e.changedTouches[0].pageX
    this.startY = e.changedTouches[0].pageY
  },
  touchEnd(e) {
    const endX = e.changedTouches[0].pageX
    const endY = e.changedTouches[0].pageY
    const deltaX = endX - this.startX
    const deltaY = endY - this.startY
    if (Math.abs(deltaX) > 20 && Math.abs(deltaY) < 50) { // 判断是否左右滑动
      if (deltaX > 0) {
        console.log('向右滑动')
      } else {
        console.log('向左滑动')
      }
    }
  }
})




5. 微信小程序中获取节点的方法（未测试）


具体的方法如下：


在要获取节点信息的页面中，
通过 this.createSelectorQuery() 方法创建一个选择器对象。
使用选择器对象的 select(selector) 方法
或 selectAll(selector) 方法来获取节点信息。


调用选择器对象的 boundingClientRect(callback) 方法
或 exec(callback) 方法来获取目标节点的信息，
其中 boundingClientRect 方法获取节点的位置和尺寸信息，


exec 方法可获取自定义属性、样式等信息。


<!-- index.wxml -->
<view class="container">
  <view id="box" class="box">我是一个盒子</view>
  <button bindtap="getNodeInfo">获取节点信息</button>
</view>


// index.js
Page({
  // 获取节点信息
  getNodeInfo() {
    const query = wx.createSelectorQuery()
    query.select('#box').boundingClientRect(rect => {
      console.log('节点信息：', rect)
    }).exec()
  }
})




6. 微信小程序 wx.switchTab 跳转页面，不刷新问题


解决方案：
wx.switchTab({
     url: '/pages/exam/exam',
     success:function () {
       var page = getCurrentPages().pop();
       if (page == undefined || page == null) return;
         page.onLoad();   //重新刷新页面
       }
   })

7. getphonenumber 获取手机号的方法个人小程序是不能获取手机号的，企业小程序账号可以
获取小程序账号的方法更新，只需要传 code 到后台即可.
注：getPhoneNumber 返回的 code 与 wx.login 返回的 code 作用是不一样的，不能混用



<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>

获取方法如下：

Page({
  getPhoneNumber (e) {
    console.log(e.detail.code)
  }
})

8. 发布成体验版，进行测试
体验版测试，需要开发调试下，去测试；不会检查https

图片：6.jpg