小程序开发（三）：使用 mpvue 快速开发小程序

前两篇的文章中我们已经准备好了数据和接口，这次我们来进行小程序端的开发。开发小程序其实并不是一个难的事情，小程序官方的文档很清晰，社区也是比较完善的。

我们可以使用小程序原生的语法来进行开发，当然了，第一件事情就是打开官网，学习下基础的语法，常用的组件、api。这些内容就不在这篇文章中细聊了。可以关注我在语雀的知识库《10 个经典实例带你玩转微信小程序》。

小程序生态

随着微信下拉进入小程序入口的开放，小程序各种生态也是越来越好，各大厂商也是依次推出不同的小程序“开发语言”，首先是腾讯自己推出的 wepy 、美团推出的 mpvue 、京东推出的 taro 、 dcloud 推出的 uniapp 等等。当然也这些工具也是大大的降低了小程序开发的门槛，会 vue 或者 react 即可快速进行小程序的开发，其实还有一个很重要的点，现在是个多端的时代，微信小程序发布以来，各大 it 巨头也开始做自己的小程序，阿里、百度、字节跳动等。每个端的运行环境不一样，开发语法都不一样，能否开发一次，然后多端运行，这样就可以节省很多的成本了。这让我想起了上学时，第一节 java 课上，老师说的：“write once， run everywhere!”。对，就是这个意思。当然了这里面的技术难点是编译，语法分析、词法分析、AST 的转换、各种 Adapter。

这里面，uniapp 目前是跨平台数最多的。目前支持 7 个平台。也就是说，只需要写一次代码，就可以发布到这 7 个平台里。

知道 dcloud 团队还是很早的时候了（大概是大二的时候），那时候他们在做的是 hybrid 开发，用过他们的 mui、用过他们自己开发的编辑器。

另外，组件库方面：iview 团队推出的 iView Weapp 、有赞团队推出的 Vant Weapp 、weilanwl 开发的 ColorUI 等等。出现了很多优秀的组件库。

Just do it !

mpvue 初体验

官方给了一个五分钟上手教程。照着来一遍就入门了。

我们这里引入两个组件库：iview 和 vant 。

底部导航

也就是底部的 tab 导航栏。微信小程序提供了此功能，我们只需要对应文档配置一下即可。

我们的配置如下图所示：





我们可以在开发工具中看到底部 tab 已经出来了：

自定义头部导航栏

微信客户端 7.0.0 以上版本已经支持自定义导航栏样式了。

我们需要在页面配置中配置 navigationStyle 的值为 custom 。然后在页面中自定义头部即可。这里我们自定义了一个搜索框。

我们来看下 view 的代码：

<view class="custom flex_center" :style="{'padding-top': statusBarHeight + 'px'}">
  <view class="search">
    <input placeholder="搜索视频、文章" disabled @click="toSearch">
  </view>
</view>

样式的代码：

.custom{
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  height: 45px;
  background: white;
  z-index: 999;
  display:flex;
}
.custom .search {
    display:flex;
    justify-content:center;
    align-items:center;
    padding:0 30rpx;
    width: 450rpx;

}
.custom .search input {
    width: 100%;
    border:1px solid #ddd;
    border-radius:20px;
    height: 30px;
    line-height: 30px;
    text-align:center;
    font-size:28rpx;
}

因为篇幅原因，别的细节就不在一一叙述了 ，比如全局数据状态管理、上拉加载、下拉刷新、性能优化等等的内容。可以关注我在语雀的知识库《10 个经典实例带你玩转微信小程序》，会有更完整的例子。

总结

我们通过三篇文章，分享了这次小程序开发中的一些事情，当然，三篇文章不足完完全全的说明白，希望多花时间钻研。哈哈。

这次就和大家分享这些了。我的第一个小程序“悠客社区”第一个版本已经上线了，请大家多多关注。第二个版本也在开发中，会加入更多的好玩的内容，发布时间未定。