日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
為小程序而生的小(jiao)手架

前言

不久前我們一直所期待的應(yīng)(xiao)用(cheng)號(xu)終于誕生了，但微信制造了一系列的封閉環(huán)境，在內(nèi)測版中，我們看見了開發(fā)其實是十分不便利的。為了能提升咱們的工作效率，小手架由此而生 --- wxapp

wxapp介紹

優(yōu)勢

1.可以在任意IDE中開發(fā)

2.可使用ES6或ES5

3.可使用sass

4.可以同時編寫.html|.wxml，.wxss|.scss 文件，***都會轉(zhuǎn)換為.wxml和.wxss

5.編寫完任何文件(包括.json)只需要去微信開發(fā)者工具中點擊重啟即可預(yù)覽

6.NODE_ENV 環(huán)境切換

劣勢

1.由于微信封閉的環(huán)境內(nèi)，所以沒有sourcemap，但這不太影響調(diào)試(即使是經(jīng)過編譯后的代碼，本人測試了出bug的代碼，還是可以從控制臺跳到源碼的地方)

2.由于微信封閉的環(huán)境內(nèi)，無法實現(xiàn)reload或者hot reload

PS: 當(dāng)然如果你不想寫ES6也是完全可以的 在后面統(tǒng)一介紹命令

安裝

 
 
      
  
  1. // 安裝我們的命令 
    2.   
  
  2. //mac 
    3.   
  
  3. sudo npm i -g wxapp 
    4.   
  
  4. // window 
    5.   
  
  5. npm i -g wxapp 
    6.

使用

 
 
      
  
  1. // 初始化一個目錄結(jié)構(gòu) 
    2.   
  
  2. wxapp init [project_name] 
    3.   
  
  3.  
    4.   
  
  4. // 如 
    5.   
  
  5. wxapp init first-wxapp  
    6.

DEV

npm run dev // 默認啟用了ES6模式

npm run dev-es5 // 不啟用ES6模式

 
 
      
  
  1. --- dist 
    2.   
  
  2. ... // 這里的文件是編譯處理過后的，和src目錄結(jié)構(gòu)完全相同      
    3.   
  
  3. --- src 
    4.   
  
  4.     |--- image 
    5.   
  
  5.     |--- pages 
    6.   
  
  6.         |--- index 
    7.   
  
  7.             |--- index.js 
    8.   
  
  8.             |--- index.scss （可直接編寫sass） 
    9.   
  
  9.             |--- index.html (可直接編寫html文件) 
    10.   
  
  10.         |--- logs 
    11.   
  
  11.             |--- logs.js 
    12.   
  
  12.             |--- logs.json （json文件也會實時編譯） 
    13.   
  
  13.             |--- logs.wxml （也可直接寫wxml文件） 
    14.   
  
  14.             |--- logs.wxss （也可直接寫wxss文件） 
    15.   
  
  15.     app.js 
    16.   
  
  16.     app.json 
    17.   
  
  17.     app.sass 
    18.   
  
  18. ...  
    19.

接著我們只需要打開微信開發(fā)者工具，添加項目，那個項目目錄指向為dist目錄即可。

NODE_ENV

開發(fā)中往往我們需要有dev和pro環(huán)境，根據(jù)不同環(huán)境下做一些事情，比如HTTP的請求鏈接

 
 
      
  
  1. // ES6開發(fā)模式下 
    2.   
  
  2. //  ./src/utils/ajaxurl.js 
    3.   
  
  3. var server1 = 'https://im.server1.url'; 
    4.   
  
  4. var server2 = 'https://im.server2.url'; 
    5.   
  
  5.  
    6.   
  
  6. var server = null; 
    7.   
  
  7.          
    8.   
  
  8. if(NODE_ENV === 'dev') { 
    9.   
  
  9.     server = server1; 
    10.   
  
  10. } else if(NODE_ENV === 'production') { 
    11.   
  
  11.     server = server2; 
    12.   
  
  12. } 
    13.   
  
  13.    
    14.   
  
  14. module.exports = server;  
    15.  

 
 
      
  
  1. // ES5開發(fā)模式下   
    2.   
  
  2. //  ./src/utils/ajaxurl.js 
    3.   
  
  3. var server1 = 'https://im.server1.url'; 
    4.   
  
  4. var server2 = 'https://im.server2.url'; 
    5.   
  
  5.  
    6.   
  
  6. var server = null; 
    7.   
  
  7.          
    8.   
  
  8. if('NODE_ENV' === 'dev') { // 這里要寫字符串，我會替換這里的字符串 
    9.   
  
  9.     server = server1; 
    10.   
  
  10. } else if('NODE_ENV' === 'production') { 
    11.   
  
  11.     server = server2; 
    12.   
  
  12. } 
    13.   
  
  13.    
    14.   
  
  14. module.exports = server;  
    15.

Build

npm run build // 默認ES6模式

npm run build-es5 // 使用ES5編寫模式

PS：這里有個坑，由于build會壓縮代碼，所以如果你用ES5編寫，別用promise這樣的ES6的代碼，uglify壓縮不支持。

雖然微信開發(fā)者工具用谷歌內(nèi)核貌似支持部分ES6的代碼，但現(xiàn)在也不能保證用戶真正使用是否支持。如果寫了ES5模式，建議大家寫純純的ES5

TODO

我們知道微信希望我們創(chuàng)建4個文件來寫page或者組件。所以下一個版本我會寫個命令創(chuàng)建這4個文件的template。

  • [ ] 一鍵創(chuàng)建文件

后話

小程序目前還在內(nèi)測當(dāng)中，本人憑著直覺和經(jīng)驗直接做出了這一套腳手架，在測試上可能略有不足。(目前測試了node5和node6版本，window10和mac)。大家有問題可以***時間給我提issue，我會在一天內(nèi)給你答復(fù)。

未來小程序完全公測了，微信可能會把工程化的問題也一并解決了。但是我還是更愿意在喜歡的IDE中編寫代碼 ????

***給出github地址：https://github.com/MeCKodo/wxapp-cli


分享名稱：為小程序而生的小(jiao)手架
URL分享：http://www.dlmjj.cn/article/cdehpje.html