目錄：

        1.框架概述         2.專案目錄結構
        3. json配置             3.1 全域性json檔案app.json
            3.2 單個頁面json檔案page.json         4.邏輯層
            4.1 全域性js檔案app.js
            4.2 單個頁面js檔案page.js         5.檢視層
            5.1 全域性/單個頁面 wxss檔案(app.wxss/page.wxss)             5.2 單個頁面檔案page.wxml

 1.框架概述

 2.專案目錄結構

      全域性配置主要設定一些全域性的應用引數，全域性的樣式等。

3. json配置

       3.1 全域性json檔案app.json

1. /*app.json可配置的引數：
2. 1.pages:配置程式頁面路徑
3. 2.window：設定視窗的表現樣式
4. 3.tabBar：設定導航tab表現樣式
5. 4.networkTimeout：設定網路超時時間
6. 5.debug：設定是否開啟debug模式（開發時使用）
7. */
8. {
9. /*頁面配置,全域性的頁面必須在這裡宣告，否則後面使用時將找不到*/
10. "pages":[
11. "pages/index/index",
12. "pages/logs/logs"
    ,
13. "pages/music/music",
14. "pages/game/game"
15. ],
16. "window":{
17. "backgroundTextStyle":"light",//下拉背景字型 loading圖片樣式
18. "navigationBarBackgroundColor":"#fff",//導航欄背景顏色
19. "navigationBarTitleText":"WeChat",//導航欄文字
20. "navigationBarTextStyle":"black",//導航欄標題顏色
21. "backgroundColor":"#ffffff",//視窗背景色
22. "enablePullDownRefresh":true//是否開啟下拉重新整理
23. },
24. "tabBar":
    {
25. /*設定導航欄tab選項list*/
26. "list":[
27. {
28. "pagePath":"pages/index/index",//連結路徑
29. "text":"首頁",//tab導航文字
30. "iconPath":"/image/wechat.png",//tab圖示
31. "selectedIconPath":"/image/wechat.png"//選中圖示
32. },
33. {
34. "pagePath":"pages/music/music",
35. "text":"音樂",
36. "iconPath":"/image/wechat.png",
37. "selectedIconPath":"/image/wechat.png"
38. },
39. {
40. "pagePath":"pages/game/game",
41. "text":"遊戲",
42. "iconPath":"/image/wechat.png",
43. "selectedIconPath":"/image/wechat.png"
44. },
45. {
46. "pagePath":"pages/logs/logs",
47. "text":"文學",
48. "iconPath":"/image/wechat.png",
49. "selectedIconPath":"/image/wechat.png"
50. }
51. ],
52. "borderStyle":"black",//邊框顏色
53. "position":"top"//tab位置，top/bottom
54. },
55. "networkTimeout":{
56. "request":20000,//wx.request（request請求）的超時時間
57. "connectSocket":20000,//wx.connectSocket（socket請求）的超時時間
58. "uploadFile":20000,//wx.uploadFile（上傳檔案）的超時時間
59. "downloadFile":20000//wx.downloadFile（下載檔案）的超時時間
60. },
61. "debug":true//開啟debug模式，開發所用
62. }

        ps:json似乎不能使用註釋，這裡只是為了方便檢視，不可在專案中加入。             3.2 單個頁面json檔案page.json

1. /*
2. page.json只能簡單的配置window的一些簡單樣式
3. */
4. {
5. "navigationBarTitleText":"String",//設定導航欄標題文字
6. "navigationBarTextStyle":"white",//設定導航標題顏色
7. "navigationBarBackgroundColor":"#000000",//設定導航欄背景色
8. "backgroundColor":"#ffffff",//設定視窗背景色
9. "backgroundTextStyle":"dark",//設定下拉背景字型，loading圖片樣式
10. "enablePullDownRefresh":false,//設定是否開啟下拉重新整理
11. "disableScroll":false//設定是否禁止滑動
12. }

4.邏輯層

4.1 全域性js檔案app.js

1. //app()註冊小程式，注意不能註冊多個
2. App({
3. //監聽小程式初始化，當小程式初始化完成時會觸發發，且全域性只觸發一次
4. onLaunch:function(){
5. },
6. //小程式啟動或者從後臺進入前臺時觸發
7. onShow:function(){
8. },
9. //小程式從前臺進入後臺時觸發
10. onHide:function(){
11. },
12. //小程式發生指令碼錯誤，api呼叫失敗時觸發
13. onError:function(msg){
14. console.log(msg)
15. },
16. //其他任意使用者定義的函式
17. anyCustomFunc:function(){
18. },
19. //使用者自定義的全域性資料，可以通過var app = getApp()獲取app例項，再通過app.globalData.userInfo獲取資料
20. globalData:{
21. userInfo:' global data',
22. otherCustomData:'other custom data'
23. }
24. })

4.2 單個頁面js檔案page.js

1. //獲取註冊的的app例項
2. var app = getApp()
3. //註冊頁面例項
4. Page({
5. //頁面初始化資料,檢視層通過<view>{{text}}</view>繫結
6. data:{
7. text:"This is page init data."
8. },
9. //監聽頁面載入
10. onLoad:function(options){
11. },
12. //監聽頁面初次渲染完成
13. onReady:function(){
14. },
15. //監聽頁面顯示
16. onShow:function(){
17. },
18. //監聽頁面隱藏
19. onHide:function(){
20. },
21. //監聽頁面解除安裝
22. onUnload:function(){
23. },
24. //使用者下拉重新整理觸發監聽
25. onPullDownRefresh:function(){
26. },
27. //使用者滑到底部觸發監聽
28. onReachBottom:function(){
29. },
30. //使用者點選右上角分享觸發監聽
31. onShareAppMessage:function(){
32. return{
33. title:'自定義分享標題',
34. desc:'自定義分享描述',
35. path:'/page/user?id=123'
36. }
37. },
38. //事件處理(自定義函式)
39. viewTap:function(){
40. //事件觸發後，通過setData()更新頁面顯示資料
41. this.setData({
42. text:'Set some data for updating view.'
43. })
44. },
45. //使用者自定義資料，最好與頁面初始化資料分開
46. customData:{
47. data1:'custom data'
48. }
49. })

 5.檢視層

   5.1 全域性/單個頁面 wxss檔案(app.wxss/page.wxss)         （1）概述                wxss為wxml的樣式檔案，大部分特性與css一致
        （2）相對於CSS的不同於擴充套件
               2.1）  尺寸單位改為了rpx
               2.2）  樣式匯入改成了 @import "filename.wxss"         （3）選擇器
         5.2 單個頁面檔案page.wxml         (1) 概述        page.wxml檔案定義使用者介面（也就是所謂的UI），通過資料繫結和事件繫結從JS邏輯層獲取資料更新UI顯示，達到動態更新頁面的效果。         (2)資料繫結

1. //page.js
2. Page({
3. data:{
4. testdata:'hello i am js data!'
5. }
6. })

1. //page.wxml
2. <view>{{testdata}}</view>

        (3)事件繫結

1. //page.js
2. Page({
3. data:{
4. testdata:'hello i am js data!'
5. },
6. 相關推薦

   小程式框架總結

   目錄：         1.框架概述         2.專案目錄結構         3. json配置             3.1 全域性json檔案app.json            

   小程式開發總結一：mpvue框架及與小程式原生的混搭開發

   mpvue-native:小程式原生和mpvue程式碼共存 問題描述 mpvue和wepy等框架是在小程式出來一段時間之後才開始有的，所以會出現的問題有：需要相容已有的老專案，有些場景對小程式的相容要求特別高的時候需要用原生的方式開發 解決思路 mpvue的入口檔案匯入舊版路由配置檔案 公共樣式 字型圖示遷

   美團小程式框架mpvue踩坑總結編一

   第一次接觸小程式大概是17年初,當時小程式剛剛內側,當時就被各種限制折騰的死去活來的,單向繫結, 沒有promise,請求數限制,包大小限制,各種反人類,...反正我是感受到了滿滿的惡意. 最近接到一個工程類的小程式專案,做技術選型的時候,又把以前的東西撿起來看了看,重新

   微信小程式知識總結01

   1.小程式的基本檔案結構 （1）根目錄下面有三個檔案，app.js、app.json、app.wxss。一個小程式都必須有這三個檔案，他們必須放在應用程式的根目錄下面，否則小程式會提示找不到app.json檔案。      （2）app.js，表示小

   微信小程式-day02-微信小程式-框架-配置-pages、windows、tabBars、debug（json檔案）

   1.pages（頁面路徑列表） "pages":[ "pages/index/index", "pages/do/do", "pages/eat/eat", "pages/logs/logs" ] 2.windows（全域性的預設視窗表現） "window":{

   [轉] 擴充套件微信小程式框架功能

   通過第三方 JavaScript 庫，擴充套件微信小程式框架功能。 擴充套件微信小程式框架功能（1）——Promise ES6 對 Promise 有了原生的支援，但微信開發者工具更新版本（0.11.112200）後, 移除了開發者工具對 ES6 中Promise 特性原生的支援, 需要引入第三

   小程式入門總結篇

   整理於網路 http://blog.poetries.top/2018/08/09/xiaochengxu-note 一、小程式程式碼組成 前言 App() 必須在 app.js 中註冊，且不能註冊多個。 編譯後的程式碼包大小需小於 1MB，否則程式碼包將

   微信小程式開發總結與心得

   0 前言 最近的工作重心一直在小程式，也開發了幾個小程式，對小程式開發的流程及相關技術相對比較熟悉，在開發過程中也總結了一些心得經驗、瞭解一些小程式文件上沒有的東西、踩了一些坑。所以想著寫篇文章記錄下來，並藉此將小程式開發的相關知識進行梳理，方便以後參考，也作為自己工作的階段性總結。同時也希望可以通過文

   支付寶小程式框架淺析及如何在 mPaaS 內深度整合

   1. 前言 本文將結合闊懸在 iWeb 杭州站沙龍現場的分享《支付寶小程式在 mPaaS 中的深度整合實踐》，介紹支付寶小程式框架的設計原理，以及如何在 mPaaS 體系中的深度整合支付寶小程式。 分享內容將從以下兩個方面展開： 支付寶小程式框架的系統介紹（支付寶小程式框架概述、應用層框架、Nat

   使用mpVue開發小程式實戰總結

   1.圖形驗證碼介面返回base64格式的資料，使用image標籤接收不顯示問題。 解決方法： 　　使用wx.base64ToArrayBuffer和wx.arrayBufferToBase64轉化一遍資料 wx.request({ url: `${this.$proxyTable}/decl

   【WePY小程式框架實戰四】-使用async&await非同步請求資料

   async await 是對promise的近一步優化,既解決了promise鏈式then的這種寫法壁壘，又讓非同步請求更像同步，若對async await不太瞭解的同學可以直接參考阮一峰老師的文章async 函式的含義和用法,這裡我們只關注怎麼在小程式wepy架構中如何使用。 依賴庫 import

   滴滴開源小程式框架Mpx

   Mpx是一款致力於提高小程式開發體驗的增強型小程式框架，通過Mpx，我們能夠以最先進的web開發體驗(Vue + Webpack)來開發生產效能深度優化的小程式，Mpx具有以下一些優秀特性： 資料響應特性(watch/computed) 增強的模板語法(動態元件/樣式繫結/類名繫結/內聯事件函式/

   微信小程式框架wepy筆記

   WePY專案的建立與使用 全域性安裝或更新WePY命令列工具 npm install wepy-cli -g 在開發目錄中生成Demo開發專案, 1.7.0之後版本請移步wepy-cli文件

   【開源】騰訊 omi-mp-create 釋出 - 極小卻精巧的小程式框架

   【開源】騰訊 omi-mp-create 釋出 極小卻精巧的小程式框架，對小程式入侵性幾乎為零 → Github omi-mp-create 和 omio 一樣，使用了 omi packages 裡的 obaa 監聽資料變化自動更新檢視。和早期釋出的 westore 對比的話，

   EF+MVC對映MySQL資料庫搭建程式框架總結

   以前使用VS都是通過SQLServer資料庫對映，不過這個專案需求是MVC+EF+MySQL，在配置過程中出現了很多錯誤上網查看了很多資料，現在讓我來總結一下吧。 一：配置 因為VS和SqlServer都是微軟的親兒子所以在用VS對映SQLserver的時候很方便，但是對

   微信小程式學習總結（二）

   小程式尺寸單位 rpx是小程式常見的尺寸單位，那麼他和px有啥不同一樣呢。rpx可以根據螢幕寬度進行自適應。如在 iPhone6 上，螢幕寬度為375px，共有750個物理畫素，則750rpx

   微信小程式學習總結（一）

   建立專案 如圖所示 選點此校驗就行啦，右邊有個詳情也點開瞅兩眼。 上傳測試和騰訊這塊點不了是為啥呢，因為你建立專案的時候沒有填寫AppID，下一題。 具體的東西下載下來

   微信小程式專案總結：for迴圈，繫結點選事件，二維陣列列表渲染

   一：for迴圈，繫結點選事件分享者：niedongdong，原文地址 最近公司有小程式的專案，本人有幸參與其中，一個專案做下來感覺受益匪淺，與大家做下分享，歡迎溝通交流互相學習。先說一下此次專案本人體會較深的幾個關鍵點：微信地圖、使用者靜默授權、使用者彈窗授權、微信充值等等。言歸正傳，今天分享我遇到的關於wx

   小程式知識點總結

   1、開啟無域名訪問模式在開發者工具-》設定-》專案設定-》勾選不效驗合法的域名在手機要訪問預覽中的小程式需要開條除錯模式：點選三個點-》除錯模式、2、小程式富文字編輯器的使用（下載wxparse）前提是富文字編輯器的圖片路徑前要加上域名在ueditor下的-》php->

   [微信小程式]微信小程式知識總結及案例集錦

   目錄 主要從以下幾個方面給大家總結一下微信小程式相關的知識! 1 前言 12.公眾號 1.前言 今天把之前收集的微信小程式案例,給大家共享出來,一起學習