This project was based with WeiXin Custom Menu.

If you want to view the documentation of the 0.xx version, please go to this page

Like this:

Props:

• title
• value
• baseViewUrl:string
• baseViewUrlTitle:string
• onAddMainMenu:()=>void
• onAddSubMenu:(mainMenuIndex)=>bool
• onDelteMenu:(deleteMenuItem)=>bool
• setMediaPickerHeader:(type)=>React.node || string note
• setMediaPickerDataSource:(type)=>[]
• setMediaPickerColumns:(type)=>Columns(Antd-Column)
• setMediaPickerPagination:(type)=>Pagination(Antd-Pagination)
• setMediaPickerDefaultDisplay:(type,materialInfo<Object || String>)=>React.node || string note
• onMediaPickerChoose:(type)=>void
• handelMediaPickerClick:(type)=>{display,value}
• viewUrlMode:'picker' || 'input'
• miniprogramUrlMode:'picker' || 'input'
• miniprogramDefault:[]
• canChooseClick:(type,item)=>bool
• canSelectView：bool
• canSelectMiniprogram:bool
• readOnly:bool

Detail:

• baseViewUrl & baseViewUrlTitle

  If you set the baseViewUrl and baseViewUrlTitle properties at the same time, the jump page default is supported.

• setMediaPickerHeader

  If you set this property, the returned will be displayed in the head of the MediaPicker.You can customize according to type.

• setMediaPickerDataSource & setMediaPickerColumns & setMediaPickerPagination

  MdeiaPicker uses the table component of antd to display data. For specific usage, please consult the document of antd.Antd-Table

• setMediaPickerDefaultDisplay

  This property is used to set the default display for each MediaPickers.

  • When the type is view, miniprogram, the input box is displayed by default, and its value is displayed according to the returned url.
  • When the type is news, the second parameter returns news_info.
  • When the type is img, video, voice, the second parameter returns material_info.
  • When news_info or material_info does not exist, the second parameter is value.

• onMediaPickerChoose

  This will trigger when you click '选择'

• handelMediaPickerClick

  Triggered when clicking on the action column selection on the list.You can return the element of the display and tell the selector what value to use to set the value

• viewUrlMode

  If you set the picker type, the address of the view type is only allowed to be selected, not input.Default input.

• miniprogramUrlMode

  If you set 'picker', you can only select but not enter. If you set 'input', then MediaPicker will not display it.Default input.

• miniprogramDefault

  This is an array, if you set it up, it will display the default miniprogram you set with a drop-down box.Object contains these properties like miniprogramName,appid,pagepath,url.

Use Antd Form

<Form onSubmit={this.handleSave}>
    <FormItem>
        {getFieldDecorator('data', { initialValue: data })(
        <WXMenu title={detail.principalName} baseViewUrl="http://google.com" baseViewUrlTitle="默认网站" />
        )}
    </FormItem>
    <div style={{ textAlign: 'center' }}>
        <Button type="primary" htmlType="submit">
        保存
        </Button>
    </div>
</Form>

Example Value:

{
  "selfmenu_info": {
       "button": [
           {
               "name": "button",
               "sub_button": {
                   "list": [
                       {
                           "type": "view",
                           "name": "view_url",
                           "url": "http://www.qq.com"
                       },
                       {
                           "type": "news",
                           "name": "news",
                           "value":"KQb_w_Tiz-nSdVLoTV35Psmty8hGBulGhEdbb9SKs-o",
                           "news_info":{}
                       },
                       {
                           "type": "video",
                           "name": "video",
                           "value": "http://61.182.130.30/vweixinp.tc.qq.com/1007_114bcede9a2244eeb5ab7f76d951df5f.f10.mp4?vkey=77A42D0C2015FBB0A3653D29C571B5F4BBF1D243FBEF17F09C24FF1F2F22E30881BD350E360BC53F&sha=0&save=1",
                           material_info:{},
                       },
                       {
                           "type": "voice",
                           "name": "voice",
                           "value": "nTXe3aghlQ4XYHa0AQPWiQQbFW9RVtaYTLPC1PCQx11qc9UB6CiUPFjdkeEtJicn",
                           material_info:{},
                       }
                   ]
               }
           },
            {
                "type":"miniprogram",
                "name":"wxa",
                "url":"http://mp.weixin.qq.com",
                "appid":"wx286b93c14bbf93aa",
                "pagepath":"pages/lunar/index"
            },
           {
               "type": "text",
               "name": "text",
               "value": "This is text!"
           },
           {
               "type": "img",
               "name": "photo",
               "value": "ax5Whs5dsoomJLEppAvftBUuH7CgXCZGFbFJifmbUjnQk_ierMHY99Y5d2Cv14RD",
               material_info:{},
           }
       ]
   }
}

Contact

Email:[email protected]