1、安裝【微信開發(fā)者工具】

使用的開發(fā)平臺(tái)為——微信開發(fā)者工具（點(diǎn)擊此處鏈接）?

依次點(diǎn)擊【工具】->【下載】->【穩(wěn)定版更新日志】，找到適合的版本，進(jìn)行下載安裝。

2、注冊微信小程序

注冊微信小程序（點(diǎn)擊注冊鏈接），注意注冊的是”小程序“。

根據(jù)注冊提示完成后，進(jìn)入以下界面：

在側(cè)邊欄點(diǎn)擊【開發(fā)】-->【開發(fā)管理】-->【開發(fā)設(shè)置】?

? ? ? ? 獲取AppID（小程序ID），后期創(chuàng)建 小程序時(shí)會(huì)用到。

3、創(chuàng)建【小程序】

????????打開安裝好的微信開發(fā)者工具，點(diǎn)擊【小程序】，進(jìn)入【創(chuàng)建小程序】界面。

此時(shí)將步驟2，所得到的AppID,復(fù)制到對(duì)應(yīng)的位置即可。默認(rèn)選擇微信云開發(fā)。

?4、搭建node.js環(huán)境

• 下載node.js地址:?節(jié)點(diǎn).js (nodejs.org)

?點(diǎn)擊【Other Downloads】-->【W(wǎng)indows Binary(.zip)】-->【64-bit】

?解壓后，放在路徑?D:\SoftSetup\nodejs 下

• 配置環(huán)境變量

由【此電腦】-->【高級(jí)系統(tǒng)設(shè)置】-->【系統(tǒng)屬性】-->【環(huán)境變量】

?在用戶變量處，新建 變量名NODE_PATH, 變量值為上面nodejs的路徑。（建議直接點(diǎn)擊【瀏覽目錄】，找到對(duì)應(yīng)文件夾，即可獲取路徑）

?點(diǎn)擊用戶變量中的變量【PATH】，新建 %NODE_PATH%

?在【系統(tǒng)變量】處，點(diǎn)擊變量【PATH】，新建 %NODE_PATH%

• ?檢查是否安裝成功

• win+r ,輸入cmd,回車

• 

• 進(jìn)入在命令提示符中輸入：node -v? ,如圖所示node環(huán)境安裝成功

• 

  5、npm配置

• npm 是Nodejs下的包管理器，安裝完node.js后npm的本地倉庫默認(rèn)會(huì)在C盤。如圖

  • 

    ? 我們配置npm的全局模塊的存放路徑以及cache的路徑。我是放在了node.js 的安裝路徑。在D:\SoftSetup\nodejs 文件夾內(nèi)新建兩個(gè)文件夾，分別為node_cache和node_global

• 

  ? 修改npm的全局目錄路徑和緩存目錄，將對(duì)應(yīng)的模塊目錄改到D盤的nodejs的安裝目錄。

• #全局安裝目錄
  npm config set prefix "D:\SoftSetup\nodejs\node_global"

  #緩存目錄
  npm config set cache "D:\SoftSetup\nodejs\node_cache"

  ? 配置環(huán)境變量：

• ? 由【此電腦】-->【高級(jí)系統(tǒng)設(shè)置】-->【系統(tǒng)屬性】-->【環(huán)境變量】

  • ? 在系統(tǒng)環(huán)境變量中，新建變量名： NODE_PATH ,變量值：D:\SoftSetup\nodejs\node_global\node_modules

  • 

    ?在用戶環(huán)境變量中新建或修改，默認(rèn)的?C?盤下的??C:\Users\Paterson\AppData\Local\npm為D:\SoftSetup\nodejs\node_global

  • 

    ?更換鏡像源：

  • #全局使用淘寶鏡像源
    npm config set registry https://registry.npm.taobao.org
    
    #查看當(dāng)前鏡像源
    npm config get registry

    

    ?6、npm配置vant weapp框架

  • 打開步驟3，新建的項(xiàng)目，從小程序文件的根目錄打開終端窗口

  • 

    ?通過 npm 安裝，一定要在項(xiàng)目的根目錄下進(jìn)行。

  • 比如我新建的小程序項(xiàng)目1就存放在SmaProgram文件夾內(nèi)，所以Smagram就是我的根目錄

  • #安裝 Vant Weapp 組件庫
    npm i @vant/weapp -S --production
    
    #初始化項(xiàng)目，
    npm init -y

    生成了node_modules文件夾，package-lock.json和package.json文件。

  • 

    ?以下是我終端運(yùn)行過程：

• Microsoft Windows [版本 10.0.19044.3086]
  (c) Microsoft Corporation。保留所有權(quán)利。
  
  D:\Storage\SmaPrograms>npm i @vant/weapp -S --production
  npm WARN config production Use `--omit=dev` instead.
  
  added 1 package in 3s
  
  D:\Storage\SmaPrograms>npm init -y
  Wrote to D:\Storage\SmaPrograms\package.json:
  
  {
    "dependencies": {
      "@vant/weapp": "^1.10.23"
    },
    "name": "smaprograms",
    "version": "1.0.0",
    "main": ".eslintrc.js",
    "devDependencies": {},
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "description": ""
  }
  
  D:\Storage\SmaPrograms>
  

  舊版本微信開發(fā)者工具構(gòu)建安裝 Vant Weapp 需要先配置project.config.json文件的內(nèi)容

• ?

  構(gòu)建npm,【工具】->【構(gòu)建npm】?

• 

• • 結(jié)果：

  • 

    ?點(diǎn)擊【確定】，可以看見生成了文件夾mibiprogram_npm

  • ?參考文檔：

    Vant Weapp - 輕量、可靠的小程序 UI 組件庫

    小程序|使用npm模塊配置Vant Weapper框架

?文章來源地址http://www.zghlxwxcb.cn/news/detail-777309.html

?

到了這里，關(guān)于前端開發(fā)——微信小程序的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！