微信小程序_本地宝

有钱啊
332 阅读4分钟

一、找到wx-database文件的根目录，shift+鼠标右键，打开powershell窗口

image.png

二.自定义tabBar

  • 1.app.json中设置tabBar

image.png

  • 添加"custom": true,后，原来的下标签跳转就不能用了，再自定义
  • 2.点击开发指南中的，点击“在开发者工具中预览效果”进入示例页面，选择自定义tabBar进入小程序，然后复制文件（custom-tab-bar）给自己用

image.png

image.png

image.png

  • 3.在vant-weapp中找到tarbar标签，将van-tabbar、van-tabbar-item配置到custom-tab-bar文件下的index.json中，并修改一下路径

image.png

{
  "component": true,
  "usingComponents": {
    "van-tabbar": "../weapp/weapp/dist/tabbar/index",
  "van-tabbar-item": "../weapp/weapp/dist/tabbar-item/index"
  }
}
  • 4.将tabbar的基础用法引用到index.wxml和index.js中

image.png

  • 5.不想使用他的默认格式，则自己修改。先把app.json中的list内容复制给index.json中的list 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
      })
    }
  }
})
  • 6.自定义tabbae导航bug修复（官方的有bug,跳转后有时需要点击两次才能回到home页面）（难点）
    • 1.custon-tab-bar/index.js中的data有active，默认为0，即home页面
    • 2.给home、message、profile页面分别添加active值 home.js(active: 0)
/**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    if (this.getTabBar() && typeof this.getTabBar === 'function') {
      this.getTabBar().setData({
        active: 0
      })
    }
  },

message.js(active: 1)

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

profile.js(active=2)

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

index.wxml（其中使用了自定义图标）

<van-tabbar active="{{ active }}" bind:change="switchTab">
  <van-tabbar-item  wx:for="{{list}}" wx:key="index">
  // 自定义图标
    <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>

三.home页面内容

1.在utils中的request.js封装

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()
      }
    })
  })
}

2.连接接口请求数据（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'
  })
}

3.在home.js中引入获取数据的方法，并得到数据

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

  /**
   * 页面的初始数据
   */
  data: {
    slides:[],
    cates:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  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);
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    if(this.getTabBar() && typeof this.getTabBar==='function'){
      this.getTabBar().setData({
        active:0
      })
    }
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

4.将得到的数据渲染到页面上

1.轮播图

  • 在微信公众平台中的文档中，找到组件中的视图容器中的swiper，并将有关swiper的结构复制到home.wxml中

image.png

2.九宫格

  • 在vant-weapp中找到grid组件
    • 在home.json中引入组件
        "usingComponents": {
     "van-grid": "@vant/weapp/grid/index",
     "van-grid-item": "@vant/weapp/grid-item/index"
   }
    • 将基本用法复制进home.wxml
     <van-grid>
  <van-grid-item icon="photo-o" text="文字" />
  <van-grid-item icon="photo-o" text="文字" />
  <van-grid-item icon="photo-o" text="文字" />
  <van-grid-item icon="photo-o" text="文字" />
</van-grid>

<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>

5.实现页面跳转，点击九宫格中的内容跳转到list页面

1.在app.json中增加一个list页面

"pages": [
    "pages/home/home",
    "pages/message/message",
    "pages/list/list",
    "pages/profile/profile"
  ],

2.在home.wxml中的grid上绑定点击事件，并在hone.js中定义该函数，点击后跳转到list页面

<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>

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

3.list页面详情

1.list详情页title

  • 1.list页面主要由card组件构成，首先要在vant-weapp中找到card组件，并配置list.json
{
  "usingComponents": {
    "van-card": "/weapp/weapp/dist/card/index"
  }
}
  • 2.在api的info中调用接口获取类别的title信息
export const getCategoryById=(id)=>{
  return request({
    method:'get',
    url:'/categories/'+id
  })
}
  • 3.在list.js中引入接口函数
import {getCategoryById} from '../../api/info'
  • 4.在list.js中定义函数用来获取数据，并将获取到的数据存入data中定义的数组里
  data: {
    id:0
  },

// 根据id获取分类的内容
  getCategoryById(){
    // getCategoryById(id).then(res=>{
    //   console.log(res);
    // })
   getCategoryById(this.data.id).then(res=>{
    //  console.log(res);
     wx.setNavigationBarTitle({
       title: res.data.name,
     })
   })
  },

2.list详情页商品信息

  • 1.在info中调用接口
export const getShops=({id,pageNo,pageSize})=>{
  return request({
    method:'get',
    url:`/shops?categoryId=${id}&_page=${pageNo}&_limit=${pageSize}`
  })
}
  • 2.在list.js中引入接口函数
import {getCategoryById,getShops} from '../../api/info'
  • 3.在list.js中定义函数获取商品详情
 data: {
    id:0,
    pageNo:0,
    pageSize:7,
    shops:[],
    hasMore:false
  },

 // 获取商品
  getShops(){
    // 节流
    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)
      })
    })
  },
  • 4.渲染到页面

<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}}">联系电话：{{item.phone}}</view>
    <view>联系地址：{{item.address}}</view>
    <view>营业时间：{{item.businessHours}}</view>
    <view>设施：{{item.supportService}}</view>
  </view>
</van-card>
</view>
  • 5.模拟打电话
  // 模拟打电话
  makePhoneCall(e){
    wx.makePhoneCall({
      phoneNumber: e.target.dataset.phone //仅为示例，并非真实的电话号码
    })
  },
  • 6.加载更多
  • data中
hasMore:false
  • 定义函数getMore
   // 加载更多
   getMore() {
     this.getShops()
   },
  • 页面下拉时加载
   /**
    * 页面上拉触底事件的处理函数
    */
   onReachBottom: function () {
     // 下拉后加载更多商品
     this.getMore()
   },
  • 除了点击触发的函数外，其余函数均在onLoad中调用
  /**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
 // console.log(options.id);
 // this.getCategoryById(options.id)
 this.setData({
   id:Number(options.id)
 })
 this.getCategoryById()
 this.getShops()
},
avatar
文章
阅读
粉丝