微信小程序之和風(fēng)

序

湊了一把微信小程序的熱鬧！12月，小程序正式發(fā)布，很火，但隨之而來(lái)的是各種冷水，唱衰之調(diào)隨處可見(jiàn)。但作為一個(gè)小前端，豈能有新技術(shù)卻棄之不顧之理，更何況是微信出品的？抱著學(xué)習(xí)和研究的態(tài)度，才有了今天的這個(gè)我稱之為DEMO的和風(fēng)小程序，以及小小的總結(jié)。

源代碼在這里：https://github.com/CaptainLiao/wechatProgram

實(shí)現(xiàn)功能

天氣預(yù)報(bào)

這是最先嘗試的，用和風(fēng)天氣的API,好處是免費(fèi)，但不是很穩(wěn)定的說(shuō)。具體實(shí)現(xiàn)：

• 列表渲染

• 切換隱藏/顯示

• iconfont的應(yīng)用

干貨新聞

做完天氣預(yù)報(bào)，覺(jué)得太單薄了，不能稱之為應(yīng)用，何況心里還有點(diǎn)癢癢，于是借用了干貨的API,實(shí)現(xiàn)了簡(jiǎn)單的新聞客戶端（捂臉）。具體功能：

• 圖片的切換

• 新聞列表，簡(jiǎn)單的數(shù)據(jù)處理

• 下拉加載

• 上拉刷新

• 新聞詳情的跳轉(zhuǎn)（新聞詳情返回的是含有標(biāo)簽的字符串，小程序不能解析......留待后期解決）

上圖先：

具體代碼這里就不貼出來(lái)了......

大家可以直接下載源碼查看，也很簡(jiǎn)單。

更重要的是，我想說(shuō)說(shuō)微信的組件，被這個(gè)坑了......

微信組件補(bǔ)充

微信官網(wǎng)關(guān)于組件的介紹實(shí)在不多，已經(jīng)寫(xiě)好的在這里不在贅述，官網(wǎng)很清楚了說(shuō)幾個(gè)上面沒(méi)有而我們開(kāi)發(fā)中常用的。

toast消息提示框

toast消息提示框，可用在提示一些信息，比如清楚緩存給用戶一個(gè)友好的提示！或操作一些請(qǐng)求不想讓用戶有什么操作，toast也可以做到因?yàn)閠oast顯示時(shí)其他操作是無(wú)效的。

主要屬性：

wxml

<!--點(diǎn)擊button觸發(fā)toast--> <button type="primary" bindtap="listenerButton">點(diǎn)擊顯示toast</button> <!--toast消息框顯示3秒，并綁定事件--> <toast hidden="{{hiddenToast}}" duration="3000" bindchange="toastHidden" >OK!</toast>

js

Page({data:{// text:"這是一個(gè)頁(yè)面"hiddenToast: true}, ? /*** 監(jiān)聽(tīng)button點(diǎn)擊事件*/listenerButton: function() {this.setData({hiddenToast: !this.data.hiddenToast})},/*** toast顯示時(shí)間到時(shí)處理業(yè)務(wù) */toastHidden:function(){this.setData({hiddenToast: true})}, ?onLoad:function(options){// 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù) },onReady:function(){// 頁(yè)面渲染完成 },onShow:function(){// 頁(yè)面顯示 },onHide:function(){// 頁(yè)面隱藏 },onUnload:function(){// 頁(yè)面關(guān)閉 } })

model組件

modal彈出框常用在提示一些信息比如：退出應(yīng)用，清楚緩存，修改資料提交時(shí)一些提示等等。

常用屬性：

wxml

<!--監(jiān)聽(tīng)button點(diǎn)擊事件--> <button bindtap="listenerButton" type="primary">彈出modal</button> ? <!--彈出框--> <modal title="退出應(yīng)用"hidden="{{hiddenModal}}"confirm-text="再看看"cancel-text="退出"bindconfirm="listenerConfirm"bindcancel="listenerCancel" >您是否真的要退出應(yīng)用</modal>

js

Page({data:{// text:"這是一個(gè)頁(yè)面"hiddenModal: true}, ?listenerButton:function() {this.setData({hiddenModal: !this.data.hiddenModal})}, ?listenerConfirm:function() {this.setData({hiddenModal: true})}, ?listenerCancel:function() {this.setData({hiddenModal: true})}, ?onLoad:function(options){// 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù) },onReady:function(){// 頁(yè)面渲染完成 },onShow:function(){// 頁(yè)面顯示 },onHide:function(){// 頁(yè)面隱藏 },onUnload:function(){// 頁(yè)面關(guān)閉 } })

?

loading 組件

loading通常使用在請(qǐng)求網(wǎng)絡(luò)數(shù)據(jù)時(shí)的一種方式，通過(guò)hidden屬性設(shè)置顯示與否

主要屬性：

wxml

<!----> <button type="primary" bindtap="listenerButton">顯示loading</button> <!--默認(rèn)隱藏--> <loading hidden="{{hiddenLoading}}">正在加載</loading>12341234

js

Page({data:{// text:"這是一個(gè)頁(yè)面"hiddenLoading: true}, ?/*** 監(jiān)聽(tīng)button點(diǎn)擊事件*/listenerButton:function(){this.setData({hiddenLoading: !this.data.hiddenLoading})},onLoad:function(options){// 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù) },onReady:function(){// 頁(yè)面渲染完成 },onShow:function(){// 頁(yè)面顯示 },onHide:function(){// 頁(yè)面隱藏 },onUnload:function(){// 頁(yè)面關(guān)閉 } })

轉(zhuǎn)載于:https://www.cnblogs.com/fayin/p/6349484.html

總結(jié)

以上是生活随笔為你收集整理的【微信小程序】——实战开发之和风（含demo）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。