React-wx-menu NPM

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:{},
           }
       ]
   }
}