微信小程序入门

微信小程序规定所有设备屏幕宽高均为750rpx

每一个用户可能访问的页面,需要在全局配置中来登记它的访问路径

微信小程序文件类型

 json是配置文件 
 js是脚本文件  
 wxml是视图文件 
 wxss样式表文件

公用的属性标签可以有

 class 类  id 
 style 样式 
 bingtap绑定事件  
 hidden 属性(true就是隐藏) 
 data-use-name 自定义数据
 view就是div容器元素

微信小程序冒泡与非冒泡

'''
冒泡事件:
当一个组件上的事件触发后,该事件会像父节点传递 bindtap 
非冒泡事件:
当一个组件上的事件触发后,该事件不会像父节点传递 catchtap
'''

微信小程序页面脚本的生命周期函数

	onLoad:function(options){}页面初始化调用一次
	onShow:function(options){}页面每一从隐藏变成显示可见调用一次
	onReady:function(options){}页面初始渲染完成,可以交互的时候调用一次

	onHide:function(options){}页面每一次隐藏的时候调用一次
	onUnload:function(options){}页面关闭,或者卸载的时候

	需要更新数据 this.setData({})方法
	微信小程序改变值不能直接赋值
				

微信小程序运行基本环境与架构

navigator组件_导航页

	open-type属性  值redirect 不能直接返回的
		        值navigate可以返回的是默认的 (有返回键位)   
		        值switchTab 会更改tabBar组件_底部标签栏UI
	hover-class属性  被点击的出现的样式 需要在样式文件写样式 比如color  
		注意!!如果和class 都同时存在,谁在后面谁是最后的颜色
	style='display: inline;'  加上这个 属性可以让navigator在两个text中间   三个组件文字变成一行

text组件_默认文字

      只能包含纯文本,其他组件都将被忽略掉 

      hidden属性 默认值false 这个元素总要先渲染生成的 正常使用开销小 初始化开销大
      对于hidden而言即使用户得到数据 ,服务端没有编辑生成这个在初始化也会生成这么一个元素
      对于可见性需要频繁切换的时候不建议使用条件渲染
      (条件渲染就是 wx.if)
	
         

tabBar组件_底部标签栏

	
tabBar": {
"color":#000",#默认颜色
    "selectedColor": "#CD5C5C",#点击颜色
   "list": [
    {
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "static/tabbar/ic_menu_choice_nor.png",
      "selectedIconPath": "static/tabbar/ic_menu_choice_pressed.png"
    },
],

}

配置全局导航栏样式

在全局配置中
app.json文件写入
#例子
"window":{
"navigationBarTextSyle":"black"
}

swiper 轮播图

	swiper-item属性必须在swiper里面 ,他是属于列表
	indicator-dots={{true}}属性 面板指示 (会出现小圆圈)
	current='0' 控制幻灯片排行位置属性(0是默认的)
	previous-margin左边边角属性 
	例子:
		previous-margin='50rpx'
	next-margin右边边角属性
	例子:
		next-margin='50rpx'

button 摁扭组件

	bindtap 属性事件绑定
	

微信发送请求

#reuest
wx.reuest({
url:""地址
method:"GET"请求方式
data:{数据1,数据2}
header:{请求头}})




success:function(res){},#将接收的respoend的回调函数
fail:function(res){},#没有受到respoend调用失败的时候
success:function(res){},#不论调用成功失败都会执行的函数

微信动态设置导航栏loading(等待)状态和标题

wx.showNavigationBarLoading()#在页面导航栏标题左方显示一个loading(暂停动画)
wx.hideNavigationBarLoading()#在页面导航栏标题左方隐藏一个loading(暂停动画)
wx.setNavigationBarLoading()#在页面动态的设置标题

页面事件处理函数与自定义页面转发

onPullDownRefresh#用户下拉页面刷新被调用
onReachBottom#用户上划触底页面刷新被调用
onPageScroll#用户在页面上滑动时被调用
onShareAppMessagel#用户分享的时候被调用

组件化开发

什么是组件

#组件就是以某种方式对业务逻辑和功能进行封装。

如何定义组件

特点
高内聚
	 一般HTMl css js封装在统一的内容
可复用