uniapp简单学习

项目部署

一、Vscode

1、全局安装Vue-cli

npm install -g @vue/cli

2、 创建 uni-app 项目

vue create -p dcloudio/uni-preset-vue my-project

3、选择项目模板
4、运行项目

npm run dev:%PLATFORM%

5、发布项目

npm run build:%PLATFORM%

6、%PLATFORM% 可取值如下

值	平台
h5	h5
mp-alipay	支付宝小程序
mp-baidu	百度小程序
mp-weixin	微信小程序
mp-toutiao	头条小程序
mp-qq	qq 小程序

二、HBuilderX

1、创建
2、运行
3、配置路径
第一运行微信小程序会需要配置路径，选如下路径
4、启动端口
微信开发者工具不会默认打开，因此需要开启端口
设置>安全设置

结构（标签and组件）

一、视图容器（部分）
1、view和text和image
view 块级元素
text 行内元素
image 导入图片等于img
二、表单组件（部分）
botton和input

<button type="default">有种点我啊</button>
<input class="uni-input" confirm-type="search" maxlength="10" placeholder="最大输入长度为10" />

样式（全局and私有and组件样式）

1、全局globalStyle

"globalStyle": {
		"navigationBarTextStyle": "red",
		"navigationBarTitleText": "呵呵",
		"navigationBarBackgroundColor": "#000000",
		"backgroundColor": "#F8F8F8"
	}

2、私有pages>style

{
	"path": "pages/pageone/pageone",
	"style": {
		"navigationBarTitleText": "啦啦啦",
		 "enablePullDownRefresh": false
	}
		
},

3、组件style

	.text {
		font-size: 200rpx;
	}

行为

1、路由跳转

uni.navigateTo({
    url: '../pagetow/pagetow'
})

"tabBar": {
	    "position":"bottom",
	    "list": [
	      {
	        "pagePath": "pages/index/index",
	        "text": "首页"
	      },
	      {
	        "pagePath": "pages/pageone/pageone",
	        "text": "日志"
	      }
	    ]
	  }

2、数据储存

setinfo() {
		const a = 123456
		uni.setStorage({
				key: 'storage_key',
				data: a,
				success: function() {
					console.log('success');
				}
		});
},
getinfo(){
		uni.getStorage({
			key: 'storage_key',
			success: function (res) {
				console.log(res.data);
			}
		});
}

3、请求

	uni.request({
			url: 'https://blog.csdn.net', 
			success: (res) => {
			console.log(123456);
		}
	});