微信小程式從零開始開發步驟(二)建立小程式頁面

2022-09-02 12:54:09 字數 1421 閱讀 7086

上一章註冊完小程式,新增新建的專案,大致的準備開發已經完成,本章要分享的是

要建立乙個簡單的頁面了,建立小程式頁面的具體幾個步驟:

選中page,右擊滑鼠,從硬碟開啟,開啟硬碟檔案之後,新建乙個資料夾test(或者點選+號,逐個新增目錄,新增目錄下面所需要的檔案)

或者這樣新增

在test資料夾底下新建乙個wxml空檔案

為了方便測試 我們隨便 填寫點內容進去

這是我的test頁面哦哦!!!

在test資料夾底下新建乙個js空檔案

使用上述同樣的方法在test 目錄下建立乙個 test.js 檔案,為了方便測試 我們隨便 填寫點內容進去(也可以不填,直接空檔案也可)

//獲取應用例項  

一切準備就緒,該新增的都已經新增,下面就是見證奇蹟的時刻,在首頁寫乙個頁面入口 ,跳轉到我們要測試的頁面上,直接在首頁 pages/index/index.wxml 新增一段**一句鏈結

跳轉test頁面

儲存**,點選上面的編譯按鈕,所有**執行起來,點選首頁的「跳轉到test頁面」,跳轉成功,如下圖。

設定頁面標題 ,是非常簡單的乙個步驟哦,找到所在頁面的目錄,新建乙個 json 檔案(一般都是自動生成的,如果沒有就新建乙個),比如我們上一次建造的 test 頁面, 找到 pages/test/ 目錄 新建乙個 test.json 檔案 加入如下**。

效果如下:

微信小程式從零開始開發步驟(八)引入框架WeUI

首先來看下weui的官方介紹 2 我們只需要將weui wxss master dist style weui.wxss檔案匯入到小程式專案的根目錄下 5 根元件使用class page 6 頁面骨架 7 除此之外都是按照weui 開頭後接元件名稱,例如class weui footer 我是頁尾上...

微信小程式從零開始開發步驟(七)引入外部js 檔案

上一章講到小程式頁面的四種常見的跳轉的方法,這一章寫如何引入乙個外部的js檔案,既utils資料夾的用處,其實步驟很簡單 1 準備好外部想要引入的外部檔案,命名為util.js,並且填充固定的檔案內容 一般是固定的庫 2 開啟util.js 繼續填寫重要內容將要使用的方法用module.export...

微信小程式從零開始開發步驟(七)引入外部js 檔案

上一章講到小程式頁面的四種常見的跳轉的方法,這一章寫如何引入乙個外部的js檔案,既utils資料夾的用處,其實步驟很簡單 1 準備好外部想要引入的外部檔案,命名為util.js,並且填充固定的檔案內容 一般是固定的庫 2 開啟util.js 繼續填寫重要內容將要使用的方法用module.export...