如何使用vue开发公众号网页
通过vue-cli创建项目
安装脚手架工具
npm install -g @vue/cli
# OR
yarn global add @vue/cli
创建一个项目
vue create water_project
关于移动的适配
因为是移动端网页,所以需要做适配。网上有很多适配方案这里就不展开说了,主要说下本项目使用的方案是amfe-flexible结合rem来做的,是淘宝的一种解决方案。关于设计稿的单位px转换为rem使用的是postcss的postcss-pxtorem方案。其实用webpack的loader来做也是可以的,具体方案自行百度
安装amfe-flexible包
npm i amfe-flexible -S
安装postcss-pxtorem插件
npm i postcss-pxtorem -D
在main.js中引入amfe-flexible
import "amfe-flexible"
在vue.config.js中配置postcss插件
项目中如果没有vue.config.js文件就手动创建一个,这个是vue cli的配置文件。
css: {loaderOptions: {postcss: {plugins: [autoprefixer(),pxtorem({rootValue: 37.5,propList: ["*"],}),],},},
到此样式适配已经完成,至于rootValue为什么是37.5.主要是为了vant的适配,所以设计稿以375px为参考。如果没有使用第三方ui库可以设计稿以750为参考,此时rootValue为75。
使用 normalize.css
使用normalize.css来消除浏览器之间的基础样式差异
npm i normalize.css -S
在main.js中引入
import "normalize.css"
接入vant库
vant是有赞出品的一个ui库,站在巨人的肩膀上效率当然是要快很多。这种第三方库只能作为基础,在有设计稿的情况下要对样式进行定制。简单的样式vant都支持主题定制化还是比较方便的,如果有一些样式没有提供自定义主题,就只能写样式进行覆盖了。
npm i vant -S
引入组件有3种方式,官网也有介绍,详情可以查看官网,简单说下使用方式:
方式一. 自动按需引入组件 (推荐)
babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式。
# 安装插件
npm i babel-plugin-import -D
// 在.babelrc 中添加配置
// 注意:webpack 1 无需设置 libraryDirectory
{"plugins": [["import", {"libraryName": "vant","libraryDirectory": "es","style": true}]]
}// 对于使用 babel7 的用户,可以在 babel.config.js 中配置
module.exports = {plugins: [['import', {libraryName: 'vant',libraryDirectory: 'es',style: true}, 'vant']]
};
方式二. 手动按需引入组件
在不使用插件的情况下,可以手动引入需要的组件。
import Button from 'vant/lib/button';
import 'vant/lib/button/style';
方式三. 导入所有组件
Vant 支持一次性导入所有组件,引入所有组件会增加代码包体积,因此不推荐这种做法
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';Vue.use(Vant);
定制vant主题
步骤一 引入样式源文件
定制主题时,需要引入组件对应的 Less 样式文件,支持按需引入和手动引入两种方式。
按需引入样式(推荐)
在 babel.config.js 中配置按需引入样式源文件,注意 babel6 不支持按需引入样式,请手动引入样式。
module.exports = {plugins: [['import',{libraryName: 'vant',libraryDirectory: 'es',// 指定样式路径style: (name) => `${name}/style/less`,},'vant',],],
};
手动引入样式
// 引入全部样式
import 'vant/lib/index.less';// 引入单个组件样式
import 'vant/lib/button/style/less';
步骤二 修改样式变量
使用 Less 提供的 modifyVars 即可对变量进行修改,下面是参考的 webpack 配置。
// webpack.config.js
module.exports = {rules: [{test: /\.less$/,use: [// ...其他 loader 配置{loader: 'less-loader',options: {// 若 less-loader 版本小于 6.0,请移除 lessOptions 这一级,直接配置选项。lessOptions: {modifyVars: {// 直接覆盖变量'text-color': '#111','border-color': '#eee',// 或者可以通过 less 文件覆盖(文件路径为绝对路径)hack: `true; @import "your-less-file-path.less";`,},},},},],},],
};
如果 vue-cli 搭建的项目,可以在 vue.config.js 中进行配置。
// vue.config.js
module.exports = {css: {loaderOptions: {less: {// 若 less-loader 版本小于 6.0,请移除 lessOptions 这一级,直接配置选项。lessOptions: {modifyVars: {// 直接覆盖变量'text-color': '#111','border-color': '#eee',// 或者可以通过 less 文件覆盖(文件路径为绝对路径)hack: `true; @import "your-less-file-path.less";`,},},},},},
};
引入微信jssdk
引入jsssdk有两种方式,一种是用js链接直接引入,写在index.html中。
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js "></script>
然后在使用的地方就调用window.wx.xxx就能使用sdk提供的方法了。
第二种就是使用npm包的方式
安装weixin-js-sdk
npm i weixin-js-sdk -S
在main.js中使用
import wx from "weixin-js-sdk"// 挂在vue的原型上方便使用
Vue.prototype.$wx = wx;
这样引入之后就可以用this.$wx.xx来使用相应的方法了比如:
this.$wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。appId: res.data.appId, // 必填,公众号的唯一标识timestamp: String(res.data.timestamp), // 必填,生成签名的时间戳nonceStr: String(res.data.nonceStr), // 必填,生成签名的随机串signature: res.data.signature, // 必填,签名,见附录1jsApiList: ["getNetworkType","getLocation",], // 必填,需要使用的JS接口列表,所有JS接口列表见附录2});
注册验证sdk才可以使用api
其实注册的重要逻辑都在后端,提供一个获取配置信息的接口,前端直接调用sdk的config方法进行注册就好了。这里把sdk的注册逻辑写在app.vue文件中
封装一个注册sdk的方法
async getWxJssdkConf() {const res = await this.$api.getSdkConfig({url: window.location.href.split("#")[0],});if (res.success) {this.$wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。appId: res.data.appId, // 必填,公众号的唯一标识timestamp: String(res.data.timestamp), // 必填,生成签名的时间戳nonceStr: String(res.data.nonceStr), // 必填,生成签名的随机串signature: res.data.signature, // 必填,签名,见附录1jsApiList: ["getNetworkType","getLocation",], // 必填,需要使用的JS接口列表,所有JS接口列表见附录2});this.$wx.ready(() => {this.$wx.checkJsApi({jsApiList: ["getNetworkType", "getLocation"], // 需要检测的JS接口列表,所有JS接口列表见附录2,success: function (res) {console.log("checkJsApi", res);},});});this.$wx.error((res) => {console.log("wx.error", res);});}},
created() {this.getWxJssdkConf();},
其中this.$api.getSdkConfig为调用后台的接口,这里是给api也挂载到了vue的原型上,方便使用不用每个页面都去引入api
Vue.prototype.$api = api
在app.vue中注册成功后,就可以使用sdk的api了。
微信的授权
如果要获取用户的信息,就必须让用户进行授权。在授权的时候使用的是微信提供的接口,详细请看这里,如果是只获取用户的openid只用静默授权就可以了,不用用户主动授权。具体请看文档,这里只需要openid就使用静默授权如下:
在需要授权的主入口使用,比如这里是主页Home,要先调用微信的接口获取code,在用code去后端换取openid
/*** @description: 获取授权code* @param {*}* @return {*}*/getCode() {// 从 window.location.href 中截取 code 并且赋值// window.location.href.split('#')[0]if (window.location.href.indexOf("state") !== -1) {this.code = qs.parse(window.location.href.split("#")[0].split("?")[1]).code;} if (this.code) {// 存在 code 直接调用接口this.handGetUserInfo(this.code);} else {this.handLogin();}},/*** @description: 获取用户授权登陆* @param {*}* @return {*}*/handLogin() {// 重定向地址重定到当前页面,在路径获取 codeconst hrefUrl = window.location.href;if (this.code === "") {window.location.replace(`https://open.weixin.qq.com/connect/oauth2/authorize?appid=XXXXXXXX&redirect_uri=${encodeURIComponent(hrefUrl)}&response_type=code&scope=snsapi_base&state=h5#wechat_redirect`);}},/*** @description: 获取用户信息* @param {*} code* @return {*}*/handGetUserInfo(code) {// 调用后台接口},
这里就是授权的主要逻辑,没啥意外就基本走通了。
断网进行提示
如果用户的网络断了,就跳转到断网提示页。主要使用的是html提供的方法进行判断,判断逻辑写在app.vue文件中,因为每个页面都会提示,就直接在主入口进行处理。
mounted() {window.addEventListener("online", this.updateOnlineStatus);window.addEventListener("offline", this.updateOnlineStatus);},methods: {updateOnlineStatus(e) {const { type } = e;console.log("type==============", type);this.onLine = type === "online";},}beforeDestroy() {window.removeEventListener("online", this.updateOnlineStatus);window.removeEventListener("offline", this.updateOnlineStatus);},
主要就是这个方法来检查用户网络连接情况
判断是不是微信打开的网页
这里主要使用的是vue-router的导航守卫来做的,在跳转之前对浏览器进行判断,如果不是微信内置浏览器就直接跳转到异常提示页
router.beforeEach((to, from, next) => {const ua = navigator.userAgent.toLowerCase();if (to.path !== "/notwx" &&!(ua.match(/MicroMessenger/i) == "micromessenger")) {next("/notwx");} else {next();}
});
有时跳转页面,页面的滚动高度会保留在上个页面的滚动高度,这里也是在导航守卫中解决的,主动给滚动到顶部
router.afterEach(() => {window.scrollTo(0, 0);
});
如何使用vue开发公众号网页相关推荐
- vue做公众号网页时title的自定义问题
一般来说vue单页面应用的title在index.html中设置,但是一旦设置就是唯一了,对此有了以下需求: 需要实现不同的页面对应不同的title, 特别是微信公众号时,有了自带的头部栏,在vue2 ...
- VUE 实现公众号网页微信授权登录
这里不做过多的解释,具体了解见官网文档. 网页授权官方文档 需要准备工作: 1.微信开发者工具 2.公众号添加开发者权限以及本地IP白名单 3.公众号唯一标识:appID 4.公众号配置网页授权域名 ...
- vue开发公众号-关闭浏览器返回主公众号
setTimeout(()=>{// 两种方法都行 不加setTimeout方法二可能失效//方法1:不需要jssdkdocument.addEventListener('WeixinJSBri ...
- vue开发公众号 在钩子里面处理登录获取code
const baseurl = "//xxx" // 解析url参数并获取codefunction getUrlParam(name) { //name为要获取的参数名var re ...
- Vue开发微信公众号网页跳转小程序
需求描述:Vue开发的公众号网页,点击图标跳转小程序 公众号中跳转小程序,一般是配置菜单栏跳转即可,但是我们需要在页面中跳转,就需要微信的开放标签了 微信开放标签说明文档 此文档面向网页开发者,介绍微 ...
- 公众号开发(2) —— 盛派.net SDK + vue搭建微信公众号网页开发框架
需求:通过微信公众号菜单跳转到手机端网页,跳转后通过微信授权登录获取微信公众号用户的OpenId(用户关注公众号后,用户在公众号的唯一凭证),通过OpenId和后台数据库用户信息绑定起来并实现一些业务 ...
- 微信公众号网页授权--前端获取code及用户信息(vue)
前段时间开发微信公众号网页授权,虽然网上已经有很多关于这方面的博客或者教程,但是第一次开发还是遇到挺多坑的,以下分享一下我的踩坑填坑之路. 一.测试号相关配置 首先在你公司申请的测试号上配置好相关信息 ...
- uniapp开发微信公众号网页-微信JSSDK使用
uniapp开发微信公众号网页-微信JSSDK使用 一. 安装jweixin-module 二. 新建js文件,把jssdk的接口简单封装,然后挂载到vue实例 1. 在js公共文件夹下创建wecha ...
- vue3+vant开发微信公众号网页爬坑不完全指北
点击上方 前端Q,关注公众号 回复加群,加入前端Q技术交流群 前言 8月底的时候接到了一个微信公众号网页开发的任务, 在此之前我从没开发过微信公众号网页的项目, 心想这回又能学到新东西了, 然后又是移 ...
最新文章
- Linux grep,egrep及相应的正则表达式用法详解
- 跳出数据计算拯救人工智能之自然法则
- Silverlight实用窍门系列:47.Silverlight中元素到元素的绑定,以及ObservableCollection和List的使用区别...
- (Matlab)从已知向量中随机提取若干元素
- 个人学习Linux决心书
- Redis配置文件常用配置详解
- 常见MOS管型号及参数对照表
- 清华北大毕业生都进体制内了?
- Java 8日期时间API教程:LocalDateTime
- linux awk菜鸟教程,Linux awk 命令
- 数据结构—链表—单链表应用-增序排列节点
- Web Hacking 101 中文版 六、HTTP 参数污染
- Spring Boot 文件上传
- 【GNN】图网络|图神经网络(GNN)结构化数据分析
- orcale和mysql跨库查询_Oracle如何实现跨库查询
- 计算机网络上有个红叉没无线,电脑无线网络连接不上显示红叉
- linux lighttpd,linux下lighttpd服务器的详细安装步骤 以及对flv流媒体的支持配置
- Java使用MongoTemplate操作MangoDB,实现根据时间等条件组合查询,解决ISODate的问题
- b区计算机专业调剂容易的学校,2021考研b区容易调剂的学校有哪些
- 微票儿项目_(使用Bootstrap框架)