1、微信小程序的注冊(cè)和微信開(kāi)發(fā)者工具的下載
在微信公眾平臺(tái)注冊(cè)小程序賬號(hào)，注冊(cè)時(shí)注意小程序和公眾號(hào)不能使用同一個(gè)帳號(hào)，登錄小程序時(shí)，公眾號(hào)會(huì)自動(dòng)下線。一般賬號(hào)為郵箱號(hào)，所以提前準(zhǔn)備倆郵箱號(hào)，方便注冊(cè)。注冊(cè)號(hào)一號(hào)進(jìn)入如下界面：
可以完善小程序信息，以及實(shí)名認(rèn)證等，這些都是傻瓜式的操作，懂漢語(yǔ)就行，不知道在哪里就多試試，試試又不懷孕！
然后下載你開(kāi)發(fā)的工具：
下載完成后安裝即可。
2、創(chuàng)建項(xiàng)目
進(jìn)入開(kāi)發(fā)工具界面，新建開(kāi)發(fā)項(xiàng)目：
這里會(huì)自動(dòng)生成一些文件夾，下面是文件夾的具體說(shuō)明：
pages:存放項(xiàng)目頁(yè)面文件,一般一個(gè)目錄對(duì)應(yīng)一個(gè)頁(yè)面。
utils:存放工具函數(shù)（一般是自己封裝）。
app.js:全局的邏輯處理
app.json: (1)頁(yè)面文件路徑設(shè)置
(2)窗口外觀設(shè)置
(3)設(shè)置/添加tabbar(底部/頂部導(dǎo)航)
app.wxss:全局樣式
project.config.json:項(xiàng)目配置文件
sitemap.json:小程序內(nèi)搜索，開(kāi)發(fā)者可以通過(guò) `sitemap.json` 配置，或者管理后臺(tái)頁(yè)面收錄開(kāi)關(guān)來(lái)配置其小程 序頁(yè)面是否允許微信索引
小程序中.wxml對(duì)應(yīng)的是html文件，.wxss對(duì)應(yīng)的是css文件。
文件夾中文件組成：
home.js:邏輯處理
home.json:靜態(tài)數(shù)據(jù)
home.wxml:頁(yè)面結(jié)構(gòu)
home.wxss:頁(yè)面布局
3、利用tabBar設(shè)置小程序的菜單導(dǎo)航
上面寫到設(shè)置、添加tabBar在app.json文件中，所以在此文件中設(shè)置需要的菜單導(dǎo)航，以及引入需要的圖標(biāo)。這里可以將整個(gè)項(xiàng)目中用到的小圖標(biāo)在阿里圖標(biāo)庫(kù)中進(jìn)行添加，跟vue項(xiàng)目中一樣，然后下載到本地，將對(duì)應(yīng)的文件復(fù)制到項(xiàng)目文件中即可。
這里一般設(shè)置三個(gè)導(dǎo)航項(xiàng)，iconPath為默認(rèn)未點(diǎn)擊時(shí)顯示的圖標(biāo)路徑，selectedIconPath為選擇點(diǎn)擊后的圖片路徑。效果如下圖：
如果想讓導(dǎo)航位置位于整個(gè)頁(yè)面的上方，可以將tabBar中的position屬性設(shè)置為top即可。
這里拷貝一下微信官方文檔內(nèi)容，供大家參考：
4、全局設(shè)置
backgroundTextStyle string dark——下拉 loading 的樣式，僅支持 dark / light
avigationBarBackgroundColor HexColor #000000——導(dǎo)航欄背景顏色，如 #000000
navigationBarTitleText string——導(dǎo)航欄標(biāo)題文字內(nèi)容
navigationBarTextStyle string white——導(dǎo)航欄標(biāo)題顏色，僅支持 black / white
復(fù)制快捷鍵：
向下：Alt Shift 向下光標(biāo)鍵
向上：Alt Shift 向上光標(biāo)鍵
5、應(yīng)用頭部布局
由于空間較小等，我們可能在“開(kāi)發(fā)者工具”中開(kāi)發(fā)不太習(xí)慣，這時(shí)我們可以在其他軟件中進(jìn)行開(kāi)發(fā)，如webstorm中，只需要安裝WeChat weapp Support插件。
如需要微信小程序中默認(rèn)的小圖標(biāo)：
用如下icon標(biāo)簽引入即可（這里引入了搜素圖標(biāo)）：
6、數(shù)據(jù)請(qǐng)求和頁(yè)面跳轉(zhuǎn)
在基本布局和樣式完成后，就是請(qǐng)求數(shù)據(jù)和渲染界面。
請(qǐng)求后臺(tái)api接口數(shù)據(jù)一般封裝一個(gè)工具函數(shù)，因?yàn)橛泻芏囗?yè)面要請(qǐng)求數(shù)據(jù)。工具函數(shù)的封裝大概如下：
然后就是在頁(yè)面引入使用它：
接下來(lái)就是如下所示的一些數(shù)據(jù)渲染：
在一些頁(yè)面中要實(shí)現(xiàn)頁(yè)面間的跳轉(zhuǎn)，微信小程序中用bindtap，相當(dāng)于綁定一個(gè)點(diǎn)擊事件，然后在對(duì)應(yīng)的js文件中寫入需要跳轉(zhuǎn)的頁(yè)面路徑：
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)，該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請(qǐng)發(fā)送郵件至 舉報(bào)，一經(jīng)查實(shí)，本站將立刻刪除。
