手把手教你從零開發到上線一個答題微信小程序項目實戰教程之01.開發環境搭建,微信小程序helloworld


上線項目演示

微信搜索[放馬來答]或掃以下二維碼體驗:

image.png

項目大綱

1.開發環境搭建,微信小程序helloworld
2.題目分類頁
3.答題頁mock數據
4.答題頁請求真實數據(pay)
5.答題頁記錄錯題
6.結果得分頁(pay)
7.展示錯題(pay)
8.記錄考試結果(pay)
9.小程序上線

1.注冊微信小程序

點擊立即注冊,選擇微信小程序,按照要求填寫信息

image

image

image

2.登錄小程序並完善信息

填寫小程序信息,完善信息。

image

image

3.下載小程序開發工具

完善信息后點擊文檔,工具,下載,選擇穩定版的對應平台的安裝包下載,下載完后點擊安裝即可

image

image.png

image

image

image

image

4.建立小程序項目

掃碼登錄,選擇小程序,並點擊加號,填寫相關信息,APPID位置於下方截圖所示。

image

image

image

image

image

5.小程序代碼結構介紹

如下圖所示的四個文件,主要用於注冊和配置微信小程序,其包含的是全局配置信息。

  • app.js:用於注冊微信小程序應用。

  • app.json:小程序的全局配置,比如網絡請求的超時時間,以及窗口的屬性

  • app.wxss:小程序全局樣式

  • project.config.json:包含了小程序的整體配置信息,即使是換了開發設備,亦或是換了項目,只要將該文件保留,每個開發者的個性化設置就都將保留。

    image

如下圖所示,還有兩個目錄,

  • pages:每一個子文件夾代表了小程序的一個頁面,比如index,和logs分別代表了兩個頁面。每個頁面又由四個文件組成:
    index.js:處理頁面邏輯和數據交互。
    index.json:對應頁面的配置信息。
    index.wxml:展示頁面的內容和元素。
    index.wxss:設置用wxml展示元素的樣式。

  • utils:存放的是一些工具代碼,實現代碼復用的目的。

image

6.小程序helloworld

image

參考:https://www.jianshu.com/p/ae8bc5eb3b50


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM