缘起
关注leansofX的同学不知有没发现，近期leansoftX团队推出了DevOps助手公众号，现阶段功能主要是Azure DevOps （以前名TFS ）集成微信通知，详情可关注DevOps助手，在近期的微软技术大会也会展出哦，链接：https://devopshub.cn/2018/10/09/ms-techsummit2018/ 今天我们就简单回顾下如何开始微信网页开发实践之路吧。
微信公众号配置
在开始微信公众号网页开发之前需要完善公众号配置，这里简单列举下本文不做不重点解释，详情参照微信开发者文档，你也可以留言、加入文末微信交流群交流。
• 开发→基础配置：公众号开发信息
• 开发→基础配置：服务器配置
• 公众号设置→功能设置
社区的力量
在得知团队需要将Azure DevOps消息集成微信通知时，我们一开始打算采用微信小程序实现的，基于小程序模板消息的局限性（需支付场景或表单提交）后来我们改用微信公众号网页。其实无论是小程序还是微信公众号网页对于开发者来说都是webapp，小程序现在也支持单页开发。既然是网页且是移动端网页，考虑到适配、兼容性问题，我第一时间想到的是vue+mint ui ,期间在微信开发者文档发现微信官方提供了WeUI框架（想必比较NB），就试着vue +WeUI 的Google了下发现了vux这个ui框架。链接：https://doc.vux.li/zh-CN/
VUX并不完全依赖于WeUI，VUX 在 WeUI 的基础上扩展了多个常用组件，但是尽量保持整体UI样式接近WeUI的设计规范（官方原话），但是组件基本满足我们的需求了~，vue 生态也比较熟，就它了。
初始化项目
默认为 webpack2 模板，关于初始化项目可参考小编另一篇文章
npm install vue-cli -g # 如果还没安装
vue init airyland/vux2 projectPath
cd projectPath
npm install –registry=https://registry.npm.taobao.org # 或者 cnpm install 或者 yarn
npm run dev # 或者 yarn dev
我们简单读一些默认模板生成文件
1. build——[webpack配置]
2. config——[vue项目配置]
组件使用
Vux 组件有两种使用方式
1. 局部注册
默认模板使用的就是局部注册的方式
2. 全局注册
官方文档我读的时候走了些许弯路，读了demo源码后整理操作步骤如下。
全局注册需要在入口文件引入组件，本文以toast组件为例，源码可参考
https://github.com/WalkerLu/vux-demo/blob/master/src/components/Swipeout.vue
使用组件页引入
在mounted 事件展示Loding
展示结果
总结
除了本次demo没有集成到绑定到公众号，这个在微信公众号配置中也说明了非本文重点，二来社区之类的文章实属不少。从本次实际来看开发微信移动端网页，至少从开始来讲还是相对简单的，工具链也相对成熟，至于前后端交互、跨域问题等等在这种开发模式下都很好解决。可以一试。
最后附上源码连接：https://github.com/WalkerLu/vux-demo
