小程序与WeUI

编程有点甜

已于 2022-07-23 10:53:10 修改

阅读量407

点赞数

文章标签：小程序 vue.js npm

于 2022-07-23 10:23:21 首次发布

本文链接：https://blog.csdn.net/qq_55096795/article/details/125943430

版权

本文结合了别人的文章，是在自己实操完成后整理的，因为过程挺长的还有一些无需注意的地方，所以这里有的没贴图，文章简短不详细只是为了使用，看的过眼的可以使用，若有侵权，请联系删除

安装Node.js

下载地址：链接: http://www.nodejs.cn/

在这里插入图片描述

安装到D盘，安装时选择ADD PATH。我的路径：D:\nodejs

管理员打开DOS命令框，查看版本，显示出来就行了

node -v
npm -v

在根目录下管理员权限创建文件夹node_global和node_cache

/*继续DOS命令框执行*/
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
/*查看配置，显示成不成功都进行下一步*/
npm list -global
/*配置镜像站*/
npm config set registry=http://registry.npm.taobao.org
/*检查一下镜像站行不行命令，显示成不成功都进行下一步*/
npm config get registry
/*看看能否获得vue的信息，没啥用*/
npm info vue
/*安装更新命令*/
npm install npm -g

配置环境变量

在这里插入图片描述

重新管理员身份打开DOS命令框，重点重新打开

/*让上面的环境变量生效,测试NPM安装vue.js*/
npm install vue -g

在这里插入图片描述

/*测试NPM安装vue-router*/
npm install vue-router -g

在这里插入图片描述

安装脚手架

/*安装vue脚手架*/
npm install vue-cli -g
/*这里报错，需要配置环境变量*/
vue

配置环境变量path:D:\nodejs\node_global

在这里插入图片描述

/*查看vue脚手架版本*/
vue -V
/*切换到D盘根目录*/
vue init webpack vue01

在这里插入图片描述

进入vue01目录，管理员身份打开DOS命令框进入到根目录

/*初始化安装*/
npm install
/*安装依赖，会出现报错，继续下一步*/
npm install dev
/*运行了就行*/
npm i ajv
/*运行，有些慢，等着就行*/
npm run dev

出现这个界面就成功了

在这里插入图片描述

打开http://localhost:8080会出现下面的界面
在这里插入图片描述

在vue01目录下，管理员身份打开DOS命令框进入到根目录

/*生成静态文件*/
npm run build

引入WeUI组件库

在小程序的项目的根目录，管理员身份打开DOS命令框进入到根目录

/*管理员打开DOS命令框*/
npm init
/*安装插件*/
npm install weui-miniprogram -S

打开微信开发者工具，【工具】->【构建npm】，完成以后

app.wxss引入WeUI样式，路径到weui.wxss就行

在这里插入图片描述

使用插件

在需要引入weUI插件样式的页面的json文件中引入weUI组件样式前都加了前缀 mp-,根据需要可添加

{
  "usingComponents": {
    "mp-searchbar": "../../../components/searchbar/searchbar",
    "mp-checkbox-group": "../../../components/checkbox-group/checkbox-group",
    "mp-checkbox": "../../../components/checkbox/checkbox",
    "mp-cells": "../../../components/cells/cells",
    "mp-cell": "../components/cell/cell",
    "mp-badge": "../components/badge/badge",
    "mp-gallery": "../components/gallery/gallery",
    "mp-loading": "../components/loading/loading",
    "mp-toptips": "../components/toptips/toptips",,
    "mp-form": "../components/form/form",
    "mp-slideview": "../components/slideview/slideview",
    "mp-uploader": "../components/uploader/uploader",
    "mp-dialog": "../components/dialog/dialog",
    "mp-msg": "../components/msg/msg",
    "mp-toptips": "../../components/toptips/toptips",
    "mp-halfScreenDialog": "../../components/half-screen-dialog/half-screen-dialog",
    "mp-actionSheet": "../../components/actionsheet/actionsheet",
    "mp-navigation-bar": "../components/navigation-bar/navigation-bar"
  }
}

然后可以在对应页面的 wxml 中直接使用该组件

<mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '确认'}]}}">
    <view>test content</view>
</mp-dialog>