最近在玩mpvue开发微信小程序，在技术选型的时候纠结了一下，目前好像比较流行的就是原生、Wepy、mpvue这三种了，考虑到mpvue接近Vue一些，所以选了mpvue作为技术框架。
写在前面的话
小程序是我很早之前申请的了，所以申请的具体过程不太记得了，当时申请的是个人的小程序。那个时候还写了一个原生的，比较简陋也是看着视频学习写的。关于小程序的申请推荐大家看看其他人的。
开始mpvue
mpvue的官网有个五分钟快速上手的教程，照着那上面实践，基本上一个大致的框架就会出来了。此处是mpvue的传送门。
大致的命令贴一下：
1 # 全局安装 vue-cli
$ npm install --global vue-cli
2 # 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart xxxxx(xxxxx为项目名称)
3 # 安装依赖
$ cd xxxxx(xxxxx为项目名称)
$ npm install
4 # 启动构建
$ npm run dev
PS：安装过程中可能会有一些配置，基本上按照提示语来选择配置就没事了，和当初vue-cli的差不多。
然后打开微信开发者工具，目录为刚才那个项目构建生产的dist目录。
这个时候，微信开发者工具会出现这样的画面。
mpvue项目初始化
关于第三方ui库的引入
搜了下目前比较出名的三套UI。
WeUI: 一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。(github)
Vant-UI: 有赞移动 Web UI 规范 ZanUI 的小程序现实版本。以前叫ZanUI，现在改名为Vant-UI(github)
iView Weapp: 与iView（基于 Vue.js 的开源 UI 组件库）同一组织产出的微信小程序UI组件库。(github)
然后我比较了一下，我选的是WeUI，贴一下引用的过程。因为自己在这一块走了挺多的弯路的。
1.先去git将WeUI项目下载下来。
2.然后将weui-wxss-master\dist\style下的weui.wxss复制到mpvue项目的/static/目录下。
3.去mpvue项目的main.js(紧贴着App.vue的那个)全局引入
import '../static/weui.wxss'。
4.引入插件的模板可见weui-wxss-master\dist\example。
比如说我引入了一个button。
模板结构是这样的：
没错就是这么一句话！
粗来啦！
本来还封装了flyio，但是还没看到封装效果，没法验证自己是不是封装正确了，所以打算后面正式接入接口的时候试一下，如果正确就把封装的过程和代码贴出来。
网友评论