微信小程序開發(fā)|工具|npm 使用

用過 npm 的小伙伴肯定很熟悉 node_modules，但是「微信開發(fā)工具」是不認(rèn) node_modules 的 , 它認(rèn)的是 miniprogram_npm； 而 miniprogram_npm 是通過 node_modules 轉(zhuǎn)出來的， 它是通過「微信開發(fā)工具」的 “工具” -> “構(gòu)建 npm” 生成出來的。

具體步驟如下：

1、npm init
這里會(huì)產(chǎn)生 package.json 的配置文件

2、npm install ** --p --s
安裝需要的包，這里會(huì)產(chǎn)生 node_modules

3、「微信開發(fā)工具」走一遍 “工具” -> “構(gòu)建 npm”
這里會(huì)產(chǎn)生 miniprogram_npm

4、「微信開發(fā)工具」的本地配置中 “使用 npm 模塊” 勾上

5、使用包

引入的組件可以有第三方組件和 js 工具

• 第三方組件、以 weui-miniprogram 例子

1、 按照步驟安裝庫(kù)同時(shí)走一遍 “工具” -> “構(gòu)建 npm”，產(chǎn)生\miniprogram_npm\weui-miniprogra

npm install weui-miniprogram --p --s

2、 在 app.wxss 引入全局樣式

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

3、在需要使用的頁(yè)面中引入控件和使用，

譬如 pages/index/index.json，然后就可以在 index.wxml

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

• js 工具、以 js-base64 例子

1、 按照步驟安裝庫(kù)同時(shí)走一遍 “工具” -> “構(gòu)建 npm”，產(chǎn)生\miniprogram_npm\js-base64

npm install js-base64 --p --s

2、在 *.js 文件中用 require 或者 import 引入，然后使用

import { Base64 } from 'js-base64'
let { Base64: Base64_2 } = require('js-base64')
console.log(Base64);
console.log(Base64_2);

橋智科技：科技賦能夢(mèng)想！專注廣州、深圳和惠州小程序定制開發(fā)、APP 應(yīng)用定制開發(fā)、網(wǎng)站開發(fā)、區(qū)塊鏈錢包開發(fā)！