Go to the root of the WX-Database file, shift+ right mouse button, and open the PowerShell window

2. Customize tabBar

• 1. Set tabBar in app.json

• Add “custom”: true, the original next label jump can not be used, and then customize
• 2. Click in the development guide, click “Preview in developer Tools” to enter the sample page, select custom tabBar to enter the small program, and then copy the file (custom-tab-bar) for your own use

• 3. Find the tarbar tag in vtant-appellate P, add van-tabbar and van-tabbar-item to the index. Json file in the custom-tab-bar file, and modify the path

{
  "component": true."usingComponents": {
    "van-tabbar": ".. /weapp/weapp/dist/tabbar/index"."van-tabbar-item": ".. /weapp/weapp/dist/tabbar-item/index"}}Copy the code

• 4. Reference the basic usage of tabbar to index.wxml and index.js

• 5. If you do not want to use the default format, modify it yourself. Let’s copy the contents of the list in app.json to the list in index.json

index.js

Component({
  data: {
    active: 0.list: [{
      "pagePath": "/pages/home/home"."text": "home"."iconPath": "/tabs/home.png"."selectedIconPath": "/tabs/home-active.png"}, {"pagePath": "/pages/message/message"."text": "message"."iconPath": "/tabs/message.png"."selectedIconPath": "/tabs/message-active.png"}, {"pagePath": "/pages/profile/profile"."text": "profile"."iconPath": "/tabs/profile.png"."selectedIconPath": "/tabs/profile-active.png"}},attached(){},methods: {
    switchTab(e) {
      // console.log(e)
      wx.switchTab({
        url:this.data.list[e.detail].pagePath
      })
    }
  }
})
Copy the code

• 6. Custom tabbae navigation bug fix (official bug, sometimes need to click twice after jumping back to the home page) (difficult)
  • 1. Data in custon-tab-bar/index.js has active. The default value is 0, that is, the home page
  • 2. Add the active value to the Home, Message, and Profile pages respectively

  home.js(active: 0)

/** * lifecycle function -- listens for page display */
  onShow: function () {
    if (this.getTabBar() && typeof this.getTabBar === 'function') {
      this.getTabBar().setData({
        active: 0})}},Copy the code

message.js(active: 1)

  onShow: function () {
    if(this.getTabBar() && typeof this.getTabBar==='function') {this.getTabBar().setData({
        active:1})}},Copy the code

profile.js(active=2)

  onShow: function () {
    if(this.getTabBar() && typeof this.getTabBar==='function') {this.getTabBar().setData({
        active:2})}},Copy the code

Index. WXML (which uses custom ICONS)

<van-tabbar active="{{ active }}" bind:change="switchTab">
  <van-tabbar-item  wx:for="{{list}}" wx:key="index">// Customize the icon<image
      slot="icon"
      src="{{ item.iconPath }}"
      mode="aspectFit"
      style="width: 30px; height: 30px;"
    />
    <image
      slot="icon-active"
      src="{{ item.selectedIconPath }}"
      mode="aspectFit"
      style="width: 30px; height: 30px;"
    />
  </van-tabbar-item>
</van-tabbar>
Copy the code

3. Home page content

1. Request.js encapsulation in utils

module.exports = ({ url, method, data = {}, header = {} }) = > {
  const baseURL = 'http://127.0.0.1:3000'
  return new Promise((resolve, reject) = > {
    wx.showLoading({
      title: 'Loading... '.mask: true
    })
    wx.request({
      url: baseURL + url,
      method: method.toUpperCase() || 'GET'.data: method === 'GET' ? data : JSON.stringify(data),
      header:header|| {
        'Content-Type': 'application/json; charset=UTF-8'.'x-tiken': 'x-token'
      },
      dataType: 'json'.success: resolve,
      fail: reject,
      complete: () = > {
        wx.hideLoading()
      }
    })
  })
}
Copy the code

2. Connect interface request data (API /info.js)

const request = require('.. /utils/request')

export const getSilides=() = >{
  return request({
    method:'get'.url:'/slides'})}export const getCategories=() = >{
  return request({
    method:'get'.url:'/categories'})}Copy the code

3. Introduce methods to get data in home.js and get data

// pages/home/home.js
import {getSilides,getCategories} from '.. /.. /api/info'
Page({

  /** * initial data for the page */
  data: {
    slides: [].cates:[]
  },

  /** * lifecycle function -- listens for page loading */
  onLoad: function (options) {
    this.getSilides()
    this.getCategories()
  },
  getSilides(){
    getSilides().then(res= >{
      // console.log(res);
      this.setData({
        slides:res.data
      })
    })
  },
  getCategories(){
    getCategories().then(res= >{
      // console.log(res);
      this.cates=res.data
      console.log(this.cates); })},/** * lifecycle function - listen for the page to complete the first rendering */
  onReady: function () {},/** * lifecycle function -- listens for page display */
  onShow: function () {
    if(this.getTabBar() && typeof this.getTabBar==='function') {this.getTabBar().setData({
        active:0})}},/** * life cycle function - listen for page hiding */
  onHide: function () {},/** * life cycle function - listen for page unload */
  onUnload: function () {},/** * page-related event handlers -- listen for user pull actions */
  onPullDownRefresh: function () {},/** * the handler for the pull-down event on the page */
  onReachBottom: function () {},/** * Users click on the upper right corner to share */
  onShareAppMessage: function () {}})Copy the code

4. Render the data to the page

1. The round figure

• In the documentation in the wechat public platform, find the Swiper in the view container in the component and copy the structure about swiper into home.wxml

2. Scratchable latex

• Grid components can be found in Vant-pervasive P
  • Introduce components in home.json

      "usingComponents": {
       "van-grid": "@vant/weapp/grid/index"."van-grid-item": "@vant/weapp/grid-item/index"
     }
  Copy the code

  • Copy the basic usage into home.wxml

   <van-grid>
    <van-grid-item icon="photo-o" text="Text" />
    <van-grid-item icon="photo-o" text="Text" />
    <van-grid-item icon="photo-o" text="Text" />
    <van-grid-item icon="photo-o" text="Text" />
  </van-grid>
  Copy the code

<view class="home">
  <swiper indicator-dots="{{true}}" class="slides">
      <swiper-item wx:for="{{slides}}" wx:key="*this">
      <view class="swiper-item {{item}}">
        <block wx:if="item.link">
          <image src="{{item.image}}" mode="aspectFill" />
          <navigator url="/pages/list/list"></navigator>
        </block>
        <block wx:else>
          <image src="{{item.image}}" mode="aspectFill" />
        </block>
      </view>
    </swiper-item>
  </swiper>
  <van-grid column-num="3" >
  <van-grid-item wx:key="index" icon="{{item.icon}}" text="{{item.name}}" wx:for="{{ cates }}" />
</van-grid>
</view>
Copy the code

5. Realize page hopping: Click the content in the ninth grid to jump to the List page

1. Add a list page to app.json

"pages": [
    "pages/home/home"."pages/message/message"."pages/list/list"."pages/profile/profile"].Copy the code

2. Bind the click event to the grid in home.wxml and define the function in hone

<van-grid column-num="3" >
  <van-grid-item wx:key="index" icon="{{item.icon}}" text="{{item.name}}" wx:for="{{ cates}}" bind:click="goDetail" data-id="{{item.id}}"/>
</van-grid>
Copy the code

  goDetail(e){
    console.log(e);
    wx.navigateTo({
      url: "/pages/list/list? id="+e.target.dataset.id
    })
  },
Copy the code

3. List page details

1. List Details page Title

• 1. The list page is composed of card components. You need to find card components in vuant-eappp and configure list.json

{
  "usingComponents": {
    "van-card": "/weapp/weapp/dist/card/index"}}Copy the code

• 2. Invoke the interface in THE API info to obtain the title information of the category

export const getCategoryById=(id) = >{
  return request({
    method:'get'.url:'/categories/'+id
  })
}
Copy the code

• 3. Introduce interface functions in list.js

import {getCategoryById} from '.. /.. /api/info'
Copy the code

• 4. Define functions in list.js to fetch data and store the retrieved data into arrays defined in data

  data: {
    id:0
  },

// Get classified content by id
  getCategoryById(){
    // getCategoryById(id).then(res=>{
    // console.log(res);
    // })
   getCategoryById(this.data.id).then(res= >{
    // console.log(res);
     wx.setNavigationBarTitle({
       title: res.data.name,
     })
   })
  },
Copy the code

2. List Details page Product information

• 1. Invoke the interface in INFO

export const getShops=({id,pageNo,pageSize}) = >{
  return request({
    method:'get'.url:`/shops? categoryId=${id}&_page=${pageNo}&_limit=${pageSize}`})}Copy the code

• 2. Introduce interface functions in list.js

import {getCategoryById,getShops} from '.. /.. /api/info'
Copy the code

• 3. Define a function in list.js to get the item details

 data: {
    id:0.pageNo:0.pageSize:7.shops: [].hasMore:false
  },

 // Get the goods
  getShops(){
    / / throttling
    if(this.data.hasMore! = =false) return 
    ++this.data.pageNo
    getShops({id:this.data.id,pageNo:this.data.pageNo,pageSize:this.data.pageSize}).then(res= >{
      this.data.hasMore=this.data.pageNo*this.pageSize>res.header['X-Total-Count']
      // console.log( this.data.hasMore);
      this.setData({
        shops:this.data.shops.concat(res.data)
      })
    })
  },
Copy the code

• 4. Render to page

<view class="list">
  <van-card
wx:for="{{shops}}"
wx:key="index"
  tag="{{item.tags}}"
  title="{{item.name}}"
  thumb="{{ item.images[0] }}"
>
  <view slot="desc">
    <view bindtap="makePhoneCall" data-phone="{{item.phone}}">Contact number: {{item.phone}}</view>
    <view>Address: {{item.address}}</view>
    <view>BusinessHours: {{item.businessHours}}</view>
    <view>Facilities: {{item. SupportService}}</view>
  </view>
</van-card>
</view>
Copy the code

• 5. Mock phone calls

  // Make a simulated phone call
  makePhoneCall(e){
    wx.makePhoneCall({
      phoneNumber: e.target.dataset.phone // This is an example, not a real phone number})},Copy the code

• 6. Load more

• The data in the

hasMore:false
Copy the code

• Define the function getMore

   // Load more
   getMore() {
     this.getShops()
   },
Copy the code

• The page loads when it is pulled down

   /** * the handler for the pull-down event on the page */
   onReachBottom: function () {
     // Drop down to load more items
     this.getMore()
   },
Copy the code

• All functions except those triggered by clicks are called in onLoad

  /** * lifecycle function -- listens for page loading */
onLoad: function (options) {
 // console.log(options.id);
 // this.getCategoryById(options.id)
 this.setData({
   id:Number(options.id)
 })
 this.getCategoryById()
 this.getShops()
},
Copy the code