微信小程序基础学习

---

一.json配置页面

page页面配置的优先级高于app应用的配置

---

二、WXML模板

1.三目运算

注意：参与逻辑运算的部分包含在{{}}内部

 <image src="{{isActive?'/pages/image/star1.png':'/pages/image/star2.jpg'}}"></image>

2.插值运算

<text>{{10+100}}</text>

三.wx:for与wx:key列表渲染

注意： {{ {} }}之间要有空格

<view>{{ {username: "王"} }}</view>
<view wx:for="{{ {username: '王晴'} }}" wx:key="item">		
	{{item}}
</view>

2.wx:for-iten与wx:for-index

<view wx:for="{{students}}" wx:key='item' wx:for-item="students"> 
 	<text>{{index}}--{{students.username}}</text>
</view>

四.条件渲染wx:if与hidden属性

1.wx:if与hidden的使用

wx:if的使用

<!-- 2.显示用户是几级用户 -->
<view wx:if="{{level==1}}">该用户为1级用户</view>
<view wx:elif="{{level==2}}">该用户为2级用户</view>
<view wx:else="{{level==3}}">该用户为高级用户</view>

hidden的使用

<!-- 3.hidden是否显示隐藏内容 -->
<view hidden="{{isVip}}">用户是Vip</view>

2.wx:if与hidden的区别

wx:if为真时渲染在页面中；为假时，不在页面中渲染
hidden无论为真为假都在页面中渲染
因此：如果要频繁切换内容显示时，应使用hidden

五.template模板

1.定义模板 name=‘listItem’

<template name='listItem'>  
	<view>   	
		<image src="{{url}}"></image>    
	        <text>{{username}}</text>
       </view>
 </template>

2.使用模板

data为引用的数据
 data: {   
 	 user: {      
 	 	username: '王晴',     
 	        url: '/pages/image/star1.png'  
 	 }  
}

<template is="listItem" data="{{...user}}">{{item}}</template>

六.tabBar底部导航

在app.json页面的对象下设置“tabBar”属性

"tabBar": {    
	"color": "#f00",         //默认的导航文字颜色
	"selectedColor": "#f00", //选中时导航的文字颜色    
	"borderStyle": "black",  
	"list": [      
		{"selectedIconPath": "/pages/image/icon-test.png",      //选中导航图标时的图像
		"iconPath": "/pages/image/star1.png",
		//未选中导航图标时的图像      		"pagePath": "pages/02wxml/wxml",
		//选中导航时的跳转页面      
		"text": "首页"
		//底部导航文字
		},       
		{ "selectedIconPath": "/pages/image/yiliao.png",      
		"iconPath": "/pages/image/star2.jpg",      		"pagePath": "pages/04list/list",      
		"text": "日志"}    	
	]  },

七.wxs的使用相当于js

每一个wxs都相当于一个module
注意：必须完整写为setPrice: setPrice，不可只写setPrice,且结尾不可有分号

1.逻辑层

<wxs module="obj">  
	var setPrice = function(price){    
		return price+'￥';  	
	}  
	module.exports = {   
		setPrice: setPrice  
	}
</wxs>

2.视图引用wxs层

<view>{{obj.setPrice(price)}}</view> //obj对应wxs的模板名称name

八.组件（以轮播图为例）

九.事件

1.事件参数e

事件函数在页面.json中与data同级
参数e包含了各种数据（从哪个对象触发的、是么时间、什么位置、打开页面花费的事件timStamp）

tagEvent(e){    
	console.log(e)  
},

2.组织冒泡事件catchtap

<view id="outer" catchtap="handleTap1">  outer view 
	<view id="middle" catchtap="handleTap2">    middle view    
		<view id="inner" bindtap="handleTap3">      
			<button>inner view</button>    
		</view>  
	</view>
</view>

十. api

1.视图页面

<form bindsubmit="searchWeather">  
	//name="city"的名称通过事件参数e传递
	<input name="city" type="text" placeholder="请输入"></input>  
	<button form-type="submit">搜索</button>
</form>
<view>  当前温度：{{tmp}}</view>

2.逻辑页面

data: {    
	tmp: null
  }, 
searchWeather(e){    
	console.log(e);    
	let city = e.detail.value.city;    
	console.log(city);    
	//将this转储在that中
	let that = this;    
	wx.request({      
		url: 'https://free-api.heweather.net/s6/weather/now',      
		data: {        
			location: city,        
		key: "3c497450d8e44c5280421ceaba1db581"      
		},      
		success(res){        
			console.log(res);        
			that.setData({          
			tmp: res.data.HeWeather6[0].now.tmp        })      	}    
	})  
}