最近在寫乙個android的學習類應用,其中乙個就是涉及知識體系,想了一下,決定還是混合webview來寫,方便修復資料的錯誤與更新資料。
由於知識體系,基本就是章節標題,章節條目,涉及重點的顏色突出。
匯入資料就直接用寫好的元件就好了。
這裡用的是react。
比如這個:章節是:資訊化管理,小結是:企業資訊化的發展
下面是元件**:ui使用是bootstrap3框架
//列表卡片
var ul_card = react.createclass(,
getinitialstate: function getinitialstate() ;
}, render: function() ,
react.createelement(
"div", ,
react.createelement(
"small",
null,
this.props.ul_head)),
react.createelement(
"ul", ,//迴圈渲染小結
this.props.ul_li_items.map(function(row, rowid) ,
row);}))
);}});
渲染**:
在需要的html頁面引入js(如果是jsx需要轉換一下,es6也需要換一下,這裡直接browser.js處理了,很慢。。)
//渲染js
reactdom.render(
react.createelement(ul_card,),document.getelementbyid('ul_card')
);
這樣就好啦。這只是乙個條例,很多的時候們就可以方便使用了。
下面是多個條例。
還有乙個就是尾部,會有乙個結束提示,比如,章節結束,每個頁面都會有,直接用小組件。
雖然這個很簡單,但是如果**尾部都這樣使用,就很大的簡化的步驟。
**:
//渲染**
reactdom.render(
react.createelement(over_tips,),document.getelementbyid("over_tips")
);//元件**:
//結束提示元件
這是乙個案例大題:
同樣的**:
//案例元件
var eg = react.createclass(,
getinitialstate: function getinitialstate() ;
}, render: function() ,
react.createelement(
"div", ,
react.createelement(
"div", ,
react.createelement(
"h4", null, this.props.eg_title)),
react.createelement(
"div", ,
react.createelement(
"div", , this.props.eg_content),
react.createelement(
"ul", ,
this.props.eg_how.map(function(row, rowid) ,
row)}))
)),) }});
下面是答案:
為什麼分開寫呢,因為,答案太細了。。。還有就是不太熟悉react
檢視解析,直接用react的onclick就好了。**就不放了,基本一致,主要就是設計好分層的條例。就顯得好看多了、
最後,別直接用browser轉換,慢、有時候巨慢。還報錯。
團隊題目的確立與小組分工
關於這次團隊程式設計的題目,我們小組產生了一些分歧,導致周四才確定下團隊程式設計的題目。更是在周五才把我們的任務和分工確定下來。產生這次分歧的主要原因還是我和郝一的意見沒有達成一致。我是主要想寫乙個小遊戲出來,同時提出了我的想法和觀點 可玩性高 郝一則是覺得這個遊戲略微有些簡單 確實挺簡單的 他更傾...
react 高階元件的實現
由於強大的mixin功能,在react元件開發過程中存在眾多不理於元件維護的因素,所以react社群提出了新的方法來替換mixin,那就是高階元件 首先在工程中安裝高階元件所需的依賴 npm install babel plugin proposal decorators然後輸入命令npm ejec...
react實現滾動計數元件
效果就是設定初始值,滾動計數加到結束值,首先安裝 npm install react countup 安裝完畢後引入 滾動計數 import countup from react countup 其實就是乙個react標準展示元件,用的時候在render裡當成正常元件用即可,需要修改樣式的話,元件本...