微信公众号网页开发之VUE+VUX实践之旅

关注leansofX的同学不知有没发现,近期leansoftX团队推出了DevOps助手公众号,现阶段功能主要是Azure DevOps (以前名TFS )集成微信通知,详情可关注DevOps助手,在近期的微软技术大会也会展出哦,链接:https://devopshub.cn/2018/10/09/ms-techsummit2018/ 今天我们就简单回顾下如何开始微信网页开发实践之路吧。

0
6241

缘起

关注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 模板,关于初始化项目可参考小编另一篇文章

记一次.net core 集成vue 实践

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