MPVue 学习之路（踩坑）

1. 增加页面

在pages下面增加页面后，执行 npm run dev，并且记得在index.vue 中有

<script>
    export default{
        
    }
</script>

2. 增加启动图

主要是 position: fixed，和 background-size: 100% 100%，使整个控件充满整个屏幕

<template>
    <div class="contain">
        <img src="../../../static/img/splash.png" alt="" srcset="">
    </div>
</template>

<script>
    export default{
        
    }
</script>

<style scoped>
    .contain{
        position:fixed; 
        /*下面的是关键的设置100%显示*/ 
        background-size: 100% 100%; 
        width: 100%;
        height: 100%;
    }
    .contain img{
        width: 100%;
        height: 100%;
    }
</style>

3 . 底部添加tabbar

在最外层的main.js中添加如下代码

export default {
    // 这个字段走 app.json
    config: {
        // 页面前带有 ^ 符号的，会被编译成首页，其他页面可以选填，我们会自动把 webpack entry 里面的入口页面加进去
        pages: ['pages/logs/main', 'pages/index/main', '^pages/splash/main'],
        window: {
            backgroundTextStyle: 'light',
            navigationBarBackgroundColor: '#fff',
            navigationBarTitleText: 'WeChat',
            navigationBarTextStyle: 'black'
        },
        tabBar: {
            color: '#666666',
            selectedColor: '#000000',
            borderStyle: 'white',
            backgroundColor: '#f8f9fb',
            list: [{
                    text: '榜单',
                    pagePath: 'pages/board/main',
                    iconPath: 'static/img/home.png',
                    selectedIconPath: 'static/img/remind.png'
                },
                {
                    text: '搜索',
                    pagePath: 'pages/search/main',
                    iconPath: 'static/img/home.png',
                    selectedIconPath: 'static/img/remind.png'
                },
                {
                    text: '我的',
                    pagePath: 'pages/profile/main',
                    iconPath: 'static/img/home.png',
                    selectedIconPath: 'static/img/remind.png'
                }
            ]
        }
    }
}

在要跳转的地方加入

wx.switchTab({
    url: '../board/main'
})

4. 使用Flyio

先 npm install flyio，然后

var Fly = require("flyio/dist/npm/wx")
var request = new Fly();

5. 微信小程序button去除边框

一般来说是 border:none，但是没有效果，比如下面这样

.shareBtn::after{
        border: 0;
    }