微信小程序开发总结

1. 如何时限页面之间的导航跳转？

声明式导航：使用 navigator 组件
<view>
  <navigator url="/pages/info1/info1" open-type="navigate">跳转到非tabBar页面</navigator>
</view>

编程式导航：使用对应的 Api
// 编程式导航跳转tabBar页面
getTab() {
  wx.switchTab({
    url: '/pages/about/about'
  })
},
// 编程式导航跳转到非tabBar页面
getTabF() {
  wx.navigateTo({
    url: '/pages/info1/info1',
  })
},

2. 如何实现下拉刷新效果

首先需要开启下拉刷新：在页面的 .json 文件中添加
"enablePullDownRefresh": true,
"backgroundColor": "#efefef",//背景颜色
"backgroundTextStyle": "dark"
然后在 .js 文件中监听用户下拉动作
onPullDownRefresh() {},

3. 如何实现上拉加载更多数据

首先需要在页面的 .json 文件中添加
"onReachBottomDistance": "200",//上拉触底的距离

在 .js 文件中监听页面上拉触底事件
onReachBottom() {},

4. 小程序中常用的生命周期函数

应用生命周期函数：
    onLaunch——当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
    onShow——当小程序启动，或从后台进入前台显示，会触发 onShow
    onHide——当小程序从前台进入后台，会触发 onHide
页面生命周期函数：
    onLoad——监听页面加载
    onShow——监听页面显示
    onReady——监听页面初次渲染完成
    onHide——监听页面隐藏
    onUnload——监听页面卸载

5. 自定义组件——组件全部的生命周期函数

组件 全部的 生命周期函数：
created 在组件实例刚刚被创建时执行，组件刚被创建好还没放到小程序页面中，此时能够做的事情比较少;
attached 在组件实例进入页面节点树时执行，当组件刚被放到页面节点树的时候执行，组件还没被渲染出来;
ready 组件在视图层布局完成后执行，即组件渲染完成后执行;
moved 在组件实例被移动到节点树另一个位置时执行;
detached 在组件实例被从页面节点树移除时执行，比如组件被销毁后执行;
error  每当组件方法抛出错误时执行;

组件 主要的 生命周期函数
created 组件实例刚被创建好，此时还不能调用setData,通常在这个生命周期函数中，只应该用于给组件的 this 添加一些自定义的属性字段;
attached 在组件完成初始化完毕，进入页面节点树后，组件还没被渲染出来，此时 this.data 已经被初始化完毕，可以请求初始的数据;
detached 在组件离开页面节点树后，比如组件被销毁时页面会离开节点树，这个时候会触发，退出一个页面时，会触发页面内每个自定义组件的 detached 生命周期，此时适合做一些清理工作;

组件所在页面的生命周期函数————自定义组件的行为依赖于页面状态的变化，此时就需要用到组件所在页面的生命周期函数，有如下3个
show  组件所在的页面被展示时执行
hide  组件所在的页面被隐藏时执行
resize  组件所在的页面尺寸变化时执行

6. 自定义组件的插槽使用

单个插槽：在小程序中，默认每个自定义组件中只允许使用一个 <slot> 进行占位，这种个数上的限制叫做单个插槽。

// 组件的的封装者
<view>
  <view>
    我是自定义组件demo
  </view>
  <!-- 对于不确定的内容，可以使用 <slot> 进行占位，具体的内容由组件的使用者决定 -->
  <slot></slot>
</view>

// 组件的使用者
<demo>
  <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
  <view>我是给插槽填充的文字</view>
</demo>

 多个插槽：需要在组件的 .js 文件中，进行启用，如下：

和 data 同级的位置

options: {
  multipleSlots: true
},

// 组件的的封装者
<view>
  <view>
    我是自定义组件demo
  </view>
  <!-- 对于不确定的内容，可以使用 <slot> 进行占位，具体的内容由组件的使用者决定 -->
  <slot name="before"></slot>
  <slot name="after"></slot>
</view>

// 组件的使用者
<demo>
  <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
  <view slot="before">我是给插槽填充的文字111</view>
  <view slot="after">我是给插槽填充的文字222</view>
</demo>

7. 如何安装和配置 vant-weapp 组件库

参考 Vant 的官方文档：Vant Weapp - 轻量、可靠的小程序 UI 组件库

Vant Weapp 是有赞前端团队开源的一套小程序 UI 组件库，使用的是 MIT 开源许可协议。

#1. 初始化包管理配置文件

命令：npm init -y

#2. 通过 npm 安装（建议指定版本为@1.3.3）

命令：npm i @vant/weapp@1.3.3 -S --production

#3. 构建 npm

#4. 修改 app.json

   将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

8. 使用 CSS 变量来实现定制主题

参考 MDN 文档：使用 CSS 自定义属性（变量） - CSS：层叠样式表 | MDN
# 定义变量（备注：自定义属性名是大小写敏感的）

   声明一个自定义属性，属性名需要以两个减号（--）开始，属性值则可以是任何有效的 CSS 值。

element {
  --main-bg-color: brown;
}

# 引用变量

   使用一个局部变量时用 var() 函数包裹以表示一个合法的属性值：

element {
  background-color: var(--main-bg-color);
}

9. 如何使用 MobX 实现全局数据共享

在小程序中，可使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享。其中:
mobx-miniprogram 用来创建 Store 实例对象
mobx-miniprogram-bindings 用来把 Store 中的共享数据或方法，绑定到组件或页面中使用

1. 安装包

命令：npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1

（备注：MobX 相关的包安装完毕之后，记得删除 miniprogram_npm 目录后，重新构建 npm.）

2. 创建 Store、参考官网文档进行使用

// 在这个 js 文件中专门创建 Store 的实例对象
import { observable, action } from 'mobx-miniprogram'
export const store = observable({})

10. 如何对小程序的 API 进行 Promise 化

1. 安装包

命令：npm install --save miniprogram-api-promise@1.0.4

2. 在 app.js 中进行配置

# 在小程序入口文件中(app.js)，首先使用 ES6 按需导入一个成员，这个成员其实是一个方法，只需调用一次 promisifyAll() 方法，即可实现异步 API 的 Promise 化

// app.js
import { promisifyAll } from 'miniprogram-api-promise'

// 定义一个空白的对象赋值给常量 wxp，同事将这个空白的对象赋值给了微信的一个自定义属性 wx.p，即这两个指向的是同一个对象
const wxp = wx.p = {}

// 将 wx 对象中的方法 通过 promisifyAll 方法 promise 化，最终会把 promise 化之后的 API 挂载到 wxp 这个空对象上
promisifyAll(wx, wxp)

之后就可以通过 wx.p 调用那些 promise 化后的 API 了。

async getListData() {
  const { data: res } = await wx.p.request({
    method: 'GET',
    url: 'https://www.escook.cn/api/get',
    data: { name: 'zs', age: 20 }
  })
  console.log( res );
},

11. 如何实现自定义 tabBar 的效果

参考地址：自定义 tabBar | 微信开放文档