小程序如何使用 npm 工具

一、日期选择器入门小程序 npm

实现一个日历选择器为例：

1. app.js 同级目录下，创建依赖文件 package.json 文件：

npm init -y

安装 datepicker

npm install --save miniprogram-datepicker

构建 npm，只有构建小程序才能使用：

构建之后必须，使用 npm ：

2. 在需要使用 datepicker 的页面 page.json 中添加 datepicker 自定义组件配置

{
  "usingComponents": {
    "datepicker": "miniprogram-datepicker"
  }
}

3. WXML 文件中引用 datepicker

<view>你选择的公历为：{{solar}}</view>
<datepicker value="{{solar}}" bindchange="bindSolarChange">
    <button type="default">公历</button>
</datepicker>
<view>你选择的农历为：{{lunar}}</view>
<datepicker value="{{lunar}}" chinese="{{true}}" bindchange="bindLunarChange">
    <button type="default" class="weui-btn">农历</button>
</datepicker>

4. 页面 js 文件书写处理函数

Page({
  bindLunarChange(e){
    this.setData({
      lunar: e.detail.value
    });
  },
  bindSolarChange(e){
    this.setData({
      solar: e.detail.value
    });
  },
  /**
   * 页面的初始数据
   */
  data: {
    solar:'',
    lunar:''
  }
});

演示效果

二、演示 js-base64

js-base64
安装;

npm install --save js-base64

注意：每次安装新的 npm 都必须构建 npm。

page.js 里面使用：

import { Base64 } from 'js-base64';
let atob = Base64.encode('My name is Condor Hero');
let btoa = Base64.decode(atob);
console.log(atob);
console.log(btoa);

打印结果：

小程序不仅支持 ES6 还支持NodeJs的文件引入方式，下面的也是可行的：

const {Base64} = require('js-base64');
let atob = Base64.encode('My name is Condor Hero');
let btoa = Base64.decode(atob);
console.log(atob);
console.log(btoa);

三、vant weapp 框架起步

Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。

安装依赖：

npm i @vant/weapp -S --production

--production 可减少安装不必要的依赖，也九十只安装 dependencies的依赖不安装 devDependencies 里面的依赖。

构建 npm 。

使用 button 按钮，在 page.json 文件里面引入组件：

"usingComponents": {
  "van-button": "@vant/weapp/button"
}

引入组件后，可以在 wxml 中直接使用组件

<van-button type="primary">按钮</van-button>

演示效果

四、日期处理 moment

• 安装依赖：

npm install moment -S

• 构建 npm
• 页面的 page.js 使用：

import moment from 'moment';
console.log(moment().format('YYYY年MM月DD日'));
console.log(moment('2000-10-01').format('YYYY年MM月DD日'));

演示结果：