小程序采坑记 mpvue + Vant Weapp

最新在做一个小程序项目,框架使用的是:mpvue + Vant Weapp;其余还用的技术栈:vue.js、微信小程序、网络库flyio等。

mpvue是美团开源的微信小程序框架,由于无限接近vue开发而受到大量关注;

Vant Weapp UI库是轻量、可靠的小程序 UI 组件库,是 有赞团队 开源的一套基于 Vue 2.0 的 Mobile 组件库;

 

一、总结一些遇到的问题

1. 小程序在网络请求上只支持  HTTPS 请求;在开发时可以勾选 “不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书” 选项从而使用http;但是在发布版或者体验版不可以(体验版可以打开调试模式从而使用http)

2. 小程序官方的单位是 rpx

小程序采坑记 mpvue + Vant Weapp_第1张图片

一般以iphone6作为开发标准!在某一些动态宽高在不同机型上会出现不同样式的情况下,可以使用 rpx 来开发(不会有转换的过程,所以显示出来的效果将比 px 更统一)

3. 微信的一些常见操作度可以在 API 里面找到(mpvue和vue的开发方式及其相同),使用只需要关注一些微信相关的操作即可

4. 在mpvue的框架下,也是支持小程序原生的组件的,我比较常用的是:swiper(轮播)、rich-text(富文本)、picker(选择时间/日期、地址)、web-view等(详情参考小程序开发文档的组件模块)

5. 在mpvue的框架下,组件不仅有vue的生命周期(常用)还有小程序的生命周期回调函数(onLoad、onShow、onHide这些生命周期函数都是比较好用的)

6. 小程序的下拉刷新、上拉加载的实现

  • 在main.json中开启下拉刷新、触发上拉加载事件的距离

  • 页面中配置onPullDownRefresh() ==>> 用户下拉刷新事件、onReachBottom() ==>> 上拉触底事件(和methods同级

小程序采坑记 mpvue + Vant Weapp_第2张图片

7. 小程序的路由调转(vue-router不兼容小程序)

小程序原生调转方式:

  • wx.navigateTo:跳转到某个页面。会产生一个新的页面
  • wx.redirectTo:重定向到某个页面。替换掉当前页面
  • wx.switchTab:切换tab页
  • wx.reLaunch:重新启动。清空之前的所有页面

注意:在小程序中有层级的限制,只能打开十个页面,因此要合理利用跳转的方式。

在小程序中可以使用原生提供的跳转API;但是如果你更喜欢类型 vue-router 的方式,可以使用 mpvue-router-patch 这个库。

8. 网络请求

网络请求是一个程序的主要部分,在pc端常用的有ajax、axios;在react native上官方推荐的是 fecth(当然用axios等其它库也是可以的);其中,axios 是比较常用比起好用的。

但是:axios不兼容小程序,所以选用了 flyio ;flyio 兼容Node.js 、微信小程序 、Weex 、React Native 、Quick App 和浏览器。

 

二、以下记录一下采坑过程,主要是一些布局上的问题:

1. 背景图片使用本地文件时无效

小程序采坑记 mpvue + Vant Weapp_第3张图片

在微信开发者工具中查看Element结果:

经测试,使用 网络图片 是可以的!!!

2. 块级(div、p)内只显示两行文字,超过的用省略号

display: -webkit-box; 
-webkit-line-clamp: 2;  
-webkit-box-orient: vertical; 
overflow: hidden;

3. vue中对样式进行运算、判断(方法:在行内使用  :style  绑定样式,在标签内不行)

运算:

判断:

4. vue中在遍历数组的时候,其标签样式使用的是item中的每一个字段 或者 根据index计算得出。

 

5. 块级标签(div、p)内的文字不不换行(一般不会出现这种情况,除非你自己乱输入一整串英文才会出现)

word-wrap: break-word;
word-break: break-all;
overflow: hidden;

6. Vant Weapp UI库想要重置样式很困难,我一个都没成功,知道的大佬请指教的!

总结:总的来说:整个小程序的开发花了一周左右的时间(页面不是很多哈),开发过程是比较顺利的,只是作为第一次开发小程序就直接使用了mpvue,对微信小程序原生的一些API和概念并不是很清楚,需要后期继续学习。而在使用的UI框架方面,Vant Weapp确实提供了很多不错的组件,在一定程度上加快了开发的进度。但是不能充值样式这一点有点不好用(可能是我没找到方法);而在整个小程序开发过程中,布局其实花掉了大部分的时间!!!

 

最后,看一下使用mpvue框架创建出来的项目文件目录结构:

小程序采坑记 mpvue + Vant Weapp_第4张图片

每一个页面都包含三个文件(index.vue、main.js、main.json):

小程序采坑记 mpvue + Vant Weapp_第5张图片

 

JSON 配置配置说明

JSON 配置分为三种:全局小程序配置 app.json、页面配置 page.json、工具配置 project.config.json

1 全局小程序配置 app.json

包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。可以配置的类别如下:

小程序采坑记 mpvue + Vant Weapp_第6张图片

 

2 页面配置 page.json

页面是针对小程序相关页面的配置。比如:整个小程序的风格是蓝色调,但有个页面顶部标题栏需要是绿色的,你就可以在该页面的 page.json 里去配置。配置列表如下:

小程序采坑记 mpvue + Vant Weapp_第7张图片

3 工具配置 project.config.json

该文件主要记录你在开发者工具上做的配置,当你重新安装工具或者换电脑工作时,你只要载入同一个项目的代码包,开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置。一般不需要我们特别关注,只需要在开发者工具里面做修改即可。

 

文章仅为本人学习过程的一个记录,仅供参考,如有问题,欢迎指出!

你可能感兴趣的:(小程序)