美文网首页
多端开发uni-app起步

多端开发uni-app起步

作者: m小萌同学 | 来源:发表于2019-04-17 22:35 被阅读0次

    1、在Hbulider新建一个uni-app项目

    2、项目结构如图所示

    3、在pages文件下新建一个ucenter目录,然后新建ucenter和setting的两个页面,然后前往阿里巴巴矢量图标库:https://www.iconfont.cn/,找几张如图所示几张图标放置在static文件夹下。

    4、配置pages.json文件

    "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
            {
                "path": "pages/index/index",
                "style": {
                    "navigationBarTitleText": "主页"
                }
            },
            {
                "path": "pages/ucenter/ucenter",
                "style": {
                    "navigationBarTitleText": "我的"
                }
            }
    
            ,{
                "path" : "pages/ucenter/setting",
                "style" : {
                    "navigationBarTitleText": "设置"
                }
            }
        ],
        "tabBar": {
            "color": "#000000",
            "selectedColor": "#2F85FC",
            "backgroundColor": "#FFFFFF",
            "borderStyle": "black",
            "list": [
                {
                    "pagePath": "pages/index/index",
                    "iconPath": "static/home.png",
                    "selectedIconPath": "static/home-active.png",
                    "text": "主页"
                },
                {
                    "pagePath": "pages/friends/friends",
                    "iconPath": "img/center.png",
                    "selectedIconPath": "static/center-active.png",
                    "text": "朋友"
                }
    
            ]
        },
        "globalStyle": {
            "navigationBarTextStyle": "black",
            "navigationBarTitleText": "uni-app",
            "navigationBarBackgroundColor": "#F8F8F8",
            "backgroundColor": "#F8F8F8"
        }
    

    5、编写一下index.vue和ucenter.vue内容

    • index.vue
    <template>
        <view class="content">
           <view>
                <text class="title">{{title}}</text>
            </view>
        </view>
    </template>
    
    <script>
        export default {
            data() {
                return {
                    title: 'Hello'
                }
            },
            onLoad() {
    
            },
            methods: {
    
            }
        }
    </script>
    
    <style>
        .content {
            text-align: center;
            height: 400upx;
        }
        .title {
            font-size: 36upx;
            color: #8f8f94;
        }
    </style>
    
    • ucenter.vue
    <template>
        <view class="content">
           <view>
                <text class="title">{{name}}</text>
                <navigator url="setting" hover-class="navigator-hover">
                    <button type="primary">个人设置</button>
                </navigator>
         </view>
        </view>
    </template>
    
    <script>
        export default {
            data() {
                return {
                    name: '忆曦雪',
                }
            },
            onLoad() {
    
            },
            methods: {
    
            }
        }
    </script>
    
    <style>
        .content {
            text-align: center;
            height: 400upx;
        }
        .title {
            font-size: 36upx;
            color: #8f8f94;
        }
    </style>
    
    • pages.json
    {
        "pages": [
            {
                "path": "pages/index/index",
                "style": {
                    "navigationBarTitleText": "主页"
                }
            },
            {
                "path": "pages/ucenter/ucenter",
                "style": {
                    "navigationBarTitleText": "我的"
                }
            },
            {
                "path": "pages/ucenter/setting",
                "style": {
                    "navigationBarTitleText": "个人设置"
                }
            }
        ],
        "tabBar": {
            "color": "#000000",
            "selectedColor": "#2F85FC",
            "backgroundColor": "#FFFFFF",
            "borderStyle": "black",
            "list": [
                {
                    "pagePath": "pages/index/index",
                    "iconPath": "static/home.png",
                    "selectedIconPath": "static/home-active.png",
                    "text": "主页"
                },
                {
                    "pagePath": "pages/ucenter/ucenter",
                    "iconPath": "static/center.png",
                    "selectedIconPath": "static/center-active.png",
                    "text": "我的"
                }
            ]
        },
        "globalStyle": {
            "navigationBarTextStyle": "white",
            "navigationBarBackgroundColor": "#2F85FC",
            "backgroundColor": "#FFFFFF"
        }
    }
    

    6、启动安卓模拟器,选择真机运行

    7、运行结果

    相关文章

      网友评论

          本文标题:多端开发uni-app起步

          本文链接:https://www.haomeiwen.com/subject/hxtawqtx.html