1、微信小程序的註冊和微信開發者工具的下載
在微信公眾平臺註冊小程序賬號,註冊時注意小程序和公眾號不能使用同一個帳號,登錄小程序時,公眾號會自動下線。一般賬號為郵箱號,所以提前準備倆郵箱號,方便註冊。註冊號一號進入如下界面:
可以完善小程序信息,以及實名認證等,這些都是傻瓜式的操作,懂漢語就行,不知道在哪裡就多試試,試試又不懷孕!
然後下載你開發的工具:
下載完成後安裝即可。
2、創建項目
進入開發工具界面,新建開發項目:
這裡會自動生成一些文件夾,下面是文件夾的具體說明:
pages:存放項目頁面文件,一般一個目錄對應一個頁面。
utils:存放工具函數(一般是自己封裝)。
app.js:全局的邏輯處理
app.json:(1)頁面文件路徑設置
(2)窗口外觀設置
(3)設置/添加tabbar(底部/頂部導航)
app.wxss:全局樣式
project.config.json:項目配置文件
sitemap.json:小程序內搜索,開發者可以通過 `sitemap.json` 配置,或者管理後臺頁面收錄開關來配置其小程 序頁面是否允許微信索引
小程序中.wxml對應的是html文件,.wxss對應的是css文件。
文件夾中文件組成:
home.js:邏輯處理
home.json:靜態數據
home.wxml:頁面結構
home.wxss:頁面佈局
3、利用tabBar設置小程序的菜單導航
上面寫到設置、添加tabBar在app.json文件中,所以在此文件中設置需要的菜單導航,以及引入需要的圖標。這裡可以將整個項目中用到的小圖標在阿里圖標庫中進行添加,跟vue項目中一樣,然後下載到本地,將對應的文件複製到項目文件中即可。
這裡一般設置三個導航項,iconPath為默認未點擊時顯示的圖標路徑,selectedIconPath為選擇點擊後的圖片路徑。效果如下圖:
如果想讓導航位置位於整個頁面的上方,可以將tabBar中的position屬性設置為top即可。
這裡拷貝一下微信官方文檔內容,供大家參考:
4、全局設置
backgroundTextStyle string dark——下拉 loading 的樣式,僅支持 dark / light
avigationBarBackgroundColor HexColor #000000——導航欄背景顏色,如 #000000
navigationBarTitleTextstring——導航欄標題文字內容
navigationBarTextStylestringwhite——導航欄標題顏色,僅支持 black / white
複製快捷鍵:
向下:Alt+Shift+向下光標鍵
向上:Alt+Shift+向上光標鍵
5、應用頭部佈局
由於空間較小等,我們可能在“開發者工具”中開發不太習慣,這時我們可以在其他軟件中進行開發,如webstorm中,只需要安裝WeChat weapp Support插件。
用如下icon標籤引入即可(這裡引入了搜素圖標):
6、數據請求和頁面跳轉
在基本佈局和樣式完成後,就是請求數據和渲染界面。
請求後臺api接口數據一般封裝一個工具函數,因為有很多頁面要請求數據。工具函數的封裝大概如下:
然後就是在頁面引入使用它:
接下來就是如下所示的一些數據渲染:
在一些頁面中要實現頁面間的跳轉,微信小程序中用bindtap,相當於綁定一個點擊事件,然後在對應的js文件中寫入需要跳轉的頁面路徑:
閱讀更多 一寒森森 的文章