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”