小程序开发常用的一些代码

更新升级提示

// 新版本提醒
const updateManager = wx.getUpdateManager();
updateManager.onUpdateReady(() => {
  wx.showModal({
    title: '更新提示',
    content: '新版本已经准备好，是否重启应用？',
    confirmColor: '#009eef',
    success(res) {
      if (res.confirm) {
        // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
        updateManager.applyUpdate();
      }
    },
  });
});

网络中断提示

// 网络中断提醒
wx.onNetworkStatusChange(({ isConnected }) => {
  if (!isConnected) {
    wx.showModal({
      title: '网络提示',
      content: '网络连接中断了，可能会影响到您的使用噢',
      confirmColor: '#009eef',
      confirmText: '知道了',
      showCancel: false,
    });
  }
});

小程序开发版，体验版，正式版区分

小程序提供了一个全局的变量 __wxConfig, 其属性 envVersion 值为 develop | trial | release 分别表示开发版，体验版和正式版

const env = __wxConfig.envVersion; // develop | trial | release

有了版本区分之后，就可以搞很多事情了，如数据上报区分，调试工具显示等。

获取小程序 APPID

同样全局的变量 __wxConfig 的 accountInfo 中可以拿到 APPID

const { appId } = __wxConfig.accountInfo;

获取用户使用的小程序版本号

小程序基础库版本 2.10.2 中提供了获取用户使用的小程序版本号的功能，代码如下：

const { miniProgram } = wx.getAccountInfoSync();
const { version } = miniProgram; // 2.10.2 支持

下拉刷新隐藏的坑

如果你按照开发文档上的方式开启下拉刷新，一般是看不到下拉刷新的那三个点的加载状态的。这时候就需要额外配置"backgroundTextStyle": "dark", "backgroundColor": "#fff"。

{
    "enablePullDownRefresh": true,
    "backgroundTextStyle": "dark",
    "backgroundColor": "#fff",
}

除了配置以外，还记得要停止，不然一直请求得卡死。

page({
    onPullDownRefresh() {
        this.getData();
    },
    getData() {
        wx.stopPullDownRefresh(); // 停止下拉刷新，不然得卡死
        // 正式拉取数据
        // ...
    }
})

自定义导航栏的高度计算

自定义导航栏后页面就成了全屏状态，如果还要自定义导航栏，那么就需要重新计算导航栏的高度，让其一直 fixed 在头部。其计算如下：

 // 获取状态栏高度
 const { statusBarHeight } = wx.getSystemInfoSync();
 
 // 得到右上角菜单的位置尺寸
const menuButtonObject = wx.getMenuButtonBoundingClientRect();
const { top, height } = menuButtonObject;

// 计算导航栏的高度
// 此高度基于右上角菜单在导航栏位置垂直居中计算得到
const navBarHeight = height + (top - statusBarHeight) * 2;

// 计算状态栏与导航栏的总高度
const statusNavBarHeight = statusBarHeight + navBarHeight;

固定底部的 iPhone X 以上机型兼容

<view class="page page--with-footer">
    <!-- 页面内容 -->
</view>
<view class="fixed-footer">
    <!-- 固定底部的内容 -->
</view>

/* 固定底部 */
/* ---------------------------------------------- */
.fixed-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 4000;
  /* iPhone X 以上留出位置 */
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

/* 页面底部留出 footer 的高度 */
.page--with-footer {
  padding-bottom: 60px;
  padding-bottom: calc(60px + constant(safe-area-inset-bottom));
  padding-bottom: calc(60px + env(safe-area-inset-bottom));
}