I"u

{"source"=>"F:/blog/pangpython.github.io", "destination"=>"F:/blog/pangpython.github.io/_site", "collections_dir"=>"", "cache_dir"=>".jekyll-cache", "plugins_dir"=>"_plugins", "layouts_dir"=>"_layouts", "data_dir"=>"_data", "includes_dir"=>"_includes", "collections"=>{"posts"=>{"output"=>true, "permalink"=>"/posts/:categories/:title.html"}}, "safe"=>false, "include"=>[".htaccess"], "exclude"=>[".sass-cache", ".jekyll-cache", "gemfiles", "Gemfile", "Gemfile.lock", "node_modules", "vendor/bundle/", "vendor/cache/", "vendor/gems/", "vendor/ruby/"], "keep_files"=>[".git", ".svn"], "encoding"=>"utf-8", "markdown_ext"=>"markdown,mkdown,mkdn,mkd,md", "strict_front_matter"=>false, "show_drafts"=>nil, "limit_posts"=>0, "future"=>false, "unpublished"=>false, "whitelist"=>[], "plugins"=>[], "markdown"=>"kramdown", "highlighter"=>"rouge", "lsi"=>false, "excerpt_separator"=>"\n\n", "incremental"=>true, "detach"=>false, "port"=>"4000", "host"=>"127.0.0.1", "baseurl"=>"/", "show_dir_listing"=>false, "permalink"=>"/posts/:categories/:title.html", "paginate_path"=>"/page:num", "timezone"=>nil, "quiet"=>false, "verbose"=>false, "defaults"=>[], "liquid"=>{"error_mode"=>"warn", "strict_filters"=>false, "strict_variables"=>false}, "kramdown"=>{"auto_ids"=>true, "toc_levels"=>"1..6", "entity_output"=>"as_char", "smart_quotes"=>"lsquo,rsquo,ldquo,rdquo", "input"=>"GFM", "hard_wrap"=>false, "guess_lang"=>true, "footnote_nr"=>1, "show_warnings"=>false, "highlight"=>true, "syntax_highlighter"=>"rouge", "syntax_highlighter_opts"=>{:guess_lang=>true}, "coderay"=>{}}, "author"=>"pangPython", "email"=>"pangPython@qq.com", "twitter_username"=>"twitter", "github_username"=>"pangPython", "googleplus_username"=>"google", "head-title"=>"pangPython\u7684\u535A\u5BA2", "title"=>"pangPython\u7684\u535A\u5BA2", "url"=>"http://localhost:4000", "description"=>"I know that what I'm doing looks stupid, but I'm a big boy and really want to do this.", "favo"=>"\u6625\u68A6\u968F\u4E91\u6563\uFF0C\u98DE\u82B1\u9010\u6C34\u6D41", "descrpt"=>"\u201C\u5DE7\u8005\u52B3\u800C\u667A\u8005\u5FE7\uFF0C\u65E0\u80FD\u8005\u65E0\u6240\u6C42\uFF0C\u9971\u98DF\u800C\u9068\u6E38\uFF0C\u6CDB\u82E5\u4E0D\u7CFB\u4E4B\u821F\u201D \u2014\u2014\u300A\u5357\u534E\u7ECF\u300B", "sass"=>{"style"=>:compressed}, "paginate"=>7, "gems"=>["jekyll-paginate", "jekyll-last-modified-at", "jemoji"], "header-color"=>"indigo lighten-1", "head-theme-color"=>"#5c6bc0", "footer-color"=>"indigo lighten-1", "footer-button-color"=>"indigo lighten-2", "footer-link-color"=>"red-text text-accent-1", "share-button-color"=>"pink", "share-button-small-color"=>"", "watch"=>true, "livereload_port"=>35729, "serving"=>true}:encoding"GBK

I"P"<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>weui提供了小程序中使用的Grid组件（https://github.com/wechat-miniprogram/miniprogram-demo/tree/master/miniprogram/page/weui/example/grid）

</code></pre></div></div>

<p>wxml:</p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

</pre></td><td class="code"><pre><span class="nt">&lt;view</span> <span class="na">class=</span><span class="s">"page"</span><span class="nt">&gt;</span>

<span class="nt">&lt;view</span> <span class="na">class=</span><span class="s">"page__hd"</span><span class="nt">&gt;</span>

<span class="nt">&lt;view</span> <span class="na">class=</span><span class="s">"page__title"</span><span class="nt">&gt;</span>小工具<span class="nt">&lt;/view&gt;</span>

<span class="nt">&lt;view</span> <span class="na">class=</span><span class="s">"page__desc"</span><span class="nt">&gt;</span>助你的瘦身一臂之力<span class="nt">&lt;/view&gt;</span>

<span class="nt">&lt;/view&gt;</span>

<span class="nt">&lt;view</span> <span class="na">class=</span><span class="s">"page__bd"</span><span class="nt">&gt;</span>

<span class="nt">&lt;view</span> <span class="na">class=</span><span class="s">"weui-grids bg-map"</span><span class="nt">&gt;</span>

<span class="nt">&lt;block</span> <span class="na">wx:for=</span><span class="s">""</span> <span class="na">wx:key=</span><span class="s">"*this"</span><span class="nt">&gt;</span>

<span class="nt">&lt;navigator</span> <span class="na">url=</span><span class="s">""</span> <span class="na">class=</span><span class="s">"weui-grid"</span> <span class="na">hover-class=</span><span class="s">"weui-grid_active"</span><span class="nt">&gt;</span>

<span class="nt">&lt;image</span> <span class="na">class=</span><span class="s">"weui-grid__icon"</span> <span class="na">src=</span><span class="s">""</span> <span class="nt">/&gt;</span>

<span class="nt">&lt;view</span> <span class="na">class=</span><span class="s">"weui-grid__label"</span><span class="nt">&gt;&lt;/view&gt;</span>

<span class="nt">&lt;/navigator&gt;</span>

<span class="nt">&lt;/block&gt;</span>

<span class="nt">&lt;/view&gt;</span>

<span class="nt">&lt;/view&gt;</span>

<span class="nt">&lt;/view&gt;</span>

</pre></td></tr></tbody></table></code></pre></figure>

<p>js:</p>

<figure class="highlight"><pre><code class="language-js" data-lang="js"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">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

</pre></td><td class="code"><pre><span class="c1">// miniprogram/pages/functions/functions.js</span>

<span class="nx">Page</span><span class="p">({</span>

<span class="cm">/**

* 页面的初始数据

*/</span>

<span class="na">data</span><span class="p">:</span> <span class="p">{</span>

<span class="na">grids</span><span class="p">:</span> <span class="p">[{</span>

<span class="na">url</span><span class="p">:</span> <span class="dl">'</span><span class="s1">/pages/add/add</span><span class="dl">'</span><span class="p">,</span>

<span class="na">imgPath</span><span class="p">:</span> <span class="dl">'</span><span class="s1">../../images/weight.png</span><span class="dl">'</span><span class="p">,</span>

<span class="na">text</span><span class="p">:</span><span class="dl">'</span><span class="s1">体重记录</span><span class="dl">'</span>

<span class="p">},</span> <span class="p">{</span>

<span class="na">url</span><span class="p">:</span> <span class="dl">'</span><span class="s1">/pages/drinking/drinking</span><span class="dl">'</span><span class="p">,</span>

<span class="na">imgPath</span><span class="p">:</span> <span class="dl">'</span><span class="s1">../../images/water.png</span><span class="dl">'</span><span class="p">,</span>

<span class="na">text</span><span class="p">:</span> <span class="dl">'</span><span class="s1">喝水记录</span><span class="dl">'</span>

<span class="p">},</span>

<span class="p">]</span>

<span class="p">},</span>

<span class="cm">/**

* 生命周期函数--监听页面加载

*/</span>

<span class="na">onLoad</span><span class="p">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span> <span class="p">{</span>

<span class="p">},</span>

<span class="cm">/**

* 生命周期函数--监听页面初次渲染完成

*/</span>

<span class="na">onReady</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>

<span class="p">},</span>

<span class="cm">/**

* 生命周期函数--监听页面显示

*/</span>

<span class="na">onShow</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>

<span class="p">},</span>

<span class="cm">/**

* 生命周期函数--监听页面隐藏

*/</span>

<span class="na">onHide</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>

<span class="p">},</span>

<span class="cm">/**

* 生命周期函数--监听页面卸载

*/</span>

<span class="na">onUnload</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>

<span class="p">},</span>

<span class="cm">/**

* 页面相关事件处理函数--监听用户下拉动作

*/</span>

<span class="na">onPullDownRefresh</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>

<span class="p">},</span>

<span class="cm">/**

* 页面上拉触底事件的处理函数

*/</span>

<span class="na">onReachBottom</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>

<span class="p">},</span>

<span class="cm">/**

* 用户点击右上角分享

*/</span>

<span class="na">onShareAppMessage</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>

<span class="p">}</span>

<span class="p">})</span>

</pre></td></tr></tbody></table></code></pre></figure>

<p>json:</p>

<figure class="highlight"><pre><code class="language-json" data-lang="json"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1

2

3

</pre></td><td class="code"><pre><span class="p">{</span><span class="w">

</span><span class="nl">"usingComponents"</span><span class="p">:</span><span class="w"> </span><span class="p">{}</span><span class="w">

</span><span class="p">}</span>

</pre></td></tr></tbody></table></code></pre></figure>

<p>wxss:</p>

<figure class="highlight"><pre><code class="language-css" data-lang="css"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1

2

3

4

5

6

7

8

9

10

11

</pre></td><td class="code"><pre><span class="c">/* miniprogram/pages/functions/functions.wxss */</span>

<span class="k">@import</span> <span class="s2">'../common.wxss'</span><span class="p">;</span>

<span class="nc">.bg-map</span><span class="p">{</span>

<span class="nl">width</span><span class="p">:</span> <span class="m">90%</span><span class="p">;</span>

<span class="c">/* height: auto; */</span>

<span class="nl">border-radius</span><span class="p">:</span> <span class="m">5px</span><span class="p">;</span>

<span class="nl">box-shadow</span><span class="p">:</span> <span class="n">rgba</span><span class="p">(</span><span class="m">5</span><span class="p">,</span><span class="m">26</span><span class="p">,</span><span class="m">180</span><span class="p">,</span><span class="m">0.15</span><span class="p">)</span> <span class="m">0px</span> <span class="m">1px</span> <span class="m">8px</span><span class="p">;</span>

<span class="nl">margin</span><span class="p">:</span> <span class="m">16px</span> <span class="m">16px</span><span class="p">;</span>

<span class="nl">background</span><span class="p">:</span> <span class="m">#fff</span><span class="p">;</span>

<span class="nl">position</span><span class="p">:</span> <span class="nb">relative</span><span class="p">;</span>

<span class="p">}</span>

</pre></td></tr></tbody></table></code></pre></figure>

<p>效果图：

<img src="/assets/images/wx-miniprogram-grid.png" alt="微信小程序九宫格布局图" /></p>

:ET

I"
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>weui提供了小程序中使用的Grid组件（https://github.com/wechat-miniprogram/miniprogram-demo/tree/master/miniprogram/page/weui/example/grid）

</code></pre></div></div>

:ET