文档官网

https://uniapp.dcloud.net.cn/

tabBar

在pages.json中配置

{
    "pages": [{
        "path": "pages/index/index",
        "style": {
            "navigationBarTitleText": "首页",
            "navigationStyle": "custom" // 取消顶部
        }
    }, {
        "path": "pages/user/user",
        "style": {
            "navigationBarTitleText": "我的",
            "enablePullDownRefresh": false
        }

    }],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8",
        "app-plus": {
            "background": "#efeff4"
        }
    },
    "tabBar": {
        "list": [{
                "text": "题库",
                "pagePath": "pages/index/index"
            },
            {
                "text": "我的",
                "pagePath": "pages/user/user"
            }
        ]
    }
}

iconfont引入

将图标加入购物车，然后下载引入css和ttf，在项目使用的地方引入并使用，注意：各平台会产生差异性，建议使用png

@import '@/static/iconfont/iconfont.css';
<i class="iconfont icon-shoucang"></i>

小程序兼容

<text>标签中不可以使用图片，只能存在文字，各平台兼容性方式：

<!-- #ifdef APP-PLUS -->
<text>这是在原生应用中显示的内容</text>
<!-- #endif -->
 
<!-- #ifdef H5 -->
<text>这是在H5中显示的内容</text>
<!-- #endif -->

 <!-- #ifdef MP-WEIXIN -->
<text>这是在微信小程序中显示的内容</text>
<!-- #endif -->

<script>
  export default {
    data() {
      return {
        content: ''
      }
    },
    mounted() {

      // #ifdef APP-PLUS
      console.log('This is a uni-app for APP');
      // #endif
      
      // #ifdef H5
      console.log('This is a uni-app for H5');
      // #endif
      
      // #ifdef MP-WEIXIN
      console.log('This is a uni-app for WeChat Mini Program');
      // #endif
    }
  }
</script>

获取微信头像和昵称

<button @click="test">获取用户信息</button>
function test() {
  wx.getUserProfile({
    desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
    success: (res) => {
      console.log(res)
      infoData.head = res.userInfo.avatarUrl
      infoData.name = res.userInfo.nickName
      infoData.id = res.signature
      uni.switchTab({
        url: '/pages/index/index'
      })
    }
  })
}

注意在基础库2.27.0以下有用

跳转

JS控制：

// 跳转页面
uni.navigateTo({
  url: `/pages/index/index`
})
// 跳转TabBar
uni.switchTab({
  url: '/pages/index/index'
})