[Applet] Use uni-app to build a framework for applet environment

The development directory is:

    
┌─pages               
│  ├─index
│  │  └─index.vue    
│  └─login
│     └─login.vue    
├─static             
├─main.js       
├─App.vue          
├─manifest.json  //文件是应用的配置文件，用于指定应用的名称、图标、权限等
└─pages.json    //文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等

Attributes	Types of	Required	description	Platform compatible
globalStyle	Object	no	Set the window performance of the default page
pages	Object Array	Yes	Set page path and window performance
tabs	Object	no	Set the performance of the bottom tab
condition	Object	no	Boot mode configuration
subPackages	Object Array	no	Subcontract loading configuration
preloadRule	Object	no	Subcontract pre-download rules	WeChat Mini Program
workers	String	no	`Worker` Code placed directory	WeChat Mini Program

globalStyle

　　Used to set the application's status bar, navigation bar, title, window background color, etc.

　　note

- The link to the picture titleImagemust be used when Alipay applet is used https. It needs to be debugged by the real machine to see the effect.
- globalStyleThe settings in the settings titleImagewill also be overwritten- pages> stylethe text title in the settings
- navigationBarTextStyle may be messy on iOS13, this issue will be fixed in a future version

pages

uni-app The pages node configures which pages the application consists of. The pages node receives an array. Each item in the array is an object, and its property values are as follows:

Attributes	Types of	Defaults	description
path	String		Configuration page path
style	Object		Configure page window performance. For configuration items, please refer to pageStyle below

Tips：

The first item of the pages node is the application entry page (ie home page)
New / reduced pages in the application all need to modify the pages array
The file name does not need to be suffixed, the framework will automatically find the page resource under the path

tabs

If the application is a multi-tab application, you can use the tabBar configuration item to specify the performance of the tab bar and the corresponding page displayed when the tab is switched.

Tips

When setting position to top, icon will not be displayed
The list in tabBar is an array, and only a minimum of 2 and a maximum of 5 tabs can be configured. Tabs are sorted in the order of the array.
The tabbar switch may not render in time when it is loaded for the first time. You can pop up a waiting snowflake in the onLoad life cycle of each tabbar page (hello uni-app uses this method)
The tabbar page will remain in memory after being displayed once. Switching the tabbar page again will only trigger the onShow of each page, and will not trigger the onLoad.
The tabbar at the top is currently only supported on the WeChat applet. If you need to use the top tab, it is recommended not to use the top setting of the tabbar, but to make the top tab yourself. You can refer to hello uni-app-> template-> top tab.

FAQ for tabbar

Tabbar's js api see interface-interface-tabbar , which can realize dynamic display and hiding (such as the pop-up layer can not cover the tabbar), content modification (such as internationalization), item plus angle and other functions. There are also examples in hello uni-app.
For tabbar item click events, see onTabItemTap in the page life cycle .
The code jumps to the tabbar page, the api can only use uni.switchTab , not uni.navigateTo, uni.redirectTo; when using the navigator component to jump, you must set open-type = "switchTab"
The tabbar is simulated by a div on the H5 end, and is part of the front-end screen window. If you want to use the bottom positioning method, you should use css variables --window-bottom, such as a button suspended 10px above the tabbar, the style is as followsbottom: calc(var(--window-bottom) + 10px)
The default height of the tabbar is different on different platforms. See more
Tabbar template example with + sign in the middle, for reference . Can cross the end, but the + sign is not raised.
If you need a tabbar in the middle, you can customize the tabbar. There are examples in the plugin market, such as colorUI. However, note that the performance of the front-end tabbar is not as good as the native tabbar. If it is a multi-page method, the bottom tabbar will flash the transition animation when switching. If it is a single-page method, there will be performance problems with complex page content. There are many similar examples of the plugin market search tabbar.
If you use nvue on the App side and customize the tabbar, there is no performance experience problem.
The pure nvue project (the renderer in the manifest is native), currently using the tabbar in pages.json affects performance, it is recommended to use the front-end to implement a single-page tabbar. This bug will be resolved later.
The problem of the tabbar popping up on the Android App pop-up keyboard. After upgrading to HBuilderX 2.2 no longer exists.
There is only one native tabbar on the homepage. For the tabs on the secondary page, the front end will implement it by itself.
If you need to log in first, and then enter the tab page, you do not need to set the landing page as the home page, the home page is still the tabbar page, you can refer to the HBuilderX login template when creating a new uni-app project
The front-end pop-up mask layer cannot block the problem of the tabbar, and the tabbar is dynamically hidden during the cross-end processing method. App side can use plus.nativeObj.view or subNVue for pop-up and mask, please refer to the bottom of the native icon sharing menu example
The WeChat Mini Program Simulator version 1.02.1904090 has a bug. After zooming the percentage of the simulator page, the tabbar will freeze after clicking multiple times. The real machine is not harmful, please pay attention when using it. See more

manifest.json The file is the configuration file of the application, which is used to specify the name, icon, and permissions of the application.

package.json

　　By package.jsonadding uni-appexpansion nodes to the file , you can implement custom conditional compilation platforms (such as Dingding applet, WeChat service number, etc.).

Package.json extended configuration usage (copy code to remember to remove comments!):

{
    /**
     package.json其它原有配置 
     */
    "uni-app": {// 扩展配置
        "scripts": {
            "custom-platform": { //自定义编译平台配置，可通过cli方式调用
                "title":"自定义扩展名称", // 在HBuilderX中会显示在 运行/发行 菜单中
                "BROWSER":"",  //运行到的目标浏览器，仅当UNI_PLATFORM为h5时有效
                "env": {//环境变量
                    "UNI_PLATFORM": ""  //基准平台 
                 },
                "define": { //自定义条件编译
                    "CUSTOM-CONST": true //自定义条件编译常量，建议为大写
                }
            }
        }    
    }

}

Tips：

UNI_PLATFORMFill only supports uni-appsupported by default reference platform, currently limited to the following enumeration app-plusvalues: h5, mp-weixin, mp-alipay, mp-baidu, mp-toutiao, ,mp-qq
BROWSER Only UNI_PLATFORMis h5valid, currently limited to the following enumeration Chromevalues: Firefox, IE, Edge, Safari, ,HBuilderX
package.jsonNo comments are allowed in the file, otherwise the extended configuration is invalid
vue-cliNeed to update to the latest version, HBuilderX needs to be upgraded to Alpha 2.1.6+ version

[Applet] Use uni-app to build a framework for applet environment

FAQ for tabbar

Guess you like