14天閱讀挑戰(zhàn)賽
自己決定的事情,就要不動(dòng)聲色的一往直前!
目錄
一、小程序入門
1.1 什么是小程序
1.2?小程序的優(yōu)點(diǎn)
1.3 小程序注冊(cè)
1.4 安裝開發(fā)工具
1.5 創(chuàng)建第一個(gè)小程序
二、小程序目錄結(jié)構(gòu)及入門案例
2.1 目錄結(jié)構(gòu)
2.2 入門案例
2.2.1?創(chuàng)建界面
2.2.2?設(shè)置標(biāo)題
2.2.3 編寫WXML文件
?編輯??
2.2.4 編寫JS文件
?編輯
2.2.5? 編寫WXSS演樣式文件
2.3 案例效果演示
一、小程序入門
1.1 什么是小程序
????????小程序是一種輕量級(jí)的應(yīng)用程序,通常用于在移動(dòng)設(shè)備上提供特定功能或服務(wù)。它們類似于手機(jī)應(yīng)用程序,但不需要用戶下載和安裝,可以直接在支持的平臺(tái)上運(yùn)行。小程序通常由HTML、CSS和JavaScript等前端技術(shù)開發(fā),可以在微信、支付寶、百度等平臺(tái)上運(yùn)行。
1.2?小程序的優(yōu)點(diǎn)
- 無需從商店下載和更新
- 不占內(nèi)存,加載速度快
- 開發(fā)成本低、門檻低
- 連接線上線下
它還可以與手機(jī)的硬件功能(如相機(jī)、位置信息)進(jìn)行交互,并提供與用戶進(jìn)行實(shí)時(shí)互動(dòng)的能力。
1.3 小程序注冊(cè)
開發(fā)小程序的第一步,你需要擁有一個(gè)小程序帳號(hào),通過這個(gè)帳號(hào)你就可以管理你的小程序。?
進(jìn)入官方文檔申請(qǐng)賬號(hào)???小程序注冊(cè)
1、小程序注冊(cè)
根據(jù)指引填寫信息和提交相應(yīng)的資料,就可以擁有自己的小程序帳號(hào)。
2、激活郵箱
3、用戶登記注冊(cè)
- 如果只是學(xué)習(xí)的話,注冊(cè)個(gè)人小程序即可
- 如果想商用,想使用微信支付,取用戶手機(jī)號(hào)等復(fù)雜功能,可以注冊(cè)企業(yè)小程序,不過企業(yè)小程序必須有營業(yè)執(zhí)照才可以注冊(cè)
- 一個(gè)郵箱只能注冊(cè)一個(gè)小程序
- 一個(gè)身份證可以注冊(cè)5個(gè),個(gè)人小程序
- 一個(gè)企業(yè)的營業(yè)執(zhí)照可以注冊(cè)50個(gè)企業(yè)小程序
4、登錄?小程序后臺(tái)?,在這個(gè)小程序管理平臺(tái),你可以管理你的小程序的權(quán)限,查看數(shù)據(jù)報(bào)表,發(fā)布小程序等操作。
我們可以在菜單 “開發(fā)”-“開發(fā)設(shè)置” 看到小程序的?AppID?了 。
1.4 安裝開發(fā)工具
????????前往 開發(fā)者工具下載頁面 ,根據(jù)自己的操作系統(tǒng)下載對(duì)應(yīng)的安裝包進(jìn)行安裝,有關(guān)開發(fā)者工具更詳細(xì)的介紹可以查看 《開發(fā)者工具介紹》 。
打開小程序開發(fā)者工具,用微信掃碼登錄開發(fā)者工具,準(zhǔn)備開發(fā)你的第一個(gè)小程序吧!
1.5 創(chuàng)建第一個(gè)小程序
?新建項(xiàng)目選擇小程序項(xiàng)目,選擇代碼存放的硬盤路徑,填入剛剛申請(qǐng)到的小程序的 AppID,給你的項(xiàng)目起一個(gè)好聽的名字,勾選 "不使用云服務(wù)" (注意: 你要選擇一個(gè)空的目錄才可以創(chuàng)建項(xiàng)目),點(diǎn)擊新建,你就得到了你的第一個(gè)小程序了,點(diǎn)擊頂部菜單編譯就可以在微信開發(fā)者工具中預(yù)覽你的第一個(gè)小程序。 ?
先選擇一個(gè)別人寫好的模版預(yù)覽效果
OK,現(xiàn)在創(chuàng)建一個(gè)自己寫的小程序,一定要選擇js模版
預(yù)覽:
二、小程序目錄結(jié)構(gòu)及入門案例
2.1 目錄結(jié)構(gòu)
小程序包含一個(gè)描述整體程序的 app 和多個(gè)描述各自頁面的 page。
一個(gè)小程序主體部分由三個(gè)文件組成,必須放在項(xiàng)目的根目錄,如下:
文件 | 必需 | 作用 |
app.js?? | 是 | 小程序邏輯 |
app.json?? | 是 | 小程序公共配置 |
app.wxss? | 否 | 小程序公共樣式表 |
一個(gè)小程序頁面由四個(gè)文件組成,分別是:以后綴名結(jié)尾的(js、json、wxml、wxss)?
打開app.json公共配置文件,可看到pages數(shù)據(jù)在這里一個(gè)文件夾代表一個(gè)頁面,也就是index和logs兩個(gè)頁面
這里要注意配置的頁面的順序,排在第一,剛打開小程序就顯示這個(gè)界面。
2.2 入門案例
2.2.1?創(chuàng)建界面
配置pages時(shí)保存后,左側(cè)會(huì)自動(dòng)生成頁面文件。
2.2.2?設(shè)置標(biāo)題
pages/user/user.json
2.2.3 編寫WXML文件
參考?小程序文檔WXML模版?
??
引用js文件username屬性,設(shè)置一個(gè)按鈕點(diǎn)擊事件
2.2.4 編寫JS文件
定義數(shù)據(jù)和點(diǎn)擊事件方法?
?修改頁面頭部標(biāo)題背景和字體顏色
2.2.5? 編寫WXSS演樣式文件
為class屬性值為userinfo模塊設(shè)置樣式?
2.3 案例效果演示
最后就呈現(xiàn)出一個(gè)簡單的功能界面?:文章來源:http://www.zghlxwxcb.cn/news/detail-712942.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-712942.html
到了這里,關(guān)于微信小程序 ——入門介紹及簡單的小程序編寫的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!