Swpier轮播图组件使用
<!-- swiper组件默认高度为150px -->
<!-- circular 表示衔接滑动,默认为false,如果需要头尾衔接轮播则需要为true -->
<!-- autoplay 表示自动播放 -->
<!-- interval 滑动间隔时间,毫秒为单位 -->
<!-- indicator-dots 是否显示索引指示点 -->
<!-- indicator-active-color 激活索引点的颜色 -->
<swiper>
<swiper-item></swiper-item>
<swiper-item></swiper-item>
</swiper>
navigator导航组件使用
作用:用于页面的跳转
属性:
url
:当前小程序内跳转的链接,后加路径(可绝对路径,用’/'开头;也可以用相对路径),相当于vue中路由的push,有后退键.
open-type:
跳转类型,同于控制跳转的方式,redirect表示替换前一个页面但不允许跳转tabbar页面(底部导航栏页面),如果需要跳到tabbar,需要使用switchTab.相当于vue中路由的replace,相应于wx.redirectTo(Object Object)
<navigator url="/pages/index/index" open-type="redirect">
//可看做为vue的router-link
通过redirect方式跳转
</navigator>
<navigator url="/pages/index/index" open-type="switchTab">
跳到底部导航栏的页面
</navigator>
亦可以用js控制跳转
函数名(){
wx.redirectTo({
url:'/pages/index/index'
})
}
rich-text富文本组件使用
rich-text标签,属性node–节点列表
用于处理服务器返回html片段信息
<rich-text node="<h1>大标题</h1>"></rich-text>
button按钮组件使用
常用属性:
open-type
:
contact–打开客服会话
share–触发用户转发
getPhoneNumber–获取用户手机号,可通过bindgetphonenumber="函数"来获取用户输入信息
getUserInfo–获取用户信息
launchApp–打开app
<button open-type="share">点我转发</button>
icon图标组件使用
属性:
type
success等
color
<icon type="success"></icon>
单选框组件使用
需要用radio-group包起来
绑定选中事件 bindchange
checked
默认选中属性
<radio-group>
<radio value="male">男</radio>
<radio value="female">女</radio>
</radio-group>
复选框组件使用
注意事项跟单选框相似
<checkbox-group bindchange="getHobby">
<checkbox value="game">玩游戏</checkbox>
<checkbox value="movie">看电影</checkbox>
<checkbox value="eat">吃饭饭</checkbox>
</checkbox-group>
tabBar全局底部栏导航组件
在全局app.json文件中配置
list中只是2项至少5项
"tabBar":{
color:'文字颜色',
selectedColor:'被选中时的文字颜色',
"list":[{
//页面路径不能以'/'开头
"pagePath":'跳转页面的路径',
"text":'描述文字',
"iconPath":'图标的路径',
"selectedIconPath":'被选中时显示的图标的路径'
},{
"pagePath":'跳转页面的路径',
"text":'描述文字',
"iconPath":'图标的路径',
"selectedIconPath":'被选中时显示的图标的路径'
}]
}
自定义组件使用
从版本1.6.3开始
编写一个自定义组件,首先在json文件中进行声明-“component”:true
properties
:接收父组件的参数,类似于vue的props
{
"component":true
}
在需要使用组件的js页面中注册子组件
{
"usingComponents":{
"自定义子组件名":"子组件路径"
}
}
1. 父组件向子组件传值
父组件的wxml页面中
<diyComponent toSonData="OK" toSonData2="Yes"></diyComponent>
子组件js文件中接收参数
{
properties:{
toSonData:{
type:string,
value:'默认值'
},
//也可采用简写,属性名:类型,如果类型与传值类型不匹配会自动转换
toSonData2:String
}
}
子组件wxml中使用父组件的参数
<view>来自父组件的参数{{toSonData}}</view>
2. 子组件向父组件传值
子组件发射事件
methods:{
事件名(){
this.triggerEven('事件名',参数)
}
}
父组件监听事件
<diyComponent bind事件名="函数名></diyComponent>
3. 子组件接收父组件传值插槽
父组件wxml中
<diyComponent>这里是父组件通过插槽发送给子组件显示的内容</diyComponent>
子组件中
<view>
<slot>
</slot>
</view>
小程序的生命周期
App全局的生命周期
在app.js中使用
App({
onLaunch(){
console.log('小程序初始化触发,全局值触发一次')
},
onShow(){
console.log('小程序启动或者后台从前台显示时触发')
},
onHide(){
console.log('小程序隐藏或者切到后台时触发')
},
onError(){
console.log('小程序发生异常或脚本错误时触发')
},
})
页面的生命周期
在页面中的js文件中使用
onLoad
:页面加载触发,会慢于全局app加载,会在全局onLaunch后再触发,通常可在此时发送网络请求
options表示获取页面的参数,相当于路由中的query
onReady
:页面初次渲染完成时触发,此时可获取页面元素
onshow
:页面显示时触发
onHide
:页面隐藏时触发
如果从后台切到前台,会先触发app的onShow再触发页面的onShow;如果从前台切到后台,会先触发页面的onHide,再触发小程序的onHide
onUnload
:页面卸载时触发,可做定时器清除
组件的生命周期
定义在组件一级参数中,在2.2.3后可定义在lifetimes中
Component({
lifetime:{
created(){
console.log('组件创建完毕')
},
attached()
console.log('组件实例进入页面节点树中执行(即在DOM中开始执行)')
},
detached(){
console.log('当页面被销毁时组件也会被销毁')
},
}
})
判断组件或者API在当前版本是否可用
会返回Boolean值
wx.canIUse('组件名/API')
获取当前设备的信息
wx.getSystemInfoSync()
发送网络请求wx.request
wx.request({
method:'默认为get,get请求时可不填',
url:'请求地址',
success:(res)=>{
console.log('请求成功时的回调函数',res)
//如果是请求成功后需要在当前data赋值并渲染页面
//需要用this的话,需要把函数改为箭头函数
this.setData({被赋值参数:res.data.**})
}
})
如果报错url不在一下request合法域名列表中,是因为请求域名没有加入到信任与名
解决方法:
1.小程序后台-开发-开发设置-服务器域名 进行信任域名配置
2.如果是测试号,直接在开发工具设置忽略检查