玩Android微信小程式版

摘要： 最近開始針對專案性全面學習了一點js，和同事一起用MUI寫了個專案，就敢拿出來獻醜，我也是diaodiao的。經過幾十個工時業餘時間*（最近兩週有點忙，週期拖得有點長，本來計劃五一之前發出來的），在 仿知乎微信小程式demo 基礎上，結合玩Android開源API，完成了玩Android...

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

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

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

先上預覽圖：

首頁：

專案：

體系：

我的：

為什麼要寫這個？學了點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日