最近開始針對項目性全面學(xué)習(xí)了一點js，和同事一起用MUI寫了個項目，就敢拿出來獻丑，我也是diaodiao的。經(jīng)過幾十個工時業(yè)余時間*（最近兩周有點忙，周期拖得有點長，本來計劃五一之前發(fā)出來的） ，在 仿知乎微信小程序demo 基礎(chǔ)上，結(jié)合玩Android開源API，完成了玩Android小程序版的初版 （和群里基佬們做得比感覺做的太簡單了，大家就當(dāng)練練手）*，掃碼或者關(guān)注微信公眾號 Android精推 即可體驗：

本項目主要包含以下幾大模塊：

• 首頁
• 項目
• 體系
• 我的
• 登錄

先上預(yù)覽圖：

首頁：

項目：

體系：

我的：

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

說幾點：

1. 微信小程序開發(fā)入門注意事項

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

2. 未實現(xiàn)的功能

• 首頁文章列表搜索*（計劃V1.1實現(xiàn)）*
• 收藏列表*（計劃V1.1實現(xiàn)）*
• 查看文章詳情等需要跳轉(zhuǎn)h5頁面的功能*（計劃搞到企業(yè)賬號實現(xiàn)）*
• 收藏項目等*（目前已實現(xiàn)收藏文章）*
• 剩下的你們提，我做不出來*（或者沒時間）*你們fork去

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

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

寫方法體還是一樣

function formatNumber(n) {
   n = n.toString()
   return n[1] ? n : '0' + n
}
復(fù)制代碼

或者

function getData(url) {
     XXXXXX
}
復(fù)制代碼

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

module.exports = {
   formatTime: formatTime
};
復(fù)制代碼

在文件里加上這個，或者也可以寫成：

module.exports.getData = getData;
復(fù)制代碼

• ####js頁面數(shù)據(jù)刷新html（wxml） 微信小程序綁定js數(shù)據(jù)不像angular那樣，在每個頁面的js文件中，都有個類似oncreat的方法，即Page() 函數(shù)，它是用來注冊一個頁面。接受一個 object 參數(shù)，其指定頁面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等這里每個頁面的WXML 中的動態(tài)數(shù)據(jù)均來自對應(yīng) Page 的 data。給頁面初始賦值可以在data里面直接放置：

data: {
      motto: 'Hello World',
      userInfo: {},
      wanUserName: '登錄玩Android賬戶',
   }
復(fù)制代碼

而我們經(jīng)過數(shù)據(jù)處理以后，需要實時更新頁面則可以直接調(diào)用：

//更新數(shù)據(jù)
         that.setData({
            userInfo: userInfo
         })
復(fù)制代碼

對，就是鍵值對的方式，和data一樣。這里需要注意的是 that 這個，我們一般會在方法體內(nèi)部先var一個參數(shù)that去獲取全局實例 this ，這樣避免方法自己的實例取代了頁面的全局實例。this代表著當(dāng)前對象，會隨著程序的執(zhí)行過程中的上下文改變，例如在wx.request({});方法的回調(diào)函數(shù)中，對象已經(jīng)發(fā)生改變，所以已經(jīng)不是wx.request({});方法對象了，data屬性也不存在了。

• 頁面銷毀與返回

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

// 返回上個頁面
         setTimeout(function () {
            wx.navigateBack({
               delta: 1
            })
         }, 1500);
復(fù)制代碼

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

var pages = getCurrentPages();
var currPage = pages[pages.length - 1];   //當(dāng)前頁面
var prevPage = pages[pages.length - 2];  //上一個頁面
//直接調(diào)用上一個頁面的setData()方法，把數(shù)據(jù)存到上一個頁面中去
prevPage.setData({
  mydata: {a:1, b:2}
})
復(fù)制代碼

這里是在簡書的 微信小程序從子頁面退回父頁面時的數(shù)據(jù)傳遞 學(xué)習(xí)到的。這種方式在邏輯上要清晰得多，也不存在對數(shù)據(jù)的銷毀有額外的管理工作，看起來十分優(yōu)雅，從一定的角度說類似于Android的ActivityForResult方式。當(dāng)然有利也是有弊的，比如使用這個頁面的有多個入口，這樣做很可能會導(dǎo)致獲取到的頁面實例不正確。當(dāng)然如果對于邏輯層次簡單的、耦合少的頁面還是比較方便的。

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

• 利用第三方工具fire實現(xiàn)類似EventBus全局事件通知

之前說到，fire是一個非常輕量級的第三方的組件庫，在微信小程序限制項目大小2MB的情況下，在js調(diào)用中可以實現(xiàn)類似EventBus的全局事件訂閱管理，非常簡單好用。 1、首先，導(dǎo)fire文件，這個去網(wǎng)上下載一個*（不到1KB）*就可以，直接把onfire.js文件拷過來。 2、寫訂閱事件和接受者的時候：

• A 頁面先訂閱一個事件，并定義處理方法；
• 從 B 頁面返回時，發(fā)送消息；
• A 頁面卸載時，解除訂閱。

是不是一毛一樣的？不僅僅在微信小程序中，包括vue、React等都可以使用，具體使用*（無非是一行代碼發(fā)送消息，接收消息的時候?qū)懸粋€方法）*可以去自行百度。

• 列表單個Item點擊控件沖突

焦點沖突什么的在Android里面問題多多，在這里就要簡單太多了。之前我曾嘗試使用Android的方式去做，發(fā)現(xiàn)總是碰壁。無奈又要求助一波百度*（文檔看的太少）*。在點擊事件的時候，我們一般是給被點擊View添加一個bindtap方法，后面寫上方法名即可：

bindtap="bindItemTap"
復(fù)制代碼

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

catchtap="clickCollect"
復(fù)制代碼

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

• ####URL的限制， 不論什么請求必須Https 微信小程序?qū)τ诰W(wǎng)絡(luò)請求有一定的限制，比如我們的玩Android是僅支持http的，但是微信是要求必須使用https請求才被許可，這也簡單。我采用的方法是利用第三方搭建的網(wǎng)站進行url橋接。把網(wǎng)絡(luò)管理類里面的baseUrl前面加上 wxapi.hotapp.cn/proxy/ ，然后拼上你在網(wǎng)站申請的key*（可以寫死）*，然后拼上你http協(xié)議的url即可。

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

• 其他的就不多贅述了