common
index.wxss (公共樣式類)
component (自定義元件資料夾)
....
config (配置資料夾)
index.js (本次執行的介面)
switch.js (根據命令列執行引數,修改index.js裡面的專案配置資訊)
envdev.js (開發環境)
prod.js (正式環境)
test.js (測試環境)
img (資料夾)
....
http (http資料夾,對請求的狀態、資料和格式統一處理)
http.js (請求的封裝)
mock-min.js (mock資料)
data.js (mock資料的獲取)
pages (頁面)
>
(資料夾名稱，乙個大模組乙個資料夾，裡面可以巢狀多層資料夾)
template (wxml模版資料夾)
filename.scss (模版樣式，可以全域性引入樣式，也可以當前頁面引入)
filename.wxml (模版頁面)
utils (指令碼資料夾)
>
deal.wxs (wxml頁面用到的指令碼語言，對資料處理)
pluginunit (js外掛程式)
util.js (js函式的封裝與指令碼)
....gitignore
gulpfile.js (scss檔案的處理的gulp檔案)
package.json
配置檔案 index.js
/**
* 根據命令列執行引數，修改 /config/switch.js 裡面的專案配置資訊
* 即動態的將 /config/env 下的配置檔案的內容寫入到 /config/index.js 中
*/const fs =
require
('fs'
)//原始檔
const sourcefiles =
//目標檔案
const targetfiles =
// 獲取命令列引數
const cliargs = process.ar**.
splice(2
)const env = cliargs[0]
const sourcefile = sourcefiles[env]
// 獲取原始檔中的內容
fs.readfile
(__dirname + sourcefiles.prefix + sourcefile,
(err, data)
=>
.\nerror detail: $`
) process.
exit(1
)}// 寫入檔案(這裡只做簡單的強制替換整個檔案的內容)
fs.writefile
(__dirname + targetfiles.prefix + targetfiles.filename, data,
'utf8'
,(err)
=>
. error detail: $`
) process.
exit(1
)}})
})
路徑可以用絕對路徑: /img/[email protected]
http的封裝
import
*as mod from
'./data.js'
const config =
require
('../config/index');
const
=require
('../utils/dist/base/index'
)let isopen =
false
;//切換資料入口
function
ajax
, defaulttips = params.defaulttips ||
true
, method = params.method ||
'get'
;let contenttype =
;let token ='';
if(method.
touppercase()
==='post')if
(params.header)
if(params.header[
'token'])
}let header =
if(token)
var baseurl = config.baseurl + url;
if(params.dopay)
var defaultdata =if(
!isopen)
else
if(code ===
-10000
&& showfail));
}else
if(code ===
-10001
&& showfail));
}else
if(code ===
500&& showfail));
}}, fail:
function
(res)})
})}else}}
}module.exports = ajax
官方文件:
樣式的編寫,統一用scss來編寫，gulp配置檔案會編譯、重新命名wxss並壓縮。
gulpfile.js
var gulp =
require
('gulp'
)var sass =
require
('gulp-sass'
)let rename =
require
('gulp-rename');
//檔案重新命名
var watch =
require
('gulp-watch');
// 監聽檔案改變、新增、刪除
let watchfilespath =
['pages/**/*.scss'
]let watchfilespath2 =
['component/**/*.scss'
]gulp.
task
('watch'
,function()
);}}
);gulp.
task
('wxss'
,function()
)).pipe
(rename()
).pipe
(gulp.
dest
('pages'))
//這是轉化後css的檔案})
;gulp.
task
('component'
,function()
)).pipe
(rename()
).pipe
(gulp.
dest
('component'))
//這是轉化後css的檔案})
;// 監聽任務時先執行一次編譯
gulp.
task
('default'
,function()
)
"gulp"
:"^3.9.1"
,"gulp-watch"
:"^4.3.11"
// 在gulp3x中,得使用gulp-watch4x版本,用5x版本不起作用
微信小程式之專案的建立
一 構建專案 1 新建專案 1 建立乙個空白的專案，也可以是官方提供的有一些基本的檔案的專案，這裡選擇的是把一些檔案都刪除掉，只剩下pages資料夾以及project.config.json，這個是專案的配置檔案，然後從頭開始新建檔案以及資料夾，需要新建的檔案以及資料夾如下 注意 這個檔案中是需要寫...
微信小程式開發 專案的建立
專案建立的步驟 以mac版為例 2.選擇型別 3.點選 5.填寫專案名稱和專案目錄 注意兩點 1.專案資料夾不能用中文 2.新建專案資料夾要建乙個空的資料夾。6.新建之後的檔案目錄結構 7.新增hello world 8.執行結果 示例 1 2 3onlaunch function 13getuse...
微信小程式專案結構及其說明
pages 頁面資料夾,包含所有模組 index 對應乙個模組 index.js index頁面的事件與資料 index.json index頁面的配置 index.wxml index頁面的布局 index.wxss index頁面的樣式 pay index模組子頁面，pages index pa...