微信小程式基礎入門
準備
Demo 專案地址
https://github.com/zce/weapp-demo
Clone or Download(需準備GIT
環境)
$ cd path/to/project/root
$ git clone https://github.com/zce/weapp-demo.git project-name --depth 1
$ cd project-name
沒有git
環境,可以直接下載
安裝開發環境
下載地址
安裝過程
對於Windows使用者直接雙擊下一步的方式安裝即可,此處注意我們使用的版本是官方最新的版本(不需要破解),可以不用AppID,也就是說沒有資格的開發者也可以測試。
環境測試以及演示專案
安裝完成過後通過開啟我們已經完成的應用測試環境是否正常
開發者工具安裝完成後,開啟並使用微信掃碼登入。
選擇建立“專案”,填入你在公眾平臺的AppID
,如果沒有的話可以點選無AppID
。
設定一個本地專案的名稱(非小程式名稱),比如WeApp Demo
,並選擇一個本地資料夾作為儲存目錄。
接下來點選新建專案
就可以在主介面中預覽到我們的豆瓣電影示例
了
小程式開發初體驗
Hello world
希望是一個從零到一的轉換過程~
建立專案
接下來建立一個新的專案,理解小程式專案的基本結構和一些基礎語法。
官方的開發工具為此準備了一個QuickStart
專案。在建立過程中,如果選擇的資料夾是個空資料夾,開發者工具會提示:是否需要建立一個quick start
是
,開發者工具會自動幫助我們在開發目錄裡生成一個簡單的專案。
藉助官方的QuickStart專案
完成最基本的Hello world
,理解小程式專案的基本結構,學習基礎操作與語法。
專案結構
└─ empty-folder/ ·································· 專案所在目錄 ├─ pages/ ······································ 頁面目錄 │ ├─ index/ ··································· index頁面 │ │ ├─ index.js ······························ index頁面邏輯 │ │ ├─ index.wxml ···························· index頁面結構 │ │ └─ index.wxss ···························· index頁面樣式 │ └─ logs/ ···································· logs頁面 │ ├─ logs.js ······························· logs頁面邏輯 │ ├─ logs.wxml ····························· logs頁面結構 │ └─ logs.wxss ····························· logs頁面樣式 ├─ utils/ ······································ 公共指令碼目錄 │ └─ util.js ·································· 工具指令碼 ├─ app.js ······································ 應用程式邏輯 ├─ app.json ···································· 應用程式配置 └─ app.wxss ···································· 應用程式公共樣式
我簡單的畫了一個結構圖:
頁面結構
每個頁面元件也分為四個檔案組成:
[page-name].js
頁面邏輯檔案,用於建立頁面物件,以及處理頁面生命週期控制和資料處理
[page-name].json
設定當前頁面工作時的window的配置,此處會覆蓋app.json中的window設定,也就是說只可以設定window中設定的屬性
[page-name].wxml
wxml指的是Wei Xin Markup Language
用於定義頁面中元素結構的,語法遵循XML語法,注意是XML語法,不是HTML語法,不是HTML語法,不是HTML語法
[page-name].wxss
wxml指的是Wei Xin Style Sheet
用於定義頁面樣式的,語法遵循CSS語法,擴充套件了CSS基本用法和長度單位(主要就是rpx響應式畫素)
專案配置
相關連結:
小程式中的配置檔案分為兩種:
- 全域性配置檔案,根目錄下的app.json
- 頁面配置檔案,每個頁面目錄下的[page-name].json
app.json
專案配置宣告檔案(指定專案的一些資訊,比如導航欄樣式顏色等等)
{
// 當前程式是由哪些頁面組成的(第一項預設為初始頁面)
// 所有使用到的元件或頁面都必須在此體現
// https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#pages
"pages": [ ... ],
// 應用程式視窗設定
// https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#window
"window": { ... },
// 應用導航欄設定
// https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar
"tabBar": { ... },
// 網路超時設定
// https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#networkTimeout
"networkTimeout": {},
// 是否在控制檯輸出除錯資訊
// https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#debug
"debug": true
}
[page-name].json
用於指定特定頁面工作時,window的設定:
{
// 導航條背景色
"navigationBarBackgroundColor": "#35495e",
// 導航條前景色(只能是white/black)
"navigationBarTextStyle": "white",
// 導航條文字
"navigationBarTitleText": "電影 « 豆瓣",
// 視窗背景顏色
"backgroundColor": "#fff",
// 視窗前景色
"backgroundTextStyle": "dark",
// 是否開啟下拉重新整理
"enablePullDownRefresh": true
}
邏輯層分析
應用程式邏輯app.js
app.js
作為專案主入口檔案,用於建立應用程式物件
// App函式是一個全域性函式,用於建立應用程式物件
App({
// ========== 全域性資料物件(可以整個應用程式共享) ==========
globalData: { ... },
// ========== 應用程式全域性方法 ==========
method1 (p1, p2) { ... },
method2 (p1, p2) { ... },
// ========== 生命週期方法 ==========
// 應用程式啟動時觸發一次
onLaunch () { ... },
// 當應用程式進入前臺顯示狀態時觸發
onShow () { ... },
// 當應用程式進入後臺狀態時觸發
onHide () { ... }
})
也就是說,當應用程式啟動時會自動執行專案目錄下的app.js
檔案。
在app.js
中通過呼叫全域性App([option])
方法建立一個應用程式例項。
其中通過引數指定的一些特定的方法,會在特定的執行時機去執行,也就是說通常所說的生命週期事件方法。
屬性 | 型別 | 描述 | 觸發時機 |
---|---|---|---|
onLaunch | Function | 生命週期函式--監聽小程式初始化 | 當小程式初始化完成時,會觸發 onLaunch(全域性只觸發一次) |
onShow | Function | 生命週期函式--監聽小程式顯示 | 當小程式啟動,或從後臺進入前臺顯示,會觸發 onShow |
onHide | Function | 生命週期函式--監聽小程式隱藏 | 當小程式從前臺進入後臺,會觸發 onHide |
也可以定義任意其他的物件成員(例如:方法和屬性),這些成員可以在內部直接使用,或者外部通過獲取app
物件呼叫:
屬性 | 型別 | 描述 |
---|---|---|
其他 | Any | 開發者可以新增任意的函式或資料到 Object 引數中,用 this 可以訪問,一般用於存放業務邏輯配置,比如:API地址 |
app.js
App({
data1: '123',
data2: { message: 'hello world' },
api: {
list: 'https://github.com/zce/',
detail: 'https://github.com/zce/',
},
foo () {
return 'bar'
}
})
other.js
// getApp 也是全域性函式,可以在任意地方呼叫,用於獲取全域性應用程式例項物件
var app = getApp()
console.log(app.data1)
console.log(app.data2)
console.log(app.foo())
頁面邏輯[page-name].js
[page-name].js
是一個頁面的重要組成部分,用於建立頁面物件
// 獲取全域性應用程式物件
const app = getApp()
// Page也是一個全域性函式,用來建立頁面物件
Page({
// ========== 頁面資料物件(可以暴露到檢視中,完成資料繫結) ==========
data: { ... },
// ========== 頁面方法(可以用於抽象一些公共的行為,例如載入資料,也可以用於定義事件處理函式) ==========
method1 (p1, p2) { ... },
method2 (p1, p2) { ... },
// ========== 生命週期方法 ==========
// 頁面載入觸發
onLoad () { ... }
...
})
在應用程式執行到當前頁面時,會執行當前頁面下對應的[page-name].js
檔案。
在[page-name].js
中通過呼叫全域性Page([option])
方法建立一個頁面例項。
Page([option])
方法[option]
引數說明
屬性 | 型別 | 描述 |
---|---|---|
data | Object | 頁面的初始資料 |
onLoad | Function | 生命週期函式--監聽頁面載入 |
onReady | Function | 生命週期函式--監聽頁面初次渲染完成 |
onShow | Function | 生命週期函式--監聽頁面顯示 |
onHide | Function | 生命週期函式--監聽頁面隱藏 |
onUnload | Function | 生命週期函式--監聽頁面解除安裝 |
onPullDownRefreash | Function | 頁面相關事件處理函式--監聽使用者下拉動作 |
其他 | Any | 開發者可以新增任意的函式或資料到 object 引數中,用 this 可以訪問 |
檢視層分析
[page-name].wxml
頁面結構
WXML(WeiXin Markup Language)
是MINA框架
設計的一套標籤語言,基於XML
。
結合一些基礎元件、事件系統、模板資料繫結,可以構建出頁面的結構。
簡單來說:wxml ≈ xml + 事件系統 + 模板引擎
例如:
// js
Page({
data: {
todos: [
{ text: 'JavaScript', completed: false },
{ text: 'JavaScript+', completed: false },
{ text: 'JavaScript++', completed: false }
]
},
completed (e) { ... }
})
<!-- wxml -->
<view>
<view wx:for="{{ todos }}">
<block wx:if="{{ !item.completed }}">
<text>{{ item.text }}</text>
<button bindtap="completed" data-item-index="{{ index }}"> √ </button>
</block>
</view>
</view>
[page-name].wxss
頁面樣式
WXSS(WeiXin Style Sheets)
是MINA框架
設計的一套標籤語言,基於XML
。
WXSS
用來決定了在WXML
中定義的元件應該怎麼顯示。
為了適應廣大的前端開發者,我們的WXSS
具有CSS
大部分特性。 同時為了更適合開發微信小程式,我們對CSS
進行了擴充以及修改。
與CSS
相比我們擴充套件的特性有:
- 尺寸單位
- 樣式匯入(CSS也有)
尺寸單位
rpx(responsive pixel): 可以根據螢幕寬度進行自適應。規定螢幕寬為750rpx。如在 iPhone6 上,螢幕寬度為375px,共有750個物理畫素,則750rpx = 375px = 750物理畫素,1rpx = 0.5px = 1物理畫素。
rem(root em): 規定螢幕寬度為20rem;1rem = (750/20)rpx 。
裝置 | rpx換算px (螢幕寬度/750) | px換算rpx (750/螢幕寬度) | rem換算rpx (750/20) |
---|---|---|---|
iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx | 1rem = 37.5rpx |
iPhone6 | 1rpx = 0.5px | 1px = 2rpx | 1rem = 37.5rpx |
iPhone6s | 1rpx = 0.552px | 1px = 1.81rpx | 1rem = 37.5rpx |
- 建議: 開發微信小程式時設計師可以用 iPhone6 作為視覺稿的標準。
- 注意: 在較小的螢幕上不可避免的會有一些毛刺,請在開發時儘量避免這種情況。
樣式匯入
使用@import
語句可以匯入外聯樣式表,@import
後跟需要匯入的外聯樣式表的相對路徑,用;
表示語句結束。
@import "common.wxss";
text {
background-color: #ff0;
}
選擇器
目前只支援如下選擇器
選擇器 | 樣例 | 樣例描述 |
---|---|---|
.class | .intro | 選擇所有擁有 class="intro" 的元件 |
#id | #firstname | 選擇擁有 id="firstname" 的元件 |
element | view | 選擇所有 view 元件 |
element, element | view | checkbox 選擇所有文件的 view 元件和所有的 checkbox 元件 |
::after | view::after | 在 view 元件後邊插入內容 |
::before | view::before | 在 view 元件前邊插入內容 |
全域性樣式與區域性樣式
定義在app.wxss
中的樣式為全域性樣式,作用於每一個頁面。在[page-name].wxss
檔案中定義的樣式為區域性樣式,只作用在對應的頁面,並會覆蓋app.wxss
中相同的選擇器。
小程式開發進階
未完待續
相關推薦
微信小程式基礎入門(一):小程式介面介紹&創造自己的第一個小程式
承接小程式配置之後 ,先對小程式開發軟體的介面進行介紹: 然後進入第一個小程式的構造:獲取使用者登陸資訊 通過左上角的 “+”新增頁面 然後建立第一個功能頁面 然後頁面構造完成:各部分程式碼: app.
微信小程式基礎入門
準備 Demo 專案地址 https://github.com/zce/weapp-demo Clone or Download(需準備GIT環境) $ cd path/to/project/root $ git clone https://github.com/zce/weapp-demo.git proj
微信小程式開發入門基礎教程
在這篇部落格中,主要介紹瞭如何從一個微信小程式的使用者轉變為微信小程式的開發者。 1. 首先,需要註冊一個微信小程式賬號 https://mp.weixin.qq.com/ 進入微信公眾平臺選擇【立即註冊】 2.註冊賬號型別為【小程式】
微信小程式開發入門——請使用2.2.3或以上的基礎庫以使用雲能力
今天下載微信小程式開發工具安裝使用,選擇“建立雲開發快速啟動模板”後,出現了這樣的提示----“請使用2.2.3或以上的基礎庫以使用雲能力”。 查看了官方文件後,解決方案如下: 1、點選選擇“詳情” 2、除錯基礎庫選擇2.2.3或
例項-0基礎微信小程式開發入門1.2-【第一個小程式】
【開啟征程】開啟微信web開發者工具,點選小程式專案:點選右下角的“+”號,將建立快速模板前面的勾去掉然後選擇體驗小程式,目錄隨意,點選確定,即可建立一個全空的小程式專案啦。【建立最基本的目錄結構和檔案】在開始建立之前,我們有必要了解一下最基本的東西:JSON 是一種資料格
微信小程式 基礎元件
基礎元件 框架為開發者提供了一系列基礎元件,開發者可以通過組合這些基礎元件進行快速開發。 什麼是元件: 元件是檢視層的基本組成單元。 元件自帶一些功能與微信風格的樣式。 一個元件通常包括開始標籤和結束標籤,屬性用來修飾這個元件,內容在兩個標籤之內。<tagname
微信小程式 基礎類庫
console console.log 方法用於在 console 視窗輸出資訊。它可以接受多個引數,將它們的結果連線起來輸出。 Math 屬性 E LN10 LN2 LOG2E LOG10E PI SQRT1_2 SQRT2 以上
微信小程式 基礎庫版本與客戶端版本對應關係
iOS 客戶端版本 基礎庫版本 6.7.2 2.3.0 6.7.0 2.2.5 6.6.7 2.1.3 6.6.6
迅速上手:使用taro構建微信小程式基礎教程
前言 由於微信小程式在開發上不能安裝npm依賴,和開發流程上也飽受詬病;Taro 是由京東·凹凸實驗室(aotu.io)傾力打造的 多端開發解決方案,它的api基於react,在本篇文章中主要介紹了使用taro搭建微信小程式的一些步驟和一個簡單demo的實現。 安裝 先全域性安裝@tarojs/cli
微信小程式從入門第一講 java&&jFinal 小程式登陸功能實現以及獲取唯一標識openid和unionid
在我以前的一篇部落格中講到了獲取openid的方法,這裡就不做過多的講解java獲取微信小程式openid。這裡主要講解微信小程式登陸的實現和獲取unionid。需要提醒的是我後端框架使用的是jFinal,傳值方式跟spring的那套有些許的差別。 1、首先要知道微信小程式的開發本身就是基於
從零開始學前端第十七講--微信小程式開發入門
修真院Web工程師零基礎全能課 本節課內容 微信小程式開發入門 主講人介紹 沁修,葡萄藤技術總監 專案經驗豐富,擅長H5移動專案開發。 專注技術選型、底層開發、最佳程式碼實踐規範總結與推廣。 直播
【轉載】微信小程式-開發入門(一)
微信小程式已經火了一段時間了,之前一直也在關注,就這半年的發展來看,相對原生APP大部分公司還是不願意將主營業務放到微信平臺上,以免受制於騰訊,不過就小程式的應用場景(用完即走和二維碼分發等)還是很值得我們學習的,技術上面如果瞭解React的話,會發現他們在元件化上面有很多雷同之處。說白了,小程式就是基於微信
【微信小程式】入門
MINA框架:響應式資料繫結系統:檢視層、邏輯層,背後有MVVM 將View 的狀態和行為抽象化,將檢視 UI 和業務邏輯分開 一、檢視層描述語言: 1、WXML:類似HTML  
微信小程式基礎-側邊選單的實現
效果 思路: 1、整個頁面分成左右兩個view,橫向佈局;左側view用子選單view一個個填充,縱向佈局。 2、子選單內容存入陣列,點選子選單view,用data-index="{{index}}"回傳陣列索引index,把index賦給程式資料select
微信小程式裡面的標籤和html標籤的對比、微信小程式基礎之常用控制元件
微信小程式和html5標籤的區別: HTML5 微信小程式 <h1></h1>...<h6></h6> <p>&l
微信小程式-開發入門(一)
微信小程式已經火了一段時間了,之前一直也在關注,就這半年的發展來看,相對原生APP大部分公司還是不願意將主營業務放到微信平臺上,以免受制於騰訊,不過就小程式的應用場景(用完即走和二維碼分發等)還是很值得我們學習的,技術上面如果瞭解React的話,會發現他們在元件化上面有很
【微信小程式】入門第一篇 註冊賬號
1、確保一個有這樣的一個郵箱 未被微信公眾平臺註冊,未被微信開放平臺註冊,未被個人微訊號繫結的郵箱 2、 開啟微信公眾平臺官網首頁 mp.weixin.qq.com 3、點選有上角的 “立即註冊” 進入到選擇註冊型別頁面
微信小程式開發入門教程 含視訊 有原始碼
做任何程式開發要首先找到其官方文件,我們先來看看其有哪些官方文件。 微信小程式開發文件連結為:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html,如下圖: 這裡就是做微信小程式開發的全部官方文件。 知道了文件的位置,下面我們來介紹下如何做一個微
微信小程式開發入門教程
小程式:傳圖識字君 小程式:廁所在哪呢 傳圖片上去把上面的文字抓取下來 定位附近的廁所位置 做任何程式開發要首先找到其官方文件,我們先來看看其
微信小程式開發入門(一)
小程式學習入門--(一) 最近自己學習微信小程式的過程當中自己總結出來的知識點,我會不斷地更新和完善! 小程式的開發工具 一臺電腦 熟悉HTML、CSS、JS基本語法