uni-app 手记集。

1、uni-app 是一个使用 Vue.js 开发的前端应用的框架，所以不会Vue.js的小伙伴可以先去看看Vue.js的基础教学。

2、.vue文件结构

<template>
  <div class="container">
   </div>
</template>

<script type="text/ecmascript-6">
export default {
    data(){
        return{
        // 数据
        };
    },
    components:{
      // 组件注册
    },
    beforeCreate(){
      // 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
    },
    create(){
      // 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
    },
    beforeMount(){
      // 在挂载开始之前被调用：相关的 render 函数首次被调用。
    },
    mounted(){
      // el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
    },
    beforeUpdate(){
      // 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
    },
    updated(){
      // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
      // 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环
    },
    beforeDestroy(){
      // 实例销毁之前调用。在这一步，实例仍然完全可用。 
    },
    destroyed(){
      // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
    },
    computed:{
      // 计算属性
    },
    watch:{
      // 数据监听
    },
    methods:{
      // 方法定义
    }
}
</script>
<style>
  // css 样式
</style>

各参数/方法使用场景

components:{ // 组件注册 },：局部声明组件
create(){ },: 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted(){ }, : 在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。例：比如插件chart.js的使用: var ctx = document.getElementById(ID);
computed:{ // 计算属性 }, : 计算属性(computed)是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
watch:{ // 数据监听 }, : Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的 watch

3.input 通过v-model双向绑定，完成input框值获取。

<template>
   <div>
       <div class="logininfor">
           <input type="text" placeholder="手机号码" v-model="userphone">
           <input type="text" placeholder="密码" v-model="userpass">
           <span @click="register()">注册</span>
       </div>
       <p>已有账号？去<span class="zhuce" @click="login()">登录</span></p>
   </div>
</template>
<script>

export default {
     data(){
        return{
            userphone:"",
            userpass:""
        }
    },
    methods: {
            register(){
                window.console.log(this.userphone,this.userpass)
            }
        },
    }
</script>

4、图片选择--选择本地相册

<template>
	<view class="content">
		<image class="logo" :src="img"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
	
		</view>
		<view class="btn-area">
			<button @click="onbtn" class="btn_jin">{{btn_jin}}</button>
		</view>
		
		<view class="btn-area">
			<button @click="onImg" >更换选择图片</button>
		</view>
		
		<view class="btn-area">
			<button @click="onImg2" >更换选择图片2</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				btn_jin:'成为企业会员>>',
				img:'',
			}
		},
		onLoad() {
			this.img = '../../static/logo.png';
		},
		methods: {
			onbtn(){
				//页面跳转
				uni.navigateTo({
				    url: 'JD2BCreateEnterprise?title=jin123'
				});
			},
			onImg(){
				this.img = '../../static/jd2b_upload_image_add_btn.png';
			},
			onImg2(){
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: (res) => {
						var filesPaths = res.tempFilePaths;						
						if(filesPaths && filesPaths.length > 0){
							this.img = filesPaths[0];
							console.log(this.img)
							
						}	
				    }
				});
			
			},
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

5、判断字符串是否包含关系：

if(imgs[i].indexOf('http') === -1)

6、匹配图片的正则表达式：

let data = res.resultValue.RichData
					var imgs = [];
					//匹配图片（g表示匹配所有结果i表示区分大小写）
					var imgReg = /<img.*?(?:>|\/>)/gi;
					//匹配src属性 
					var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
					var arr = data.match(imgReg);
					console.log(arr)
					for (var i = 0; i < arr.length; i++) {
					  var src = arr[i].match(srcReg);
					  //获取图片地址
					  if(src[1]){
					    console.log('已匹配的图片地址'+(i+1)+'：'+src[1]);
						imgs.push(src[1]);
					  }					
					}
					console.log(imgs);

7、替换的正则表达式

//替换style=""为空
					data = data.replace(/style=""/g,'')
					data = data.replace(/<img/g, '<img style="width: 100%;"').replace(/px/g, 'rpx').replace(/750/g, '350px')
					data = data.replace(/<p>/g, '<div style="text-align:center;">').replace(/<\/p>/g, '</div>')

8、第三方布局https://orangleli.github.io/markdown-html/vue-js-markdown-editor/markdown2html.html

9、css布局

水平排列，两端对齐，居中

<view class="flex space-between v-center">

水平排列，居中

<view  class="flex flex-row v-center">

垂直排列

<view class="flex flex-column">

1、上下居中（垂直居中）
style="height: 40px; background-color: #FFFFFF;
display: flex; flex-direction: row; align-items: center;"

2、左右居中（水平居中）
style="height: 40px; background-color: #FFFFFF; 
display: flex; flex-direction: row; justify-content: center;"

10、JSON跟vue对象互换

对象转json

JSON.stringify(this.storeInfo)

json转对象

JSON.parse(options.data)

11、设置底部布局，且不受滑动干扰

.view_to_cart{
	position: fixed;
	right: 15rpx;
	bottom: 16%;
	width: 80rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;	
	margin-right: 10px;
}

12、swiper动态计算高度

1、在布局设置高度为动态赋值

<swiper class="tab-swiper"  @change="switchTag" :current="nowActive"  :style="'height: ' + height +'px;'">

</swiper>

2、在data声明height函数

data() {
        return {                       
            height: 750,            
        }
    },

3、在页面挂载后设置swiper高度
mounted() {
		this.setHeight();
	},

4、设置高度
setHeight() {
			let windowHeight = uni.getSystemInfoSync().windowHeight;//页面可见区域
			console.log("windowHeight = "+windowHeight)
			if (this.tabArr.length === 0){
				this.height = windowHeight;
			} else {
				
				windowHeight = windowHeight - 44;//页面可见区域 - 在线购物条高度					
				console.log("windowHeight = "+windowHeight)
				var query2 = uni.createSelectorQuery();
				query2.select('.view_head').boundingClientRect(rect => {
					if (rect) {
						console.log("view_head.height = "+rect.height)
						this.height = windowHeight - rect.height;//页面可见区域 - 头部高度
						console.log("this.height = "+this.height)
					}
				}).exec();				
			}
			
		},

13、分页加载API

onReachBottom(){
		//分页加载
		console.log('onReachBottom'+this.nowActive)
		if(this.nowActive === 1){
			this.grouponPageNo++;
			this.getGrouponList(this.shopInfo.Id, this.message, this.userInfo.CommunityId, this.userInfo.userId);
		}else if(this.nowActive === 0){
			this.pageNo++;
			this.getGoodList(this.shopInfo.Id, this.message, this.userInfo.CommunityId, this.userInfo.userId);
		}
		
	},

14、页面标签内写判断语句

:color="isStock==='1'?'#51B3F1':'#333'" 

15、数组

1）循环

let arr=[]

for (let k in this.imgList) {
                    arr[k] = await this.uploadFile(this.imgList[k])
                }

2）数组增加对象

arr.push()

16、页面返回刷新

var pages = getCurrentPages();
var currPage = pages[pages.length - 1]; //当前页面
var prevPage = pages[pages.length - 2]; //上一个页面
//直接调用上一个页面的setData()方法，把数据存到上一个页面中去
prevPage.setData({
        isDoRefresh:true//上一个页面的data里面的参数
})
 uni.navigateBack();

===========================

onShow:function(e){
       let pages = getCurrentPages();
       let currPage = pages[pages.length-1];
       if (currPage.data.isDoRefresh == true){
currPage.data.isDoRefresh = false;
           //在此刷新
        }else{
           //不用刷新
        }

 }

17、圆角

1. 指定背景颜色的元素圆角：
{
    border-radius: 25px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

2. 指定边框的元素圆角:
{
    border-radius: 25px;
    border: 2px solid #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

3. 指定背景图片的元素圆角:
{
    border-radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px;
    width: 200px;
    height: 150px;
}

4. 四个值,第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
{
    border-radius: 15px 50px 30px 5px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

border-radius:0 0 100% 100%;

18、渐变色

基础线性渐变，从上到下
background: linear-gradient(blue, pink);

改变渐变方向
background: linear-gradient(to right, blue, pink);

对角线渐变
background: linear-gradient(to bottom right, blue, pink);

设置渐变角度
background: linear-gradient(70deg, blue, pink);

19、padding

padding : +数值+单位 或 百分比数值

div{padding:5px}设置对象距离四边边距为5px间隔

同时可以单独设置左、右、上、下边距离发布设置

1、padding-left 设置对象距离左边的边距补白间隔
div{padding-left:5px}
对象内距离左边补白间距为5px

2、padding-right 设置对象距离右边的边距补白间隔
div{padding-right:5px}
对象内距离右边补白间距为5px

3、padding-top 设置对象距离上边的边距补白间隔
div{padding-top:5px}
对象内距离上边补白间距为5px

4、padding-bottom 设置对象距离下边的边距补白间隔
div{padding-bottom:5px}
对象内距离下边补白间距为5px

检索或设置对象四边的补丁边距。

如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。

如果只提供一个，将用于全部的四条边。

如果提供两个，第一个用于上－下，第二个用于左－右。

如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。

内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。

Padding的值不能为负值。