微信公众号分享

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也可以。