小程序开发遇到的问题

截取图片

1
2
3
4
5
6
7
8
9
10
<img src="img/1.jpg"/>
      <input class="example1" type="button" value="button">
      生成界面如下：
      <img src="" id="predict_img" class="hide"/>
  </body>
  <style type="text/css">
  	.hide{
  		display: none;
  	}
  </style>
最近做h5网页，有个功能是用户能长按页面保存为图片，在我们理解就是网页要生成图片然后再让用户长按保存，然后就发现了html2canvas这个框架了，效果挺不错了，但是有几个坑说一下（用的最新版）：
1
2
3
4
5
6
7
8
9
$(document).ready( function(){
             $(".example1").on("click", function(event) {
             
                 html2canvas(document.body, {scale:2,logging:false,useCORS:true}).then(function(canvas) {
            var dataUrl = canvas.toDataURL();
            $("#predict_img").attr("src",dataUrl).removeClass("hide");
        });
             }); 
     });
scale：是用来调整生成图片屏幕分辨率的，其实设置成1再iphone上生成的图片清晰度没啥问题，但是再有些android手机上就很模糊，所以为了兼顾这部分手机就把scale设置成了2;
useCROS：这个参数是用来设置是否允许使用跨域的图片进行访问的，好像默认就是true，不太记得了；
logging：这个是日志打印的，实际上线当然不需要了，所以就false；
在同一个服务器下是正常的，访问其他服务器的图片时，截图是空白的，由于获取其他服务器上的图片需要跨域
1
2
3
4
5
6
7
8
9
10
<img src="http://cms-bucket.nosdn.127.net/2018/08/15/a250fd001743481e860944c03910ec7b.jpeg" id="img"/>
      <input class="example1" type="button" value="button">
      生成界面如下：
      <img src="" id="predict_img" class="hide"/>
  </body>
  <style type="text/css">
  	.hide{
  		display: none;
  	}
  </style>


js

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
    $(document).ready( function(){
              $(".example1").on("click", function(event) {
              
                  html2canvas(document.body, {scale:2,logging:false,useCORS:true}).then(function(canvas) {
	            var dataUrl = canvas.toDataURL();
	            $("#predict_img").attr("src",dataUrl).removeClass("hide");
	        });
              }); 
      });
       var img = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg";
function getBase64Image(img) {
  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
 
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0, img.width, img.height);
  var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
  var dataURL = canvas.toDataURL("image/"+ext);
  return dataURL;
}
var image = new Image();
image.crossOrigin = '';
image.src = img;
image.onload = function(){
  var base64 = getBase64Image(image);
  console.log(base64);
  $("#img").attr("src",base64);
}

下载html2canvas

感谢niklasvh提供 html2canvas

展开全文 >>

小程序开发遇到的问题

1、bindtap和cathtap的区别是什么

bind事件不会阻止冒泡事件向上冒泡，cath事件会阻止冒泡事件向上冒泡。

2、js字符串转换成数字，强制转换成整数或浮点型数字的函数分别是什么

parseInt()强制转换成整数，parseFloat()转换成浮点数，只有对String类型才能执行这两个函数，其他类型会转成NaN。

3、微信小程序如何跨页面传递值

通过data-*方式传递的值，页面跳转后，我们需要在下一页面获取传递过来的数据。
在跳转后的js页面，接收传递过来的数据。

4、如果需要用户授权，用户选择拒绝授权，此时如何处理

第一种思路
    保存登录状态这里是这样做的，将用户的登录信息传给后台，后台保存用户信息，同时用open_id在后台换取一个sessionId，用这个sessionId缓存在本地用于登录验证

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
wx.getUserInfo({
	success: function (resuser) {
		let userInfo = resuser.userInfo
		that.healthApi.login(code, userInfo).then(logindata => {   // 这里将微信的请求封装成Promiese 风格
			if (logindata.code === 0) {
			var sessionId = logindata.data// 调用微信wechat.setStorage将换回来的 SessionId 存在本地缓存
				that.wechat.setStorage('sessionId', sessionId).then(() => {
				that.globalData.userInfo = userInfo
				typeof cb == "function" && cb(that.globalData.userInfo)
				})
			}
		})
	},
	fail: function () {
		wx.showModal({
			title: '警告',
			content: '您点击了拒绝授权，将无法正常使用*****的功能体验。请10分钟后再次点击授权，或者删除小程序重新进入。',
			success: function (res) {
				if (res.confirm) {
				console.log('用户点击确定')
				}
			}
		})
	}
})
    这样登录状态保存在sessionId中，在每次调用登录状态是只需检查sessionId的接口就行，检查不通过在调用微信的接口。
第二种思路
    在3.29微信小程序版本中，加了这样一个属性，withCredentials字段基础库1.1.0开始支持，低版本需要做兼容。
    这个字段是调用wx.getUserInfo(object)是否带上登录状态。
    官方文档是这样解释的：
        当 withCredentials 为 true 时，要求此前有调用过 wx.login 且登录态尚未过期，此时返回的数据会包含 encryptedData, iv 等敏感信息；当 withCredentials 为 false 时，不要求有登录态，返回的数据不包含 encryptedData, iv 等敏感信息。

跳转外部链接

图片不显示

![问题](../images/20200102160238.png)
路径不对

canvas 2d中的drawImage 问题

canvas 组件的绘图上下文。CanvasContext 是旧版的接口， 新版 Canvas 2D 接口与 Web 一致。
利用createImage 生成图片对象

1
2
3
4
5
let seal = canvas.createImage();
       seal.src =goodsImgSrc;
       seal.onload = () => {
         ctx.drawImage(seal,r.left,r.top,r.width,r.height);
       }
draw（）报错 为 TypeError: ctx.draw is not a function
改为：
直接使用wx.canvasToTempFilePath(Object object, Object this)

展开全文 >>

git和hexo命令

git命令

1
2
3
4
5
6
$ git clone git@github.com:shangsheng/shangsheng.github.io.git //克隆项目
$ git cd shangsheng.github.io 								   //切换到克隆的目录中
$ git branch developer 										   //创建一个分支
$ git add --all 											   //添加当前目录的所有文件到暂存区
$ git commit -m '添加测试文件' 								   //在分支上提交一个新的版本并夹注释
$ git push origin developer 								   //推送提交的内容到github上

git命令学习廖雪峰的git官网

hexo命令

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
$ hexo init [folder] 
//新建一个网站。如果没有设置 folder ，Hexo 默认在目前的文件夹建立网站。
$ hexo new [layout] <title>
//新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来
$ hexo generate 
//生成静态文件
选项				描述
-d, --deploy	文件生成后立即部署网站
-w, --watch		监视文件变动
简写为：$hexo g
$ hexo publish [layout] <filename>
//发表草稿
$ hexo server
启动服务器。默认情况下，访问网址为： http://localhost:4000/。
选项				描述
-p, --port		重设端口
-s, --static	只使用静态文件
-l, --log		启动日记记录，使用覆盖记录格式
$ hexo deploy
//部署网站。
参数	    		描述
-g, --generate	部署之前预先生成静态文件
简写为：$ hexo d
$ hexo render <file1> [file2] ...
//渲染文件。
参数				描述
-o, --output	设置输出路径
$ hexo clean
//清除缓存文件 (db.json) 和已生成的静态文件 (public)。
//在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令
$ hexo version
//显示 Hexo 版本。
$ hexo --safe
//在安全模式下，不会载入插件和脚本。当您在安装新插件遭遇问题时，可以尝试以安全模式重新执行。
$ hexo --debug
//在终端中显示调试信息并记录到 debug.log。当您碰到问题时，可以尝试用调试模式重新执行一次，并 提交调试信息到 GitHub。
$ hexo --silent
//隐藏终端信息。
$ hexo --config custom.yml
//自定义配置文件的路径，执行后将不再使用 _config.yml。
$ hexo --draft
//显示 source/_drafts 文件夹中的草稿文章。
$ hexo --cwd /path/to/cwd
//自定义当前工作目录（Current working directory）的路径。


### 更新gitHub上更新到本地
```
    $ git fetch origin master:temp //从远程的origin仓库的master分支下载到本地并新建一个分支temp

    $ git diff temp//比较master分支和temp分支的不同

    $ git merge temp//合并temp分支到master分支

    $ git branch -d temp//删除temp
请进入完整的hexo命令

展开全文 >>

模仿CNode社区的小程序步骤

第一步:搭建项目

项目结构

<pre>
    │  .gitattributes
    │  .gitignore
    │  app.js                # 小程序逻辑
    │  app.json              # 小程序公共设置（页面路径、窗口表现、设置网络超时时间、设置多tab）
    │  app.wxss              # 小程序公共样式表
    │  README.md             # 小程序项目说明
    │  
    ├─image                  # 小程序图片资源
    |
    ├─pages                  # 小程序文件
    │  ├─common     
    │  ├─detail
    │  ├─index        
    │  │    index.js      # 页面逻辑
    │  │    index.wxml    # 页面渲染层
    │  │    index.wxss    # 页面样式
    │  ├─login
    |  ├─logs
    │  └─topics
    │          
    └─utils                  # 小程序公用方法模块
        api.js       
    util.js    
</pre>

开发环境

下载地址:开发环境

开发过程

1.配置默认启动页面
在app.json文件修改注册页面的顺序，把"pages/topics/topics"放在第一位，就会自动把topics.wxml显示默认启动页面
<pre>
    {
        "pages":[
            "pages/topics/topics",
            "pages/detail/detail",
            "pages/login/login",
            "pages/index/index",
            "pages/logs/logs"
        ]
    }
</pre>
2.配置tabBar
tabBar 是一个数组，只能配置最少2个、最多5个 tab,tab按数组的顺序排序。
<pre>
    "tabBar":{
        "color":"#444",
        "selectedColor":"#80bd01",
        "backgroundColor":"#fff",
        "borderStyle":"white",
        "list":[{
            "pagePath":"pages/topics/topics",
            "text":"首页",
            "iconPath":"images/bar/CNode.png",
            "selectedIconPath":"images/bar/CNodeHL.png"
        },{
            "pagePath":    "pages/index/index",
            "text":"我的",
            "iconPath":"images/bar/ME.png",
            "selectedIconPath":"images/barMEHL.png"
        }]
    }
</pre>
3.window 设置

具体看文档:windwo设置

4.简单封装wx.request(OBJECT)
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
<pre>
	//get请求方法
	function fetchGet(url,callback){
		wx.request({
			url:url,
			header:{'Content-Type':'application/json'},
			success(res){
				callback(null,res.data)
			},
			fail(e){
				console.error(e);
				callback(e)
			}
		})
	}
	//post请求方式
	function fetchPost(url,data,callback){
		wx.request({
			method:'POST',
			url:url,
			data:data,
			success(res){
				callback(null,res.data)
			},
			fail(e){
				console.error(e)
				callback(e)
			}
		})
	}
</pre>
module.exports = {
	//method
	fetchGet:fetchGet,
	fetchPost:fetchPost
}
5.滚动底部加载下一页
使用了小程序自带的scroll-view组件

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
51
52
53
54
55
56
57
<!-- 列表list组件 -->
 <template name="list">
     <scroll-view class="scroll-posts-list" style="height:100%" scroll-y="true" bindscrolltolower="lower">
       <view class="postslist">
         <block wx:for="{{postsList}}">
           <view class="posts-list">
             <navigator url="/pages/detail/detail?id={{item.id}}">
               <view class="posts-list-info" index="{{index}}">
                   <image class="userimg" src="{{item.author.avatar_url}}" />
                   <view class="item-box">
                     <view class="userinfo">
                       <text class="username">{{item.author.loginname}}</text>
                       <text class="time">{{item.last_reply_at}}</text>
                     </view>
                     <view class="posts-title">
                       <view class="posts-tag hot" wx:if="{{item.top === true}}">置顶</view>
                       <view class="posts-tag" wx:if="{{item.good === true}}">精华</view>
                       <text>{{item.title}}</text>
                     </view>
                   </view>
               </view>
               <view class="bar-info">
                 <view class="bar-info-item">
                   <image class="bar-info-item-icon" src="/images/icon/reply.png"></image>
                   <view class="bar-info-item-number">{{item.reply_count}}</view>
                 </view>
                 <view class="bar-info-item">
                   <image class="bar-info-item-icon" src="/images/icon/visit.png"></image>
                   <view class="bar-info-item-number">{{item.visit_count}}</view>
                 </view>
	
                 <view class="bar-info-item2"  wx:if="{{item.tab === 'good'}}">
                   <image class="bar-info-item-icon" src="/images/icon/type.png"></image>
                   <view class="bar-info-item-number">精华</view>
                 </view>
                 <view class="bar-info-item2"  wx:if="{{item.tab === 'share'}}">
                   <image class="bar-info-item-icon" src="/images/icon/type.png"></image>
                   <view class="bar-info-item-number">分享</view>
                 </view>
                 <view class="bar-info-item2"  wx:if="{{item.tab === 'ask'}}">
                   <image class="bar-info-item-icon" src="/images/icon/type.png"></image>
                   <view class="bar-info-item-number">问答</view>
                 </view>
                 <view class="bar-info-item2"  wx:if="{{item.tab === 'job'}}">
                   <image class="bar-info-item-icon" src="/images/icon/type.png"></image>
                   <view class="bar-info-item-number">招聘</view>
                 </view>
               </view>
           </navigator>
           </view>
         </block>
       </view>
     </scroll-view>
    <loading class="loading" hidden="{{hidden}}">
      <text class="loading-font">加载中...</text>
    </loading>
  </template>

公共部分头部和底部

1
2
3
4
5
6
7
 	<!-- topics.wxml -->
 	<import src="../common/header.wxml"/>
<import src="../common/list.wxml"/>
<view class="page topics">
  <template is="header" data="{{ navList, activeIndex }}"/>
  <template is="list" data="{{ postsList, hidden }}"/>
</view>

滚动区的最大的父级层要设置height: 100%; 不然无法检测滚动事件

1
2
3
4
5
6
7
8
9
10
11
12
//滑动底部加载
lower:function(){
	var that = this;
	that.setData({
		page:that.data.page+1
	});
	if(that.data.tab !=='all'){
		this.getData({tab:that.data.tab,page:that.data.page});
	}else{
		this.getData({page:that.data.page});
	}
}

用法

1
<scroll-view class="scroll-posts-list" style="height:100%" scroll-y="true" bindscrolltolower="lower"></scroll-view>

文本解析模板
在detail.wxml中返回的是htmln内容，所以需要使用文本解析模板

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
 	<!--pages/detail/detail.wxml-->
<!-- 富文本解析模板 -->
<import src="../../wxParse/wxParse.wxml"/>
<!-- 评论模板 -->
<import src="../../wxParseCriticism/wxParse.wxml"/>
 <view class='detail1'>
  <view class='detail-content'>
    <view class='content-top clearfix'>
      <view class='pull-left'>
        <view class='detailImg'>
          <image mode="scaleToFill" src='{{detail.author.avatar_url}}'></image>
        </view>
      </view>
      <view class='pull-left'>
        <view class='detailMilden'>
          <view class='detail-name'>
            <text>{{detail.author.loginname}}</text>
            <view class="detail-type-item">
              <view class="detail-type-item-font" wx:if="{{detail.tab === 'good'}}">#精华#</view>
            </view>
             <view class="detail-type-item"  wx:if="{{detail.tab === 'share'}}">
              <view class="detail-type-item-font">#分享#</view>
            </view>
            <view class="detail-type-item"  wx:if="{{detail.tab === 'ask'}}">
              <view class="detail-type-item-font">#问答#</view>
            </view>
            <view class="detail-type-item"  wx:if="{{detail.tab === 'job'}}">
              <view class="detail-type-item-font">#招聘#</view>
            </view> 
          </view>
          <view class='detail-post-time'>楼主发表于{{ detail.create_at }}</view>
        </view>
      </view>
      <view class='pull-right'>
        <view class='detail-collect-item' id='detail.id' catchtap="collect" wx:if="{{detail.is_collect == false}}">收藏</view>
        <view class='detail-collect-item' id='detail.id' catchtap="collect" wx:if="{{detail.is_collect == true}}">取消收藏</view> 
      </view>
    </view>
    <view class='detail-Bottom'>
      <view class="detail-post-title">
        <view class="detail-posts-tag hot" wx:if="{{detail.top === true}}">置顶</view>
         <view class="detail-posts-tag" wx:if="{{detail.good === true}}">精华</view> 
        {{detail.title}}
      </view>
      <view class='detail-post-content'>
      <!-- {{detail.content}} -->
      <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
      </view>
      <!-- 评论 -->
      <view class='detail-post-criticism'>
        <view class='detail-post-criticism-top'>评论</view>
        <block wx:for="{{ detail.replies }}" wx:if="{{detail.replies.length > 0}}" wx:key="">
        <view class='content-top clearfix' index="{{index}}" id="{{item.id}}">
          <view class='pull-left'>
            <view class='detailImg'>
              <image mode="scaleToFill" src="{{ item.author.avatar_url }}"></image>
            </view>
          </view>
          <view class='pull-left' style='width:70%'>
            <view class='detailMilden'>
              <view class='detail-name'>
                <text>{{ item.author.loginname }}</text>
              </view>
              <view class='detail-post-time'>{{index + 2}}楼 发表于{{ item.create_at }}</view>
              <view class='detail-criticism-content'>
              <!-- {{ item.content }} -->
                <template is="wxParseCriticism" data="{{wxParseData:item.transData.criticism.nodes}}"/>  
              </view>
            </view>
          </view>
          <view class='pull-right'>
            <view class='detail-criticism-item' id="{{item.id}}" data-index="{{index}}" catchtap="reply">
              <image src='../../images/icon/zan.png'></image>
              <text class="detail-post-zan-num" wx:if="{{item.zanNum > 0}}">{{item.zanNum}}</text>
            </view>
            <!-- <view class='detail-criticism-item' id="{{item.id}}" data-index="{{index}}" catchtap="reply">
              <image src='../../images/icon/zanhl.png'></image>
            </view>   -->
          </view>
        </view>
        </block>
        <block wx:if="{{detail.replies.length <= 0}}">
          <view class="detail-post-comment-null">
            <image class="imgnull" mode="scaleToFill" src="/images/icon/null.png"></image>
            <text class="textnull">暂无收录评论 </text>
          </view>
        </block>
      </view>
    </view>
  </view>
</view>
  <modal title="消息" confirm-text="确认" cancel-text="关闭" hidden="{{modalHidden}}" bindconfirm="confirmChange" bindcancel="cancelChange">
    您还没未登录conde，是否前往认证登录？
  </modal>
<loading class="loading" hidden="{{hidden}}">
  <text class="loading-font">加载中...</text>
</loading>


文件夹wxParse是文本解析模板
使用说明
1. 将仓库克隆到本地：

1
$ git clone https://git@github.com:shangsheng/smallRoutine.git
2. 打开`微信Web开放者工具`（注意：必须是`0.9.092300`版本）
3. 选择`添加项目`，填写或选择相应信息
      - AppID：点击右下角`无AppID`
      - 项目名称：随便填写，因为不涉及到部署，所以无所谓
     - 项目目录：选择刚刚克隆的文件夹
      - 点击`添加项目`

项目路径 github: cnode社区项目

特别感谢

感谢 coolfish 的项目案例
coolfish的github

展开全文 >>

css的兼容问题与解决方法

兼容性处理要点

1.DOCTYPE影响css的处理；
2.FF：设置padding，div会增加高度和宽度，IE不会，故需要!important多设置一个hight和width；
3.div的剧中问题：vertical-middle;将行距增加到与div一样的高度，字体就会垂直剧中，缺点是字体需要在同一行上。
4.IE浏览器不识别 !important;
5.在mozilla firefox浏览器和ie浏览器box中的解析不一致导致2px;
    解决方法：div{margin:30px !important;margin:28px}
    注意这两个margin的顺序一定不能写反，!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样： 
    div{maring:30px;margin:28px} 
    重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;

浏览器的差异

1.ul和ol列表缩进问题

消除ul、ol等列表的缩进时，样式应写成：list-style:none;margin:0px;padding:0px; 
其中margin属性对IE有效，padding属性对FireFox有效。 

[注]经验证，在IE中，设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响；在 Firefox 中，设置margin:0px仅仅可以去除上下的空白，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list- style:none才 能去除列表编号或圆点。也就是说，在IE中仅仅设置margin:0px即可达到最终效果，而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。

2、CSS透明问题

IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。 
FF：opacity:0.6。 
[注] 最好两个都写，并将opacity属性放在下面。

3、CSS圆角问题

IE：ie7以下版本不支持圆角。 
FF： -moz-border-radius:4px，或者-moz-border-radius-topleft:4px;-moz- border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz- border- radius- bottomright:4px;。 
[注] 圆角问题是CSS中的经典问题，建议使用JQuery框架集来设置圆角，让这些复杂的问题留给别人去想吧。不过jQuery的圆角只看到支持整个区域的圆角，没有支持边框的圆角，不过这个边框的圆角可以通过一些简单的手段来实现，下次有机会介绍下。

4、cursor:hand VS cursor:pointer

问题说明：firefox不支持hand，但ie支持pointer ，两者都是手形指示。 
解决方法：统一使用pointer。

5、字体大小定义不同

对字体大小small的定义不同，Firefox中为13px，而IE中为16px，差别挺大。 

解决方法：使用指定的字体大小如14px。 

并列排列的多个元素（图片或者链接）的div和div之间，代码中的空格和回车在firefox中都会被忽略，而IE中却默认显示为空格（约3px）。

6、CSS双线凹凸边框

IE：border:2px outset;。 
FF： -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;

浏览器bug

1、IE的双边距bug

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。 
解决方案：在这个div里面加上display:inline; 
例如： 
    
1
<div id=”imfloat”><div>
相应的css为
以下为引用的内容：
#IamFloat{ 
float:left; 
margin:5px;/*IE下理解为10px*/ 
display:inline;/*IE下再理解为5px*/ 
} 
#IamFloat{ 
float:left; 
margin:5px;/*IE下理解为10px*/ 
display:inline;/*IE下再理解为5px*/ 
}
关于CSS中的问题实在太多了，甚至同样的CSS定义在不同的页面标准中的显示效果都是不一样的。一个合乎发展的建议是，页面采用标准XHTML标准编写，较少使用table，CSS定义尽量依照标准DOM，同时兼顾IE、Firefox、Opera等主流浏览器。很多情况下，FF和 Opera的CSS解释标准更贴近CSS标准，也更具有规范性。

2、IE选择符空格BUG

今天在给博客的段落样式设置首字符样式的时候发现，原来一个空格也可以使样式失效。
请看以下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="//www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
<!-- 
p{font-size:12px;} 
p:first-letter{font-size:300%} 
--> 
</style> 
</head> 
<body> 
<p>对于世界而言，你是一个人；但是对于某个人，你是他的整个世界。纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。</p> 
</body> 
</html>


这段代码对<p>的首字符样式定义在IE6上看是没有效果的（IE7没测试），而在p:first-letter和{font-size:300%}加上空格，也就是p:first-letter {font-size:300%}后，显示就正常了。但是同样的代码，在FireFox下看是正常的。按道理说，p:first-letter{font-size:300%}的写法是没错的。那么问题出在哪里呢？答案是伪类中的连字符”-”。IE有个BUG，在处理伪类时，如果伪类的名称中带有连字符”-”，伪类名称后面就得跟一个空格，不然样式的定义就无效。而在FF中，加不加空格都可以正常处理。

展开全文 >>

HTML5和css3

一.H5的新特性

1.用于绘画的canvas元素
2.用于媒介回放的video和audio元素
3.对本地离线存储的更好的支持
4.新的特殊内容元素，比如article、footer、header、nav、section
5.新的表单控件：比如calendar、date、time、email、url、search
新特性

h5特性

二.一个基本的h5页面

h5
h5

三.h5属性

h5属性

四.h5的事件

h5事件

展开全文 >>

ajax

1.如何把数据传到服务器

* 前端：
        构建表单
        在form标签中声明处理用户数据的程序（action属性）提交用户数据的方式（method get post）
        在输入框中一定要声明name属性
* 后端：
        前端用get方式提交 后台用$_get数组接收
        前端用post方式提交 后台用$_post数组接收

2.get方式和post方式的区别

1.get方式提交的会把表单信息显示到地址栏没有请求正文post方式有请求正文
2.get方式相对于post方式来说不太安全  post方式相对来说比较安全
3.get方式传输的信息量比较小 post方式 信息传输量是无限大
4.get方式Ajax提交必须把请求正文写在url后面 格式 key=value&key=vale  post方式需要写在xhr.send()方法里
5.get方式可以不写请求头xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");而post必须写

3.如何上传文件到服务器

* 前端 
        构建表单
        在from标签中声明处理用户数据的程序（action属性）必须使用post方式提交 enctype="multioart/form-data"
        用input：file来上传
* 后端
        用$_FILES来接受文件
        用move_uploaded_file(临时文件的路径，目标文件的路径)

get与post的区别

__Get和Post都是向服务器发送的一种请求，只是发送机制不同。__
1.get请求会将参数跟在URL后进行传递，而post请求则是作为http消息的实体内容发送给web服务器。当然在Ajax请求中，这种区别对用户是不可见的。
2.首先是“Get方式提交的数据最多只能是1024字节”，因为Get是通过URL提交数据，那么get可提交的数据就跟URL的长度有直接关系了。而实际上，URL不存在参数上限的问题。
http协议规范没有对URL长度进行限制。这个限制是特定的浏览器以及服务器对他的限制。
IE对URL长度的限制是2083字节。对于其他浏览器，如Netscape、FireFox等，理论上没有长度限制，其限制取决于操作系统的支持。注意这是限制是整个URL长度，而不仅仅是你的参数值数据长度。
3.GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等。在某种情况下，get方式会带来严重的问题。而post方式相对来说就可以避免这些问题。

get请求和post请求在服务器的区别：

1.在客户端使用get请求时，服务器端使用Request.QueryString来获取参数，而客户端使用post请求时，服务器使用Request.Form来获取参数。
2.http标准包含这两种方法是为了达到不同的目的。postPOST用于创建资源，
资源的内容会被编入HTTP请示的内容中。例如，处理订货表单、在数据库中加入新数据行等。
当请求无副作用时（如进行搜索），便可使用GET方法；当请求有副作用时（如添加数据行），
则用POST方法。一个比较实际的问题是：GET方法可能会产生很长的URL，或许会超过某些浏览器与服务器对URL长度的限制。

若符合下列任一情况，则用POST方法：

* 请求的结果有持续性的副作用，例如，数据库内添加新的数据行。
* 若使用GET方法，则表单上收集的数据可能让URL过长。
* 要传送的数据不是采用7位的ASCII编码。

若符合下列任一情况，则用GET方法：

* 请求是为了查找资源，HTML表单数据仅用来帮助搜索。
* 请求结果无持续性的副作用。
* 收集的数据及HTML表单内的输入字段名称的总长不超过1024个字符。

总结

1.请求方式不同
2.在请求正文上 
     post请求 输入的信息在请求信息的请求正文中
     get请求   请求正文在请求地址后面 url？+key=value&key1=value1
3.在请求头中
    post需要写Content-Type:application/x-www-form-urlencoded
4.在请求内容的长度上
    get请求的内容的长度是有限的 
    post请求的的内容的长度是无限的
5.在安全问题上
    get请求相对来说不安全
    post请求是相对安全的

展开全文 >>

js基础

数组

1.数组的作用，用于保存多个数据
2.数组中的数组我们成为数组的元素
3.数组中可以同时保存多个类型的元素，但是不推荐

数组的声明方式

 1.方法一
*var arr=new Array(1,2,3,4,5) 直接添加元素
*var arr=new Array(6) 创建一个具有默认长度的数组，几乎没有用
 2.方法二:常用
 *数组字面量形式：var arr=[1,2,3,4];

数组的长度

数组的length属性表示数组中元素的个数

数组的索引

数组中的元素是按照索引排列，索引从0开始
我们可以根据索引获取和修改数组中的某个元素

数组的长度和索引的关系

数组中最后一项的索引为arr.length-1
数组中新项的索引，为arr.length

数组的基本操作方式

1.正向遍历

1
2
3
4
var arr=[1,2,3,4,5];
for(var i=0;i<arr.length;i++){
	console.log(arr[i]);
}

2.反向遍历

1
2
3
4
var arr=[1,2,3,4,5];
for(var i=arr.length-1;i>0;i--){
	console.log(arr[i]);
}

3.将0-99的所有数放到数组中

1
2
3
4
var arr=[];
for(var i=0;i<100;i++){
arr[i]=i;
}

4.将1-100中所有奇数放到数组中

1
2
3
4
5
6
	var arr=[];
	for(var i=1;i<=100;i++){
if(i%2!=0){
arr[arr.length]=i;
	 }
	}

5.将1-100之间能被3整除的数字，存到数组中

1
2
3
4
5
6
var arr=[];
for(var i=1;i<=100;i++){
if(i/3==0){
arr[arr.length]=i;
	}
}

6.求一组数中的所有的数的和 和平均值

1
2
3
4
5
6
	var arr=[12,34,56,67,78,90];
var sum=0,v;
for(var i=0;i<arr.length;i++){
sum+=arr[i];
}
v=sum/arr.length;

7.求一组数中的最大值

1
2
3
4
5
6
7
var arr=[12,34,56,67,78,90];
var max=0;
for(var i=0;i<arr.length;i++){
	if(arr[i]>max){
		max=arr[i];
  }
}

8.求一组数中的最小值及其索引值

1
2
3
4
5
6
7
8
var arr=[12,34,56,67,78,90];
var min=0,v;
for(var i=0;i<arr.length;i++){
	if(arr[i]<min){
		min=arr[i];
		v=i;
  }
}

9.将字符串数组用|或其他符号分割

1
2
3
4
5
6
var arr =["a","b","c"];
var str=arr[0];
var fenGeFu='-';
for(var i=1;i<arr.length;i++){
	str+=fenGefu+arr[i];
}

10.翻转数组

1
2
3
4
5
var arr=[1,2,3,4,5];
var resultArr=[];
for(var i=arr.length-1;i>0;i--){
	resultArr[resultArr.length]=arr[i];
}

11.要求将数组中的0项去掉，将不为0的值存入一个新的数组，生成新的数组

1
2
3
4
5
6
7
var arrNew=[];
var arr=[1,0,3,4,50,5,0,9,0,0];
for(var i in arr){
	if(arr[i]!==0){
	  arrNew.push(arr[i]);
  }
}

12.冒泡排序，从小到大

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var count=0;//设置一个变量去记录当前比较过得轮数
//1.外层循环控制比较的轮数
for(var i=0;i<arr.length-1;i++){
	count++;
	//在每一轮开始的时候，假设当前这一轮已经比较完毕了
	var flag=true;
	//2.内层循环 控制每一轮比较的次数
	for(var j=0;j<arr.length-1-i;j++){
	//3.如果当前项大于了后一个项
	if(arr[j]>arr[j+1]){
		//4.交换两个位置的值
		var temp=arr[j];
		arr[j]=arr[j+1];
		arr[j+1]=temp;
		//如果发生了任意一次交换。说明比较没有完毕，我们阻止跳出
		flag=false；
       }
	}
	//验证假设条件是否成立
	if(flag){
       break;
     }
}

展开全文 >>

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><br>只做了一点微小的工作<br>谢谢大家