微信小程序之和風

序

湊了一把微信小程序的熱鬧！12月，小程序正式發布，很火，但隨之而來的是各種冷水，唱衰之調隨處可見。但作為一個小前端，豈能有新技術卻棄之不顧之理，更何況是微信出品的？抱著學習和研究的態度，才有了今天的這個我稱之為DEMO的和風小程序，以及小小的總結。

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

實現功能

天氣預報

這是最先嘗試的，用和風天氣的API,好處是免費，但不是很穩定的說。具體實現：

• 列表渲染

• 切換隱藏/顯示

• iconfont的應用

干貨新聞

做完天氣預報，覺得太單薄了，不能稱之為應用，何況心里還有點癢癢，于是借用了干貨的API,實現了簡單的新聞客戶端（捂臉）。具體功能：

• 圖片的切換

• 新聞列表，簡單的數據處理

• 下拉加載

• 上拉刷新

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

上圖先：

具體代碼這里就不貼出來了......

大家可以直接下載源碼查看，也很簡單。

更重要的是，我想說說微信的組件，被這個坑了......

微信組件補充

微信官網關于組件的介紹實在不多，已經寫好的在這里不在贅述，官網很清楚了說幾個上面沒有而我們開發中常用的。

toast消息提示框

toast消息提示框，可用在提示一些信息，比如清楚緩存給用戶一個友好的提示！或操作一些請求不想讓用戶有什么操作，toast也可以做到因為toast顯示時其他操作是無效的。

主要屬性：

wxml

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

js

Page({data:{// text:"這是一個頁面"hiddenToast: true}, ? /*** 監聽button點擊事件*/listenerButton: function() {this.setData({hiddenToast: !this.data.hiddenToast})},/*** toast顯示時間到時處理業務 */toastHidden:function(){this.setData({hiddenToast: true})}, ?onLoad:function(options){// 頁面初始化 options為頁面跳轉所帶來的參數 },onReady:function(){// 頁面渲染完成 },onShow:function(){// 頁面顯示 },onHide:function(){// 頁面隱藏 },onUnload:function(){// 頁面關閉 } })

model組件

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

常用屬性：

wxml

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

js

Page({data:{// text:"這是一個頁面"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){// 頁面初始化 options為頁面跳轉所帶來的參數 },onReady:function(){// 頁面渲染完成 },onShow:function(){// 頁面顯示 },onHide:function(){// 頁面隱藏 },onUnload:function(){// 頁面關閉 } })

?

loading 組件

loading通常使用在請求網絡數據時的一種方式，通過hidden屬性設置顯示與否

主要屬性：

wxml

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

js

Page({data:{// text:"這是一個頁面"hiddenLoading: true}, ?/*** 監聽button點擊事件*/listenerButton:function(){this.setData({hiddenLoading: !this.data.hiddenLoading})},onLoad:function(options){// 頁面初始化 options為頁面跳轉所帶來的參數 },onReady:function(){// 頁面渲染完成 },onShow:function(){// 頁面顯示 },onHide:function(){// 頁面隱藏 },onUnload:function(){// 頁面關閉 } })

轉載于:https://www.cnblogs.com/fayin/p/6349484.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。