uniAPP常用的组件和数据渲染

背景图用数据包渲染：

<view class="banner" :style="`background-image:url(${arr[1].url});background-size: 100% 100%;`">
</view>

1、uniapp里子组件没有onLoad这个生命周期。
2、tap和click都是点击事件。不过移动端有太多复杂的功能是click监听不到的，例如，触摸、按住和轻滑。这时候就要用tap方法了。另外，click事假是点击放开之后才触发的，所以时间上会有延迟，大概200-300ms这样，可是我们在移动端的话就比较追求速度，所以就不能出现说有延迟的情况。所以用tap来代替click事件的话，对于针对移动设备的产品都适合。而且，tap还有一个特点就是『事件穿透』，就是你执行完绑定的tap事件之后呢，如果下面如果绑定了其他事件或者是本身就存在点子事件的话，也会默认触发。

模态框

<view class="cu-bar bg-white margin-top">
<view class="action">
	<text class="cuIcon-title text-orange "></text> 普通窗口
</view>
<view class="action">
	<button class="cu-btn bg-green shadow" @tap="showModal" data-target="Modal">Modal</button>
</view>
</view>
<view class="cu-modal" :class="modalName=='Modal'?'show':''">
<view class="cu-dialog">
	<view class="cu-bar bg-white justify-end">
		<view class="content">Modal标题</view>
		<view class="action" @tap="hideModal">
			<text class="cuIcon-close text-red"></text>
		</view>
	</view>
	<view class="padding-xl">
		Modal 内容。
	</view>
</view>
</view>

data() {
	return {
		modalName: null,
	};
},

methods：{
	showModal(e) {
		this.modalName = e.currentTarget.dataset.target
	},
	hideModal(e) {
		this.modalName = null
	},
}

提示卡片

<view class="fs-50 block mtk center">提示</view>
<view class="margin-top align-center">请登录</view>
<view @click="hideModal" class="block hidemtk center margin-top padding-top padding-bottom">知道了</view>

.mtk{
		width: 100%;
	}
.hidemtk{
		border-top: 1rpx solid #eee;
		width: 100%;
		height: 30rpx;
		color: #000;
	}

长按保存图片

<view class="qr-code ub ub-ver ub-ac ub-pc" @tap="downPic"><image :src="qr_code" mode=""></image>
	<view class="">长按保存二维码</view>
</view>

import {
		pathToBase64, //图片路径转base64  
		base64ToPath, //base64码转图片  
	} from '@/js_sdk/gsq-image-tools/image-tools/index.js'

methods：{
	downPic() {
	    let url
	    uni.downloadFile({
	    	url: this.qr_code, //这里为图片路径  
	    	success: (res) => {
	    		if (res.statusCode === 201) {
	    			pathToBase64(res.tempFilePath).then(base64 => {
	                            	url = base64;
	                            	var oA = document.createElement("a");
	                            	oA.download = " "; // 设置下载的文件名，默认是'下载'  
	                            	oA.href = url;
	                            	oA.click();
	                            	document.body.appendChild(oA);
	                            	oA.remove(); // 下载之后把创建的元素删除  
					})
					.catch(error => {
						console.error(error)
					})
			}
		}
	});
}

拨打电话

@top事件 call是事件名
call() {
    uni.makePhoneCall({