Abstract: This small program development skills.
- Author: White
- Original: Small single-page customization, global navigation bar
Fundebug authorized reprint, belongs to original author.
demand
Products that small program returns to the home is not easy, want to add the Home button, UI can not be said that the navigation bar set the background image, because that design really nice.
Needs analysis and to develop programs
This product demand and UI have mentioned, and we can not refute ha, so start research, feasibility analysis; 1, can be added to the suspension button. 2, custom navigation bar.
Add the suspension button is Kazakhstan appears to be relatively simple, but do not feel very elegant, would occupy the space of the page, the experience is not very good. So think of under the second scenario, the custom navigation bar can achieve both products also meet the needs of UI design aesthetic, combined with the Home button at the top of the space, so the back button and also symmetrical (as shown in the final , the top navigation bar is a background image, two points combined).
Implementation
First, the realization of the premise
1, first check the documentation to see documentation on how to customize the navigation bar is provided, which limit; there is a small program custom navigation bar and global configuration single-page version micro-channel configuration and debug libraries minimum supported version.
2, an increase in app.json window navigationStyle: custom, top navigation bar will disappear, leaving only the upper right corner of the capsule-shaped buttons, how to change the color of the capsule of it; the capsule body currently supports only black and white colors in app.josn window plus "navigationBarTextStyle": "white / black"
3, consider adding back button and Home button, different models of adaptation
Under the first two configuration methods:
① global configuration navigationStyle:
- Debug Infrastructure Library> = 1.9.0
- WeChat client> = 6.6.0
app.json
{
"usingComponents": {
"navigationBar": "/components/navigationBar/navigationBar"
},
"window": {
"navigationStyle": "custom"
}
}② single page layout navigationStyle
- Debug Infrastructure Library> = 2.4.3
- WeChat client version> = 7.0.0
Self-defined page .json
{
"window": {
"navigationStyle": "default"
}
}
{
"navigationStyle": "custom",
"usingComponents": {
"navigationBar": "/components/navigationBar/navigationBar"
}
}The difference is that in app.json global configuration file, single-page layout on a custom page configuration file.
Second, the steps to achieve
They say at a few key points:
1, custom navigation bar text, whether to return, whether to return home, the height of the navigation bar
2, statusBarHeight, the height of the phone used to obtain the status bar, the need onLaunch in the global app.js Invoke wx.getSystemInfo acquisition, navigationBarHeight + default height, the height of the entire set is the navigation bar,
3, as well as attention, px recommendations are used when writing style the distance and size of the capsule due to the right of the applet is used px, not rpx.
4, because the custom navigation bar each page must write, so the navigation bar encapsulates common components, so that only the introduction to each page.
The following is a navigation bar package components:
wxml
<view class="navbar" style="{{'height: ' + navigationBarHeight}}">
<view style="{{'height: ' + statusBarHeight}}"></view>
<view class='title-container'>
<view class='capsule' wx:if="{{ back || home }}">
<view bindtap='back' wx:if="{{back}}">
<image src='/images/back.png'></image>
</view>
<view bindtap='backHome' wx:if="{{home}}">
<image src='/images/home.png'></image>
</view>
</view>
<view class='title'>{{text}}</view>
</view>
</view>
<view style="{{'height: ' + navigationBarHeight}};background: white;"></view>There is a problem to note is that in general there will be a custom navigation bar, scroll down, along with the navigation bar will drop down, because this problem is shifted navigationBarHeight overall after setting fixed page elements, so this component in setting a blank piece of highly navigationBarHeight view elements occupy the top
wxss
.navbar {
width: 100%;
background-color: #1797eb;
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
.title-container {
height: 40px;
display: flex;
align-items: center;
position: relative;
}
.capsule {
margin-left: 10px;
height: 30px;
background: rgba(255, 255, 255, 0.6);
border: 1px solid #fff;
border-radius: 16px;
display: flex;
align-items: center;
}
.capsule > view {
width: 45px;
height: 60%;
position: relative;
.capsule > view:nth-child(2) {
border-left: 1px solid #fff;
}
.capsule image {
width: 50%;
height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.title {
color: white;
position: absolute;
top: 6px;
left: 104px;
right: 104px;
height: 30px;
line-height: 30px;
font-size: 14px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}js
const app = getApp()
Component({
properties: {
text: {
type: String,
value: 'Wechat'
},
back: {
type: Boolean,
value: false
},
home: {
type: Boolean,
value: false
}
},
data: {
statusBarHeight: app.globalData.statusBarHeight + 'px',
navigationBarHeight: (app.globalData.statusBarHeight + 44) + 'px'
},
methods: {
backHome: function () {
let pages = getCurrentPages()
wx.navigateBack({
delta: pages.length
})
},
back: function () {
wx.navigateBack({
delta: 1
})
}
}
})json
{
"component": true,
"usingComponents": {}
}The final version also need to consider compatibility issues, there is still some users, micro-channel version has not been updated to the latest version.
First, you can get in app.js inside the current micro-channel version of the user, do the next version comparison, if less than this version, set the global variable, you can also write in assembly methods, open display different top navigation bar on different pages, or you can control whether to display the navigation bar, not explained in detail here.
Personally tried, in less than 7.0 micro-channel version, if a single-page custom navigation bar, there will be two navigation bars, this time not to render navigation bar custom components by determining the version number of the page configuration file name written on the title, as well as the corresponding background color, which would display comes with a navigation bar.
to sum up
Some small developers are pit place that does not support custom navigation bar, to support global custom navigation bar, to the current configuration supports single page, it can be seen slowly improving. As well as the bottom of the tabbar, too little can choose their own configuration, although also supports custom, but found the custom components written in the bottom of the navigation experience is not good, each time you open the page will re-render button at the bottom, if all written in a the page where the tab to switch, although the button each time without reloading, but certainly not more than business, wrote a single page in too many things. I want to be able to add more micro-channel or release some functionality allows developers to better serve the product, giving users a better experience.
About Fundebug
Fundebug focus on JavaScript, applets micro-channel, micro-channel games, Alipay small program, React Native, Node.js and Java applications in real-time online monitoring BUG. Since 2016 double eleven formally launched, Fundebug handled a total of 1 billion + error event, paying customers have Sunshine Insurance, walnut programming, lychee FM, head of the 1-to-1, micro pulse, the Youth League and many other community brands. Welcome to Free Trial !