1.小程序的初始目錄

圖1

2.使用npm 包

npm支持微信官網(wǎng)地址

2.1官網(wǎng)補(bǔ)充

首先要npm init創(chuàng)建package.json文件，然后按照官網(wǎng)步驟操作就可以了。

圖2.1

2.2創(chuàng)建package.json文件介紹

命令行里會以交互的形式讓你填一些項(xiàng)目的介紹信息，依次介紹如下：（不知道怎么填的直接回車、回車...）

name 項(xiàng)目名稱

version 項(xiàng)目的版本號

description 項(xiàng)目的描述信息

entry point 項(xiàng)目的入口文件

test command 項(xiàng)目啟動時腳本命令

git repository 如果你有 Git 地址，可以將這個項(xiàng)目放到你的 Git 倉庫里

keywords 關(guān)鍵詞

author 作者叫啥

license 項(xiàng)目要發(fā)行的時候需要的證書，平時玩玩忽略它

圖2.2

3.npm安裝WeUI WXSS包步驟

3.1安裝依賴包

GitHub地址：https://github.com/Tencent/weui-wxss

npm下載：npm i weui-wxss

npm i weui-wxss安裝依賴包后會生成node_modules文件

圖3.1

3.2以下就是按照微信官網(wǎng)的操作步驟

圖3.2

1.操作上面這一步的時候，我這邊提示未找到app.wxss.js（如下圖3.3）

2.去對應(yīng)的路徑下創(chuàng)建對應(yīng)的文件后，再次操作上面這一步就會出現(xiàn)如圖3.4

3.構(gòu)建完成目錄下面會生成一個miniprogram_npm文件（如圖3.5）

4.然后完成圖3.6操作（在詳情里）

圖3.3

圖3.4

圖3.5

圖3.6

4使用WeUI WXSS

1.依賴包下的目錄如圖4.1，小程序只會用到dist文件

2.按照如圖4.2引入樣式文件，我用了scss編輯器

3.最終效果如圖4.3，dist下面的example文件里都是例子可以參考！

圖4.1

圖4.2

圖4.3

以上是本人操作流程，希望可以幫助到大家，如有問題請指出，會虛心接受！