uni-app配置

1、文件结构

page.json//设置app的头部、toolbar、和页面的标题、路由设置、启动页、临时首页

有独立标签view、text，有特殊属性

2、rpx

规定750rpx = 375PX 
所以1rpx =0.5px

3、生命周期

全app的生命周期(写在App.vue)：
oLaunch() //初始化执行1次
onShow()  //初始化会执行、后台切回前台会执行
onHide()  //前台切到后台会执行
onError() //发生错误时执行

页面的生命周期
onload(option)  //初始化页面执行一次，参数是上一个页面传过来的
onShow()  //初始化会执行、后台切回前台会执行
onReady()  //页面渲染完成执行1次
onHide()  //前台切到后台会执行
onUnload() //页面卸载的时候‘’

onResize() //监听窗口大小变化
onPullDouwnRefresh()  //下拉刷新时候回触发

4、上传和预览图片

uni.chooseImage({}) //可以设置上传的张数，成功后会返回一个数组，数组是每张图片的网络连接

uni.previewImage({}) //点击图片触发此方法

5、添加注释

定义：不同的端口加载不同的代码，实现跨端需求
html中:
<!-- #ifdef H5 -->
<p>你好</p>
<!-- #endif H5 -->

css中:
/* #ifdef H5 */
.test{
    color:red;
}
/* #endif H5 */

js中：
// #ifdef H5
console.log(556)
// #endif

6、导航跳转传参

组件方式：
<navigator url="/test?id=1&test=ds"> </navigator>
api方式：
uni.navigateTo({
    url:"/test?id=1&test=ds"
})

onLoad(option){ }//onLoad生命周期接收参数

7、组件创建与使用

建立vue文件在别的vue文件中用import引入并且在conponent上注册

组件的生命周期和vue的一样，页面的不是，它自己有

8、扩展组件

有些功能官方是没有的，可以下载导入使用，如日历

9、自定义全局事件（兄弟组件之间传值）

a组件
uni.$on("mytes",res=>{
    this.num = res
})

b组件：
uni.$emit("mytes",10)

父传子：属性绑定，子组件prop属性接收
子传父：this.$emit(test,ff) 自定义事件传值

地图

<map class="map" :latitude="23.185217" :longitude="113.478258"> </map>

//坐标可用百度地图拾取
http://api.map.baidu.com/lbsapi/getpoint/index.html

触发拨电话：

uni.makePhoneCall({
	phoneNumber:"123456"
})

加入购物车插件，底部导航条

GoodsNav 商品导航

上传代码到微信公众平台

manifast.json文件配置appId ==>微信开发者工具==》上传按钮==》提交审核

H5打包

manifast.json==》填写软件名==》发行==》H5 ==》生成一个打包后的文件

app打包

manifast.json==》基本配置和APP配置 ==》设置软件图片、启动图==》发行
==》原生APP打包==》生成安装包链接

生成安卓证书：

管理员身份打开命令行，进入jdk的bin，如cd C:\Program Files\Java\jdk1.8.0_191\bin

输入命令：
keytool -genkey -v -keystore debug.keystore -alias androiddebugkey -keyalg RSA -validity 1000
接下来输入密码，别名
之后输入y确认，会提示输入如下：
keytool -importkeystore -srckeystore debug.keystore -destkeystore debug.keystore -deststoretype pkcs12

复制再输入即可，在C:\Program Files\Java\jdk1.8.0_191\bin目录下生成store文件

别名：androiddebugkey
密码：uuuuuu
证书名称：debug.keystore

2、在线生成地址
http://www.applicationloader.net/appuploader/keystore.php

兼容性问题：

表单的label-width='0' label='' ,在小程序会显示为'true';
解决：label-width='0'，label=' '  //多一个空格就

在h5不会检测到有下面的tabbar，
使用  height: var(--window-bottom); //在h5是tabbar的高度，在app、小程序则是0；

不要在UI框架独有的标签上加自己的样式，应该在独有标签外加一层<view>,不然小程序不支持

iphone滚动不流畅问题。
解决：
 overflow: auto;
 -webkit-overflow-scrolling: touch; 


框架的默认值
需要循环赋值的时候不要用 item.value,改用datarr[index].value

页面不滚动、页面内的盒子滚动出现的整个页面下拉的问题

解决：在page.json设置禁止整个页面下拉和上拉
				{
					"path": "myOrderList/myOrderList",
					"style": {
						"disableScroll": true,
						"navigationBarTextStyle": "white",
						"navigationBarTitleText": "我的订单"
					},
					"app-plus":{
						"scrollIndicator": "none",//app内不现实滚动条
						"bounce":"none" // 将回弹属性关掉
					}
				}

页面回跳时，带参数

上一个页面的onShow中：
uni.$on("handClickXXX", res => {
    console.log(res);
    // 清除监听
    uni.$off('handClickXXX');
})

点击返回的这个页面：
uni.$emit("handClickXXX",{data: item,index: index});
uni.navigateBack();

点返回控制跳转

onBackPress(options) {
	uni.redirectTo({
		url: "/pages/index/index" //调到指定页
	})
	return true;
},

解决space-evenly的兼容性问题

container{
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: space-between;
       //justify-content: space-evenly;
      &:before,
      &:after {
          content: '';
          display: block;
    }
}

导航栏高度

<view class="title-bar" :style="{'padding-top':statusBarHeight+'px'}">
</view>
GetStatusBarHeight() {
	let that = this;
	uni.getSystemInfo({
		success: function (res) {
				that.statusBarHeight = res.statusBarHeight;
		},
	});
},

css:
padding-top: var(--status-bar-height);