Uni-app Hello World

在学习VUE的过程中,就开始要接触uni-app了

uni-app 是一个使用 Vue.js (opens new window) 开发所有前端应用的框架,方便在学习简单,能发布到多平台

这里简单介绍下学习过程,毕竟实际开发,有更好更加完善的框架,这也正是个过渡.

第一步:创建项目

直接能运行起来的,如果运行不起来,要注册HbuilderX的账号,不然运行不起来.

 

第二步:page.json 页面加页面选项卡

{
	"pages": [
		{"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页",
				"backgroundColor": "#ffffff",
				"enablePullDownRefresh": true
			}
		}
		,{
            "path" : "pages/home/home",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "主页",
				"backgroundColor": "#ffffff",
				"enablePullDownRefresh": true
            }
            
        }
        ,{
            "path" : "pages/user/user",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "个人中心",
                "enablePullDownRefresh": false,
				"backgroundColor": "#ffffff"
            }
            
        }
        ,{
            "path" : "pages/blog/blog",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
    ],
	"tabBar": {
		"list": [
			{
				"pagePath": "pages/index/index",
				"iconPath": "static/c1.png",
				"text": "首页"
			},
			{
				"pagePath": "pages/home/home",
				"iconPath": "static/c2.png",
				"text": "主页"
			},
			{
				"pagePath": "pages/user/user",
				"iconPath": "static/c3.png",
				"text": "个人中心"
			}
		]
	},
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"app-plus": {
			"background": "#efeff4"
		}
	}
}

 文件目录

 

 一个简单的请求方法

<script>
	export default {
		data() {
			return {
				data1:"",
				data2:"",
				fuckdata:[]
			}
		},
		methods: {
			
			initData(){
				uni.request({
				    url: 'http://127.0.0.0:8080/xxxx/backdoor/parm/DRIVER_EXAM_CODE_ORG', //仅为示例，并非真实接口地址
					method:'GET',
				    data: {
				        text: 'uni.request'
				    },
				    success: (res) => {
				        console.log("打印res.data参数="+JSON.stringify(res.data));
						let rsdata = res.data;
						this.data1 = rsdata.data;
						uni.showToast({
							title:"请输出",
							icon:'none',mask:true,duration:2000
						})
				    },fail: (err) => {
				    	console.log("错误日志="+JSON.stringify(err));
				    }
				
				});
			}
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			//数据初始化
			this.initData();
			console.log("打印url上面的参数="+JSON.stringify(option)); //打印出上个页面传递的参数。
		}
	}
	
	

</script>
<template>
	<view>
		<h1>Blog页面</h1>
		<h1>请求到的参数是: {{ data1 }}</h1>
		<uni-card title="标题文字" thumbnail="xxxx" extra="额外信息" note="Tips">
			内容主体，可自定义内容及样式
		</uni-card>
	</view>
</template>



<style>

</style>

 运行结果: