在小程序里面用观察者模式?解决登陆后变化刷新的功能

为什么要在小程序里面加这个观察者呢?因为今天有一个群友说,他有一个页面登陆之后,有一个页面需要刷新一下界面。

1.第一步先引用js库
下载https://github.com/kyo4311/mylab/blob/master/event-emitter/emit.js这个JS文件,放到小程序的utils目录下面,命名为emitter.js

2.在globalData上面添加一个emitter

var EventEmitter = require('./utils/emitter.js');

App({
    globalData: {
       emitter: new EventEmitter()
    }
});

3.在A页面添加一个监听者login

var emitter = getApp().globalData.emitter;

emitter.on('login', function(){
  that.setData({
    login: true
  });
});

3.在A页面,触发login

var emitter = getApp().globalData.emitter;
emitter.emit('login');

简单三步搞定,如果有帮到你请支持一个star

https://github.com/kyo4311/mylab/tree/master/event-emitter

微信小程序swiper组件怎么样变成正方形?高度怎么控制?

思路:拿到设备的宽度,比如375,然后在swiper上面设置高度为设备的宽度。

1. 拿到设备的宽度

Page({
  data: {
    imgUrls: [],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 300,
    circular: true,
    windowWidth: 0
  },
  onLoad: function (option) {
    var that = this;

    //拿到屏幕宽度
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          windowWidth: res.windowWidth
        });
      }
    });
  }
})

2. swiper加上高度

<swiper style="height:{{windowWidth}}px;" indicator-dots="{{indicatorDots}}" circular="true" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}" wx:key="goodsImages">
    <swiper-item class="swiper-item">
      <image src="{{item.image.image_path}}" mode="widthFix" class="slide-image"/>
    </swiper-item>
  </block>
</swiper>

微信小程序html原样输出怎么解决?

微信小程序html原样输出怎么解决?因为小程序不支持html解析,所以我们把html里面的代码用正则抓下来,最主要的就是文字和图片。把他变成一个数组,然后在小程序去循环输出。

<?php  
$_arr = preg_split('/(<img.*?>)/i', $content, -1, PREG_SPLIT_NO_EMPTY | PREG_SPLIT_DELIM_CAPTURE);  
$_r = array();  
foreach($_arr as $_txt) {  
    if(substr($_txt, 0, 4) == '<img') {  
        $_matchs = array();  
        preg_match('/<img.*?src="(.*?)"/i', $_txt, $_matchs);  
        $_txt = $_matchs[1];  
        if(preg_match('/^\//', $_txt)) $_txt = $gupload.$_txt;  
        $_r[]= array('type'=>'img', 'data'=>$_txt);  
    }else {  
        $_txt = preg_replace('/&.*?;/', ' ', $_txt);  
        $_txt = preg_replace('/\s+/', ' ', $_txt);  
        $_txt = preg_replace(array('/<br.*?>/i', '/<p.*?>/i', '/<li.*?>/i', '/<div.*?>/i', '/<tr.*?>/i', '/<th.*?>/i'),  
                        "\n", $_txt);  
        $_txt = preg_replace('/<.*?>/', '', $_txt);  
        $_r[]= array('type'=>'txt', 'data'=>$_txt);  
    }  
}  
$_data = array('title'=> $title, 'info'=> $inputtime, 'content'=> $_r);  
echo json_encode($_data);  
?>  

有了数据之后,小程序里面输出模板

<template name="img">  
    <view>  
<image class="content-img" mode="aspectFit" src="{{item.data}}"></image>  
    </view>  
</template>  
<template name="txt">  
    <view>  
        <text>{{item.data}}</text>  
    </view>  
</template>  
          
<view class="content">  
    <block wx:for="{{content}}">  
        <template is="{{item.type}}" data="{{item}}"/>  
    </block>  
</view>  

第一天开发微信小程序,碰到的两个坑

第一坑:用了swiper组件,发现图片宽度不能100%,在image上面设置宽度为100%无效。
解决办法,加class,加样式width: 100vw;解决!

第二坑:有一个页面有全屏背景图,写了css background-image: url(“bg.png”);发现在ide上面是显示背景图的,但是到了手机,就不显示了。
解决办法:用网络图片,或是用base64的图片解决。

一个支持IE8的环形进度条jQuery插件

一个支持IE8的环形进度条jQuery插件

这是这个星期新造的轮子,以前也有这个需求,网上找插件还是比较难找的,这回花一点时间自己写了一个。

主要特点:
支持IE8,低版本浏览器采用vml实现
高版本浏览器,可选择svg或是canvas

还是查看github吧 https://github.com/kyo4311/arc-progress

在写这个插件的时候也学到很多东西,本来只听说过vml,并从来没有去搞过他,svg也是很少搞。这回算是都玩了一下了。

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

这个加了之后IE8下面就不支持vml了。

去掉html标签的正则表达式

正则表达式比较弱,还好有一个正则很厉害的同事,要了一个正则,然后改造一下,先把这个方法存下来,以后会用到的。

//移去不需要的标签
String.prototype.stripTags = function(tags){
    var reg = new RegExp('(<(?:\/)?['+tags+'][^>]*>)', 'g')
    return this.replace(reg, '');
};

//保留需要的标签
String.prototype.leftTags = function(tags){
    var reg = new RegExp('(<(?:\/)?[^(?:\/)?'+tags+'][^>]*>)', 'g')
    return this.replace(reg, '');
};

var str1 = '<p>aaa<u>事业</u>bbb</ p><p>ccc<a href="/shiye/" class="inekey" target="_blank">事业</a>ddd</p>'.stripTags('up');
console.log(str1);

var str2 = '<p>aaa<u>事业</u>bbb</p><p>ccc<a href="/shiye/" class="inekey" target="_blank">事业</a>ddd</p>'.leftTags('p');
console.log(str2);

mysql导入导出

数据库导出

mysqldump -uroot -p dbname tablename >D:/a.sql
mysqldump -uroot -p dbname tablename --where="条件">D:/a.sql

数据库导入

mysql -uroot -p 密码登陆数据库
use 某个需要导入的数据库
souce D:/a.sql就可以快速导入了

微信a链接的奇怪bug及解决方案

今天微信H5开发碰到一个奇怪的问题。问题是这样子的。

首先有三个页面:
A页面:这是一个扫一扫页面,主要功能调起微信扫一扫
B页面:扫描后跳转的页面,然后输入一些东西,跳转到C页面
C页面:一个信息提示页,上面有一个A链接(返回按钮),点击后可以回到A页面。

也就这么,这三个页面是可以一直轮回的。

可事实不是这样子的,第一次可以轮回,但是第二次到C页面的时候,就再也回不到A页面了。

抓包看了C页面,返回的html都是对的,链接也是对的,好!点击返回按钮,接着抓包,发现很神奇的现象,返回了A页面的html,但是微信页面还是留在了C页面

问题就这样子。这个问题是怎么来的,现在也没有搞明白。但是解决这个问题还是可以的,灵机一动,在链接(返回按钮)上面加一个时间戳,就这么轻松的解决了!

最简单的模板方法一个

最简单的模板方法一个,很多时候只想用简单的字符串替换一下变量,就用这个了。

function template(template, data) {
    return template.replace(/#\{([\s\S]+?)\}/g, function(a, b){
        return data[b];
    });
}

var html = template('<div>hi#{name},#{age}</div>', {name:'张三', age:'10'});
console.log(html);

node模拟登陆思路

第一步:chrome浏览器Network选项,选中Preserve log。
第二步:使用,用户和密码正常登录。
第三步:到这里为止,我们已经有了所有登录的数据,接下去就整理这些数据。
整理headers和body的数据
第四步:用node请求一次,请求成功后记录cookie
第五步:其他请求带上这些cookie即可。