一屋休、日期選擇器入門小程序 npm
實(shí)現(xiàn)一個日歷選擇器為例：
- app.js 同級目錄下，創(chuàng)建依賴文件 package.json 文件：
npm init -y
安裝 datepicker
npm install --save miniprogram-datepicker
構(gòu)建 npm并鸵，只有構(gòu)建小程序才能使用：
構(gòu)建之后必須杨伙，使用 npm ：
- 在需要使用 datepicker 的頁面 page.json 中添加 datepicker 自定義組件配置
{
"usingComponents": {
"datepicker": "miniprogram-datepicker"
}
}
- WXML 文件中引用 datepicker
<view>你選擇的公歷為：{{solar}}</view>
<datepicker value="{{solar}}" bindchange="bindSolarChange">
<button type="default">公歷</button>
</datepicker>
<view>你選擇的農(nóng)歷為：{{lunar}}</view>
<datepicker value="{{lunar}}" chinese="{{true}}" bindchange="bindLunarChange">
<button type="default" class="weui-btn">農(nóng)歷</button>
</datepicker>
- 頁面 js 文件書寫處理函數(shù)
Page({
bindLunarChange(e){
this.setData({
lunar: e.detail.value
});
},
bindSolarChange(e){
this.setData({
solar: e.detail.value
});
},
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
solar:'',
lunar:''
}
});
演示效果
二辕万、演示 js-base64
js-base64
安裝;
npm install --save js-base64
注意：每次安裝新的 npm 都必須構(gòu)建 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);
打印結(jié)果：
小程序不僅支持 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 的小程序版本诽凌，兩者基于相同的視覺規(guī)范，提供一致的 API 接口坦敌，助力開發(fā)者快速搭建小程序應(yīng)用侣诵。
安裝依賴：
npm i @vant/weapp -S --production
--production 可減少安裝不必要的依賴，也九十只安裝 dependencies的依賴不安裝 devDependencies 里面的依賴狱窘。
構(gòu)建 npm 杜顺。
使用 button 按鈕，在 page.json 文件里面引入組件：
"usingComponents": {
"van-button": "@vant/weapp/button"
}
引入組件后训柴，可以在 wxml 中直接使用組件
<van-button type="primary">按鈕</van-button>
演示效果
四哑舒、日期處理 moment
- 安裝依賴：
npm install moment -S
- 構(gòu)建 npm
- 頁面的 page.js 使用：
import moment from 'moment';
console.log(moment().format('YYYY年MM月DD日'));
console.log(moment('2000-10-01').format('YYYY年MM月DD日'));
演示結(jié)果：
