欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?qū)W習(xí)之初探小程序

 更新時間:2016年09月27日 09:31:45   作者:甄某某某某  
這兩天“微信小程序”這個詞占據(jù)了朋友圈,大有一番風(fēng)起云涌之勢,當(dāng)然,還不可能夸張到使原生App開發(fā)人員失業(yè)這種程度。當(dāng)然,作為一名技術(shù)人員,時刻保持對新技術(shù)的好奇心是必須的,所以在網(wǎng)上找大神的教程,搭建了一下開發(fā)環(huán)境,來學(xué)習(xí)一下這個新的開發(fā)框架。

前言

9月21日,傳言已久的微信應(yīng)用號正式以“微信公眾平臺小程序”的名義發(fā)布,依然采取了內(nèi)測制度,目前只有少部分開發(fā)者可使用?!拔⑿胖浮睆埿↓堅谂笥讶榻B,這種小程序是一種不需要下載安裝即可使用的應(yīng)用,用戶掃一掃或者搜一下即可打開應(yīng)用,對用戶來說應(yīng)用觸手可及,對微信來說體現(xiàn)了用完即走的理念。應(yīng)用號出來之后,有人說微信這次要顛覆AppStore了,開發(fā)者直接基于微信開發(fā)小程序就可以了,不用開發(fā)什么App了。更有人說微信就是一個操作系統(tǒng),真的如此嗎?不管怎樣,我們下面先來一探微信小程序。

一 項目文件結(jié)構(gòu)

當(dāng)打開微信小程序的Demo的時候,我個人習(xí)慣是先看整個項目的文件結(jié)構(gòu),先大致弄清這部分是干什么的,那部分又是干什么的,微信小程序基本的文件結(jié)構(gòu)如下圖:


首先我們一眼就可以看到,在項目根目錄有三個文件,app.js,app.json,以及app.wxss,下面來談?wù)勎覍@三個文件的理解。

1 . app.js

app.js中包含一個App()函數(shù),我把它理解為微信小程序真正意義上的入口,也就是說當(dāng)啟動一個小程序的時候,首先會執(zhí)行到這里。App()函數(shù)用來注冊一個小程序,參數(shù)為Object類型,可以在其中指定小程序的生命周期函數(shù)(理解還不是很透徹), 當(dāng)然,也可以定義一個全局的數(shù)據(jù)和函數(shù),
我們可以在頁面中調(diào)用全局的getApp()方法,獲得小程序?qū)嵗?,從而來調(diào)用我們定義的全局數(shù)據(jù)和函數(shù)。

2 . app.json

app.json可以對小程序進行全局的配置,比如我們可以配置小程序有哪些頁面、窗口表現(xiàn)形式、設(shè)置網(wǎng)絡(luò)超時時間、設(shè)置多tab等。下面就是一個簡單的配置:

{ 
"pages": [ 
"page/index/index", 
"page/logs/index" 
], 
"window": { 
"navigationBarTitleText": "Demo" 
}, 
"tabBar": { 
"list": [{ 
"pagePath": "page/index/index", 
"text": "首頁" 
},{
"pagePath": "page/logs/logs",
 "text": "日志" 
}]
 }, 
"networkTimeout": { 
"request": 10000, 
"downloadFile": 10000 
}, 
"debug": true
}

3 .app.wxss

app.wxss文件比較好理解了,它相當(dāng)于一個全局的樣式表,等同于前端中的css文件,任何頁面都可以使用這個樣式表,當(dāng)然,如果某個頁面重復(fù)定義了某個屬性的表現(xiàn)形式的話,則會覆蓋app.wxss文件中定義的。

以上三個文件中,app.js和app.json是每個微信小程序必須要有的,app.wxss則根據(jù)需要來添加。

在圖一的文件結(jié)構(gòu)中,還有三個文件夾目錄:images,pages,utils,這種形式就類似我們開發(fā)中分包的做法(其實就是)-將具有類型性質(zhì)的文件或者類分目錄存放,這樣便于維護項目。

我們來關(guān)注下pages目錄,這個目錄存放了小程序的所有頁面。

這里我們定義了兩個頁面,index(首頁)和logs(顯示某種日志)。
可以看到,在每個頁面中,也有類似前邊兒我們所說的app.jsapp.json等文件,下面我們就來看看它們具體是什么。
以logs頁面為例:

1 .logs.js

我們看一下這個文件中簡單的代碼:

//logs.js
var util = require('../../utils/util.js')
Page({
 data: {
 logs: []
 },
 onLoad: function () {
 this.setData({
 logs: (wx.getStorageSync('logs') || []).map(function (log) {
 return util.formatTime(new Date(log))
 })
 })
 }
})

如果你有過開發(fā)經(jīng)驗或者是js開發(fā)經(jīng)驗,那么一樣就可以看出,這個類的結(jié)構(gòu)很簡單:1.引入了一個外部文件,2.有一個函數(shù),進行了某種處理。

我們看一下官方文檔是怎么介紹這個以js結(jié)尾的文件的:包含一個Page()函數(shù),Page()函數(shù)用來注冊一個頁面。接受一個object參數(shù),其指定頁面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。它是頁面的邏輯文件,頁面邏輯在這里處理。

在這個文件中,我們可以定義變量,函數(shù)等。

2 .logs.json

app.json是小程序的全部配置文件,那么不難理解,logs.json則是logs頁面的配置文件,在這里我們可以配置頁面標(biāo)題等屬性。

3 .logs.wxml

wxml文件是頁面獨有的,它相當(dāng)于界面,它是與用戶交互的入口,微信提供了很多基礎(chǔ)組件,例如按鈕,文本以及進度條等,都可以在這個文件中配置并顯示出具體的效果。

4 .logs.wxss

wxss跟app.wxss文件一樣,都是樣式表文件,不過每個頁面下的這個文件時對于某個頁面的,而app.wxss則是全局的樣式配置,相同屬性的話,logs.wxss會覆蓋掉app.wxss中的。

對于頁面下的文件配置,我們來看一下官方的說明:


總結(jié)

以上就是微信小程序的整體項目文件結(jié)構(gòu),由宏觀到具體,弄清整體框架后,再一步一步學(xué)習(xí)其中的細節(jié),可能會更加輕松。想學(xué)習(xí)更多關(guān)于微信小程序的文章請繼續(xù)關(guān)注腳本之家。

相關(guān)文章

  • 編程愛好者學(xué)習(xí)心得補充

    編程愛好者學(xué)習(xí)心得補充

    由于網(wǎng)絡(luò)的發(fā)展趨勢,現(xiàn)在越來越多的人喜歡電腦,并學(xué)習(xí)編程,現(xiàn)在新手不缺,就是缺少深入鉆研的牛人,這里簡單介紹下新手編程學(xué)習(xí)經(jīng)驗,需要的朋友可以參考下
    2013-06-06
  • 關(guān)于vs2019安裝不了擴展問題的解決方法

    關(guān)于vs2019安裝不了擴展問題的解決方法

    這篇文章主要介紹了關(guān)于vs2019安裝不了擴展問題的解決方法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-08-08
  • 基于Leaflet的VideoOverlay視頻圖層疊加實戰(zhàn)教程

    基于Leaflet的VideoOverlay視頻圖層疊加實戰(zhàn)教程

    這篇文章主要介紹了基于Leaflet的VideoOverlay視頻圖層疊加實戰(zhàn),本文首先介紹了DistortableVideo組件的相關(guān)知識,它的github倉庫信息,相關(guān)源代碼的目錄說明,使用依賴信息,需要的朋友可以參考下
    2023-02-02
  • VSCode連接遠程服務(wù)器調(diào)試代碼超詳細流程(圖文)

    VSCode連接遠程服務(wù)器調(diào)試代碼超詳細流程(圖文)

    這篇文章主要給大家介紹了關(guān)于VSCode連接遠程服務(wù)器調(diào)試代碼的超詳細流程,遠程調(diào)試是為了解決在本機開發(fā)環(huán)境與線上不一致導(dǎo)致調(diào)試難、搭建繁瑣,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
    2023-10-10
  • 通過自定義字段重新排序 WordPress 文章方法

    通過自定義字段重新排序 WordPress 文章方法

    在本文中,我將向您展示如何通過自定義字段更改文章的順序。WordPress 中文章的默認順序基于發(fā)布日期,并按時間倒序顯示。這意味著它將在頂部顯示最新的文章。
    2021-09-09
  • vs2019生成dll并調(diào)用的實現(xiàn)示例

    vs2019生成dll并調(diào)用的實現(xiàn)示例

    這篇文章主要介紹了vs2019生成dll并調(diào)用的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-02-02
  • Elasticsearch?在地理信息空間索引的探索和演進問題分析

    Elasticsearch?在地理信息空間索引的探索和演進問題分析

    本文梳理了Elasticsearch對于數(shù)值索引實現(xiàn)方案的升級和優(yōu)化思考,從2015年至今數(shù)值索引的方案經(jīng)歷了多個版本的迭代,實現(xiàn)思路從最初的字符串模擬到KD-Tree,技術(shù)越來越復(fù)雜,能力越來越強大,應(yīng)用場景也越來越豐富,感興趣的朋友跟隨小編一起看看吧
    2022-06-06
  • git修改已commit的注釋信息實現(xiàn)

    git修改已commit的注釋信息實現(xiàn)

    這篇文章主要介紹了git修改已commit的注釋信息實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-07-07
  • 十分鐘內(nèi)學(xué)會 避免用戶刷新導(dǎo)致重復(fù)POST提交

    十分鐘內(nèi)學(xué)會 避免用戶刷新導(dǎo)致重復(fù)POST提交

    在Web應(yīng)用中,采用POST提交信息是非常常見的,然而如果目標(biāo)頁面打開得太慢,用戶就可能會刷新頁面,這時候之前已經(jīng)提交過的信息就會被重復(fù)提交。
    2009-08-08
  • VS Code使用Git可視化管理源代碼詳細教程(推薦)

    VS Code使用Git可視化管理源代碼詳細教程(推薦)

    這篇文章主要介紹了VS Code使用Git可視化管理源代碼詳細教程,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-02-02

最新評論