mpvue 開發微信小程序（二）index頁面和tabbar和nav

本文链接：https://blog.csdn.net/software20121216/article/details/103511198

本文是mpvue微信小程序开发系列的第二部分，主要讲解如何配置index页面，包括在main.js中挂载页面，通过main.json设置导航文字和颜色，以及index.vue页面的实现。此外，还介绍了点击按钮进入首页的交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

接上一節index頁面的代碼

main.js（掛載index頁面）

import Vue from 'vue'
import Index from './Index.vue'


Vue.config.productionTip = false
Index.myType = 'index'


const index = new Vue(Index)
index.$mount()

main.json 頁面設置導航的文字和顏色

{
  "navigationBarTitleText":"index",
  "navigationBarBackgroundColor":"#8ed145"
}

index.vue 頁面來咯

<template>
  <div class="indexContainer">  
    <div class="userImg">
    <open-data type="userAvatarUrl"></open-data>
    </div>
    <open-data type="userNickName"></open-data>
    <button @tap="toHomePage">mpvue小程序</button>
  </div>
  </div>
</template>

<script>
export default {
  name:"Index",
  data(){
    return{
    
  }
  },
 
  methods:{
    toHomePage(){
      let url='/pages/home/main'
      // wx.navigateTo({url})//如果同時有tabbar 耶是跳轉頁面需要用wx.switchTab
      wx.switchTab({url})
      console.log(url)
    }

  }

}
</script>

<style>
.indexContainer{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top:10rpx;
}
.userImg{
  overflow: hidden;
  display: block;
  width: 300rpx;
  height: 300rpx;
  border-radius: 50%;
}
.btn{
  width: 300rpx;
  height: 300rpx;
  border-radius: 150rpx;
  line-height: 100rpx;
  text-align: center;
}

</style>

點擊button進入首頁