GitHub Demo 地址: jh-weapp-demo 实现一些常用效果、封装通用组件和工具类

小程序码

一、cmd 打开终端， cd到项目路径下，执行下面几步

云开发 直接点 miniprogram 文件名右键终端打开

       1、（初始化npm项目，一直回车）：npm init

       2、（生成package-lock.json，记录使用的第三方插件）：npm install --production

       3、（引入第三方组件 有赞新的）：   npm i @vant/weapp -S --production
		#              npm i vant-weapp -S --production
        # wxui     npm install --production weui-miniprogram
		npm i wux-weapp -S --production
		npm i @miniprogram-component-plus/tabs --save

第1步操作后一直按回车，直到出现 is this ok?(yes)，然后再按回车 进行第2步

二、在微信开发工具执行npm 构建

要先勾选使用npm

构建完会生成一个miniprogram_npm文件夹

（构建完如果编译报错，再构建一次就好了）

三、应用vant-weapp

1、需要在想相对应的.json文件里添加配置：

{
  "usingComponents": {
    "van-button": "/miniprogram_npm/vant-weapp/button/index",
    "van-cell": "/miniprogram_npm/vant-weapp/cell/index",
	//下面是新的	
     "van-button": "@vant/weapp/button/index",
      "van-cell": "@vant/weapp/cell/index",
      "van-cell-group": "@vant/weapp/cell-group/index"
  }
}

2、然后就可以在WXML文件里直接使用

<van-cell title="单元格" is-link />
<view class="container">
  <van-button type="primary">按钮</van-button>
</view>

3、wxui 的引用

#1   app.wxss 引入
@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';

#2   在页面中引入 组件
首先在页面的 json 文件加入 usingComponents 配置字段
{
  "usingComponents": {
      "mp-dialog": "/miniprogram_npm/weui-miniprogram/dialog/dialog"
  }
}
#3  在对应页面的 wxml 中直接使用该组件
<mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '确认'}]}}">
    <view>test content</view>
</mp-dialog>

更新：

npm list //命令查询现在系统安装的版本

npm view @vant/weapp versions  //命令查询服务器现在有的vant的版本

npm uninstall @vant/weapp  //移除现在系统安装的vant-weapp的版本

再次运行安装命令安装之后， 选择“工具”——>“构建npm”