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;
    }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 响应式布局的理解 响应式开发目的是一套代码可以在多种终端运行,适应不同屏幕的大小,其原理是运用媒体查询,在不同屏幕...
    懒猫_6500阅读 806评论 0 0
  • 转载 :OpenDiggawesome-github-vue 是由OpenDigg整理并维护的Vue相关开源项目库...
    果汁密码阅读 23,212评论 8 124
  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    前端进阶之旅阅读 114,857评论 24 450
  • 今日在与一个家境不错的女孩聊天时,说到踏踏实实努力工作。 立马就被反问道:踏踏实实?你是要过平庸的生...
    木呈一阅读 203评论 0 1
  • 突然想起一件可怕的事2008年赛尔号刚出的时候距离地球能源枯竭3650天所以去寻找无尽能源今年是2018要凉
    对空气撒个娇阅读 219评论 0 0