小程序在输入npm命令_微信小程序引用npm包

一：首先在创建小程序项目自动生成的miniprogram中反键---->在终端中打开；

二：在打开的cmd窗口中输入命令 npm init一直回车就行，构建package.json文件；

三：构建完package.json文件后，就可以尝试初始化项目，输入命令 npm install --production

第一个问题解决方法是在刚刚初始化生成的package.json文件中增加一个属性，"private": true,

第二个和第三个问题是因为没有装工具包的文件，因此我们要在miniprogram的目录下面创建一个node_modules文件用来装工具包。

然后再次输入npm install --production

四：以引用微信原生组件weui为测试 依旧是在miniprogram目录输入命令npm i weui-miniprogram。

然后在工具一栏中菜单栏中找到工具---->反键点击构建npm。等构建完成后我们会发现在miniprogram目录和node_modules目录中多了一个miniprogram_npm文件夹，这个就是我们要用到的一些组件。

五：新建一个文件夹mydemo以用表单验证为测试。

在index.json中引入mp-form。

为了规范化，最好应该是在compoents中构建程序包...

这里可以看到我们已经引用进了mp-form ctrl+s没有报错，接下来试试验证功能。

在index.wxml插入以下代码用来验证用户姓名是否填写，如果没有填写，则给出提示。

确定

在index.js插入代码

Page({

data: {

formData:{

username :'',

},

rules: [{

name:'username',

rules: {

required:true,

message:'姓名必填'},

}]

},

onLoad:function() {

},

formInputChange(e) {debuggerconst {field}=e.currentTarget.datasetthis.setData({

[`formData.${field}`]: e.detail.value

})

},

submitForm() {this.selectComponent('#form').validate((valid, errors) =>{

console.log('valid', valid, errors)if (!valid) {

const firstError=Object.keys(errors)if(firstError.length) {this.setData({

error: errors[firstError[0]].message

})

}

}else{

wx.showToast({

title:'校验通过'})

}

})

}

})

验证失败的截图：

由此可见，weui组件已经通过npm方式给引用到项目里来了。