miniprogram-framework
Miniprogram-framework is a personal framework dedicated to a concise and highly available development experience.
instructions
Read the documentation and sample project carefully before using
These applets are all written based on Vant/ EAPPp and are designed to provide an overview of UI reuse.
Component list
- City – picker component
- City – the selector component
- Layout components
- The Pagination component is referenced in WXP-UI
How to use
This small program has been small program HTTP,log,toast,storage encapsulation, specific can see utils/* directory source, has been mounted to the global WX directly call
// Check update checkUpdateVersion() // Set request address setRequestUrl(this) // Encapsulate toast wx.toast = toast // Encapsulate Storge wx.storge = storge // Wx. log = new log (this)Copy the code
checkUpdateVersion setRequestUrl
Utils /system.jsCopy the code
wx.toast
wx.toast
wx.toast.loading
wx.toast.success
wx.toast.error
Copy the code
Parameters: the options (Number | String) | | Object parameters for the Object reference WeChat applet toast, please
wx.storge
wx.storge.set
wx.storge.get
wx.storge.remove
wx.storge.clear
Copy the code
wx.http
wx.http.request.get wx.http.request.post wx.http.request.put wx.http.request.delete ... Wx.http. request({URL: '/ API /xx', data:{},}) /** * @URL Request address Mandatory * @method Request mode Default POST * @header Request header Optional * @data Request parameters */Copy the code
Component configuration
City – picker component
city-picker Attributes
parameter | instructions | type | An optional value | The default value |
---|---|---|---|---|
cityPickerColumnsNum | List the number of columns | Number | 1, 2, 3 | 3 |
` ` ` | ||||
/ / call | ||||
this.selectComponent(‘#city-picker’).showCityPicker() | ||||
this.selectComponent(‘#city-picker’).data.values | ||||
Or page bound event methods | ||||
` ` ` |
city-selector
city-selector Attributes
parameter | instructions | type | An optional value | The default value |
---|---|---|---|---|
cityList | The data source | Array | — | [] |
hotCityList | Hot urban data source | Array | — | [] |
showSearch | Show the search | Boolean | — | false |
showLocation | Display orientation | Boolean | — | false |
mapKey | Map location key | string | — |
city-selector Events
The name of the event | instructions | The callback parameter |
---|---|---|
getCity | Get City Events | The name of the currently selected city |
Layout components
The UI layout
parameter | instructions | type | An optional value | The default value |
---|---|---|---|---|
padding-top | Boolean | true/false | false | — |
use-footer-slot | Bottom button area | slot | . | . |
layout Slots
name | instructions |
---|---|
— | Page body |
footer | Bottom of the page 44px |
Pagination components
pagination Attributes
parameter | instructions | type | An optional value | The default value |
---|---|---|---|---|
requesting | Whether the list data is being loaded | Boolean | — | false |
end | The list data is loaded successfully | Boolean | — | false |
emptyShow | Control the empty state display | Boolean | — | false |
use-empty-slot | Slots for empty lists | Boolean | — | false |
listCount | Current list length | Number | — | 0 |
emptyUrl | Display image of empty list | String | * | /assets/image/empty/empty.png |
emptyText | Text prompt for an empty list | String | * | No data found |
refreshSize | Drop down the height of the refresh | Number | — | 90 |
topSize | At the top of the height | Number | — | 0 |
bottomSize | At the bottom of the highly | Number | — | 0 |
color | color | String | — | “” |
enableBackToTop | Double click on the top status bar to return to the top | Boolean | — | false |
pagination Events
The name of the event | instructions | The callback parameter |
---|---|---|
refresh | The drop-down refresh | — |
more | Pull on loading | — |
pagination Slots
name | instructions |
---|---|
— | List component body |
empty | An empty list |
contribution
If you have any good suggestions, please mention issues
License
MIT