mini add tips

Mini-add-tips

Used to prompt the user to click the menu in the upper right corner to perform the [Add to My Mini Program] operation when entering the mini program for the first time.

characteristic

The style is consistent with Alipay's original collection component (added to the homepage), and supports consistent effects in customized navigation bar scenarios.

Preview

screenshot

Sample

Preview in developer tools

Install and use

1. Get components

Download release (stable)

latest release

master(latest)

git clone https://github.com/MakerGYT/mini-add-tips.git

Copy the components/add-tips folder in the project to the component path

2. Introduce components

Add the following to the json file corresponding to the page using this component:

{
  "usingComponents" : {
    "add-tips" : " /components/add-tips/index " 
  }
}

3. Use components

 <!-- index.wxml -->
< add-tips name ="示例" />

To customize the navigation bar, please refer to /pages/index

Property list

property	type	default value	Required	illustrate
name	String	test	no	Mini program name
logo	String		no	Mini program logo
duration	Number	10	no	Continuous display time (s)
delay	Number	2	no	Enter page delay time (s) to start displaying
custom	Boolean	false	no	Whether the current page is {"navigationStyle": "custom"}

Development Notes

In view of the current design of WeChat basic library:

1. It is easy for users to confuse the collection operation and adding to my mini program, but the effect is the same, so there is no need to guide users in detail. Currently, it only monitors the behavior of users clicking the "Collection" button in the menu in the upper right corner. However, in fact , the collection behavior cannot be heard, and the collection content can only be defined.
2. There is no way to know whether it has been collected or added to my mini program, so the prompt may cause interference to users.
3. Currently, there is no API or button that can be used to add small programs. This may be due to the consideration of "reducing interference", but it forces manual setting of the guide, which will cause interference as mentioned in 2.
4. Even if {"navigationStyle": "custom"} has been set, the api call related to the navigation bar is still valid. Neither the component nor the page can know whether the navigation bar is custom or not, and it can only be passed in from the outside.

Todo

• Intelligently controls the display range and display timing based on the user's frequency of using the mini program, collection and other behaviors.

License

MIT © MakerGYT