小程序模板網(wǎng)

玩Android微信小程序版

發(fā)布時間:2018-09-19 09:02 所屬欄目:小程序開發(fā)教程

最近開始針對項目性全面學(xué)習(xí)了一點js,和同事一起用MUI寫了個項目,就敢拿出來獻丑,我也是diaodiao的。經(jīng)過幾十個工時業(yè)余時間*(最近兩周有點忙,周期拖得有點長,本來計劃五一之前發(fā)出來的) ,在 仿知乎微信小程序demo 基礎(chǔ)上,結(jié)合玩Android開源API,完成了玩Android小程序版的初版 (和群里基佬們做得比感覺做的太簡單了,大家就當練練手)*,掃碼或者關(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代表著當前對象,會隨著程序的執(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];   //當前頁面
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ǎo)致獲取到的頁面實例不正確。當然如果對于邏輯層次簡單的、耦合少的頁面還是比較方便的。

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è)認證了。當然也歡迎有企業(yè)賬戶的基佬把代碼fork過去給大家提供個福利*(別犯法哦)*。

  • 其他的就不多贅述了

 


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24824.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢