钉钉小程序自定义组件开发

以下是我自己开发钉钉小程序组件的经验

新建组件页面
你的组件想放在哪个目录就在那个目录上鼠标右击，选择新建小程序组件
然后打开你刚建的小程序组建的js文件就会发先里面有一套代码，类似这样的

Component({
  mixins: [],
  data: {},
  props: {}, //接收从外边传进来的数据，
  didMount() {},   //这三个函数官方文档有解释，文章最后我会解释didUpdate，更新数据用
  didUpdate() {},
  didUnmount() {},
  methods: {},    //你之前页面写的方法都要放在这里面
});

接下来我将创建两个页面try是小程序页面，aaaaaa是小程序组件

aaaaaa.json

{
  "component": true
}

aaaaaa.js

Component({
  mixins: [],
  data: {        //注意我在data里加了两个属性
    Titles: '',          
    InputList: []
  },
  props: {          //注意我在props里加了两个接收外部数据属性
    title: '',
    InputArrayList: [],
      onMultiChoiseReasult: (data) => { } //把处理的值传回父页面，可以在其他方法中这样赋值  xxx(){this.props.onMultiChoiseReasult('111')}
  },
  didMount() {
  },
  didUpdate() { },
  didUnmount() { },
  methods: {
    onClick() {         
      this.setData({                       //把props里的属性传到data里，再在axml页面里渲染出来
        InputList: this.props.InputArrayList,
        title: this.props.title,
      });
   dd.alert({
      title: '用户点击了「我知道了」',
    });   }
  },
});

aaaaaa.axml

<view>
  <view catchTap="onClick">
    New Component
  </view>
  <view a:for="{{InputList}}" catchTap="onClick">   //渲染出从外部传到props再传到data的数据
    {{item}}
  </view>
</view>

try.axml

<view>
<view>
  这是一个测试页面
</view>
<aaaaaa  InputArrayList="{{CounterPlusOne}}" title="人员选择" onMultiChoiseReasult="onMultiChoiseReasult"></aaaaaa> 

//onMultiChoiseReasult获取子页面传来的值
//这里我是用了刚才的组件
</view>

try.js

Page({
  data: {
    CounterPlusOne:['1111','22','44','333'],
  },
  onLoad() {
  }，
    onMultiChoiseReasult(data) {
    console.log("传值成功")
    console.log(data)
  },
});

try.json
//标签可以随便定义，但路径一定要对，我是把组件放在conponents里的。

{
    "usingComponents": {
        "aaaaaa": "../components/aaaaaa/aaaaaa"

    }
}

到这里就结束了。看效果图
try页面

try点击new component后的

这里解释下如果父页面的数据有变动，小组件应该怎么同时更新数据

假设你要修改组件的title属性，前面aaaaa.js的代码里有个属性title
这个时候你修改完之后发现标题还是上一次的标题。无论怎么改，标题就是会显示上一次的。那就是数据没有及时更新的缘故。
你可以这么做，只看didupdate里的代码就好，其他的都没变，为了看起来简洁，我把一些地方的代码删掉了，只看didupdate就好

**aaaaaa.js**

Component({
  mixins: [],
  data: {        //注意我在data里加了两个属性
    Titles: '',          
    InputList: []
  },
  props: {          //注意我在props里加了两个接收外部数据属性
    title: '',
    InputArrayList: [],
      onMultiChoiseReasult: (data) => { } //把处理的值传回父页面，可以在其他方法中这样赋值  xxx(){this.props.onMultiChoiseReasult('111')}
  },
  didMount() {
  },
  didUpdate() { //这是更新数据的部分，你更新的数据可以在这里处理
     let part = this.props.title;
           this.setData({                  
        Titles: this.props.part ,
      });
 },
  didUnmount() { },
  methods: {
  },
});

解释下原因，因为props是接收外面传来的值，当父组件的值更新后，props也会接收到更新的值，但是它只是接收到了，由于小组件只有打开的时候初始化一次，这个时候所有的函数都执行一遍之后就再不执行了，所以在你不关闭小组件之前，小组件里的值都只会显示初始化的时候接收到的值。
举个例子你的组件是做多选的，你选了10人之后觉得太多了，又去掉了5个人。按理说现在应该只有5个人。但实际上这个时候组件里的值没有更新，打印出来后依旧是10个人

如果出这种错，那就是路径的问题