微信小程序初學記錄---npm安裝weui組件

原創

helal

2020-02-21 12:09

一、安裝微信開發工具

二、新建項目

1、菜單》項目》新建項目

二、引入weui組件

1、我用的是npm安裝

2、在項目根目錄執行命令npm init，安裝npm包，然後一直確定

3、然後再執行命令 npm install --production

4、微信開發工具》工具》構建npm，若有提示 “沒有找到可以構建的NPM包”，檢查下npm 模塊有沒有打鉤上

如果有打鉤，還出現那就嘗試跑下如下命令：
npm install miniprogram-sm-crypto --production

6、跑完npm install miniprogram-sm-crypto --production這個命令，目錄結構是這樣子的，

三、安裝組件（我這裏是安裝weui組件）

1、執行命令安裝 npm install --save weui-miniprogram，安裝完miniprogram_npm目錄下多了一個weui-miniprogram文件

2、在微信開發者工具中的菜單欄：工具 --> 構建 npm （二 2 步驟裏已經安裝了）

3、app.wxss引入全局樣式

@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';

4、頁面運用組件，json中引入想要的組件，我引入的是官網的例子https://developers.weixin.qq.com/miniprogram/dev/extended/weui/form.html

就是把路徑改一下，因爲安裝組件的時候不一樣，後續用的組件直接copy，改下路徑就可以

{
  "usingComponents": {
    "mp-toptips": "../../miniprogram_npm/weui-miniprogram/toptips/toptips",
    "mp-cells": "../../miniprogram_npm/weui-miniprogram/cells/cells",
    "mp-cell": "../../miniprogram_npm/weui-miniprogram/cell/cell",
    "mp-checkbox": "../../miniprogram_npm/weui-miniprogram/checkbox/checkbox",
    "mp-checkbox-group": "../../miniprogram_npm/weui-miniprogram/checkbox-group/checkbox-group",
    "mp-form": "../../miniprogram_npm/weui-miniprogram/form/form"
  }
}