2022-05-30 分類(lèi): 微信小程序
創(chuàng)新互聯(lián)的小編為您提供微信小程序 基礎(chǔ)知識(shí)全解。微信小程序是一種全新的連接用戶(hù)與服務(wù)的方式,它可以在微信內(nèi)被便捷地獲取和傳播,同時(shí)具有出色的使用體驗(yàn)。本文較長(zhǎng),建議擇需閱讀。
小程序是一種不需要下載、安裝即可使用的應(yīng)用,它實(shí)現(xiàn)了觸手可及的夢(mèng)想,用戶(hù)掃一掃或者搜一下就能打開(kāi)應(yīng)用,也實(shí)現(xiàn)了用完即走的理念,用戶(hù)不用安裝太多應(yīng)用,應(yīng)用隨處可用,但又無(wú)須安裝卸載。
企業(yè)、政府、媒體、其他組織
企業(yè)類(lèi)型帳號(hào)可選擇兩種主體驗(yàn)證方式:
方式一:需要用公司的對(duì)公賬戶(hù)向騰訊公司打款來(lái)驗(yàn)證主體身份。打款信息在提交主體信息后可以查看到。
方式二:通過(guò)微信認(rèn)證驗(yàn)證主體身份,需支付300元認(rèn)證費(fèi)。認(rèn)證通過(guò)前,小程序部分功能暫無(wú)法使用。
政府、媒體、其他組織類(lèi)型帳號(hào),必須通過(guò)微信認(rèn)證驗(yàn)證主體身份。認(rèn)證通過(guò)前,小程序部分功能暫無(wú)法使用。
特別提醒:小程序主體信息一經(jīng)提交后不可修改。
完成注冊(cè)后,微信小程序信息完善步驟和開(kāi)發(fā)可同步進(jìn)行。
選擇對(duì)公打款的用戶(hù),完成匯款驗(yàn)證后,可以補(bǔ)充小程序名稱(chēng)信息,上傳小程序頭像,填寫(xiě)小程序介紹并選擇服務(wù)范圍。
選擇通過(guò)微信認(rèn)證驗(yàn)證主體身份的用戶(hù),需先完成微信認(rèn)證后,才可以補(bǔ)充小程序名稱(chēng)信息,上傳小程序頭像,填寫(xiě)小程序介紹并選擇服務(wù)范圍。
1.綁定開(kāi)發(fā)者
登錄微信公眾平臺(tái)小程序,進(jìn)入用戶(hù)身份- 開(kāi)發(fā)者,新增綁定開(kāi)發(fā)者。已認(rèn)證的小程序可以綁定不多于20個(gè)開(kāi)發(fā)者。未認(rèn)證的小程序可以綁定不多于10個(gè)開(kāi)發(fā)者。
2.獲取AppID
進(jìn)入“設(shè)置-開(kāi)發(fā)設(shè)置”,獲取AppID信息。
3.閱讀開(kāi)發(fā)文檔并下載開(kāi)發(fā)者工具
點(diǎn)擊頁(yè)面右上角文檔-開(kāi)發(fā),詳細(xì)閱讀開(kāi)發(fā)者文檔并進(jìn)入下載頁(yè)面,下載開(kāi)發(fā)者工具。
為豐富小程序的服務(wù)能力,提高服務(wù)質(zhì)量,微信為小程序提供客服消息能力,以便小程序用戶(hù)可以方便快捷地與小程序服務(wù)提供方進(jìn)行溝通。
設(shè)計(jì)
一、概要
設(shè)計(jì)指南建立在充分尊重用戶(hù)知情權(quán)與操作權(quán)的基礎(chǔ)之上,旨在微信生態(tài)體系內(nèi),建立友好、高效、一致的用戶(hù)體驗(yàn),同時(shí)大程度適應(yīng)和支持不同需求,實(shí)現(xiàn)用戶(hù)與小程序服務(wù)方的共贏。
二、友好禮貌
為了避免用戶(hù)在微信中使用小程序服務(wù)時(shí),注意力被周?chē)鷱?fù)雜環(huán)境干擾,小程序在設(shè)計(jì)時(shí)應(yīng)該注意減少無(wú)關(guān)的設(shè)計(jì)元素對(duì)用戶(hù)目標(biāo)的干擾,禮貌地向用戶(hù)展示程序提供的服務(wù),友好地引導(dǎo)用戶(hù)進(jìn)行操作。
1.重點(diǎn)突出
每個(gè)頁(yè)面都應(yīng)有明確的重點(diǎn),以便于用戶(hù)每進(jìn)入一個(gè)新頁(yè)面的時(shí)候都能快速地理解頁(yè)面內(nèi)容。在確定了重點(diǎn)的前提下,應(yīng)盡量避免頁(yè)面上出現(xiàn)其它與用戶(hù)的決策和操作無(wú)關(guān)的干擾因素。
2.流程明確
為了讓用戶(hù)順暢地使用頁(yè)面,在用戶(hù)進(jìn)行某一個(gè)操作流程時(shí),應(yīng)避免出現(xiàn)用戶(hù)目標(biāo)流程之外的內(nèi)容而打斷用戶(hù)。
三、清晰明確
一旦用戶(hù)進(jìn)入我們的小程序頁(yè)面,我們就有責(zé)任和義務(wù)清晰明確地告知用戶(hù)身在何處、又可以往何處去,確保用戶(hù)在頁(yè)面中游刃有余地穿梭而不迷路,這樣才能為用戶(hù)提供安全且愉悅的使用體驗(yàn)。
1.導(dǎo)航明確,來(lái)去自如
導(dǎo)航是確保用戶(hù)在網(wǎng)頁(yè)中瀏覽跳轉(zhuǎn)時(shí)不迷路的最關(guān)鍵因素。導(dǎo)航需要告訴用戶(hù),當(dāng)前在哪,可以去哪,如何回去等問(wèn)題。首先在微信系統(tǒng)內(nèi)的所有小程序的全部頁(yè)面,均會(huì)自帶有微信提供的導(dǎo)航欄,統(tǒng)一解決當(dāng)前在哪,如何回去的問(wèn)題。在微信層級(jí)導(dǎo)航保持體驗(yàn)一致,有助于用戶(hù)在微信內(nèi)形成統(tǒng)一的體驗(yàn)和交互認(rèn)知,無(wú)需在各小程序和其他微信頁(yè)面的切換中新增學(xué)習(xí)成本或改變使用習(xí)慣。
微信導(dǎo)航區(qū)(iOS)
微信進(jìn)入小程序的第一個(gè)頁(yè)面,導(dǎo)航區(qū)通常只有一個(gè)操作——“返回”,即返回進(jìn)入小程序前的微信頁(yè)面。 進(jìn)入小程序后的次級(jí)頁(yè)面,導(dǎo)航區(qū)的操作為——“返回” 和“關(guān)閉”。 “返回”,即返回上一級(jí)小程序界面或微信界面?!瓣P(guān)閉”,即在當(dāng)前界面直接退出小程序,回到進(jìn)入小程序前的微信頁(yè)面。
微信導(dǎo)航區(qū)(Android)
導(dǎo)航區(qū)僅存在唯一操作——直接退出小程序,回到進(jìn)入小程序前的微信或系統(tǒng)桌面,安卓手機(jī)自帶的硬件返回鍵執(zhí)行返回上一級(jí)頁(yè)面的操作。
2.減少等待,反饋及時(shí)
頁(yè)面的過(guò)長(zhǎng)時(shí)間的等待會(huì)引起用戶(hù)的不良情緒,使用微信小程序項(xiàng)目提供的技術(shù)已能很大程度縮短等待時(shí)間。即便如此,當(dāng)不可避免的出現(xiàn)了加載和等待的時(shí)候,需要予以及時(shí)的反饋以舒緩用戶(hù)等待的不良情緒。
3.異??煽兀新房赏?/p>
在設(shè)計(jì)任何的任務(wù)和流程時(shí),異常狀態(tài)和流程往往容易被忽略,而這些異常場(chǎng)景往往是用戶(hù)最為沮喪和需要幫助的時(shí)候,因此需要格外注意異常狀態(tài)的設(shè)計(jì),在出現(xiàn)異常時(shí)予以用戶(hù)必要的狀態(tài)提示,并告知解決方案,使其有路可退。
要杜絕異常狀態(tài)下,用戶(hù)莫名其妙又無(wú)處可去,停滯在某一個(gè)頁(yè)面的情況。上文中所提到的模態(tài)對(duì)話框和結(jié)果頁(yè)面都可作為異常狀態(tài)的提醒方式。除此之外,在表單頁(yè)面中尤其是表單項(xiàng)較多的頁(yè)面中,還應(yīng)明確指出出錯(cuò)項(xiàng)目,以便用戶(hù)修改。
四、便捷優(yōu)雅
從PC時(shí)代的物理鍵盤(pán)鼠標(biāo)到移動(dòng)端時(shí)代手指,雖然輸入設(shè)備極大精簡(jiǎn),但是手指操作的準(zhǔn)確性卻大大不如鍵盤(pán)鼠標(biāo)精確。為了適應(yīng)這個(gè)變化,需要開(kāi)發(fā)者在設(shè)計(jì)過(guò)程中充分利用手機(jī)特性,讓用戶(hù)便捷優(yōu)雅的操控界面。
1.減少輸入
由于手機(jī)鍵盤(pán)區(qū)域小且密集,輸入困難的同時(shí)還易引起輸入錯(cuò)誤,因此在設(shè)計(jì)小程序頁(yè)面時(shí)因盡量減少用戶(hù)輸入,利用現(xiàn)有接口或其他一些易于操作的選擇控件來(lái)改善用戶(hù)輸入的體驗(yàn)。
2.避免誤操作
因?yàn)樵谑謾C(jī)上我們通過(guò)手指觸摸屏幕來(lái)操控界面,手指的點(diǎn)擊精確度遠(yuǎn)不如鼠標(biāo),因此在設(shè)計(jì)頁(yè)面上需點(diǎn)擊的控件時(shí),需要充分考慮到其熱區(qū)面積,避免由于可點(diǎn)擊區(qū)域過(guò)小或過(guò)于密集而造成誤操作。當(dāng)簡(jiǎn)單的將原本在電腦屏幕上使用的界面不做任何適配直接移植到手機(jī)上時(shí),往往就容易出現(xiàn)這樣的問(wèn)題。由于手機(jī)屏幕分辨率各不相同,因此最適宜點(diǎn)擊像素尺寸也不完全一致,但換算成物理尺寸后大致是在7mm-9mm之間。在微信提供的標(biāo)準(zhǔn)組件庫(kù)中,各種控件元素均已考慮到了頁(yè)面點(diǎn)擊效果以及不同屏幕的適配,因此再次推薦使用或模仿標(biāo)準(zhǔn)控件尺寸進(jìn)行設(shè)計(jì)。
3.利用接口提升性能
微信設(shè)計(jì)中心已推出了一套網(wǎng)頁(yè)標(biāo)準(zhǔn)控件庫(kù),包括 sketch設(shè)計(jì)控件庫(kù) 和 Photoshop設(shè)計(jì)控件庫(kù),后續(xù)還將完善小程序組件,這些控件都已充分考慮了移動(dòng)端頁(yè)面的特點(diǎn),能夠保證其在移動(dòng)端頁(yè)面上的可用性和操作性能; 同時(shí)微信開(kāi)發(fā)團(tuán)隊(duì)也在不斷完善和擴(kuò)充微信小程序接口,并提供微信公共庫(kù),利用這些資源不但能夠?yàn)橛脩?hù)提供更加快捷的服務(wù),而且對(duì)頁(yè)面性能的提高有極大作用,無(wú)形之中提升了用戶(hù)體驗(yàn)。
五、統(tǒng)一穩(wěn)定
除了以上所提到的種種原則,建議接入微信的小程序還應(yīng)該時(shí)刻注意不同頁(yè)面間的統(tǒng)一性和延續(xù)性,在不同的頁(yè)面盡量使用一致的控件和交互方式。
統(tǒng)一的頁(yè)面體驗(yàn)和有延續(xù)性的界面元素都將幫助用最少的學(xué)習(xí)成本達(dá)成使用目標(biāo),減輕頁(yè)面跳動(dòng)所造成的不適感。正因如此,小程序可根據(jù)需要使用微信提供的標(biāo)準(zhǔn)控件,以達(dá)到統(tǒng)一穩(wěn)定的目的。
六、視覺(jué)規(guī)范
1.字體規(guī)范
微信內(nèi)字體的使用與所運(yùn)行的系統(tǒng)字體保持一致,常用字號(hào)為20, 18, 17, 16,14 13, 11(pt),使用場(chǎng)景具體如下:
字體顏色:
主內(nèi)容 Black 黑色,次要內(nèi)容 Grey 灰色;時(shí)間戳與表單缺省值 Light 灰色;大段的說(shuō)明內(nèi)容而且屬于主要內(nèi)容用 Semi 黑。
藍(lán)色為鏈接用色,綠色為完成字樣色,紅色為出錯(cuò)用色 Press 與 Disable 狀態(tài)分別降低透明度為20%與10%。
2.列表視覺(jué)規(guī)范:
3.表單輸入視覺(jué)規(guī)范:
4.按鈕使用原則:
5.圖標(biāo)使用原則:
一、框架
小程序開(kāi)發(fā)框架的目標(biāo)是通過(guò)盡可能簡(jiǎn)單、高效的方式讓開(kāi)發(fā)者可以在微信中開(kāi)發(fā)具有原生 APP 體驗(yàn)的服務(wù)。
框架提供了自己的視圖層描述語(yǔ)言 WXML 和 WXSS,以及基于 JavaScript 的邏輯層框架,并在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng),可以讓開(kāi)發(fā)者可以方便的聚焦于數(shù)據(jù)與邏輯上。
二、基礎(chǔ)組件
框架為開(kāi)發(fā)者提供了一系列基礎(chǔ)組件,開(kāi)發(fā)者可以通過(guò)組合這些基礎(chǔ)組件進(jìn)行快速開(kāi)發(fā)。
三、API
框架提供豐富的微信原生API,可以方便的調(diào)起微信提供的能力,如獲取用戶(hù)信息,本地存儲(chǔ),支付功能等。
四、簡(jiǎn)易教程
1.獲取微信小程序的 AppID
登錄微信公眾平臺(tái),就可以在網(wǎng)站的“設(shè)置”-“開(kāi)發(fā)者設(shè)置”中,查看到微信小程序的 AppID 了,注意不可直接使用服務(wù)號(hào)或訂閱號(hào)的 AppID 。
注意:如果要以非管理員微信號(hào)在手機(jī)上體驗(yàn)該小程序,那么我們還需要操作“綁定開(kāi)發(fā)者”。即在“用戶(hù)身份”-“開(kāi)發(fā)者”模塊,綁定上需要體驗(yàn)該小程序的微信號(hào)。本教程默認(rèn)注冊(cè)帳號(hào)、體驗(yàn)都是使用管理員微信號(hào)。
2.創(chuàng)建項(xiàng)目
我們需要通過(guò)開(kāi)發(fā)者工具,來(lái)完成小程序創(chuàng)建和代碼編輯。
開(kāi)發(fā)者工具安裝完成后,打開(kāi)并使用微信掃碼登錄。選擇創(chuàng)建“項(xiàng)目”,填入上文獲取到的 AppID ,設(shè)置一個(gè)本地項(xiàng)目的名稱(chēng)(非小程序名稱(chēng)),比如“我的第一個(gè)項(xiàng)目”,并選擇一個(gè)本地的文件夾作為代碼存儲(chǔ)的目錄,點(diǎn)擊“新建項(xiàng)目”就可以了。
為方便初學(xué)者了解微信小程序的基本代碼結(jié)構(gòu),在創(chuàng)建過(guò)程中,如果選擇的本地文件夾是個(gè)空文件夾,開(kāi)發(fā)者工具會(huì)提示,是否需要?jiǎng)?chuàng)建一個(gè) quick start 項(xiàng)目。選擇“是”,開(kāi)發(fā)者工具會(huì)幫助我們?cè)陂_(kāi)發(fā)目錄里生成一個(gè)簡(jiǎn)單的 demo。
項(xiàng)目創(chuàng)建成功后,我們就可以點(diǎn)擊該項(xiàng)目,進(jìn)入并看到完整的開(kāi)發(fā)者工具界面,點(diǎn)擊左側(cè)導(dǎo)航,在“編輯”里可以查看和編輯我們的代碼,在“調(diào)試”里可以測(cè)試代碼并模擬小程序在微信客戶(hù)端效果,在“項(xiàng)目”里可以發(fā)送到手機(jī)里預(yù)覽實(shí)際效果。
3.編寫(xiě)代碼
創(chuàng)建小程序?qū)嵗?/p>
點(diǎn)擊開(kāi)發(fā)者工具左側(cè)導(dǎo)航的“編輯”,我們可以看到這個(gè)項(xiàng)目,已經(jīng)初始化并包含了一些簡(jiǎn)單的代碼文件。最關(guān)鍵也是必不可少的,是 app.js、app.json、app.wxss 這三個(gè)。其中,.js后綴的是腳本文件,.json后綴的文件是配置文件,.wxss后綴的是樣式表文件。微信小程序會(huì)讀取這些文件,并生成小程序?qū)嵗?/p>
下面我們簡(jiǎn)單了解這三個(gè)文件的功能,方便修改以及從頭開(kāi)發(fā)自己的微信小程序。
app.js是小程序的腳本代碼。我們可以在這個(gè)文件中監(jiān)聽(tīng)并處理小程序的生命周期函數(shù)、聲明全局變量。調(diào)用框架提供的豐富的 API,如本例的同步存儲(chǔ)及同步讀取本地?cái)?shù)據(jù)。
app.json 是對(duì)整個(gè)小程序的全局配置。我們可以在這個(gè)文件中配置小程序是由哪些頁(yè)面組成,配置小程序的窗口背景色,配置導(dǎo)航條樣式,配置默認(rèn)標(biāo)題。注意該文件不可添加任何注釋。
app.wxss 是整個(gè)小程序的公共樣式表。
在這個(gè)教程里,我們有兩個(gè)頁(yè)面,index 頁(yè)面和 logs 頁(yè)面,即歡迎頁(yè)和小程序啟動(dòng)日志的展示頁(yè),他們都在 pages 目錄下。微信小程序中的每一個(gè)頁(yè)面的【路徑+頁(yè)面名】都需要寫(xiě)在 app.json 的 pages 中,且 pages 中的第一個(gè)頁(yè)面是小程序的首頁(yè)。
每一個(gè)小程序頁(yè)面是由同路徑下同名的四個(gè)不同后綴文件的組成,如:index.js、index.wxml、index.wxss、index.json。.js后綴的文件是腳本文件,.json后綴的文件是配置文件,.wxss后綴的是樣式表文件,.wxml后綴的文件是頁(yè)面結(jié)構(gòu)文件。
index.wxml 是頁(yè)面的結(jié)構(gòu)文件:
本例中使用了、、來(lái)搭建頁(yè)面結(jié)構(gòu),綁定數(shù)據(jù)和交互處理函數(shù)。
index.js 是頁(yè)面的腳本文件,在這個(gè)文件中我們可以監(jiān)聽(tīng)并處理頁(yè)面的生命周期函數(shù)、獲取小程序?qū)嵗?,聲明并處理?shù)據(jù),響應(yīng)頁(yè)面交互事件等。
index.wxss 是頁(yè)面的樣式表:
頁(yè)面的樣式表是非必要的。當(dāng)有頁(yè)面樣式表時(shí),頁(yè)面的樣式表中的樣式規(guī)則會(huì)層疊覆蓋 app.wxss 中的樣式規(guī)則。如果不指定頁(yè)面的樣式表,也可以在頁(yè)面的結(jié)構(gòu)文件中直接使用 app.wxss 中指定的樣式規(guī)則。
index.json 是頁(yè)面的配置文件:
頁(yè)面的配置文件是非必要的。當(dāng)有頁(yè)面的配置文件時(shí),配置項(xiàng)在該頁(yè)面會(huì)覆蓋 app.json 的 window 中相同的配置項(xiàng)。如果沒(méi)有指定的頁(yè)面配置文件,則在該頁(yè)面直接使用 app.json 中的默認(rèn)配置。
logs 的頁(yè)面結(jié)構(gòu):
logs 頁(yè)面使用 <block/> 控制標(biāo)簽來(lái)組織代碼,在 <block/> 上使用 wx:for 綁定 logs 數(shù)據(jù),并將 logs 數(shù)據(jù)循環(huán)展開(kāi)節(jié)點(diǎn)。
4.手機(jī)預(yù)覽
開(kāi)發(fā)者工具左側(cè)菜單欄選擇”項(xiàng)目”,點(diǎn)擊”預(yù)覽”,掃碼后即可在微信客戶(hù)端中體驗(yàn)。
具體運(yùn)營(yíng)規(guī)范:
使用微信小程序平臺(tái)的服務(wù),你必須閱讀并遵守 《微信小程序平臺(tái)服務(wù)條款》,以及騰訊為此制定的專(zhuān)項(xiàng)規(guī)則等。
小程序七大能力解讀:
線下掃碼:用戶(hù)可以在小程序中使用掃一掃。
對(duì)話分享:用戶(hù)可以分享小程序或其中的任何一個(gè)頁(yè)面給好友或群聊。
消息通知:商戶(hù)可以發(fā)送模板消息給接受過(guò)服務(wù)的用戶(hù),用戶(hù)可以在小程序內(nèi)聯(lián)系客服,支持文字和圖片。
小程序切換:用戶(hù)可以在使用小程序的過(guò)程中快速返回聊天。
歷史列表:用戶(hù)使用過(guò)的小程序會(huì)被放入列表,方便下次使用。
公眾號(hào)關(guān)聯(lián):微信小程序可與公眾號(hào)進(jìn)行關(guān)聯(lián)。
搜索查找:用戶(hù)可直接根據(jù)名稱(chēng)或品牌搜索小程序。
1.小程序的入口在哪里?
小程序在微信里是沒(méi)有入口的,微信更多的是希望小程序的啟動(dòng)來(lái)自于掃二維碼。
2.有沒(méi)有應(yīng)用商店可以下載小程序?
小程序不存在下載過(guò)程,因此沒(méi)有小程序應(yīng)用商店。
3.小程序能不能推送消息?
小程序不能推送消息,但是會(huì)提供比較有限的服務(wù)觸達(dá)能力。
4.小程序能不能分享到朋友圈?
小程序不能分享到朋友圈,但是可以分享到聊天里面,可以分享到群里面。
5.小程序和公眾號(hào)之間是怎么樣的一種關(guān)系?
你在公眾號(hào)里面可以看到這個(gè)公眾號(hào)同一個(gè)企業(yè)還做了哪些小程序,或者你在一個(gè)小程序里面你也可以看到,做這個(gè)小程序的企業(yè)還做了哪些公眾號(hào),他們是可以互相跳的。
標(biāo)題名稱(chēng):【必看】微信小程序基礎(chǔ)知識(shí)全解
本文來(lái)源:http://aaarwkj.com/news36/161536.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專(zhuān)注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司;服務(wù)項(xiàng)目有微信小程序等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容