By

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
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
Page({
 
      data: {
            openid:"",
            session_key:"",
            access_token:"",
      },
      
      onLoad: function (options) {
            var that = this
            //第一步获取openid
            wx.login({
                  success: function (data) {
                        console.log(data.code, data) 
                        console.log("12345");
                        wx.request({
                              url: 'https://api.weixin.qq.com/sns/jscode2session',
                              data:{
                                    appid: "你的appid",
                                    secret: "小程序秘钥",
                                    js_code: data.code//wx.login获取到的code
                              },
                              method: "post",
                              header: {
                                    "Content-Type": "application/x-www-form-urlencoded"
                              },
                              success: function (res) {
                                    console.log(res);
                                    that.setData({
                                          openid: res.data.openid,
                                          session_key: res.data.session_key,
                                    })
                              }
                        })
                  }
            })
            //第二步  获取access_token
            wx.request({
                  url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=你的appid&secret=你的小程序秘钥',
                  method: "GET",
                  success: function (res) {
                      
                        console.log("xxx");
                        console.log(res);
                        that.setData({
                              access_token: res.data.access_token,//获取到的access_token
                        })
                  }
            })
      },
      form: function (e) {
            console.log(e);
            var that = this;
            var fId = e.detail.formId; // 网络请求    
            var l = 'https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=' + that.data.access_token; 
            var d = {
                  touser: that.data.openid, //用户的openid      
                  template_id: '模板消息ID',
                  page: '/pages/index/index',
                  form_id: fId,
                  data: {           //模板消息要对应 有几个写几个  避免为空模板
                        "keyword1": {
                              "value": "酒店",
                              "color": "#4a4a4a"
                        },
                        "keyword2": {
                              "value": "2018-03-22",
                              "color": "#9b9b9b",
                        },
                        "keyword3": {
                              "value": "$300",
                              "color": "#9b9b9b"
                        },
                        "keyword4": {
                              "value": "中国",
                              "color": "#9b9b9b"
                        },
                  },
                  color: '#ccc',
                  emphasis_keyword: 'keyword1.DATA'
            }
            wx.request({
                  url: l,
                  data: JSON.stringify(d),
                  method: 'POST',
                  success: function (res) {
                        console.log(res);
                  },
                  fail: function (err) {
                        console.log(err);
                  }
            });
      },
})

wxml

1
2
3
4
5
<form bindsubmit="form" report-submit='true' >
<button form-type="submit" class='xx'>
<text>123</text>
</button>
</form>

在这里插入图片描述

成功！！！

By

客户端存储数据

HTML5 提供了两种在客户端存储数据的新方法：

  • localStorage - 没有时间限制的数据存储
  • sessionStorage - 针对一个 session 的数据存储

之前，这些都是由 cookie 完成的。

由于 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

localStorage 方法

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<body>

<div id="result"></div>

<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
    // Store
    localStorage.setItem("lastname", "Gates");
    // Retrieve
    document.getElementById("result").innerHTML = localStorage.getItem("lastname");
} else {
    document.getElementById("result").innerHTML = "抱歉！您的浏览器不支持 Web Storage ...";
}
</script>

</body>
</html>

sessionStorage 方法

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

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
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
    if(typeof(Storage) !== "undefined") {
        if (sessionStorage.clickcount) {
            sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
        } else {
            sessionStorage.clickcount = 1;
        }
        document.getElementById("result").innerHTML = "在本 session 中，您已经点击这个按钮 " + sessionStorage.clickcount + " 次。";
    } else {
        document.getElementById("result").innerHTML = "抱歉！您的浏览器不支持 Web Storage ...";
    }
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">请点击这里</button></p>
<div id="result"></div>
<p>请点击按钮使计数器递增。</p>
<p>请关闭浏览器或标签页，然后再试一次，计数器会重置。</p>
</body>
</html>

By

github上下载wxParse
https://github.com/icindy/wxParse

在这里插入图片描述
1、下载到项目里面
在app.wxss全局样式文件中，需要引入wxParse的样式表

1
@import "/page/wxParse/wxParse.wxss";

2、在需要加载html内容的页面对应的js文件里引入wxParse

1
var WxParse = require('../../wxParse/wxParse.js');

3、通过调用WxParse.wxParse方法来设置html内容

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
/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/

Page({
  data: {
  },
  onLoad: function () {
    var that = this;
    wx.request({
        url: '', 
        method: 'POST',
        data: {
            'id':13
        },
        header: {
            'content-type': 'application/json'
        },
        success: function(res) {
            var article = res.data[0].post;
            WxParse.wxParse('article', 'html', article, that,5);
        }
    })
  }
})

4、在页面中引用模板

1
2
<import src="../../wxParse/wxParse.wxml"/>
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

这样就可以在微信小程序中嵌入html内容了

By

什么是应用程序缓存（Application Cache）？

web 应用可进行缓存，并可在没有因特网连接时进行访问。

三大优势：

  • 离线浏览 - 用户可在应用离线时使用它们
  • 速度 - 已缓存资源加载得更快
  • 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

基础

如需启用应用程序缓存，请在文档的 标签中包含 manifest 属性：

1
2
3
4
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。

manifest 文件的建议的文件扩展名是：”.appcache”。

注意

manifest 文件需要配置正确的 MIME-type，即 “text/cache-manifest”。必须在 web 服务器上进行配置。

Manifest 文件

manifest 文件可分为三个部分：

  • CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
  • NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
  • FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

下面举个例子来说明一下：
>index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html manifest="index.appcache" >   <!-- manifest指定本地的缓存文件 -->
<head lang="en">
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
 
    <script src="https://csdnimg.cn/public/common/libs/jquery/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="https://csdnimg.cn/rabbit/exposure-click/main-1.0.6.js"></script>
    <img src="http://wx2.sinaimg.cn/large/83940082gy1fpmpho2xl3j20nm11i0ws.jpg" alt="">
</body>
</html>

>index.appcache

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
CACHE MANIFEST

# 注释以#开头
# 下面是要缓存的文件
CACHE:
https://csdnimg.cn/public/common/libs/jquery/jquery-1.9.1.min.js
https://csdnimg.cn/rabbit/exposure-click/main-1.0.6.js

# 指定必须联网才能访问的文件
NETWORK:
http://wx2.sinaimg.cn/large/83940082gy1fpmpho2xl3j20nm11i0ws.jpg

# 网页无法访问时要访问的页面
FALLBACK:
404.html

浏览器支持

所有主流浏览器均支持应用程序缓存，除了 Internet Explorer。

Tips

  • 以 “#” 开头的是注释行，但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。
  • 如果您编辑了一幅图片，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。
  • 更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。

更新缓存

一旦应用被缓存，它就会保持缓存直到发生下列情况：

  • 用户清空浏览器缓存
  • manifest 文件被修改（阅读上面的tips）
  • 由程序来更新应用缓存

实例

1
2
3
4
5
6
7
8
9
10
11
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html5/ /404.html

温馨提示

一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。为了确保浏览器更新缓存，您需要更新 manifest 文件。

容量问题： 某些浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）

By

可从官网了解：http://sass-lang.com/documentation/file.SASS_REFERENCE.html

目录结构：
在这里插入图片描述

test.scss

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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
//变量
$blue : #bdc4fd;

div {
	coloe: $blue;
}


//变量(镶嵌在字符串之中)
$side : left;

.router {
	border-#{$side}-radius: 10px;
}


//计算
body {
	margin: (14px/2);
	top: 100px;
	left: 200px;
}


//嵌套
div h1 {
	color: #666;
}

div {
	h1 {
		color: aquamarine;
	}
}


//继承
.class {
	border: 10px;
}

.class2 {
	@extend .class;
	font-size: 10px;
}


/*!
注意：要使用这个解析才能再css文件里面显示出来，否则识别出来是scss文件的解析
*/

//Mixin有点像C语言的宏（macro），是可以重用的代码块。
@mixin left {
	float: left;
	display: inline;
}

.div2 {
	@include left;
}

//Mixin传参
@mixin left2($value : 20px) {
	float: left;
	top: $value;
}

.div3 {
	@include left2(30px)
}


//颜色函数
.foooter {
	color: lighten(#cc3, 10%);
}

.foooter2 {
	color: lighten(#cc3, 10%); // #d6d65c
}

.foooter3 {
	color: darken(#cc3, 10%); // #a3a329
}

.foooter4 {
	color: grayscale(#cc3); // #808080
}

.foooter5 {
	color: complement(#cc3); // #33c
}

//插入文件
@import './scss/index.scss';
@import "foo.css";



//条件语句
p {
	@if 1+1==2 {
		background: #1231;
	}

	@if 1+1>2 {
		border: #666;
	}

	@else {
		background: #ffffff;
	}
}

//循环语句
@for $i from 1 to 10 {
	.border-#{$i} {
		border: #{$i} solid blue;
	}
}

$i: 6;

@while $i>0 {
	.item-#{$i} {
		width: 2em * $i;
	}

	$i: $i - 2;
}

@each $member in a,b,c,d {
	.#{$member} {
		background-image: url("/image/#{$member}.jpg");
	}
}

//自定义函数
@function double($n){
	@return $n * 2; 
}

#siderbar{
	width: double(10)px;	
}

./scss/index.css

1
2
3
4
$index : 100px;
.vick{
    backdrop-filter: $index;
}

编译结果

test.css

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
98
99
100
101
102
103
104
105
106
107
108
109
110
@charset "UTF-8";
@import url(foo.css);
div {
  coloe: #bdc4fd; }

.router {
  border-left-radius: 10px; }

body {
  margin: 7px;
  top: 100px;
  left: 200px; }

div h1 {
  color: #666; }

div h1 {
  color: aquamarine; }

.class, .class2 {
  border: 10px; }

.class2 {
  font-size: 10px; }

/*!
注意：要使用这个解析才能再css文件里面显示出来，否则识别出来是scss文件的解析
*/
.div2 {
  float: left;
  display: inline; }

.div3 {
  float: left;
  top: 30px; }

.foooter {
  color: #d6d65c; }

.foooter2 {
  color: #d6d65c; }

.foooter3 {
  color: #a3a329; }

.foooter4 {
  color: gray; }

.foooter5 {
  color: #3333cc; }

.vick {
  backdrop-filter: 100px; }

p {
  background: #1231;
  background: #ffffff; }

.border-1 {
  border: 1 solid blue; }

.border-2 {
  border: 2 solid blue; }

.border-3 {
  border: 3 solid blue; }

.border-4 {
  border: 4 solid blue; }

.border-5 {
  border: 5 solid blue; }

.border-6 {
  border: 6 solid blue; }

.border-7 {
  border: 7 solid blue; }

.border-8 {
  border: 8 solid blue; }

.border-9 {
  border: 9 solid blue; }

.item-6 {
  width: 12em; }

.item-4 {
  width: 8em; }

.item-2 {
  width: 4em; }

.a {
  background-image: url("/image/a.jpg"); }

.b {
  background-image: url("/image/b.jpg"); }

.c {
  background-image: url("/image/c.jpg"); }

.d {
  background-image: url("/image/d.jpg"); }

#siderbar {
  width: 20 px; }

/*# sourceMappingURL=test.css.map */
  • 安装

SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SASS。

假定你已经安装好了Ruby，接着在命令行输入下面的命令：

　　

gem install sass

然后，就可以使用了。

  • 使用

SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。

下面的命令，可以在屏幕上显示.scss文件转化的css代码。（假设文件名为test。）

　　

sass test.scss

如果要将显示结果保存成文件，后面再跟一个.css文件名。

　　

sass test.scss test.css

SASS提供四个编译风格的选项：

　　

  1. nested：嵌套缩进的css代码，它是默认值
  2. expanded：没有缩进的、扩展的css代码
  3. compact：简洁格式的css代码
  4. compressed：压缩后的css代码

生产环境当中，一般使用最后一个选项。

　　

sass –style compressed test.sass test.css

你也可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。

　　

// watch a file

　　sass –watch input.scss:output.css

　　// watch a directory

　　sass –watch app/sass:public/stylesheets

SASS的官方网站，提供了一个在线转换器。你可以在那里，试运行下面的各种例子。