小程序啦啦啦啦

本文介绍了小程序的开发细节,包括自定义导航样式、tabBar配置、窗口设置、文字省略、背景渐变、页面传值、for循环使用、request请求、加载效果、页面生命周期以及iconfont字体图标库的使用。此外,还讲解了组件的创建、通信、属性和生命周期,以及自定义组件在代码维护中的优势。
摘要由CSDN通过智能技术生成

自定义导航,加入这个属性之后,头部的样式会消失

"navigationStyle":"custom"

设置tabBar选中文字的颜色

"selectedColor": "#D81E06"

tabBar配置

{
        "pagePath": "pages/index/index", // 显示的页面
        "text": "首页", // 文字
        "iconPath": "./icons/33.png",// 刚开始显示的背景颜色
        "selectedIconPath": "./icons/36.png" // 选中的时候的背景图片
      },

window配置

   
    "navigationBarBackgroundColor": "#0183FC", // 头部的背景颜色
    "navigationBarTitleText": "CNODEJS", // 头部的文字
    "navigationBarTextStyle":"white", // 头部的文字颜色 只能是白色或者黑色
    "enablePullDownRefresh": true, // 开启下拉刷新 
     "backgroundTextStyle":"dark", // 与上面的配合使用 只能是dark或者line

超出两行就显示…并且隐藏

  display:-webkit-inline-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

超出一行就隐藏并且显示省略号

  white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

背景渐变

   background: linear-gradient(to right, red, orange); 

页面传值 在第一个页面传好值 在第二个页面的初始化加载的时候就替换数据

  let pages = getCurrentPages();
  let prevPage = pages[pages.length - 2];
  this.setData({
     lists:prevPage.data.datas

在这里插入图片描述
在这里插入图片描述

小程序中的for循环

wx:for="{{list}}" 
wx:key='index' 
wx-for-item="item"
wx-for-index="index"
如果是二维数组或者更多的时候循环,应该把wx-for-item="item2" wx-for-index="index2"

小程序中是发送request请求

let _this = this; // 嵌套需要重新定义一下this的指向 
wx.request({
	url:"  地址  ",
	methods:" GET " ,
	data:{
	limit:3; // 返回三条数据
	},
	success(res){
		console.log(res); // 请求成功
		if(res.statusCode>=200 && res.statusCode<300){										   		
		     if(res.data.success){
		     _this.setData({
		      lists:res.data.data
        })
	 }
	}
		
	}
})

## 也可以封装一个request来请求

或者用箭头函数 不用重新定义this
success:(res)=>{
	if(res.statusCode>-200 && res.statusCode<300){
		  if(res.data.success){
		     _this.setData({
		lists:res.data.data
})
		}
}
}

请求数据出来之前加一个loading事件 会有一个等待的效果

wx.showLoading({
	title:"加载中..."
}) // 加载请求request前就行
在请求完成关闭
complete(){
	wx.hideLoading();
} // 在request请求后添加

页面数据请求完这个方法写在onLoad里面

在这里插入图片描述

iconfont 字体图标库的在线使用方法:

先把需要的图片加入项目 然后在打开那个在线连接 在项目中新建一个iconfont 文件 把内容赋值进去 然后如果在多个文件中都需要的话 那就在app.wxss中全局进入

页面跳转的方法:

1.<navigator url='地址'></navigator>
2.  wx.navigateTo({
        url:"/pages/xq/xq?xqa="+this.data.xq
      })

自定义组件:可以多次使用 ,也可以把页面拆分成不同的模块,降低耦合,有助于代码的维护。

自定义组件:
1.先创建一个component文件夹,和page同级,在里面创建component,然后右击选择新建component自定义组件
2.如果想使用这个组件,可以在json文件中引入

{
  "usingComponents": { // 这个地方存放引入的组件
    "xq":"../../component/xq" //  引入的代码
  }
}

3.然后在页面中

<xq></xq>

4.这样就实现了简单的引入组件

组件的方法需要写在methods:{}中 这也是组件与其他页面的区别
接收父组件传过来的值 properties:{} 里面的值也是对象的形式

注意事项:
父组件中:引入自定义组件中想显示内容就顶一个插槽 slot 例如

<<xq>
	<slot>哈哈</slot>
</xq>

只能使用一个插槽,想使用多个插槽需要在js中声明一下,具体百度

options:{
	multipleSlots:true
}

开启样式隔离:// 一般不用
options:{
styleIsolation:“isolated” // 表示样式隔离,自定义组件内外
}

组件之间的通信

父传子:
子传父:

监听事件:
在子组件 触发事件 triggerEvent()
hanfleTap(){
this.triggerEvent(‘监听的对象 test’,{
val:this.data.val

})
}

在父组件中

handleTap(e){
通过e可以拿到传过来的数据 对象
console.log(e.detail);

}

在父组件中可以用thislselectComponent 获取子组件的实例对象

组件其他的属性:

properties:组件对外接收的数据
data:存放数据
observers:监听器 ,可以监听组件中的dta或者properties的数据改变,当数据发生改变的时候可以触发里面的方法

组件的生命周期

1.create 组件实例刚被创建的时候执行 setData还不能用
2.attached 组件 的实例化都做完了 开始渲染页面了 可以使用setData (	发送ajax请求然后3.设置data 可以放在attached中)
4.ready 在页面中能看到完整的组件 页面已经渲染完成了
5.moved  组件实例被移动到经一个节点的时候触发 不常用
6.detached 组件被销毁的时候执行
7.err  组件报错的时候执行
组件的生命周期推荐写在 lifetimes:{}里面
计算属性:

让组件不以节点的形式,
在options中
virtualHoat:true
这样会造成组价内部不能加样式 会和前面的混合

小程序中的生命周期分为全局的与页面的

应用的生命周期 入口文件 app.js

1.onLaunch 应用第一次启动就会触发的事件 ( 获取用户信息)
2.onShow    应用被用户看到的时候触发  (显示,当这个页面重新被看到的时候对数据或者页面做一些重置)
3.onHide     应用被隐藏的时候触发   (点击切换后台就是实现了应用隐藏,暂停或者清除一些定时器 不然浪费内存)
4.onError 当应用代码发生报错的时候触发     err形参 (在应用代码报错的时候,手机用户的错误信息,通过异步请求,讲错误信息发送出去)
5.onPageNotFound  应用页面找不到就会触发也算是报错就出发的一, 当这个应用第一次启动的时候找不到入口文件的时候才会触发

页面的生命周期

1.data   存放页面渲染的数据
2.onLoad   里面发送异步请求,初始化页面数据
3.onShow  页面显示
4.onReady  页面渲染完毕
5.onHide  页面隐藏 
6.onUnload   监听页面卸载
7.onpullDownRefresh  监听用户下拉动作
8.onReachBottom  页面上拉触底事件·的处理函数
9.onShareAppMessage  哟用户点击右上角触发
10.onPageScroll  页面滚动触发事件的处理函数
11.onResize 页面尺寸改变时触发
12.onTabItemTap  当前是tab页时,点击tab时触发

页面的生命周期写在 pageLifetimes里面

behaviors

用于组件之间代码共享

自定义组件可以引用内置的behavior来获取内置组件的一些行为
wx://from-field 内置behavio

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值