小程式開發簡單實例詳解

這篇文章主要介紹了微信小程式（應用號）簡單實例應用的相關資料,需要的朋友可以參考下

Demo 預覽

示範影片（流量預警2.64MB）

#GitHub Repo 位址

倉庫位址：github.com/ zce/weapp-demo

使用步驟

#將倉庫複製到本地：

bash $ git clone https://github.com/zce/weapp-demo.git weapp-douban --depth 1 $ cd weapp-douban

開啟微信Web開放者工具（注意：必須是0.9.092300版本）

必須是0.9.092300版本，先前的版本不能保證正常運作

不需要所謂的破解，網路上所謂的破解只是針對之前的0.9. 092100版本，新的官方版本不需要破解，不需要破解，不需要破解！

下載連結（官方版本，放心下載）：https://pan.baidu.com/s/1qYld6Vi

wechat_web_devtools_0.9.092300_x64.exe（Windows 64位元）
wechat_web_devtools_0.9.092300_ia32.exe（Windows 32位元）
wechat_web_devtools_0.9.092300.dmg（macOS）

1.選擇新增項目，填入或選取對應資訊

##AppID：點擊右下角無AppID（我也沒有資格，據說這次200個名額是小龍欽點的）

專案名稱：隨便填寫，因為不涉及到部署，所以無所謂
專案目錄：選擇剛剛複製的資料夾
點選新增項目

#新年快樂，恭喜發財

你可以選擇在微信Web開放者工具中編碼（也可選擇你喜歡的

編輯器）

1.透過左下角重啟

按鈕，刷新編碼過後的預覽

2.Bash用戶可以透過在專案目錄下執行以下命令快速建立新元件所需檔案：

bash $ ./generate page new-page-name> # 或 $ ./generate component

#剩下的可以自由發揮了

微信小程式基本教學（持續

更新）

建立一個專案資料夾，建立基本所需檔案

app.js

项目主入口文件（用于创建应用程序对象）

// App函数是一个全局函数，用于创建应用程序对象
App({
 // ========== 全局数据对象（整个应用程序共享） ==========
 globalData: { ... },

 // ========== 应用程序全局方法 ==========
 method1 (p1, p2) { ... },
 method2 (p1, p2) { ... },

 // ========== 生命周期方法 ==========
 // 应用程序启动时触发一次
 onLaunch () { ... },

 // 当应用程序进入前台显示状态时触发
 onShow () { ... },

 // 当应用程序进入后台状态时触发
 onHide () { ... }
})

app.json

專案設定宣告檔（指定專案的一些訊息，例如

導覽欄樣式顏色等等）

{
 // 当前程序是由哪些页面组成的（第一项默认为初始页面）
 // 所有使用到的组件或页面都必须在此体现
 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#pages
 "pages": [ ... ],
 // 应用程序窗口设置
 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#window
 "window": { ... },
 // 应用导航栏设置
 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar
 "tabBar": { ... },
 // 网络超时设置
 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#networkTimeout
 "networkTimeout": {},
 // 是否在控制台输出调试信息
 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#debug
 "debug": true
}

app.wxss

[!可選!]專案全域的樣式文件，內容遵循CSS標準語法

#建立頁面元件

每個頁面元件也分為四個文件組成：

1. page-name.js

2. #頁面邏輯文件，用於處理頁面生命週期控制和資料處理

3. 未完待續...

4. page-name.json

5. 設定目前頁面工作時的一些配置

6. 此處可以覆蓋app.json中的window設定

7. 也就是說只可以設定window中設定的熟悉

8. 未完待續...

9. #page-name.wxml

10. wxml指的是Wei Xin Markup Language

11. 用於定義頁面中元素結構的

12. 語法遵循XML語法，注意是XML語法，不是HTML語法，不是HTML語法，不是HTML語法

13. #未完待續...

14. page-name.wxss

15. wxml指的是Wei Xin Style Sheet

16. 用於定義頁面樣式的

17. 語法遵循CSS語法，擴展了CSS基本用法與長度單位（主要是rpx響應式像素）

【相關推薦】

#1.

微信小程式完整原始碼下載

2.

微信小程式demo：仿網易雲音樂#

以上是小程式開發簡單實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！