玩Android微信小程式版

mobile墨白發表於2018-09-14
Android微信小程式

最近開始針對專案性全面學習了一點js，和同事一起用MUI寫了個專案，就敢拿出來獻醜，我也是diaodiao的。經過幾十個工時業餘時間*（最近兩週有點忙，週期拖得有點長，本來計劃五一之前發出來的），在仿知乎微信小程式demo基礎上，結合玩Android開源API，完成了玩Android小程式版的初版（和群裡基佬們做得比感覺做的太簡單了，大家就當練練手）*，掃碼或者關注微信公眾號Android精推即可體驗：

android精推小程式碼.jpg

本專案主要包含以下幾大模組：

  • 首頁
  • 專案
  • 體系
  • 我的
  • 登入

先上預覽圖：

首頁：

首頁.gif

專案：

專案.gif

體系：

體系.gif

我的：

我的.gif

為什麼要寫這個？學了點js就飄了，群裡大佬們寫的都是Android版本的，微信小程式大家似乎都有接觸但是可能都覺得比較簡單，也是為了便於手持iPhone的基佬們隨時點贊刷玩Android。

說幾點：

1. 微信小程式開發入門注意事項

  • 這裡就不贅述太多，看我基友阿湯哥的一篇文章小程式基本介紹就差不多了。簡單歸簡單，不過微信小程式在開發過程中坑還是很多的，我也是邊學邊百度，我這個人踩坑踩慣了，建議大家初學的時候，找個優質一點的demo照葫蘆畫瓢，學著寫很容易上手。

2. 未實現的功能

  • 首頁文章列表搜尋*（計劃V1.1實現）*
  • 收藏列表*（計劃V1.1實現）*
  • 檢視文章詳情等需要跳轉h5頁面的功能*（計劃搞到企業賬號實現）*
  • 收藏專案等*（目前已實現收藏文章）*
  • 剩下的你們提，我做不出來*（或者沒時間）*你們fork去

3. 微信小程式程式碼寫法的一些特點

  • 工具類等輸出對公共方法

寫方法體還是一樣

function formatNumber(n) {
   n = n.toString()
   return n[1] ? n : '0' + n
}
複製程式碼

或者

function getData(url) {
     XXXXXX
}
複製程式碼

都和我們原生js寫法、jquery等幾乎一致，然鵝要注意一點就是如果該方法需要外部呼叫，需要多加一個：

module.exports = {
   formatTime: formatTime
};
複製程式碼

在檔案里加上這個，或者也可以寫成：

module.exports.getData = getData;
複製程式碼
  • ####js頁面資料重新整理html（wxml） 微信小程式繫結js資料不像angular那樣，在每個頁面的js檔案中，都有個類似oncreat的方法，即Page() 函式，它是用來註冊一個頁面。接受一個 object 引數，其指定頁面的初始資料、生命週期函式、事件處理函式等這裡每個頁面的WXML 中的動態資料均來自對應 Page 的 data。給頁面初始賦值可以在data裡面直接放置：
 data: {
      motto: 'Hello World',
      userInfo: {},
      wanUserName: '登入玩Android賬戶',
   }
複製程式碼

而我們經過資料處理以後，需要實時更新頁面則可以直接呼叫：

         //更新資料
         that.setData({
            userInfo: userInfo
         })
複製程式碼

對，就是鍵值對的方式，和data一樣。這裡需要注意的是that這個，我們一般會在方法體內部先var一個引數that去獲取全域性例項this，這樣避免方法自己的例項取代了頁面的全域性例項。this代表著當前物件，會隨著程式的執行過程中的上下文改變，例如在wx.request({});方法的回撥函式中，物件已經發生改變，所以已經不是wx.request({});方法物件了，data屬性也不存在了。

  • 頁面銷燬與返回

那麼在微信小程式裡我們怎麼管理頁面呢。微信小程式固然沒有AMS這些東西，那麼我們可以判斷page來管理：

         // 返回上個頁面
         setTimeout(function () {
            wx.navigateBack({
               delta: 1
            })
         }, 1500);
複製程式碼

這裡我設定了一個延遲，核心的程式碼是wx.navigateBack(),這裡面的引數delta指的是退回頁面的層數，比如我這裡是返回上一頁，那麼值就是1，以此類推。。。但是我們一般返回上個頁面的時候也會帶一定的引數，這裡就有三種*（可能更多）介紹給大家： 1、利用本地儲存（類似Android的sp）*方式儲存起來，這裡去看看官方文件很簡單，都是wx.XXX的。 2、利用生命週期傳遞，例如：

var pages = getCurrentPages();
var currPage = pages[pages.length - 1];   //當前頁面
var prevPage = pages[pages.length - 2];  //上一個頁面
//直接呼叫上一個頁面的setData()方法，把資料存到上一個頁面中去
prevPage.setData({
  mydata: {a:1, b:2}
})
複製程式碼

這裡是在簡書的微信小程式從子頁面退回父頁面時的資料傳遞學習到的。這種方式在邏輯上要清晰得多，也不存在對資料的銷燬有額外的管理工作，看起來十分優雅，從一定的角度說類似於Android的ActivityForResult方式。當然有利也是有弊的，比如使用這個頁面的有多個入口，這樣做很可能會導致獲取到的頁面例項不正確。當然如果對於邏輯層次簡單的、耦合少的頁面還是比較方便的。

3、使用fire傳遞，這個方式是類似於我們EventBus的方式，後面有詳解。

  • 利用第三方工具fire實現類似EventBus全域性事件通知

之前說到，fire是一個非常輕量級的第三方的元件庫，在微信小程式限制專案大小2MB的情況下，在js呼叫中可以實現類似EventBus的全域性事件訂閱管理，非常簡單好用。 1、首先，導fire檔案，這個去網上下載一個*（不到1KB）*就可以，直接把onfire.js檔案拷過來。 2、寫訂閱事件和接受者的時候：

  • A 頁面先訂閱一個事件，並定義處理方法；
  • 從 B 頁面返回時，傳送訊息；
  • A 頁面解除安裝時，解除訂閱。

是不是一毛一樣的？不僅僅在微信小程式中，包括vue、React等都可以使用，具體使用*（無非是一行程式碼傳送訊息，接收訊息的時候寫一個方法）*可以去自行百度。

  • 列表單個Item點選控制元件衝突

焦點衝突什麼的在Android裡面問題多多，在這裡就要簡單太多了。之前我曾嘗試使用Android的方式去做，發現總是碰壁。無奈又要求助一波百度*（文件看的太少）*。在點選事件的時候，我們一般是給被點選View新增一個bindtap方法，後面寫上方法名即可：

bindtap="bindItemTap"
複製程式碼

而如果這個View裡面包含了其他的子View需要新增點選事件的時候，我們需要使用另一種寫法了：

catchtap="clickCollect"
複製程式碼

這裡的點選事件也很有趣，包括手指的手勢都有涉及，包括手指點下去的時候、抬起來的時候、移動的時候等等，和Android的ACTION_DOWN及 ACTION_UP等異曲同工。

  • ####URL的限制， 不論什麼請求必須Https 微信小程式對於網路請求有一定的限制，比如我們的玩Android是僅支援http的，但是微信是要求必須使用https請求才被許可，這也簡單。我採用的方法是利用第三方搭建的網站進行url橋接。把網路管理類裡面的baseUrl前面加上wxapi.hotapp.cn/proxy/，然後拼上你在網站申請的key*（可以寫死）*，然後拼上你http協議的url即可。

提到微信的url限制，不得不說微信目前限制個人開發者和海外開發者使用webview開啟第三方h5頁面。所以，我們們在預覽的時候只能用編譯器去預覽，想看具體的文章目前還是有限制的，我就不求贊助申請企業認證了。當然也歡迎有企業賬戶的基佬把程式碼fork過去給大家提供個福利*（別犯法哦）*。

  • 其他的就不多贅述了

再一次感謝您花費時間看我囉嗦了這麼久，覺得還不錯可以 star star star 一波。微信小程式我並不打算深耕太多，後面會把重心轉移到其他技術方面。如果您對本專案有什麼想法歡迎去提issue，有興趣可以自己參與進來迭代維護。祝您生活愉快！

作者 @samhaus
2018 年 05月 01日

相關文章