背景

业务需要，需要编写一个服务在企业微信里面的H5应用。需要解决的问题有：

UI库选型
响应式布局
按需引入组件
企业微信登录
本地预览
http请求
水印
企业微信桌面端支持

UI库选型

已有的移动端组件库（vue）有。

vant(有赞) 支持 vue2,vue3
NutUI(JD) 支持vue2，vue3
Mint UI (element) 支持vue2,最新release 是2017年

根据实际需求，选择适合自己的组件库。个人推荐 vant。一直持续更新中。

响应式布局

利用的是postcss-pxtorem 这个库

在 vue.config.js 里面配置下就行了

module.exports = {css:{loaderOptions:{postcss:{plugins:[pxtorem({rootValue: 37.5, // 375 是视觉稿尺寸。propList: ['*'],minPixelValue: 2 // min pixel value})]}   }
}

按需引入组件

利用的是 babel-plugin-import 组件

对于 vant 的配置

在babel.config.js 文件里面

module.exports ={plugins: [['import',{ libraryName: 'vant', libraryDirectory: 'es', style: true },'vant',],],
}

然后就可以按需引入组件了。

// 插件会自动将代码转化为方式二中的按需引入形式
import { Button } from 'vant';

企业微信登录

对于企业微信登录，需要用到微信提供的url

const oauthUrl =  `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(redirectUrl)}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`

其中 appid 是企业微信的 appid， redirect_uri 是获取到code 之后，重新跳转到的url。

我使用的是vue-router 库，通过方法 router.beforeEach() 和router.afterEach() 拦截路由变化

在 beforeEach方法里面


router.beforeEach((to,form,next)=>{// 先检查是否已经登录了。// 检查参数中是否有code 参数if(to.query.code){// 拿code 请求服务器端，获取到用户信息。// 然后走后续的流程。。next({...to, replace: true});}else{// 跳转微信授权。const currentHref = window.location.href;window.location.href = getWxOauth2Url(currentHref);}
})

在 afterEach 方法里面

router.afterEach((to,from,next)=>{// 更改titile document.title = (to.meta && to.meta.title) || '';
})

本地预览

当执行了vue-cli 的

{"build": "vue-cli-service build",
}

之后，生成了 dist 目录之后，如何预览呢，这个时候就需要一个http服务，并支持代理接口。

/*** 使用nodejs创建本地的http服务* */
var http = require('http');
var url = require('url');
var path = require('path');
var fs = require('fs');
var httpProxy = require('http-proxy');
var proxy = httpProxy.createProxyServer(); // See (†)var requestType = {"css": "text/css","js": "text/javascript","html": "text/html"
};var config = {target: 'http://service.com',port: 3000,host: 'local.service.com',dir: '../dist',prefix: '/api', // api prefix debug: true
};var proxyConfig = {target: config.target,changeOrigin: true,
};//
http.createServer(function (request, response) {var pathName = url.parse(request.url).pathname;var realName = path.join('.', pathName);var ext = path.extname(pathName);ext = ext ? ext.slice(1) : 'unknown';// 走转发走if (pathName.indexOf(config.prefix) !== -1) {config.debug && console.log(`Rewriting path from "${pathName}" =====> to "${proxyConfig.target}${pathName}"`);proxy.web(request, response, proxyConfig);return;}config.debug && console.log(pathName);if (pathName.indexOf('css') === -1 && pathName.indexOf('js') === -1 && pathName.indexOf('img') === -1) {pathName = '/index.html';}realName = path.join(__dirname, config.dir, pathName);config.debug && console.log(realName);fs.exists(realName, function (exists) {if (!exists) {response.writeHead(404, {'Context-type': 'text/plain'});response.write('this request url ' + pathName + ' was not found on this server.');response.end();} else {fs.readFile(realName, 'binary', function (err, file) {if (err) {response.writeHead(500, {'Context-type': 'text/plain'});response.end(err);} else {var contentType = requestType[ext] || "text/plain";response.writeHead(200, {'Context-type': contentType});response.write(file, 'binary');response.end();}});}});
}).listen(config.port, config.host);console.log(`server running at http://${config.host}:${config.port}/`);

这里就是一个最简单的 http 服务，并依赖 http-proxy 库走api 的转发。

http请求

对于 http的请求，我选择的是 axios 这个库,当然也有其他更好的库选择。

水印

一般在企业微信里面，都需要添加水印来保护公司的一些信息不被乱传播出去。这个时候就需要使用水印。

所使用的库是 watermark-dom

企业微信桌面端支持

企业微信是有手机端，也有桌面端，所以在支持手机端的同时最好也适配下桌面端。

Vant 是一个面向移动端的组件库，因此默认只适配了移动端设备，这意味着组件只监听了移动端的 touch 事件，没有监听桌面端的 mouse 事件。

如果你需要在桌面端使用 Vant，可以引入我们提供的 @vant/touch-emulator，这个库会在桌面端自动将 mouse 事件转换成对应的 touch 事件，使得组件能够在桌面端使用。

# 安装模块
npm i @vant/touch-emulator -S

// 引入模块后自动生效
import '@vant/touch-emulator';

demo地址

demo https://bosscheng.github.io/vue3-mobile-template/#/

github https://github.com/bosscheng/vue3-mobile-template

基于vue-next(vue3)企业微信H5搭建相关推荐

linux环境下企业基于域名访问的web于电子邮件服务器论文,基于Linux平台的企业邮件服务器搭建...
我失骄杨君失柳,杨柳轻飏直上重霄九.得道多助,失道寡助.身后有余忘缩手,眼前无路想回头.鸟宿池边树,僧敲月下门.想当年,金戈铁马,气吞万里如虎. 本文由418133804贡献 pdf文档可能在WAP端 ...
企业微信H5网页费用报销操作界面 Vue
手机端的H5界面,也可运行在微信中,或者APP内嵌页面,费用报销管理简洁漂亮,设计操作简单明了,使用了vue.js 无缝串联切换网页技术,流畅无比.这个是2017年的作品.有需要的可联系,我有一整套营 ...
企业微信H5踩坑指南
企业微信开发H5功能,正在进行中,需要记录的点有两个: 第一是:域名验证,针对SPA应用,下载下来的验证文件跟index.html同一目录或者使用其他方式,需要保证域名+文件名可以访问即可,再次登录微 ...
Linux Zabbix——企业监控基于钉钉、企业微信实现自动化报警
zabbix基于企业微信.钉钉群聊机器人实现自动化报警在企业中,我们使用zabbix去进行监控,需要时刻关注应用服务的运行情况,这就少不了实时报警,而使用即时通讯软件报警相对就很方便. 监控环境准备 ...
matlab数字图像处理大作业_线上教学优秀案例(16) | 数字图像处理基于蓝墨云+企业微信的线上教学经验分享...
[前言]目前我校在线课堂教学如火如荼,老师们在各大教学平台化身"直播高手""网课达人"倾心打造精彩课堂,有效保证了在线学习与线下课堂教学质量实质等效.为进一步推 ...
企业微信(H5打开)调用微信小程序
这个功能比较坑,有很多坑的点,我先把我的开发过程说一下,最后把我遇到的问题总结. 准备工作 1.需要在微信小程序的管理后台中关联企业微信 2.在企业微信管理后台中设置应用主页 3.在企业微信管理后台中 ...
企业微信H5唤起(打开)微信小程序
1.登录企业微信管理后台(https://work.weixin.qq.com/wework_admin/frame) 2.获取企业ID,我的企业>企业信息>企业ID(ww28b3c6e7 ...
企业微信小程序可用存储空间不足_如何用微信“小程序商城+企业微信”，搭建企业智慧新零售系统？...
许多企业或是个体商家,都做了微信小程序商城,或者是正打算做小程序商城,但是对于小程序商城开发制作好之后的运营却是一头雾水,不知道怎么运营.今天我们说一说"微信小程序商城+企业微信" ...
企业微信H5登录流程，以及遇到的问题解决
企业微信登录官网链接:[企业微信开发](开始开发 - 文档 - 企业微信开发者中心 (qq.com)) 一.企业微信登录流程二.疑难杂症 1. 报错:invalid code 解决方案:查看当前应 ...

基于vue-next(vue3)企业微信H5搭建

背景