Update README

README.md

@@ -2,8 +2,9 @@
 
 ### 简介
 
-- 微信小程序的Picker组件只是**半成品**组件，在启用多级联动时需要监听`bindcolumnchange`事件，来手动更改`range`和`value`的值，从而完成Picker的联动变化，比较麻烦，不利于在不同的业务逻辑中的复用。
+- 微信小程序的Picker组件只是半成品组件，在启用多级联动时需要监听`bindcolumnchange`事件，来手动更改`range`和`value`的值，从而完成Picker的联动变化，比较麻烦，不利于在不同的业务逻辑中的复用。
 - 本组件为了解决以上痛点，对微信小程序原生Picker组件进行了二次封装。开发者只需要提供固定数据结构的`sourceData`，再进行一些必要配置，本组件就可以自动帮助开发者处理联动逻辑。
+- 本组件支持npm构建，从小程序基础库版本`2.2.1`或以上、及`开发者工具1.02.1808300`或以上开始，小程序支持使用 npm 安装第三方包。
 
 ## API
 
@@ -41,20 +42,34 @@
   - `bindchange`触发的事件对象：
     - `selectedIndex`：Picker选择项的索引数组；
     - `selectedArray`：Picker选择项的值数组；
-- 本组件的有些方法和属性与微信原生API的行为完全一致，比如：`bindchange`，`bindcancel`，`bindcolumnchange`，`disabled`。
+  - 本组件的有些方法和属性与微信原生API的行为一致，比如：`bindchange`，`bindcancel`，`bindcolumnchange`，`disabled`。具体可以查看源码。
 
-## 示例
+## 使用方法
+
+1. 安装`miniprogram-picker`包。
+
+   > ```bash
+   > npm install miniprogram-picker --production
+   > ```
+
+2. 点击微信开发者工具中的菜单栏：工具 --> 构建 npm。此时你会发现项目中多出一个`miniprogram_npm`目录，里面有编译过的`miniprogram-picker`。
+
+3. `.json`中引入`miniprogram-picker`第三方组件。使用方法与使用自己封装的组件相同，只不过不需要写具体路径了，很方便。
 
    ```json
    {
        "usingComponents": {
-    "comp": "../../components/index"
+       	"miniprogram-picker": "miniprogram-picker"
        }
    }
    ```
 
+4. `.wxml`中使用`miniprogram-picker`。我这里给出了两个小例子，第一个是三级联动，第二个是两级联动。具体属性和事件方法可以参考API。
+
+   > `miniprogram-picker`是没有任何样式的，具体样式开发者可以自定义，如果你熟悉`slot`的用法那就更好了，具体参考[小程序组件wxml的slot](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html)。
+
    ```xml
-<comp
+     <miniprogram-picker
        sourceData="{{sourceData_1}}"
        steps="{{3}}"
        shownFieldName="{{'name'}}"
@@ -72,9 +87,9 @@
          <view class="picker">
            当前选择：<view wx:for="{{result_1}}" wx:key="index">{{item['name']}}</view>
          </view>
-</comp>
+     </miniprogram-picker>
    
-<comp
+     <miniprogram-picker
        sourceData="{{sourceData_2}}"
        steps="{{2}}"
        shownFieldName="{{'name'}}"
@@ -92,9 +107,11 @@
          <view class="picker">
            当前选择：<view wx:for="{{result_2}}" wx:key="index">{{item['name']}}</view>
          </view>
-</comp>
+     </miniprogram-picker>
    ```
 
+5. `.js`中设置`sourceData`和监听`pickerChange`事件等。
+
    ```js
      Page({
        /**
@@ -194,8 +211,28 @@ Page({
      })
    ```
 
+6. `.wxss`中简单设置样式。
+
+   ```css
+   .picker {
+     display: flex;
+     flex-direction: row;
+     align-items: center;
+     margin: 10rpx 0;
+     padding: 10rpx 0;
+     background-color: #DEECE2;
+     font-size: 28rpx;
+   }
+   .picker view {
+     padding: 2rpx 10rpx;
+     margin-left: 10rpx;
+     margin-right: 10rpx;
+     border-bottom: 2rpx solid aqua;
+   }
+   ```
+
+
 ## 帮助
 
-- 欢迎提Issue，若是代码有bug或者你不明白的地方，我会尽快解决。
-- 若有feature需要实现，可以Issue留言。
-- 若是觉得喜欢，欢迎star。
+- 欢迎提Issue，若是代码有bug或者你不明白的地方，我会尽快解决的。
+- 若有feature需要实现，可以Issue留言，若是喜欢，欢迎star。感谢你的支持。