微信小程序开发

微信小程序开发

近期在开发微信小程序，使用的是原生的写法，没有采用框架，写起来十分费劲，小程序原生不支持promise，async await等es6的新特性（要引入垫片库支持，比较麻烦），采用的是类似jq的ajax回调，而微信本身api众多都是异步的，所以导致很容易陷入回调地狱而且原生写法每增加一个组件或者页面要增加三个文件（wxml,wxss,js）,不太习惯，，开发体验很差，因为我是中途加入这个项目的，之前已经用原生的开发了,日后的开发个人觉得应该使用框架QAQ,(wepy这个是腾讯自己的框架，有团队在维护，稳定性相对较好)

小程序组件scroll-view

使用scroll-view水平方向滑动的时候，内部嵌套的元素要使用display：inline-block;父级本身要添加white-space：no-wrap;这样才能在水平方向滑动

获取用户信息

获取用户信息要使用wx.getUserInfo这个api,之前是可以直接调用的，现在改成了要绑定在button组件上，由用户主动触发才会弹出授权面板(表示不理解这样做的意义何在。。。)

展开全文 >>

http和https的区别

  1. http和https的区别
  2. 由于浏览器的安全策略限制，在http站内只能使用http协议去请求接口，同样的在https站内只能使用https协议去请求接口，请求资源时不会被限制但控制台会有警告，所以网页中请求资源或者接口时,使用//,不要写死http或者https，这样在http站就会使用http协议,在https站内就会使用https协议
    1
    <a href='//www.baidu.com'></a>

展开全文 >>

博客接入gitment系统

为博客接入评论系统

1.OAuth Application注册
image

  • Application name随意填
  • Homepage URL填博客地址我的填的就是(https://mrzbf.github.io/)
  • Application description随便填
  • Authorization callback URL填博客地址(https://mrzbf.github.io/)
    2.OAuth Application注册成功以后，将得到的Client ID和Client Secret填入对应主题文件夹下的_config.yml中，
    image
  • gitment_owner填入自己的GitHub账户名
  • gitment_repo填入自己储存评论的仓库名称
  • client_id和client_secret则填入申请OAuth Application得到的对应的Client ID
    3.信息填写完毕后访问自己的博客地址，然后使用自己的GitHub账号登录评论系统，登录后点击Initialize Comments初始化评论即可。

展开全文 >>

vue中router-link的replace属性、iframe存在的坑、IntersectionObserver的使用、webpack启动本地服务的配置

移动端iframe的坑

  • 由于公司业务需求，开发的h5被嵌入iframe中，导致了一系列的问题（iframe这个东西是真的坑qAq），iframe导致页面滑动很卡，不流畅。
  • 在ios内，无法检测到iframe内部的滚动，导致滚动加载失效(最后使用点击加载更多解决),后来发现其实可以用IntersectionObserver,垫片库(ps:不得不说,阮一峰老师的博客确实干货满满)
  • 页面使用vue开发，有个类似tab切换时是用路由实现的，导致浏览器回退会进行tab切换，在router-link标签上加上replace属性即可阻止浏览器的路由回退。

    如何将本地页面在手机上浏览

    手机和电脑在同一个局域网内，vue中在config里面的index.js中将webpack的服务启动的host改成0.0.0.0,然后通过访问本机ip:端口号就可以访问到页面了。
    image
    使用宝塔也可以这么玩，host为0.0.0.0就行了。
    image
    总的来说，只要你起的服务host是0.0.0.0,就可以在局域网中通过手机访问。

    防连击操作

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    //1.存在异步操作的时候
    var flag=false;
    dom.click=function(){
        if(flag){
            return false;
        }
        flag=true;
        //异步操作
        axios()
        .then(function(){
        
        })
        .catch(function(){
            
        })
        //如果是用ajax发的请求，则在complete回调函数中将flag改为false;
        .finally(function(){
           flag= false; 
        })
    }
    //2.没有异步操作的时候
    dom.click=function(){
        if(localStorage.getItem('a')){
            return false;
        }
        localStorage.setItem('a','1');
        setTimeout(function(){
         localStorage.removeItem('a');
      },300)
    }

移动端滑动穿透

移动端弹出有一个fixed定位的弹层，弹层内有滚动条，当滚动弹层内容时，body会跟随滚动，这种现象叫滚动穿透。解决方案，当出现弹层的时候给body加上.fixed{position:fixed}的类或者给html和body加上.over{overflow:hidden}的类并记录下页面滚动距离，等弹层消失的移除相应类名并滚动到对应位置。代码地址
移动端加overflow: scroll;滑动会很卡，这时需要对需要滑动的盒子加上 -webkit-overflow-scrolling: touch;这样滑动会变得流畅。

展开全文 >>

html2canvas插件的使用、ajax中contentType参数的配置、css中background-attachment属性的使用

html2canvas踩坑

1.官方文档

2.开发中遇到需要js截图的需求，其实将dom转换成图片，可以将dom在canvas中画出来（html2canvas实现了该功能），再将canvas转换成base64的图片。而在这中会遇到一个问题，浏览器的安全策略是如果canvas中存在不同源的资源，则无法转换成base64的图片，这个时候则需要用到image的crossorigin属性,同时图片服务器需要设置请求头Access-Control-Allow-Origin即可；

1
<image crossorigin='anonymous'/>

ajax参数

1
2
3
4
5
$.ajax({
url:'',
dataType:'',
contentType:'application/x-www-form-urlencoded'//默认值如果后端需要传json，则需要改为'application/json'
)

移动端让背景图100%充满body

1
2
3
4
5
6
body {
 background:url("../images/home_img.png") no-repeat center;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  background-attachment: fixed;
}

展开全文 >>

微信分享

微信网页开发踩坑

  • 开发微信公众号的h5页面时，会碰到一些微信分享之类的功能，这时便需要调用微信的js-jdk实现对应的功能。
  • 微信JS-SDK说明文档
  1. 绑定域名(js接口)以及开发者权限配置
  2. 页面内引入js文件（http://res.wx.qq.com/open/js/jweixin-1.2.0.js）
  3. 通过config注入权限验证配置
    1
    2
    3
    4
    5
    6
    7
    8
    9
    // 配置由后端提供
    wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: '', // 必填，公众号的唯一标识
        timestamp: , // 必填，生成签名的时间戳
        nonceStr: '', // 必填，生成签名的随机串
        signature: '',// 必填，签名这里有坑，前端分享的url要和后端配置的url一样，因为签名是由这个玩意生成的。
        jsApiList: [] // 必填，需要使用的JS接口列表
    });

4.通过ready接口处理成功验证

1
2
3
4
//建议wx接口的调用都放在ready的回调函数中，虽然开发文档说用户行为触发的接口调用不用放在ready中，但亲测不行。
wx.ready(function(){
  
});

5.分享接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
//分享到朋友圈(据文档说即将废弃)
wx.onMenuShareTimeline({
    title: '', // 分享标题
    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: '', // 分享图标
    success: function () {
    // 用户点击了分享后执行的回调函数
},
//分享给朋友(据文档说即将废弃)
wx.onMenuShareAppMessage({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: '', // 分享图标
    type: '', // 分享类型,music、video或link，不填默认为link
    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
    success: function () {
    // 用户点击了分享后执行的回调函数
}
});
//分享到QQ
wx.onMenuShareQQ({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接
    imgUrl: '', // 分享图标
    success: function () {
    // 用户确认分享后执行的回调函数
},
    cancel: function () {
/   / 用户取消分享后执行的回调函数
}
});
//分享到腾讯微博(个人觉得废弃朋友圈的接口还不如废弃这个接口，因为没人用，哈哈哈)
wx.onMenuShareWeibo({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接
    imgUrl: '', // 分享图标
    success: function () {
    // 用户确认分享后执行的回调函数
    },
    cancel: function () {
    // 用户取消分享后执行的回调函数
}
});

  1. 其他接口参考文档(ps:因为我也没用过)

展开全文 >>

vuex入门总结

使用 Vuex 并不意味着你需要将所有的状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件，最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。

  • 项目目录结构
    image
  • 1.state想当于一个全局变量，同一模块中的任何组件都可以访问到它的值。
  • 2.Mutation更改vuex内state中的状态，mutation中只能进行同步操作，官方文档中建议使用常量替代Mutation事件类型。
  • 3.action提交mutation不直接修改state中的状态，一般将异步操作放在action中。
  • 4.getter对state中的状态进行计算
  • 5.module,将vuex中的store分割成模块，每个模块拥有自己的state，mutation，action
  • 6.在组件中使用store，用map系列函数（mapState、mapMutations、mapActions、mapGetters）将其映射修改，就可以在组件中使用this.名称进行访问。

    tips:

  • mapState、mapMutations、mapActions、mapGetters是vuex内的对象不能写错,在index.js中对store进行封装和导出。
  • 使用vuex的时候对状态进行权衡，不必所有的状态都放入state中。

展开全文 >>

vue中$set的使用、vue-router使用history模式服务端配置、webpack中服务器代理的配置

vue中只有在data中添加的属性，属性值发生改变，视图才会响应，后添加的属性，也要视图对其变化发生响应应该使用vue实例中的$set方法；

1
this.$set(target, key, value);

vue项目部署

  1. 使用路由的history模式的时候，会出现路由刷新404的情况，这时需要前后端配合处理才行，vue-router的相关配置如下
    1
    2
    3
    4
    export default new Router({
      mode: 'history',
      base: '/hot/', //加上这一行,hot即部署在服务器上的文件夹名称
    })

服务端也需要对服务器配置做出相应处理(nginx配置如下)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
location /hot { 


# 此处root为hot的上级目录


root /data/nginx/wwwroot/; 


index index.html index.htm;


if (!-e $request_filename) {


rewrite ^/(.*) /hot/index.html last;


break;

location /hot { 


# 此处root为hot的上级目录


root /data/nginx/wwwroot/; 


index index.html index.htm;


if (!-e $request_filename) {


rewrite ^/(.*) /hot/index.html last;


break;


}


#也可以用try_files


#try_files $uri $uri/ /hot/index.html;

}

2.关于接口处理和资源引入路径问题
接口处理

1
2
3
4
5
6
7
8
9
10
11
//代理配置，在webpack中config中配置请求接口时将完整接口地址拼接上即可 如www.abc.com/api/user/isLogin ,请求是地址为user/isLogin;
proxyTable: {
      "/api": {
        target: 'www.abc.com/api/',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
// 引入路径问题，将webpack的config文件中assetsPublicPath的值修改为这个值即可，使用相对路径引入。
  assetsPublicPath: './',

展开全文 >>

常见的meta标签、webview中和原生交互以及swiper的使用

页面中无交互和app(andriod,ios)传递信息

  • 加入meta标签即可,app端可以获取到meta标签的内容（可用于内嵌页于app中的分享信息的传递）;
    1
    <meta name='shareTitle' content="message">

使用swiper时候遇上的坑(官方文档)

  1. 当swiper中包含图片且图片是异步动态加载的时候，初始化swiper的时候添加observer属性即可
    1
    2
    3
    4
    5
    6
    var mySwiper = new Swiper('.swiper-container', {
        direction: 'horizontal',
        autoHeight: true,
        observer: true,
        observeParents: true,
      });

2.当swiper是嵌套在tap切换的时候，会导致swiper失效（swiper官方文档说加上observer属性即可，但我试了没用，可能我的tab切换并没有多个div，而是同一个div改变的数据的原因）

1
2
3
4
5
6
7
8
9
10
11
12
13
//在切换的时候摧毁上一个swiper实例，新建另一个实例即可
var swpierTab = null;
$("tab").click(function(){
    if (swpierTab){
        swpierTab.destroy()
    }
    swpierTab = new Swiper('.swiper-container', {
        direction: 'horizontal',
        autoHeight: true,
        observer: true,
        observeParents: true,
     });
})

常用的meta标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!--属性为name-->
<!--网站信息描述类型-->
<meta name="keywords" content="关键字" />
<meta name="description" content="网站描述" />
<meta name="author" content="网站作者" />
<!--视口标签定义用户是否能缩放，网页的缩放比之类的-->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!--双核浏览器的渲染方式-->
<meta name="renderer" content="webkit/ie-comp/ie-stand" />
<!--定义referrer策略-->
<meta name="referrer" content="no-referrer|origin|no-referrer-when-downgrade|origin-when-crossorigin|unsafe-url" />
<!--忽略识别电话和邮箱-->
<meta name="format-detection" content="telephone=no" /> //忽略数字自动识别为电话号码
<meta name="format-detection" content="email=no" /> //忽略识别邮箱

<!--属性为http-equiv-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   //旧的HTML，不推荐
<meta charset="UTF-8" >   //HTML5设定网页字符集的方式
<!--用于告知浏览器以何种版本渲染当前页面-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />   //优先使用IE最新版本和Chrome
<!--禁止浏览器从本地计算机的缓存中访问页面内容-->
<meta http-equiv="Pragma" content="no-cache" />
<!--让网页在一定的时间内刷新自己，或者在多长时间后跳转到其他网页-->
 <meta http-equiv="refresh" content="30" >   //30s后刷新自己
 <meta http-equiv="refresh" content="30;URL="http://www.baidu.com" >   //30s后跳转到百度
 <!--expires：指定网页的过期时间，过期后必须重新请求服务器-->
<meta http-equiv="expires" content="Sat, 29 Apr 2017 04:25:02 GMT" >

展开全文 >>

宝塔代理配置、css文字溢出处理、jq懒加载插件使用、腾讯视频开发文档、webview中js与原生app交互、rem布局、js唤醒app

  1. jq懒加载插件 https://github.com/tuupola/jquery_lazyload
    三步走 data-original属性 图片宽高必须设置一个 调用lazyload方法，配置相关参数
  2. 腾讯视频开发文档 http://v.qq.com/open/doc/tvpapi2.0.pdf
  • 3.文字溢出处理
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <!--单行溢出-->
    .one_txt_cut {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    <!--多行溢出-->
    .txt_cut {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

宝塔代理配置

1.下载宝塔，安装所需环境webserver使用nginx，php使用共生版本
image
2.点击网站，创建网站，填写域名和对应文件夹路径，根目录为项目文件的路径；
image
3.点击环境，nginx旁边的小文件夹打开vhost文件夹下的对应域名的config文件
image
3.修改对应域名的config文件，在config文件下添加以下代码
location /api/{
proxy_pass http://m.yl.test.tkinghr.com/api/;
}
js中ajax请求就使用/api/+完整路径,例如/api/act/ridSingle/saveActRidSingle，http://m.yl.test.tkinghr.com/api/;是48测试服的接口路径，如果需要和后端本地联调，改成对方的ip地址即可。
如果完整的请求地址是这样的http://m.yl.test.tkinghr.com/mall/act/ridSingle/saveActRidSingle;则需要按下面的方法修改config文件，其实本质是webserver会将“/api/"映射成http://m.yl.test.tkinghr.com/api/，对本地请求做个代理，便不会产生跨域，上线后服务器上是不存在跨域的，所以这样做就可以同时保证代码上线后又能访问到正常接口地址；
location /mall/{
proxy_pass http://m.yl.test.tkinghr.com/mall/;
} js中ajax请求就使用/mall/+完整路径
image

4.重启宝塔；
5.在浏览器中通过对于域名加文件路径访问页面，例如127.0.0.3/index.html; 127.0.0.3会映射成你项目的根路径，所以直接补全页面的路径就可以访问，至此即可解决跨域问题，调试时使用127.0.0.3跑项目即可；

IOS中position:fixed的弹出框中的input出现光标错位的问题

1
2
3
4
5
6
7
8
9
<!--弹框出现的时候给body加上如下的类-->
.fixed {
    position: fixed;
    width: 100%;
}
<!--弹框消失的时候-->
.por {
    position：relative;
}

js调用原生app的方法；

1
2
3
4
//andriod
window.control.tologin(2); //control为android提供的对象名称，tologin为方法名，2为参数；
//ios
window.location.herf="ios://tologin?needVaildeMobile=2" // tologin为方法名，needVaildeMobile为参数名，2为参数值;

淘宝rem布局（flexible.js）

  • flexible的原理是将屏幕分成100份，所以设计图的尺寸除以100即是rem的基准值（750的设计图1rem=75px,640的设计图1rem=64）；
  • flexible会根据设备的dpr来更改viewport的缩放比例，所以无需设置视口meta标签；
  • 在引入所有资源之前引入flexible.debug.js和flexible_css.debug.js；

    js唤醒app（app存在则跳转，不存在则跳下载链接,ios直接跳转appstore）

  • js唤醒app需要app端的配合，可采用两种方式（iframe和window.location）,但有些手机浏览器不支持iframe，故采用window.location的方式进行跳转。

  • 方式一 window.location的方式跳转

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    // 获取浏览器信息
    var usertype = window.navigator.userAgent,
        appSrc = {
          ios: "YouLanW://",
          android: "youlan://daile.com/launcher"
        },
        downloadSrc = {
          ios: "https://itunes.apple.com/cn/app/id1071374655?mt=8",
          andriod: "https://t.growingio.com/app/at2/QPDLNrPN_o"
        };
    //开启定时器给用户一个缓冲时间
      window.setTimeout(function () {
      // 对客户端进行判断（ios和安卓端），跳转对应的链接（链接由ios和Android的开发人员提供），如果手机上存在app就会跳转，不存在就会跳转对应链接
        if (usertype.indexOf('Android') > -1 || usertype.indexOf('Linux') > -1) {
          window.location.href = appSrc.android ;
          window.setTimeout(function () {
            window.location.href = downloadSrc.android;
          }, 1000)
        } else if (usertype.indexOf('iPhone') > -1 || usertype.indexOf('iPad') > -1) {
          window.location.href = appSrc.ios;
          window.setTimeout(function () {
            window.location.href = downloadSrc.ios;
          }, 1000)
        }
      }, 1000);

  • 方式二 iframe的方式跳转

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    var usertype = window.navigator.userAgent,
       ifrSrc = {
         ios: "YouLanW://",
         android: "youlan://daile.com/launcher"
       },
       downloadSrc = {
         ios: "https://itunes.apple.com/cn/app/id1071374655?mt=8",
         andriod: "https://t.growingio.com/app/at2/QPDLNrPN_o"
       },
     ifr = document.createElement('iframe');
     ifr.style.display = 'none';
     if (usertype.indexOf('Android') > -1 || usertype.indexOf('Linux') > -1) {
       ifr.src = ifrSrc.android;
       document.body.appendChild(ifr);
       ifr.onerror = function () {
         ifr.src = downloadSrc.andriod;
       }
       window.setTimeout(function () {
         document.body.removeChild(ifr);
       }, 2000);
     } else if (usertype.indexOf('iPhone') > -1 || usertype.indexOf('iPad') > -1) {
       ifr.src = ifrSrc.ios;
       document.body.appendChild(ifr);
       ifr.onerror = function () {
         ifr.src = downloadSrc.ios;
       }
       window.setTimeout(function () {
         document.body.removeChild(ifr);
       }, 2000)
     }

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

致力于重回颜值巅峰的一枚小胖子<br>ps:头像是瘦的时候<br>一只假文艺的前端程序猿