This article is about 1000 words, about 4 minutes

Last time write small program – from zero development simple micro channel small program only a single page, relatively simple and clear.

Sunday chat, joking today boring, the weather is too hot, have to find something to do, so remembered the small program.

Well ~ can take this small procedure as a product to develop slowly, good idea! .

Today will add the bottom TAB function switch in the small program, and add the function about me:

Guests can get a sneak peek of the show via the qr code below

1. The new tabs

In fact, there has been a configuration description of custom tabBar in the wechat development document. You can specify it directly in tabBar in app.json:

"list": [{"pagePath": "pages/index/index"."text": "Jingdong Goods"
  }, 
  {
    "pagePath": "pages/about/about"."text": "About me"}]Copy the code

The results, however, are far from satisfactory:

So, forget it, we don’t use the official Tabbar component, we use Vant to wrap a ~

<! --tabBar.wxml-->
<view class="tabBar">
  <van-tabbar 
    active="{{ active }}" 
    active-color="#EC644E"
    inactive-color="# 000">
    <van-tabbar-item 
      wx:for="{{tabs}}" 
      wx:key="index" 
      icon="{{item.icon}}"
      data-item="{{item}}"
      data-index="{{index}}"
      bindtap="changeTab">
      {{item.name}}
    </van-tabbar-item>
  </van-tabbar>
</view>
Copy the code
// tabBar.js
Component({
  data: {
    active: 0.tabs: [{
      icon: 'home-o'.name: Jingdong Mall.path: '/pages/index/index' 
    }, {
      icon: 'user-o'.name: 'About me'.path: '/pages/about/about'}},methods: {
    changeTab(e) {
      let dataset = e.currentTarget.dataset,
        activeTab = dataset.index,
        item = dataset.item; 
      this.setData({ 
        active: activeTab
      });
      wx.navigateTo({
        url: item.path }); }}})Copy the code

Of course, we also have to introduce vant components:

# tabBar.json
{
  "component": true."usingComponents": {
    "van-icon": "/miniprogram_npm/vant-weapp/icon/index"."van-tabbar": "/miniprogram_npm/vant-weapp/tabbar/index"."van-tabbar-item": "/miniprogram_npm/vant-weapp/tabbar-item/index"}}Copy the code

The Vant components used later are also introduced in this way, which will be ignored in later cases

The effect is as follows:

Well ~ not bad

2. About me

As for my module, there is no section content for this small program at present. Here I just add the display of basic user information and the explanation of this wechat small program.

2.1 Obtaining Basic User Information

The basic user information here includes the user’s profile picture, nickname, and location.

In the case of not logging in, we can directly obtain the user’s profile picture through open-data.

<open-data class="avatar" type="userAvatarUrl"></open-data>
Copy the code

In the scenario where users have further needs for our products — for example, users need to log in to order and purchase products — we must obtain the relevant information of users. The information I have obtained here is relatively simple, and it is ok to obtain the authorization of openType=”getUserInfo”. In the real scenario, we need to have an interface to store user information. Here, I directly use cache to store ~

wx.setStorageSync("user_info", userInfo);
Copy the code

The code for WXML is as follows:

<! --me.wxml-->
<view class="main-container">
<van-cell>
  <button slot="title" class="avatar-flex" openType="getUserInfo" bindgetuserinfo="handleUserInfo">
    <open-data class="avatar" type="userAvatarUrl"></open-data>
    <view class="avatar-hint" wx:if="{{userInfo.nickName}}">{{userInfo.nickName}}</view>
    <view class="avatar-hint" wx:else>Please authorize</view>
  </button>
  <view class="avatar-extra" wx:if="{{userInfo.nickName}}">{{userInfo.province}} {{userInfo.country}}</view>
</van-cell>
</view>
Copy the code

The effect is as follows:

At present, there is little content, so we do accordion effect processing instead of opening a new page, otherwise the page content will be more empty and changed:

<van-collapse accordion value="{{ activeCollapse }}" bind:change="onChange">
  <van-collapse-item title="About" icon="shop-o" name="1">
    {{aboutTxt}}
  </van-collapse-item>
</van-collapse>
Copy the code

The effect is as follows:

The overall effect of my plate is as follows:

The latter

That completes ✅ Tabbar and the about me section. As for what the next little iteration will be, I don’t know. Article may be late, but not absent.

  • For more information, go to github.com/reng99

Code word is not easy, pass through to a praise 🌹!

Goi_ = goi_ (goi_ ロ goi_;) ┛