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

本項(xiàng)目主要包含以下幾大模塊：

• 首頁(yè)
• 項(xiàng)目
• 體系
• 我的
• 登錄

先上預(yù)覽圖：

首頁(yè)：

項(xiàng)目：

體系：

我的：

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

說(shuō)幾點(diǎn)：

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

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

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

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

3. 微信小程序代碼寫法的一些特點(diǎn)

• 工具類等輸出對(duì)公共方法

寫方法體還是一樣

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

或者

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

都和我們?cè)鷍s寫法、jquery等幾乎一致，然鵝要注意一點(diǎn)就是如果該方法需要外部調(diào)用，需要多加一個(gè)：

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

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

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

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

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

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

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

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

• 頁(yè)面銷毀與返回

那么在微信小程序里我們?cè)趺垂芾眄?yè)面呢。微信小程序固然沒(méi)有AMS這些東西，那么我們可以判斷page來(lái)管理：

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

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

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

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

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

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

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

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

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

• 列表單個(gè)Item點(diǎn)擊控件沖突

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

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

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

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

這里的點(diǎn)擊事件也很有趣，包括手指的手勢(shì)都有涉及，包括手指點(diǎn)下去的時(shí)候、抬起來(lái)的時(shí)候、移動(dòng)的時(shí)候等等，和Android的ACTION_DOWN及 ACTION_UP等異曲同工。

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

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

• 其他的就不多贅述了