微信小程序学习笔记

最新推荐文章于 2024-06-03 01:04:16 发布

丘比特灬忧伤

最新推荐文章于 2024-06-03 01:04:16 发布

阅读量522

点赞数

分类专栏： WX

本文链接：https://blog.csdn.net/qq_45135053/article/details/108458596

版权

WX 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

微信小程序学习笔记

小程序的代码构成
(1) json配置：配置文件，默认的有app.json,project.config.json和page.json
(2) wxml模板：类似html文件
(3) wxss样式：类似css文件
(4) js文件
小程序启动流程
在这里插入图片描述

1.小程序配置

一.app.json的配置

app.json是全局的入口很重要

1.entryPagePath

这个参数设置的是小程序启动后你看到的页面，默认的是你pages参数的第一个路径，你可以设置entryPagePath这个参数来设置你想进入后的首页
例如：在这里插入图片描述
我没有设置entryPagePath这个属性它默认展示的是我pages路径的第一个路径，而此时我下想要展示的是home这个页面，我只需要添加设置如下，就可以改变进入小程序加载的第一个页面

2.pages

pages用来说明有哪些页面组成和每个页面相对映的路径，pages的设置有两种方法
方法一：生成文件保存，pages自动添加
方法二：在pages中设置路径，会自动生成文件

3. window

用来设置小程序的状态栏、导航条、标题、窗口背景色。
在这里插入图片描述
(1)navigationBarBackgroundColors
设置导航栏背景颜色，只支持16进制颜色设置不支持颜色单词
(2)navigationBarTitleText
设置导航栏的文字，支持String

(3)navigationBarTextStyle
设置导航栏文字的颜色，只支持white和black两中颜色也就是黑色和白色
(4)enablePullDownRefresh
是否配置全局下来刷新，支持布尔值，默认是false不允许
在这里插入图片描述
(5)backgroundColor
设置窗口的背景颜色，支持16进制的颜色设置，并且只有在下拉加载和上拉加载的情况下才能显现出来

(6)backgroundTextStyle
设置下拉loading的样式，有dark和light样式
(7)onReachBottomDistance
页面上拉触底事件触发时距页面底部距离，单位为 px

4.tabBar

导航栏的设计
(1)color:导航栏的字体颜色，支持16进制
(2)selectedColor：导航栏选中时的字体颜色，支持16进制
(3)borderStyle：导航栏边框的颜色，仅支持black和white
(4)backgroundColor:导航栏的背景色，仅支持16进制
(5)position:导航栏的位置，仅支持top和bottom
(6)list:导航栏列表，数组形式，最少两个最多五个
list:[{
pagePath:页面路径得在pages中定义过的,
text：导航栏上面的字体，
iconPath:用来放导航栏上面的图标,
selectedIconPath:选中时的图图片路径
}]

networkTimeout

请求超时时间,类型都是number单位都是毫秒
(1)request
(2)connectSocket
(3)uploadFile
(4)downloadFile

二.page.json的配置

page.json文件和app.json文件很相似，但是app.json是全局配置，page.json是单个页面的配置文件，它里面的配置和app.json配置中window配置项很相似,但是了在page.json的配置优先级比app.json配置高
(1)nacigationBarBackgroundColor:导航栏背景颜色，仅支持 16进制的颜色；
(2)navigationBarTextStyle:导航栏标题的颜色仅支持black和white;
(3)navigationBarTitleText:导航栏标题文字内容
(4)backgroundColor：窗口背景颜色,仅支持16进制颜色
(5)backgroundTextStyle：下拉loading的样式,仅支持dark/light
(6)enablePullDownRefresh：是否开启当前页面下拉刷新，boolean值
(7)disableScroll:boolean值，设置为 true 则页面整体不能上下滚动。只在页面配置中有效，无法在 app.json 中设置

2.注册小程序

App的注册，一般在这个文件中我们长做：
1.判断小程序的进入场景
2.监听生命周期函数，在生命周期中执行对应的业务逻辑，比如在某个生命周期函数中获取微信用户信息
3.App()实例只有一个是一个全局共享的单例对象，我们可以将一些共享数据放在这里
例如放置一个全局对象

App({
	globalData:{
    	name:'张三'
 	 }
})

在其他的组件或者页面中可以使用

page({
	data:{
		userName:''
	},
	onLoad(){
		const appInstace = getApp();
		const globalName= appInstance.globalData.name;
		this.setData({
			"userName":globalName
		})
	}
})

小程序的生命周期

onLauch:小程序初始化完成时的回调函数,只会执行一次
返回参数：

{
	path:'String',//启动小程序的路径
	scence:'Number',//进入小程序的场景
	query:'Object',//进入小程序的query参数
	shareTicket:'String',//小程序的转发	
	referrerInfo:'Object'//来源信息，从另一个小程序、公众号或 App 进入小程序时返回。否则返回 {}
}
//详细内容在微信官方文档的API的小程序-生命周期-wx.getLanuchOptionsSync中

onShow：小程序显示的时候回调函数，可能执行多次
返回参数：返回的参数和onLauch的参数一样
详细内容在微信官方文档的API的小程序-应用级事件-wx.onAppShow中

onHide：小程序隐藏时的回调函数，和wx.onAppHide的回调时机一致

onError：小程序产生错误时的监听函数和wx.onError的回调时机一致

onPageNotFound:页面不存在时的监听函数
返回参数：

{
	path:'String',//不存在页面的路径
	query:'Object',//不存在页面的query值
	isEntryPage:'Boolean'//是否本次启动的首个页面（例如从分享等入口进来，首个页面是开发者配置的分享页面）
}
//详细的内容在 微信官方文档API-小程序-wx.onPageNotFound

在什么地方判断小程序的打开场景
在App.js文件中的onLaunch和onShow生命周期中

App({
	onShow(options){
		console.log(options);
		switch (options.scene){
			case 1001 :
			break;
			case 1005 :
			break;
		}
	}
})

获取用户信息
方法一：在appjs的生命周期函数中调用接口获取用户的信息

App({
	onShow(){
		wx.getUserInfo({
			success:function(res){
				console.log(res)
			}
		})
	}
})

方法二：通过给button按钮添加点击事件获取用户的信息
在wxml文件中添加一个button按钮

<button 
	size="mini" 
	open-type="getUserInfo"
	bindgetUserinfo="handleGetUserInfo"
>前往授权</button>

在js文件中

Component({
  methods: {
    handleGetUserInfo(event){
      console.log('我点击了');
      console.log(event)
    }
  }
})

3.注册页面

就是page.js文件

Page({
	data:{},//页面初始化数据
	//页面初始化加载
	onLoad(){
		
	},
	//页面显示
	onShow(){
		
	},
	//页面初次渲染完成，代表页面已经准备妥当，可以和视图层进行交互
	onReady(){
	
	},
	//页面隐藏
	onHide(){
	
	},
	//页面摧毁时执行
	onUnload(){
	},
	//页面下拉刷新时执行
	onPullDownRefresh(){
	},
	//页面触底时执行
	onReachBottom(){
	
	},
	//页面被用户分享时执行
	//监听用户点击页面内转发按钮（button 组件 open-type="share"）或右上角菜单“转发”按钮的行为，并自定义转发内容。
	onShareAppMessage(res){
		if (res.from === 'button') {
	      // 来自页面内转发按钮
	      console.log(res.target)
	    }
	    return {
	      title: '自定义转发标题',
	      path: '/page/user?id=123'
	    }
	},
	//当页面滚动的时候执行
	onPageScroll(event){
		event:{
			ScrollTop:'Number'//距离顶端的距离
		}
	},
	//当前页是 tab 页时，点击 tab 时触发
	onTabItemTap(item){
		console.log(item);
		item:{
			path:'String',//该页面的路径
			index:'String',//该页面在tableItem的序号从0开始
			text:'String'//被点击的tableItem的文字内容
			
		}
	},
	//收藏按钮点击
	onAddToFavorites(res){
		res:{
			webViewUrl:页面中包含web-view组件时，返回当前web-view的url
		}
		return {
			title: '自定义标题',
		    imageUrl: 'http://demo.png',
		    query: 'name=xxx&age=xxx'
		}
	}
	
})

4.组件的使用

组件最好是另外创建一个components的文件夹，里面放常用的组件
在这里插入图片描述

单个页面组件的使用

1.在使用页面的的json文件中配置

{
	"usingComponents":{
		//"组件名":"组件的地址",组件名称尽量是不要出现大写字母
		"w-nav":"/components/w-nav/w-nav"
	}
}

2.在使用页面的wxml文件中直接使用

<w-nav><w-nav>

这样组件就会在页面中显示了

全局组件的使用

1.在app.json文件中

{
	"usingComponents":{
		//"组件名":"组件的地址",组件名称尽量是不要出现大写字母
		"w-nav":"/components/w-nav/w-nav"
	}
}

2.在全部页面中都可以使用

<w-nav><w-nav>

组件的样式

一.如果元素都是添加的class样式的话，为了防止样式错乱，组件中禁止使用id，标签和属性选择器
1.组件中样式不会对页面的样式造成影响
2.页面中的样式也不会对组件的样式造成影响

二.如果想要组件和页面之间的样式有相互的影响
在组件中添加

Components({
	options:{
	    // styleIsolation:"isolated"//不会相互影响
	    styleIsolation:"apply-shared"//会相互影响
	  }
})

组件和页面之间的相互通讯

1.页面给组件传递数据

(1)在组件中的js文件中

Components({
	properties:{
		title:String,//对应的类型
		title:{
			type:String,
			value:'默认值',
			observe:function(newval,oldval){
				//当这个值发生改变的时候调用
				//newval:"新的值"
				//oldval:"旧的值"
			}
		}
	}
})

(2)在页面中的使用
在页面的json文件中

{
	"usingComponents":{
		"my-app":"/components/my-app/my-app"
	}
}

在页面的wxml文件中的使用

<my-app title="哈哈哈"></my-app>
<!--这里也可以传递变量，可以在页面的js文件中的data属性中添加一个变量 -->
<my-app title="{{text}}"></my-app>

2.页面给组件传递样式

(1)在组件的js文件内

Components({
	externalClasses:["titleColor"]
})

(2)在组件的wxml文件中

<text class="titleClass"></text>

(3)在页面的wxml文件中使用组件

<my-app titleClass="red"></my-app>

(4)在页面的wxss文件中添加名字为red的class类

.red{
	color:red;
}

也就是说在页面使用组件的时候传递过去一个titleClass的属性，后面跟的是样式名称，这个样式应该设置在页面的wxss文件中，而在组件的json组件中添加externalClasses中添加一个传递过来的titleClass，

3.页面给组件传递内容插槽slot的使用

(1)单个插槽的使用
直接使用就可以了
(2)多个插槽的使用
注意事项，使用多插槽的时候需要给每一个插槽定义一个名字也就是每一个slot标签添加一个name属性,并且需要在组件的js文件的options的multipleSlots设置为true
在组件的wxml文件内

<view>
	<view><slot name="slot1"></slot></view>
	<view><slot name="slot2"></slot></view>
	<view><slot name="slot3"></slot></view>
</view>

在组件的js文件中配置

Components({
	options:{
		multipleSlots:true
	}
})

在页面的wxml文件中的使用

<my-slot>
	<button slot="slot2">按钮</button>
	<slider slot="slot1"></slider>
	<text slot="slot3">内容</text>
</my-slot>

4.组件内部给页面传递事件

(1)在组件的wxml文件中

<button bind:tag="handleIncrement">+1</button>

(2)在组件的js文件中

Components({
	//在组件中使用方法应该写在methods中
	methods:{
		handleIncrement(){
			//this.triggerEvent('事件名',{//这是传递的参数},{})
			this.triggerEvent('increment',{},{})
		}
	}
})

(3)在页面的wxml文件中

<view>当前计数：{{counter}}</view>
<my-app bind:increment="handlerIncrement"></my-app>

(4)在页面的js文件中

Page({
	data:{
		counter:0
	},
	handlerIncrement(event){
		//如果传过来数据，从event中取出
		this.setData({
			"counter":this.data.counter++
		})
	}

})

5.直接获取组件对象来修改数据或者调用方法

在页面中可以直接获取组件对象
(1)在页面的wxml文件内

<my-app id="my-app"></my-app>
<button bind:tag="getMyappObj"></button>

(2)在页面的js文件内

Page({
	getMyappObj(){
		const myAppObj=this.selectComponent("#my-app");
		console.log(myAppObj)
	}
	
})
//如果想改变组件中的数据，尽量不要直接改变组件中的数据，尽量调用组件中的方法，使用组件内自己的方法改变组件的数据值

6.组件中的js文件

Component({
	//使用者传递过来的数据
	properties:{
		key:{
			type:类型,
			value:默认值,
			监测数据发生变化
			observer:function(newVla,oldVal){
				newVla是改变的值，
				oldVal是原来的值
			}
		}
	},
	//组件内部的数据
	data:{
		key:value
	},
	//组件中方法，跟页面中的方法放的位置有点不同，页面中可以直接放在page({})中,而组件中的方法必须放在methods中
	methods:{
		functionName(){
		}
	},
	options:{
		//styleIsolation:设置组件和页面之间的样式是否相互影响
		// styleIsolation:"isolated"//不会相互影响
	    styleIsolation:"apply-shared"//会相互影响
	    //multipleSlots:设置组件是否能够使用多插槽
	    multipleSlots:true
	},
	//用于监测data和properties中数据的改变,返回值没有oldVal
	observers:{
		key:function(newVal){
			newVal:改变的值
		}
	},
	//设置页面传递过来的样式,数组放页面传递进来的样式
	enternalClasses:[],
	//监听页面的生命周期
	pageLifetimes:{
		show(){
			//监听组件所在页面显示出来时
		},
		hide(){
			//监听组件所在页面隐藏时
		},
		resize(){
			//监听页面尺寸改变时
		}
	},
	//监听组件的生命周期
	lifetimes:{
		created(){
			//监听组件创建时
		},
		attached(){
			//监听组件加载到页面时
		},
		ready(){
			//组件被渲染时
		},
		moved(){
			//组件被移动到另外一个节点时
		},
		dettached(){
			//组件被移出掉时
		}
	}
})

丘比特灬忧伤

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
微信小程序学习笔记

小程序学习笔记一.app.json的配置app.json是全局的入口很重要，常用的有pages,window1.entryPagePath这个参数设置的是小程序启动后你看到的页面，默认的是你pages参数的第一个路径，你可以设置entryPagePath这个参数来设置你想进入后的首页例如：我没有设置entryPagePath这个属性它默认展示的是我pages路径的第一个路径，而此时我下想要展示的是home这个页面，我只需要添加设置如下，就可以改变进入小程序加载的第一个页面2.pagespa
复制链接

扫一扫