微信小程序

1.单纯的点击按钮跳转到不是当前tabar的页面

<button bindtap="bindViewTap">哈哈哈</button>
bindViewTap: function () {
	console.log('为',3423)
	wx.navigateTo({   --跳转后，可从跳转的页面在此返回，相当于父级页面只是隐藏了
		url: '../index/index'
	})
},
wx.redirectTo     --平行跳转，跳转到下一页面后，不能返回

2.点击按钮跳转的是到当前tabar的页面

<button bindtap="bindViewTap">哈哈哈</button>
bindViewTap: function () {
	console.log('为', 3423)
	wx.switchTab({
		url: '../index/index'
	})
},

3、事件冒泡

<view id="outer" bindtap="handleTap1">
	outer view
	<view id="middle" catchtap="handleTap2">middle view</view>
	<view id="inner" bindtap="handleTap3">inner view</view>
</view>
	先执行最里面的绑定事件，再执行外边的

4、事件捕获

自基础库版本 1.5.0 起，触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用capture-bind、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。

在下面的代码中，点击 inner view 会先后调用handleTap2、handleTap4、handleTap3、handleTap1。

<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
outer view
	<view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
	inner view
	</view>
</view>

如果将上面代码中的第一个capture-bind改为capture-catch，将只触发handleTap2。

<view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">
	outer view
	<view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
	inner view
	</view>
</view>

5、微信小程序自定义单选/复选框的样式

复选框，可以更换图标样式

checkbox .wx-checkbox-input{
	width: 18px;
	height: 16px;
	border: 0;
	background: none;
}
对勾的样式，可以更换图标样式
checkbox .wx-checkbox-input:before{
	display: none;
}
checkbox{
	transform: scale(0.5) translateY(-3px);
	transform-origin: center right;
}

6、小程序点击隐藏

弹框样式写完后，不要用display

<view class='model' catchtouchmove='stopmove' wx:if="{{showModal}}" ></view>
onLoad: function (options) {
	var that = this;
	this.setData({
		showModal: false
	})
}      *页面加载隐藏

chooroom:function(){
	var that = this;
	this.setData({
		showModal: true
	})  *点击显示
}

7、navigateTo和switchTab跳转传值

（1）、navigateTo传值

跳转前页面js文件
binddetail: function (e) {
	var arcleId = e.currentTarget.dataset.arcleid;
	wx.navigateTo({
		url: "../detail/decor_datail?id=" +arcleId 
	})
	console.log(arcleId);
},

跳转后页面js文件

onLoad: function (option) {
	var id =option.id
	console.log(id)
},

（2）switchTab跳转传值

const app = getApp();
go_index:function(e){
	//获取身份id 保存到全局里
	var shenfen_id = e.currentTarget.id;
	app.globalData.shenfen_id = shenfen_id       //把本页面需要传递的参数保存在全局上

	wx.switchTab({
		url: '/pages/index/index',
	})
},

2.把参数保存在本地

back:function(e){
	var that = this;
	var value = e.currentTarget.dataset.concent;  --把本页面需要传递的参数保存在本地缓存里
	wx.setStorageSync('concent', value);

	wx.navigateBack({      --返回上一级页面页面c页面
		delta: 1,
	})
},

//c.js
onShow: function () {
	var that = this;
	// this.onLoad();
	var value = wx.getStorageSync('concent');  --从本地缓存获取需要的参数

	if (tittle_name == "选择学校") {
		that.setData({
		value: value,
		})
	}
	else {
		that.setData({
			value1: value,
		})
	}
},

8、小程序触发事件

onUnload  页面被关闭或卸载时触发
onHide    页面隐藏时触发

9、事件冒泡

从里向外执行，先执行子级，在执行外层 如果要阻止事件冒泡，就不要用bindTap，用catchTap

10、列表页到详情页数据绑定

一、单一参数传递 (1)列表页 wxml:

<block wx:for="{{postlist}}" wx:for-index="item" wx:for-index="index">
	<view bindtap='binddetail' data-arcleId='{{item.arcleId}}'>
		<template is="postItem" data="{{...item}}"/>
	</view>
</block>

js:

binddetail: function (e) {
	var arcleId = e.currentTarget.dataset.arcleid; */列表的ID
	wx.navigateTo({
		url: "../detail/decor_datail?id=" + arcleId
	})
	console.log(arcleId);
},

(2)详情页

wxml:

<view class='title'> 
	<image src="{{postDatas.background}}" class='ptitle'/>
	</view>
	<view class='xia'>
		<image class='icon-img' src="{{postDatas.uer_img}}"/>
		<text>{{postDatas.user_name}}</text>
	</view>
	<view class='bottom-datail'>
	<view class='text-left'>
		<text>卧室</text>
		<text>{{postDatas.romm}}</text>
		<text>现代简约</text>
	</view>
	<view class='text-right'>
		<text>{{postDatas.picture_number}}</text>
	</view>
</view>

js:

onLoad: function (options) {
	var id = options.id;
	var postData = postsData.postlist[id];
	this.setData({
		postDatas:postData
	})
},

11、多项参数传递

原页面 js

choosecity: function () {
	var id = 1
	var city = this.data.afferent
	wx.navigateTo({
		url: 'switchcity?data=' + [id,city]
	})
	this.setData({
	})
},

跳转页面的js

onLoad: function(options) {
let dataArr = options.data.split(',');
	var id = dataArr[0];
	var citys = dataArr[1];
}

12、当text的文本超出固定的宽高时，显示省略用

.ds{
	display: -webkit-box;
	word-break: break-all;
	-webkit-box-orient: vertical;
	-webkit-line-clamp:2;  */显示几行的文字
	overflow: hidden;
	text-overflow:ellipsis;
}

13、同步缓存

wx.setStorageSync('key', {
	full:"傻叉",
	youis:"你才是"
})

14、后台星星评价展示到前端

wxml：

<block wx:for="{{one_star}}">
	<image src='../../../images/decormpany/selected.png'></image>
</block>
<block wx:for="{{two_star}}">
	<image src='../../../images/decormpany/selecthaf.png'></image>
</block>
<block wx:for="{{three_star}}">
	<image src='../../../images/decormpany/noselect.png'></image>
</block>	

js:

data: {
	services: '服务区域',
	the_type: "装修类型",
	the_style: "专长风格",
	icon_imagef: "../../../images/materal/down.png",
	icon_imagec: "../../../images/materal/down.png",
	icon_imaget: "../../../images/materal/down.png",
	num: 3,//后端给的分数,显示相应的星星
	one_star: '',
	two_star: 1,
	three_star: 1,
},


onLoad: function (options) {
	this.setData({
		one_star: this.data.num,
		two_star: 5 - this.data.num - this.data.three_star,
		three_satr: 5 - this.data.num - this.data.two_star
	})
	console.log(this.data)
}

15、禁止轮播触摸滑动

catchtouchmove='catchTouchMove'
	catchTouchMove: function (res) {
	return false
}

16、列表页到详情页时，动态的改变页面头部的标题

onLoad: function (options) {
	var that = this;
	that.setData({
		mername: options.mername//options为页面路由过程中传递的参数
	})
	wx.setNavigationBarTitle({
		title: that.data.mername//页面标题为路由参数
	})
}

17、请求获取数据

wx.request({
	url: app.apiUrl('c=shejishi/index&a=getlist'),
	data: { area: areaID, style: styleID, sort: index, page: page },
	header: {
		'content-type': 'application/json'
	},
	method: "GET",
	success: function (res) {
		var polist = res.data.data
		that.setData({
			polist: polist
		})
	},
	fail: function (res) {
		console.log('请求失败', res.data)
	}
})

18、小程序去掉button的border

button::after{ border: none; }

19、按钮点击切换样式事件

1、wxml

<block wx:for="{{plans}}" wx:key="index">
	<block wx:if="{{index==clickId}}">
	<button class='plan-order' bindtap='applon' style="background:rgb(204,204,204)" disabled='{{false}}' id='{{index}}'>您已预约</button>
	</block>
	<block wx:else>
	<button class='plan-order' bindtap='applon'  disabled='{{ture}}' id='{{index}}'>立即预约</button>
	</block>
</block>	

2、js

data{
	clickId:-1
}

applon:function(e){
	var that = this;
	var length = that.data.clickId;
	var index = parseInt(e.currentTarget.id);
	if (this.data.clickId == e.currentTarget.id) {
		this.setData({
			clickId: 1,
		})
		return;
	}
	that.setData({
		clickId: e.currentTarget.id,
		showmask: true,
		showdialog: true
	})
	console.log(e.currentTarget.index)
},

20、当页面加载请求时，立即获取请求的数值获取到的是初始化值，要想获取到请求的数值，要用到定时，多少秒后取到值

setTimeout(function(){
	that.distance()
},1000)  一秒后执行此函数

21、点击跳转到顶部

wx.pageScrollTo({
	scrollTop: 0
})

22、小程序将页面生成二维码

1、二维码B场景（不限数量）

onLoad: function(opctions) {	
	if (typeof (opctions.scene) != "undefined") {
		var id = decodeURIComponent(opctions.scene)
		console.log('scence',id)
	} else {
		var id = opctions.id
	}
}

wx.request({
	//url: "https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token="+tocken,
	url: "https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=" + tocken,
	//url: app.apiUrl("c=index&a=getAccessToken="),
	//url:'https://www.xtuan.com/api/weixinapp/?c=index&a=getAccessToken=',
	data: {
	//access_token:tocken,
		scene: id,
		page: "pages/index/decorcompany/decorcompany_detail",
		width: 400
	},
	method: "POST",
	responseType: 'arraybuffer', //设置响应类型
	success(res) {
		var base64 = wx.arrayBufferToBase64(res.data); //对数据进行转换操作
		//console.log(base64)
		that.setData({
			imgurl: "data:image/png;base64," + base64,
			imgurls: base64
		})
	},
	fail(e) {
		console.log(e)
	}
})

2、二维码C场景（限数量）

onLoad: function(opctions) {	
	var scene = decodeURIComponent(opctions.scene)
}
wx.request({
	url: "https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token="+tocken,
	//url: "https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=" + tocken,
	//url: app.apiUrl("c=index&a=getAccessToken="),
	//url:'https://www.xtuan.com/api/weixinapp/?c=index&a=getAccessToken=',
	data: {
		page: "pages/index/decorcompany/decorcompany_detail?id="+id,
		width: 400
	},
	method: "POST",
	responseType: 'arraybuffer', //设置响应类型
	success(res) {
		var base64 = wx.arrayBufferToBase64(res.data); //对数据进行转换操作
	//console.log(base64)
		that.setData({
			imgurl: "data:image/png;base64," + base64,
			imgurls: base64
		})
	},
	fail(e) {
		console.log(e)
	}
})

23、针对多个页面到同一个页面选取值后，返回到原来页面

A页面：

<view class="flex-wrp">
	<text style="width: 32%;">选择城市</text>
	<input style="width: 68%;" type="text" bindtap="city" placeholder="请选择城市" value="{{cityName}}"/>
</view>

.js文件
Page({
	data: {
		cityName:"深圳"  #用来回传的关键字，默认深圳
	},
	city: function(e){
		wx.navigateTo({
			url: '../city/city'
		})
	}
})

A页面跳转B页面之后返回：

cityNameClick: function (event) {
	var cityName = event.currentTarget.dataset.cityname;
	console.log(cityName);

	var pages = getCurrentPages();
	var currPage = pages[pages.length - 1];  //当前页面
	var prevPage = pages[pages.length - 2]; //上一个页面

	//直接调用上一个页面的setData()方法，把数据存到上一个页面中去
	prevPage.setData({
		cityName: cityName
	})
	wx.navigateBack();
}

24、微信前端获取二维码

//获取tocken
gettocken: function() {
	var that = this
	wx.request({
		url: app.apiUrl('c=index&a=getAccessToken'),
		data: {},
		method: "POST",
		header: {
			'content-type': 'application/json'
		},
		success(res) {
			console.log(res.data)
			var tocken = res.data.data.access_token
			console.log(tocken)
			that.setData({
				tocken: tocken
			})
			wx.setStorageSync('tocken', that.data.tocken)
		},
		fail(e) {
			console.log(e)
		}
	})
},

//生成二维码
getQucard: function(e) {
	var that = this
	var id = that.data.id
	var imgurl = that.data.imgurl
	var tocken = that.data.tocken
	console.log(tocken)
	wx.getStorage({
		key: 'tocken',
		success: function(res) {
			var tocken = res.data
			if ((tocken == '') || (tocken == null) || (tocken == undefined)) {
				that.getupdate()
			}
			that.setData({
				tocken: res.data,
			})
			wx.request({
				url: "https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=" + tocken,
				data: {
				//access_token:tocken,
					scene: id,
					page: "pages/index/designer_detail",
					width: 400
				},
				method: "POST",
				responseType: 'arraybuffer', //设置响应类型
				success(res) {
					var arr = []
					var base64 = wx.arrayBufferToBase64(res.data); //对数据进行转换操作
					var bases = "data:image/png;base64," + base64
					arr.push(bases)
					//console.log(base64)
					that.setData({
					imgurl: "data:image/png;base64," + base64,
					imgurls: base64
					})
				},
				fail(e) {
					console.log(e)
				}
			})
		}
	})
	// console.log(imgurl)
}

25、微信手机号码验证

var tele = 15515001797
var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
if (tele == '') {
	wx.showToast({
		title: '请输入手机号码',
		icon: 'success',
		duration: 2000
	})
} else if (tele.length != 11) {
	wx.showToast({
		title: '请重新输入号码',
		icon: 'success',
		duration: 2000
	})
} else if (!myreg.test(tele)) {
	wx.showToast({
		title: '手机号错误！',
		icon: 'success',
		duration: 2000
	})
}