vue spa 微信公众项目开发与填坑之旅

Base

        vue-cli2.9.3

注入插件

        1. vuex => 支持状态管理器

        2.vuex-persistedstate => 支持数据状态持久化

        3.vue-router => 支持路由跳转管理

        4. vue-meta =>支持SPA下单独设置页面title以及元信息

        5. axios => 支持ajax数据请求和数据劫持

        6. js-base64 => js转base64

        7. vue-cookies => js存cookie

        8. vConsole =>手机端调式

        9. weixin-js-sdk => 微信公众号sdk

        10.qs      => 将对象 序列化成URL的形式

UI库

        Cube-ui

## 移动端项目css 单位使用

#### rem转换方法：

``` html

html { font-size: 50px      }        body {          font-size: 24px      }        @media screen and (min-width:320px) {          html {              font-size: 21.33px          }          body {              font-size: 12px          }      }        @media screen and (min-width:360px) {          html {              font-size: 24px          }          body {              font-size: 12px          }      }        @media screen and (min-width:375px) {          html {              font-size: 25px          }          body {              font-size: 12px          }      }        @media screen and (min-width:384px) {          html {              font-size: 25.6px          }          body {              font-size: 14px          }      }        @media screen and (min-width:400px) {          html {              font-size: 26.67px          }          body {              font-size: 14px          }      }        @media screen and (min-width:414px) {          html {              font-size: 27.6px          }          body {              font-size: 14px          }      }        @media screen and (min-width:424px) {          html {              font-size: 28.27px          }          body {              font-size: 14px          }      }        @media screen and (min-width:480px) {          html {              font-size: 32px          }          body {              font-size: 15.36px          }      }        @media screen and (min-width:540px) {          html {              font-size: 36px          }          body {              font-size: 17.28px          }      }        @media screen and (min-width:720px) {          html {              font-size: 48px          }          body {              font-size: 23.04px          }      }        @media screen and (min-width:750px) {          html {              font-size: 50px          }          body {              font-size: 24px          }      }      body {          min-width: 320px;          font-family: Arial,Helvetica,STHeiTi,sans-serif;          background: #ffffff;      }

```

``` html

#app { 

font-family: 'Avenir', Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale; 

text-align: center; 

color: #2c3e50; 

margin-top: 60px; 

width: 15rem; 

margin: 0 auto; 

line-height:1.1;

}

```

换率是：50           

项目的设计稿的尺寸为750

750 (px)  /50  = 15rem     

1px= 0.02rem

## Vue Spa 页面的登录

Main.js

``` js

router.beforeEach((to, from, next) => {

//不需要登录的页面 

if (to.path == store.state.no_login.index ||

        to.path== store.state.no_login.shouye ||

        to.path== store.state.no_login.selectadress ||

        to.path ==store.state.no_login.shopdetails ||

        to.path== store.state.no_login.successpm ||

        to.path== store.state.no_login.dynamic

        ) {

        next();

        returnfalse

    }

    //防止用户授权之后点击返回

    if(to.path=== '/author' && store.state.userInfo.nickname){

      next('/');

        returnfalse;

    }

    //没登录，没用户信息都需要跳转中间件页面

  if(!store.state.userInfo.nickname && to.path != '/author'){

      store.state.toUrl = to.fullPath;

      next('/author');

        //return false;

    }

    if(store.state.userInfo.nickname) {

        next();

        returnfalse

    }

    next();

});

```

## Vue spa 微信公众号的 分享

Main.js

import wx from 'weixin-js-sdk';

``` js

    router.afterEach((to, from) => {

  let _url =window.location.origin+"/shop"+ to.fullPath;

  //非ios设备，切换路由时候进行重新签名

  if(window.__wxjs_is_wkwebview !== true) {

    axios.post('/wechat_config',qs.stringify({uri:_url})).then(function (res) {

      //注入配置

    wx.config({

          debug:false,

          appId:res.data.data.item.appId,

        timestamp: res.data.data.item.timestamp,

        nonceStr: res.data.data.item.nonceStr,

        signature: res.data.data.item.signature,

        jsApiList:["updateAppMessageShareData",'updateTimelineShareData','getLocation',"onMenuShareAppMessage","onMenuShareTimeline","onMenuShareWeibo"]

      })

    })

  }

  // ios设备进入页面则进行js-sdk签名

  if(window.__wxjs_is_wkwebview === true) {

axios.post(' /wechat_config',qs.stringify({uri:_url})).then(function(res) {

    wx.config({

          debug:false,

          appId:res.data.data.item.appId,

        timestamp: res.data.data.item.timestamp,

        nonceStr: res.data.data.item.nonceStr,

        signature: res.data.data.item.signature,

      jsApiList:['updateAppMessageShareData','updateTimelineShareData','getLocation',"onMenuShareAppMessage","onMenuShareTimeline","onMenuShareWeibo"]

      })

    })

  }

  let totitle ="";

  let todesc ="";

// to.meta. share 是自定义路由的分享信息

//还可以在router  meta自定义更多参数

if(typeof(to.meta.share) === "undefined"){

      totitle ="我是没有分享自定义的标题";

      todesc ="我是没有分享的分享详情";

  }else{

      totitle =to.meta. share.title;

      todesc =to.meta. share.desc;

  }

  let share = {

      title:totitle, //分享标题

      desc:todesc, //分享描述

      link:_url, //分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

      imgUrl: '',//分享图标正式

      success:function () {

        //设置成功

      }

  }

  //微信分享配置

wx.ready(function () {

    wx.updateAppMessageShareData(share);

    wx.updateTimelineShareData(share);

    wx.onMenuShareAppMessage(share);

    wx.onMenuShareTimeline(share);

    wx.onMenuShareWeibo(share);

    })

})

```

值得注意的是微信1.4版本分享给朋友的最新接口就算在客户端6.7.2版本也是会出现没有图片的问题所以还是将老的版本也写进去兼容一下

## Vue 转换时间戳

Util.js

  ``` js

    export function formatDate (date, fmt) {

    if(/(y+)/.test(fmt)) {

        fmt =fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));

    }

    let o = {

        'M+':date.getMonth() + 1,

        'd+':date.getDate(),

        'h+':date.getHours(),

        'm+':date.getMinutes(),

        's+':date.getSeconds()

    };

    for (let kin o) {

        if (newRegExp(`(${k})`).test(fmt)) {

            letstr = o[k] + '';

            fmt= fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));

        }

    }

    return fmt;

};

function padLeftZero (str) {

    return ('00'+ str).substr(str.length);

};

需要转换的页面引用

import {formatDate} from '@/util.js';

filters: {

      formatDate(time) {

            vardate = new Date(time);

          return formatDate(date, 'yyyy-MM-dd hh:mm');

        }

}

使用：

{{ _time*1000 | formatDate}}

  ```

## vue防止用户疯狂点击和加载

Util.js

``` js

  /**

*函数防抖 (只执行最后一次点击)

* @param fn

* @param delay

* @returns{Function}

* @constructor

*/

export const Debounce = (fn, t) => {

    let delay =t || 500;

    let timer;

    returnfunction () {

        let args= arguments;

      if(timer){

          clearTimeout(timer);

        }

        timer =setTimeout(() => {

          timer = null;

          fn.apply(this, args);

        },delay);

    }

};

/**

*函数节流

* @param fn

* @paraminterval

* @returns{Function}

* @constructor

*/

export const Throttle = (fn, t) => {

    let last;

    let timer;

    let interval= t || 500;

    returnfunction () {

        let args= arguments;

        let now= +new Date();

        if (last&& now - last < interval) {

          clearTimeout(timer);

          timer = setTimeout(() => {

              last = now;

              fn.apply(this, args);

            },interval);

        } else {

            last= now;

          fn.apply(this, args);

        }

    }

};

```

## vue 朋友圈的天数计算

util.js

  ``` js

    caculate_time(created_at){

          letnow_time = new Date().getTime();

          letold_time = parseInt(created_at) * 1000;

          lettime = now_time - old_time;

          let day = parseInt(time / (24 * 60 * 60));//计算整数天数

          //计算出相差天数

          day=Math.floor(time/(24*3600*1000))

          //计算出小时数

          letleave1=time%(24*3600*1000)    //计算天数后剩余的毫秒数

          lethours=Math.floor(leave1/(3600*1000))

          //计算相差分钟数

          letleave2=leave1%(3600*1000)        //计算小时数后剩余的毫秒数

          letminutes=Math.floor(leave2/(60*1000))

          //计算相差秒数

          letleave3=leave2%(60*1000)      //计算分钟数后剩余的毫秒数

          letseconds=Math.round(leave3/1000)

          return[day,hours,minutes,seconds];

        }

使用:

let ts_time = that.caculate_time(val.created_at);

          let msg = '';

        if(ts_time[0] != 0){

                msg =ts_time[0]+'天前';

        }else if(ts_time[1]!= 0){

                msg =ts_time[1]+'小时前';

        }else if(ts_time[2]!= 0){

            msg =ts_time[2]+'分钟前';

          }else if(ts_time[3]!= 0){

            msg = '刚刚';

}

  ```


## Vue spa 用Cube-ui库遇到的问题1

    Cube-ui里面的左右滑动Scroll组件出现滑不懂的情况一定要看.cube-scroll-content是否重定义了display，而且必须是在

    <stylelang="stylus" rel="stylesheet/stylus">下面不然会不生效

.cube-scroll-content

display: inline-block

## Vue spa 用Cube-ui库遇到的问题2

Scroll上拉加载和下拉刷新都必须要设置高度

//获取减去底部导航栏的高度

      let getWindowHeight = (document.documentElement.clientHeight ||document.body.clientHeight) - this.$refs.bottom_h.offsetHeight;

      this.getWindowHeight = getWindowHeight;

div ref= bottom_h    style=heigth:100px

Vue exclude设置不缓存页面没用的问题

        exclude设置对应组件的name,是组件的name，是组件的name，大部分人都认为是路由里面的name

该文章是我在做vue spa项目的时候遇到的一些问题，特地在此记录一下。也希望能帮助到大家

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 199,711评论 5赞 468
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 83,932评论 2赞 376
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 146,770评论 0赞 330
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 53,799评论 1赞 271
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,697评论 5赞 359
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,069评论 1赞 276
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,535评论 3赞 390
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,200评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,353评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,290评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,331评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,020评论 3赞 315
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,610评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,694评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,927评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,330评论 2赞 346
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 41,904评论 2赞 341

推荐阅读更多精彩内容