uni-app+vant-weapp使用vue.js快速开发微信小程序

uni-app可以通过hbuildx进行下载，选择模板，使用vue.js语法进行开发，对vue支持程度非常高，最终打包成各种应用，主要说下微信小程序方面使用以及开发。有赞vant-weapp 是一款移动端UI框架包括vue版本、微信小程序版本、支付宝小程序版本，以及react版本，其中官方支持vue与微信小程序，剩余react与支付宝由社区团队提供，由于着重微信小程序开发因此选择vantweapp作为部分组件的UI框架(注意：UI框架对其他类型应用支持程度有限，看个人项目选择)

一、下载模板
1.通过hbuildx可视化直接下载文件 - 新建 - 项目 - uniapp默认模板
2.cli脚手架安装:

//vue-cli安装过可跳过
npm install -g @vue/cli
//直接创建
vue create -p dcloudio/uni-preset-vue 项目名称
//然后直接选择默认模板即可

二、目录介绍
主要包括node_modules、pages、static、APP.vue、pages.json、package.json、main.js、uni.scss、rd文件。
与常规vue项目差别不大，仅仅多了pages.json与uni.scss（可不管），其中pages.json写法与小程序中页面配置完全相同，类似vue的路由配置。同时也能通过npm或者yarn去下载各种插件安装包，与常规vue开发区别不大。
三、运行与发布
直接通过hbuildx开发可直接配置，运行之后会自动打包成小程序，并且启动微信开发者工具，更改代码之后直接保存即可更新视图，非常方便。
hbuildx中直接双击项目模板中的manifest.json文件，选择微信小程序配置设置appID。此外点击菜单中运行 - 运行到小程序模拟器 - 运行设置，或者直接 ctr+, 选择运行配置找到微信开发者工具路径，选择好开发者工具安装地址即可。
若要运行开发环境代码直接菜单选择：运行 - 运行到小程序模拟器 - 微信开发者工具等待工具自动打开即可，发布正式版直接菜单选择：发行 - 微信小程序即可
此外还能通过命令行执行 PLATFORM可取值
npm run dev:%PLATFORM%
npm run build:%PLATFORM%
也可以直接将上面可取值进行配置到package.json的scripts中，与vue项目相同，配置完成之后可以直接而npm run dev或者npm run build执行，一般打包之后项目中会出现unpackage文件夹打开dist为dev build 打开有mp-weixin即为打包完成的微信小程序项目。
然后直接在启动之后的微信开发者工具中进行上传就能提交
四、vant的UI组件引入
vantweapp针对vue和微信小程序有两种版本，此处可以直接使用vue版本与平时vue开发相同，在uni-app框架中包括所有vue生命周期，其中还新增例如onlaunch onload onhide onshow等见应用生命周期与页面生命周期，具体vue使用事项；包括vue常用的vuex在uniapp也内置了，可正常使用；
常见引用方式

# Vue 2 项目，安装 Vant 2.x 版本：
npm i vant -dev

# Vue 3 项目，安装 Vant 3.x 版本：
npm i vant@next -dev

可直接在main.js中全局引入（不建议）

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);

也可以在组件中按需引入使用的组件，但是ui组件分布在不同文件不方便管理
此处可以将vantweapp直接从github中下载放入项目中，wxcomponents > vant中存放所有组件模块，在具体使用时候可以在page.json中引入不同模块

        {
            "path": "pages/home/detail",
            "style": {
                "navigationStyle": "custom",
                "navigationBarTextStyle": "black",
                "usingComponents": {
                    "van-field": "/wxcomponents/vant/field/index",
                    "van-cell-group": "/wxcomponents/vant/cell-group/index",
                    "van-image": "/wxcomponents/vant/image/index"
                }
            }
        }

此时可在对应页面按照使用方法使用不同组件，其实大部分组件在项目中应用不到，可以按需求删除不需要的组件包，非常方便，对于小程序来说单个包不能超过2M，否则只能分包处理，对于引入插件就需要更加慎重
此外除了want组件之外，uniapp本身也提供了插件市场，里面包括大量作者提供插件，对于较复杂或者原生难以实现的功能需求可按照个人项目需求搜索添加即可，非常方便；
五、其他
uniapp支持各种原生组件，同时也对微信小程序中各种api做了封装，例如wx.getSystemInfo、wx.request等在uniapp框架中可以直接使用 uni.getSystemInfo、uni.request,包括其他api也是相同，具体使用和支持程度可以参考对应的应用程序的api，若是想直接一套代码开发多端应用需要注意！

此外uni-app App端内置了一个基于 weex 改进的原生渲染引擎，提供了原生渲染能力。
在App端，如果使用vue页面，则使用webview渲染；如果使用nvue页面(不熟)，则使用原生渲染。一个App中可以同时使用两种页面，比如首页使用nvue，二级页使用vue页面，hello uni-app示例就是如此
uni-app在App端，支持vue页面和nvue页面混搭、互相跳转。也支持纯nvue原生渲染。
感兴趣的大神可以尝试一下来指点指点