微信公众号分享
1，微信公众号开发流程
搭环境，先要在公众号里面配置域名账号，前端主要是调取code
getCode(appid) { let fromurl = location.href; this.code = this.getUrlParam("code"); // fromurl = 'http://tg.qihaiyun.cn/#/login' if (!this.code) { let url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" + encodeURIComponent(fromurl) + "&response_type=code&scope=snsapi_userinfo&state=STATE%23wechat_redirect&connect_redirect=1#wechat_redirect"; window.location.href = url; } else { getWxUserInfoByCode({ code: this.code }) .then(res => { if (res.code + "" === "0") { this.res = res.data; window.sessionStorage.setItem( "userInfo", JSON.stringify({ openId: res.data.openId ? res.data.openId : "", headimgurl: res.data.headimgurl, nickname: res.data.nickname }) ); if (res.data.flag === "true") { window.sessionStorage.setItem( "token", JSON.stringify(res.data.token) ); this.$router.push({ path: "/promotion" }); } else { this.$indicator.close(); this.loginFlag = true; } } }) .catch(e => { console.log(e); this.$indicator.close(); this.$toast({ message: "后台错误", position: "top", duration: 2000 }); }); } }, getUrlParam(name) { let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); let r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; },
2。 微信端第一个登陆成功后，第二次不用登陆，这事就要禁止安卓的物理返回键，并且tab栏在底部，页面有输入框是，安卓也会把tab的absolute顶上去，可已监听resize控制
mounted() { this.oHeight = document.documentElement.clientHeight || document.body.clientHeight; //到这个页面后，禁止物理返回键返回 try { history.pushState(null, null, document.URL); window.addEventListener("popstate", this.popstate); window.addEventListener("resize", this.resize); } catch (error) { console.log(error); } }, beforeDestroy() { try { window.removeEventListener("popstate", this.popstate); window.removeEventListener("resize", this.resize); } catch (error) { console.log(error); } }, methods: { resize() { let resizeHeight = document.documentElement.clientHeight || document.body.clientHeight; if (resizeHeight < this.oHeight) { this.footer_show = false; this.$refs.main.style.bottom = 0; } else { this.$refs.main.style.bottom = "60px"; this.footer_show = true; } }, popstate() { history.pushState(null, null, document.URL); },
3. 移动端用到
postcss-px-to-viewport 会自动转化为vs布局，目前微信端木有发现兼容性问题，但是若想使用px，样式文件中必须大写，eg：Px
module.exports = { baseUrl: "./", devServer: { overlay: { warnings: false, errors: false }, proxy: createProxy({}） }, lintOnSave: false, css: { loaderOptions: { postcss: { plugins: [ require('postcss-px-to-viewport')({ viewportWidth: 720, // viewportHeight: 1080, unitPrecision: 5, viewportUnit: 'vw', selectorBlackList: [], minPixelValue: 1, mediaQuery: false }) ] } } },
4. 移动端屏幕旋转
mounted() { window.addEventListener( "orientationchange", this.orientationchangeFunc, false ); }, methods: { orientationchangeFunc() { if (window.orientation === 0) { // console.log("竖屏", this.toast); setTimeout(() => { clearTimeout(this.resize_timer); if (this.toast) this.toast.close(); }, 500); } else { // console.log("横屏", this.toast); this.resize_timer = setTimeout(() => { if (this.toast) this.toast.close(); this.toast = this.$toast({ message: "为了更好的体验，请竖屏浏览！", duration: -1 }); }, 1000); } } }
router.beforeEach((to, from, next) => { //到这个页面后，禁止物理返回键返回 if (to.path === '/xxx' && from.path === '/xxx') { next('/promotion') return } if (to.matched.length === 0) { from.name ? next({ name: from.name }) : next('/'); } else { next(); } })
5.
在移动端编写input输入框时候，为了输入文字与输入框垂直居中，一般情况下，会将input的line-height的高度等于height。但在移动端输入的时候会发现，虽然输入内容确实是垂直居中了，但是光标的位置是靠上的，导致感官上的不美观。于是对input设置的时候，首先确定字体的大小如font-size:16px，其次我们确定设计稿里input的高度，如input高度为40px，那么此时的代码应该是这样的：input{height:16px;line-height:16px;padding:12px 0;border:1px solid #ddd;}，这样的代码在移动端无论是视觉还是输入时都是符合要求的。可是html5出来一个新属性，那就是placeholder，不得不说这个属性的出现解救了以往繁琐的js实现效果，但是，当你给input设置了placeholder后，在pc端看，好像是偏上了那么一点点，好像也不是很影响使用。但是在手机端浏览后，就会发现虽然输入文字可以垂直居中，placeholder里的内容明显的靠上，严重的不美观。
在网上查了一些资料，对于原理性的解释好像基本上没看到。但是国外的网站对这个属性给了一个默认的建议，那就是不要设计input的line-height或者设置line-height为normal，即可。
不过，又发现问题了，虽然在手机端正常，但是在pc端看的时候，placeholder还是有点偏下的感觉。强迫症害死人啊。。。那怎么办。。。设置line-height：1.5em，或者将em换算成实际的px也可以。
