微信小程序引用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插入以下代碼用來驗證用戶姓名是否填寫，如果沒有填寫，則給出提示。

<mp-toptips msg="{{error}}" type="error" show="{{error}}"></mp-toptips>
<view class="page__bd">
  <mp-form id="form" rules="{{rules}}" models="{{formData}}">
    <mp-cells title="用戶基本信息">
      <mp-cell show-error prop="username" title="姓名" ext-class="">
        <input bindinput="formInputChange" data-field="username" class="weui-input" value="{{formData.username}}"></input>
      </mp-cell>
    </mp-cells>
  </mp-form>

  <view class="weui-btn-area">
    <button class="weui-btn" type="primary" bindtap="submitForm">確定</button>
  </view>
</view>

 

在index.js插入代碼

Page({
  data: {
    formData:{
      username : '',
    },
    rules: [{
      name: 'username',
      rules: {
        required: true,
        message: '姓名必填'
      },
    }]
  },

  onLoad: function () {

  },

  formInputChange(e) {
    debugger
    const {field} = e.currentTarget.dataset
    this.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方式給引用到項目里來了。