微信小程序从0到1基础学习整理(下)

0.常见组件

swiper微信内置轮播图组件

微信内置轮播图组件:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
swiper里面只可放置swiper-item组件，否则会导致未定义的行为.每个swiper-item就是盛放图片的容器,实际应用可以用循环
需要注意:swiper默认高度为150px

navigator导航组件

导航组件,类似a标签:https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
url属性不添加不会报错,但也不会跳转

redirect跳转模式,会使跳转页面替换上一个历史页面,点击左上角图标时跳转其他页面

rich-text富文本标签

富文本标签:https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html
可以将字符串解析成 对应标签，类似 vue中 v-html功能
语句:nodes='元素/文本节点'

• nodes 不推荐使用 String 类型，性能会有所下降。
• rich-text 组件内屏蔽所有节点的事件。
• attrs 属性不支持 id ，支持 class 。
• name 属性大小写不敏感。
• 如果使用了不受信任的 HTML 节点，该节点及其所有子节点将会被移除。
• img 标签仅支持网络图片。

button按钮

button文档
open-type='contact'点击自动连线客服会话

open-type='share'触发用户转发

open-type='getPhoneNumber'获取用户手机号

open-type='getUserInfo'获取用户信息

radio单选框

单选框:https://developers.weixin.qq.com/miniprogram/dev/component/radio.html
如果value值不存在，选中时会得到空字符串
包裹在radio-group中会被认为是一组,有互斥作用,也可以触发事件

checkbox多选框

多选框:https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html
包裹在radio-group中可以触发事件,属性跟单选框一样

tabBar

多tab应用:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar
注意：
pagePath 接收的路径前面不要斜杠
list 最少两个，最多五个
selectedColor 是放在tabBar对象下的

1.自定义组件

自定义组件:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
1、通过ide右击新建组件，组件和页面也是一样，由四个文件组成，wxml wxss json js
2、json文件中必须配置"component": true,
这里的方法之类的又跟pages的不一样,这里恢复跟vue一样写在专门的位置,不再零散

使用小程序组件

在页面的配置 json 文件声明
key值表示组件别名，value表示组件的路径

编辑组件

slot表示插槽，类似vue中的slot

在组件的 wxss文件中编写样式

注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。

父传子

父传子:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html
父组件通过属性的方式给子组件传递参数

子传父

子组件通过事件的方式向父组件传递参数
自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象

2.小程序生命周期

应用生命周期，定义app.js
页面生命周期，定义在各自页面js

应用生命周期

应用生命周期:https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html
onLaunch只触发一次,onshow不限
onLaunch使用场景：获取用户地理位置，用户授权
onshow使用场景：例如抢购页面，当用户重新打开应用，重新刷新数据

onError使用场景：网络异常，收集异常日志

页面生命周期

触发页面声明周期时会先触发应用生命周期,而关闭或销毁时,会由页面开始到应用

Page({
  // 页面的初始数据
 
 //生命周期函数--监听页面加载
 
  onLoad: function (options) {
    // options 表示获取页面参数,option是一个对象
    // 使用场景：在这里发送网络请求
    console.log('页面onLoad', options)
  },
  //生命周期函数--监听页面初次渲染完成
  
  onReady: function () {
    // 场景：获取页面元素
    console.log('页面 onReady触发')
  },
  //生命周期函数--监听页面显示

  onShow: function () {
    console.log('页面onShow')
  },
 //生命周期函数--监听页面隐藏
 
  onHide: function () {
    console.log('页面onHide')
  },
 //生命周期函数--监听页面卸载
 
  onUnload: function () {
    // 场景：定时器清除
    console.log('页面onUnload')
  },

})

3.判断组件或者API是否可用

判断小程序的API，回调，参数，组件等是否在当前版本可用:https://developers.weixin.qq.com/miniprogram/dev/api/base/wx.canIUse.html

4.发起网络请求

发起网络请求:https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html
由于不是浏览器内核,所以不要用window,ajax,xhm之类

如果提示下面的错误，是因为请求域名没有加入到信任域名
方法一：「小程序后台-开发-开发设置-服务器域名」 中进行配置
https://mp.weixin.qq.com/
方法二：如果你是用测试号，可以在开发工具设置忽略检查

网络请求方法

setData 函数用于将数据从逻辑层发送到视图层 （异步），同时改变对应的 this.data 的值（同步）
直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致

wx.request({
	url: '请求地址',
	method: 'post', // 默认是get请求
	success: (res) => { // 成功回调
		
	}
})