微信小程序初学记录---npm安装weui组件

一、安装微信开发工具

二、新建项目

1、菜单》项目》新建项目

微信小程序初学记录---npm安装weui组件_第1张图片

二、引入weui组件

1、我用的是npm安装

2、在项目根目录执行命令npm init,安装npm包,然后一直确定

3、然后再执行命令 npm install --production

4、微信开发工具》工具》构建npm,若有提示 “没有找到可以构建的NPM包”,检查下npm 模块有没有打钩上

 

微信小程序初学记录---npm安装weui组件_第2张图片

如果有打钩,还出现 那就尝试跑下如下命令 :
npm install miniprogram-sm-crypto --production

6、跑完npm install miniprogram-sm-crypto --production这个命令,目录结构是这样子的,

微信小程序初学记录---npm安装weui组件_第3张图片

三、安装组件(我这里是安装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"
  }
}

 

你可能感兴趣的:(微信小程序初学记录---npm安装weui组件)