小程序开发(三):使用 mpvue 快速开发小程序

本贴最后更新于 1766 天前,其中的信息可能已经东海扬尘

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

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

小程序生态

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

这里面,uniapp 目前是跨平台数最多的。目前支持 7 个平台。也就是说,只需要写一次代码,就可以发布到这 7 个平台里。
image.png
知道 dcloud 团队还是很早的时候了(大概是大二的时候),那时候他们在做的是 hybrid 开发,用过他们的 mui、用过他们自己开发的编辑器。

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

Just do it !

mpvue 初体验

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

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

image.png

底部导航


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

属性 类型 必填 默认值 描述 最低版本
color HexColor tab 上的文字默认颜色,仅支持十六进制颜色
selectedColor HexColor tab 上的文字选中时的颜色,仅支持十六进制颜色
backgroundColor HexColor tab 的背景色,仅支持十六进制颜色
borderStyle string black tabbar 上边框的颜色, 仅支持 black / white
list Array tab 的列表,详见 list 属性说明,最少 2 个、最多 5 个 tab
position string bottom tabBar 的位置,仅支持 bottom / top
custom boolean false 自定义 tabBar,见详情 2.5.0

我们的配置如下图所示:


image.png


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


image.png


自定义头部导航栏

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

我们需要在页面配置中配置 navigationStyle 的值为 custom 。然后在页面中自定义头部即可。这里我们自定义了一个搜索框。
image.png
我们来看下 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 个经典实例带你玩转微信小程序》,会有更完整的例子。

总结

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

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

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...