微信小程式的示例程式quickstart學習筆記
網上有幾個關於微信小程式開發的基本教程,
當然,最重要的其實是官方教程的框架這一部分,它才是權威解釋
因為沒有系統學習過javascript,因此看完這2篇教程之後,還是沒有完全明白quickstart中的一些函式和呼叫之間的關係。又在網上搜索了一些文章。基本弄清楚了,做一下筆記。
先說app.js。
onLaunch: function () {
//呼叫API從本地快取中獲取資料
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
},
官方教程中說:“當小程式初始化完成時,會觸發 onLaunch(全域性只觸發一次)”。
這個函式觸發後,首先是從本地快取中找key為‘logs’的資料。如果找到了,就傳遞給變數logs,如果找不到,就生產一個新的變數logs,其值為空。
logs.unshift(Date.now())是把當前時間放到logs的最前面(如果原來有資料的話)。
也可以改為logs.push(Date.now()),這個的效果是把當前時間放到logs的最後面。
這樣,本地快取裡面會有類似下面的資料:
Logs Array[1482658382226,1482658508926,1482658538332]
Logs這個key對應一個數組,中括號中的三個值其實都是時間,是目前為止3次啟動這個微信小程式的時間記錄。但是這個格式只有機器能懂,要格式化一下才能看得懂。Utils目錄下面的util.js中的formatTime(date)函式就是用作格式翻譯的。
wx.setStorageSync('logs',logs)是把修改後的logs傳回到本地快取。說實在的,這個本地快取是怎麼回事情,我還真不清楚,可能是在“微信—我的—設定—通用—儲存空間”裡面的。我只知道,同一個程式,用測試工具取不同的專案名稱的時候,是分別儲存的。
下面這個函式比較有趣,懂了這個,其他的可以以此類推。
getUserInfo:function(cb){
var that = this
if(this.globalData.userInfo){
typeof cb == "function"&& cb(this.globalData.userInfo)
}else{
//呼叫登入介面
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo =res.userInfo
typeof cb == "function"&& cb(that.globalData.userInfo)
}
})
}
})
}
},
首先這個var that = this是防止後面呼叫的時候用錯了物件指標。
if(this.globalData.userInfo){ typeof cb == "function"&& cb(this.globalData.userInfo) }
剛開始的時候,因為下面因為全域性變數userInfo是空的,所以這句話會被跳過,執行下面else後面的半句:首先是呼叫微信的登入函式,登入完畢之後,呼叫微信的wx.getUserInfo函式,得到使用者的userInfo。然後這句比較關鍵:
typeof cb == "function" &&cb(that.globalData.userInfo)
我們來看看cb會是什麼東西。真正呼叫getUserInfo:function(cb)的,是在index.js中onload函式裡面:
app.getUserInfo(function(userInfo){
//更新資料
that.setData({
userInfo:userInfo
})
})
所以這個cb其實是一個函式,函式體是:
function(userInfo){ that.setData({ userInfo:userInfo })
那麼cb(that.globalData.userInfo)相當於:
function(that.globalData.userInfo){ that.setData({ userInfo: that.globalData.userInfo})
結果就是取得的使用者資訊傳遞給全域性變數userInfo。
至於為什麼用setData,官方文件中介紹,setData 函式用於將資料從邏輯層傳送到檢視層,從而觸發檢視層自動改變。直接修改app或page資料無效,無法改變頁面的狀態,還會造成資料不一致。
再看index.js這裡面要緊的是事件處理函式:
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
當事件觸發的時候,微信會導航到/logs/logs頁面。那麼什麼時候會觸發這個事件呢,首先這是一個檢視被點選的事件,從index.wxml裡看,這個檢視包括一個使用者的頭像和頭像下面的使用者名稱。所以,當你在使用者頭像和使用者名稱上點選的時候,就會跳轉到logs頁面。
下面是quickstart的官方原始碼及介紹地址
https://mp.weixin.qq.com/debug/wxadoc/dev/?t=20161222
還有這篇文章也很不錯:理解和使用javascript中的回撥函式
http://blog.csdn.net/luoweifu/article/details/41466537
相關推薦
微信小程序基本目錄結構學習
DC 相對 模式 大小 require tab contain text func 今天我們就以firstdemo為例,介紹一下小程序的基本目錄結構。當我們打開一個微信小程序項目後,點擊進入“編輯”菜單,我們可以看到有以下5個文件/文件夾):pages文件夾,utils文
微信小程式的示例程式quickstart學習筆記
網上有幾個關於微信小程式開發的基本教程, 當然,最重要的其實是官方教程的框架這一部分,它才是權威解釋 因為沒有系統學習過javascript,因此看完這2篇教程之後,還是沒有完全明白quickstart中的一些函式和呼叫之間的關係。又在網上搜索了一些文章。基本弄清
與大家分享學習微信小程式開發的一些心得
因為我也才開始學習微信小程式不久,下文也是現在的一時之言,大家有不同的想法也可以在評論裡共同交流討論,希望文章能給大家提供一點點幫助。 最近接觸到了一些前端框架,像Vue.js,React,發現小程式的框架體系跟它們很像。它們都推崇模組化,元件化,資料與元素繫結。這樣沒有繁瑣的DOM操作,
devopen.club微信小程式學習筆記
同一個使用者 進入不同的小程式 所產生的openid是不一樣的 是使用者的唯一標識 同一個使用者關注了不同的公眾號(小程式),同一個使用者對應一個unionid 如果用迴圈的話 就用block標籤 會迴圈裡面的標籤 不會出現重複多餘的標籤 如果用view就會每層外面
【微信小程式學習之路】----使用globalData函式設定全域性變數
我們在app.js中設定需要的全域性變數的引數,比如公司名稱等 //app.js App({ globalData: { title: 'tomatocc' } }) 然後我們就可以在某個頁面的js檔案中(比如index.js)的data數組裡面去直
【微信小程式學習之路】----使用template模板所遇到的問題
官方文件的demo過於簡單,本人嘗試幾次也沒有弄懂,找了幾個demo後才漸漸瞭解清楚小程式的模板是怎麼玩的。並且展示一個簡單的demo 首先來看我們的專案結構:主要用到index.js,index.wxml,temp.js,temp.wxml 首先,我
微信小程式入門學習筆記(二)——阿里雲伺服器PHP MYSQL Apache配置
持續更新 持續學習 感謝原文大佬連結 https://www.linuxidc.com/Linux/2017-08/146220.htm 筆者在阿里雲上買了輕量應用伺服器 學生認證通過以下 便宜的 選擇的CentOS 7.3 64位 https://promot
微信小程式入門學習筆記(一)
入門級的跳轉格式: wx.redirectTo():不能返回上一層頁面 wx.navigateTo():用於頁面的跳轉 以上兩個不能跳轉於"tabBar" 因此跳轉"tabBar": wx.switchTab 感謝大佬的教程解答 了我的問題 以下附上原文連結 作者
微信小程式小白總結全攻略2-學習路線與相關資源和除錯工具
廢話都在前一章講了,這裡直接切入正題。 下面以我自己的微信小程式全棧學習路線(淺嘗輒止式的),按照時間順序往下依次列出,並附上對應的除錯工具和方法、學習資源以及我的評價 一、前端部分 (一)HTML(超文字標記語言:HyperText Markup Language) 除錯工具:
微信小程式的學習總結
小程式包含一個描述整體程式的 app 和多個描述各自頁面的 page。 一.微信小程式的檔案結構: 一個小程式主體部分由三個檔案組成,必須放在專案的根目錄,分別是app.js,app.json,app.wxss; 一個小程式頁面由四個檔案組成,分別是:js檔
從零開始學習微信小程式(二)
wx.navigateTo()與wx.redirectTo()的區別 區別一 wx.navigateTo()表示的是從一個頁面跳轉到另一個頁面,會在另一個頁面中出現可返回之前頁面的按鈕,另一個頁面與之前頁面的關係為子頁面與父頁面的關係 wx.redirectTo()表示
微信小程式——學習筆記(三)檢視層(1)
WXS—(WeiXin Script)是小程式特有的一套指令碼語言。wxs有自己的語法,今天就學習一下wxs的語法。 1) wxs程式碼可以編寫在wxml檔案中的<wxs>標籤內,或者是XXX.wxs的檔案內。不管是標籤還是檔案都是一個單獨的模組。 2) 每個模組裡面定義的變數與函式
微信小程式——學習筆記(二):邏輯層(1)
邏輯層將資料進行處理後傳送給檢視層,同時接受檢視層的事件反饋。 用App()函式註冊一個小程式。 當小程式初始化完成時,會觸發 onLaunch(全域性只觸發一次) 當小程式啟動,或從後臺進入前臺顯示,會觸發 onShow 當小程式從前臺進入後臺,會觸發 onHide 當小程式發生指令碼錯
微信小程式——學習筆記(一):json
json配置檔案—— 1> app.json:作用於整個小程式全域性配置 頁面路徑——page(陣列[字串="路徑+檔名"]) "pages":["pages/index/index","pages/log/index"]
從零開始做微信小程式後端---學習日記
wx.login(OBJECT) 呼叫介面獲取登入憑證(code)進而換取使用者登入態資訊,包括使用者的唯一標識(openid) 及本次登入的 會話金鑰(session_key)等。使用者資料的加解密通訊需要依賴會話金鑰完成。 獲取到初步的目標,
微信小程式學習筆記(一)之框架及工具
文章目錄 一、app.json的配置 1. 決定頁面檔案路徑 2. 配置視窗表現 3. 配置tab標籤導航 4. 設定網路超時時間 5. 配置debug模式 二、App()函式使用
微信小程式自動化測試-----FAutoTest框架的學習
接觸這個騰訊的框架有差不多快一個月的時間了,現在整理一下遇到的坑。(僅支援安卓手機) 首先,先貼出這個框架的git地址:https://github.com/Tencent/FAutoTest,裡面有具體的測試環境搭建流程。 環境搭建好,那麼就可以進行除錯了。 前提條件:確保開啟微信除
微信小程式學習筆記(八)本地資料快取
上一篇:微信小程式學習筆記(七) 【將資料儲存在本地快取】wx.setStorage 【讀取本地快取】wx.getStorage 以手機號+密碼登入為例,把登入成功返回的token值儲存在本地快取中,然後讀取快取中的token: login.php: <?php
微信小程式如何實現下拉框效果?(程式碼示例)
wxml程式碼: <view class='top-text'> 選擇接收班級</view> <!-- 下拉框 --> <view class='top-selected' bindtap='bindShowMsg'> <
用微信開發者工具--開啟微信小程式weui元件示例
瀏覽器搜尋 :https://github.com/Tencent/weui-wxss/ 1.下載為小程式設計的weui元件, 2.在開發者工具中開啟dist目錄,而不是整個目錄, 在開發者工具中就可以預覽weui元件的示例了。 如果想在自己專案中引用weui元件,需要