2.在wxml中import wxParse.wxml,并把template插入到到對應的位置上

3.在wxss中import wxParse.wxss，并設置樣式；比如‘wxParse-image’是富文本圖片轉化成image組件之后的類名，‘wxParse-p’是p標簽轉化成view組件后設置的類名

4.js

面對面翻譯 微信小程序源碼下載，語音翻譯類小程序工具http://www.henkuai.com/thread-37499-1-1.html

開源微信小程序，小團隊管理小程序下載 ：http://www.henkuai.com/thread-37498-1-1.html

微信小程序多用戶商城demo，還在開發中：http://www.henkuai.com/thread-37497-1-1.html

微信小程序搶課列表demo ：http://www.henkuai.com/thread-37496-1-1.html

微信小程序地圖實時顯示demo：http://www.henkuai.com/thread-37495-1-1.html

購房搖號助手微信小程序下載：http://www.henkuai.com/thread-37471-1-1.html

使用微信小程序map組件開發的一個demo，各種坑：http://www.henkuai.com/thread-37400-1-1.html

微信小游戲2048源碼下載，經典的小游戲：http://www.henkuai.com/thread-37399-1-1.html

微信小程序-菜譜百科，小程序開發學習demo ：http://www.henkuai.com/thread-37380-1-1.html

鮮切水果微信小程序，水果商城小程序：http://www.henkuai.com/thread-37379-1-1.html

微信小程序線上圖書館前端+后端源碼下載，圖書查詢小程序 ：http://www.henkuai.com/thread-37378-1-1.html

微信小程序日歷打卡項目下載，輕巧好用的日歷打卡組件：http://www.henkuai.com/thread-37367-1-1.html

微信小程序練手項目，包含抽屜效果、底部tab效果實現等：http://www.henkuai.com/thread-37365-1-1.html

【獨立小程序】志匯餐飲8.6 小程序前端修復版本：http://www.henkuai.com/thread-37344-1-1.html

仿今日頭條3.0 小程序前端 demo分享：http://www.henkuai.com/thread-37338-1-1.html

微信小程序真心話大冒險游戲，朋友聚會必備小程序：http://www.henkuai.com/thread-37337-1-1.html

微信小游戲頭腦王者自動答題輔助插件，小游戲作弊工具：http://www.henkuai.com/thread-37336-1-1.html

微信小程序左滑操作自定義組件，讓你的小程序開發更：http://www.henkuai.com/thread-37334-1-1.html

一、背景顏色漸變。

運行效果

二、文字顏色漸變。

運行效果

三、邊框顏色漸變。

運行效果

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

jQuery提供了JS未能提供的動畫效果，利用jQuery的動畫效果，可以極大的簡化JS動畫部分的邏輯

滑入滑出動畫

1. 滑入動畫

   定義：以下拉方式動畫效果將html內容顯示出來

   使用方式：

   $(selector).slideDown(time,function) 
   $(selector).slideDown(2000) 
   $(selector).slideDown() 
   $(selector).slideDown(fast/normal/slow)

   time代表執行動畫的時間，function代表動畫執行完之后所要執行的函數

2. 滑出動畫

   定義：以上滑方式動畫效果將html內容隱藏出來

   使用方式：

   $(selector).slideUp(time,function) 
   $(selector).slideUp(2000) 
   $(selector).slideUp() 
   $(selector).slideUp(fast/normal/slow)

   time代表執行動畫的時間，function代表動畫執行完之后所要執行的函數

3. 滑入滑出切換動畫

   定義：在滑入滑出動畫間切換

   使用方式：

   $(selector).slideToggle(time,function) 
   $(selector).slideToggle(2000) 
   $(selector).slideToggle() 
   $(selector).slideToggle(fast/normal/slow)

淡入淡出動畫

1. 淡入動畫

   作用：讓元素以淡淡的進入視線的方式展現出來

   使用方式

   $(selector).fadeIn(time,function) 
   $(selector).fadeIn(2000) 
   $(selector).fadeIn() 
   $(selector).fadeIn(fast/normal/slow)

2. 淡出動畫

   作用：讓元素以淡淡的離開視線的方式隱藏起來

   使用方式

   $(selector).fadeOut(time,function) 
   $(selector).fadeOut(2000) 
   $(selector).fadeOut() 
   $(selector).fadeOut(fast/normal/slow)

3. 淡入淡出切換動畫

   作用：讓元素在淡入淡出動畫切換

   使用方式

   $(Selector).fadeToggle(time,function) 
   $(selector).fadeToggle(2000) 
   $(selector).fadeToggle() 
   $(selector).fadeToggle(fast/normal/slow)

4. 修改opacity

   作用： 修改opacity的值

   使用方式

   $(Selector).fadeTo(time,opacity,function) 
   time可以是字符串，可以是具體數字 
   也可只有參數一、參數二

顯示隱藏動畫

1. 顯示動畫

   作用： 將Html結構顯現出來

   使用方式

   $(Selector).show(time，function) 
   $(selector).show(2000) 
   $(selector).show() 
   $(selector).show(fast/normal/slow)

2. 隱藏動畫

   作用： 將Html結構隱藏起來

   使用方式

   $(Selector).hide(time，function) 
   $(selector).hide(2000) 
   $(selector).hide() 
   $(selector).hide(fast/normal/slow)

停止動畫

• 定義：停止正在執行的動畫

• 使用方式：

  $(selector).stop() 
  stop()中可以有兩個參數，參數一：后續動畫是否執行，參數二：當前動畫是否執行完畢，默認的是（false,false),注意第一個參數，true代表的是后續動畫不執行 
  ———————————————————————————— 
  第一種:(false，false) 
  后續動畫會執行，當前動畫不會執行完 
  第二種:(false，true) 
  后續動畫會執行，當前動畫會執行完 
  第三種:(true，false) 
  后續動畫不會執行，當前動畫不會執行完 
  第四種:(true，true) 
  后續動畫不會執行，當前動畫會執行完

自定義動畫

• 作用：執行一組CSS屬性的自定義動畫

• 使用方式：

  $(selector).animate({CSS定義},time,function())

一、背景顏色漸變。

運行效果

二、文字顏色漸變。

運行效果

三、邊框顏色漸變。

運行效果

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

 xAxis: {
            data: ["襯衫11111","羊毛二二","雪紡衫111","褲子111","高跟鞋11","襪子111"],//x軸中的數據 name:"123",//坐標軸名稱。 nameLocation:'end',//坐標軸名稱顯示位置。 axisLabel : {//坐標軸刻度標簽的相關設置。 interval:0, rotate:"45" }
        },

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

interval

坐標軸刻度標簽的顯示間隔(在類目軸中有效哦)，默認會采用標簽不重疊的方式顯示標簽（也就是默認會將部分文字顯示不全） 
可以設置為0強制顯示所有標簽，如果設置為1，表示隔一個標簽顯示一個標簽，如果為3，表示隔3個標簽顯示一個標簽，以此類推

一開始我沒設置 因為標簽文本過長的原因他就自動不顯示全部 

被遮擋住就讓grid 組件離容器向上移動 把grid中的bottom的值調大一些

 grid:{//直角坐標系內繪圖網格 show:true,//是否顯示直角坐標系網格。[ default: false ] left:"20%",//grid 組件離容器左側的距離。 right:"30px",
            borderColor:"#c45455",//網格的邊框顏色 bottom:"20%" // },

• 1
• 2
• 3
• 4
• 5
• 6
• 7

 
- 2.換行顯示 
在xAxis.axisLabel中 使用formatter回調函數實現換行

 axisLabel : {//坐標軸刻度標簽的相關設置。 formatter : function(params){ var newParamsName = "";// 最終拼接成的字符串 var paramsNameNumber = params.length;// 實際標簽的個數 var provideNumber = 4;// 每行能顯示的字的個數 var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 換行的話，需要顯示幾行，向上取整 /**
                             * 判斷標簽的個數是否大于規定的個數， 如果大于，則進行換行處理 如果不大于，即等于或小于，就返回原標簽
                             */ // 條件等同于rowNumber>1 if (paramsNameNumber > provideNumber) { /** 循環每一行,p表示行 */ for (var p = 0; p < rowNumber; p++) { var tempStr = "";// 表示每一次截取的字符串 var start = p * provideNumber;// 開始截取的位置 var end = start + provideNumber;// 結束截取的位置 // 此處特殊處理最后一行的索引值 if (p == rowNumber - 1) { // 最后一次不換行 tempStr = params.substring(start, paramsNameNumber);
                                    } else { // 每一次拼接字符串并換行 tempStr = params.substring(start, end) + "\n";
                                    }
                                    newParamsName += tempStr;// 最終拼成的字符串 }

                            } else { // 將舊標簽的值賦給新標簽 newParamsName = params;
                            } //將最終的字符串返回 return newParamsName
                }

            }

• 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

• 3.文字豎直顯示 
  同樣和換行一個道理,只是這個是單個文字換行 
  在xAxis.axisLabel中 使用formatter回調函數實現換行

axisLabel: { interval: 0,  
                               formatter:function(value) {  
                                   return value.split("").join("\n"); } } 

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• 4.隔一個換行 
  在xAxis.axisLabel中 使用formatter回調函數實現換行

axisLabel : {//坐標軸刻度標簽的相關設置。 clickable:true,//并給圖表添加單擊事件  根據返回值判斷點擊的是哪里 interval : 0,
                formatter : function(params,index){ if (index % 2 != 0) { return '\n\n' + params;
                    } else { return params;
                    }
                }

            }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

1.RenderPass這個通道會在當前場景（scene）和攝像機（camera）的基礎上渲染出一個新場景，新建：

2.FilmPass這個通道通過掃描線和失真模擬電視屏幕效果，實現的效果超有時代感，新建：

3.EffectComposer可以理解為著色器通道容器，著色器通道按照先后順序添加進來并執行，新建：

本文實現的demo基于three.js_r86(請自行下載)，代碼所用js文件和圖片都在下載的那個包里面，請讀者自行引用。

實現效果：

代碼：

include指令標記用于把JSP文件，HTML網文文件等文件靜態嵌入當前JSP網頁中，語法如下:

靜態嵌入就是“先包含后處理”在編譯階段完成對文件嵌入，即先將當前JSP頁面與被嵌入文件合并成一個新的JSP頁面

eg：

二.include動作標記：

動態嵌入就是“先處理后包含”在運行階段完成對文件嵌入，即在把JSP頁面轉譯為JAVA文件時，并不合并兩個頁面。

eg：

運行結果：

總結：靜態嵌入中嵌入頁面與原頁面合并了，動態嵌入則還沒有。

動態嵌入與靜態嵌入相比較，動態嵌入執行速度稍慢，但是靈活性較高。