学习笔记：微信小程序

微信小程序

1、组键

view ≈ div

scroll-view 上下滚动图

swiper 横向轮播图

2、数据绑定

输出或绑定数据使用 {{data}}

3、事件绑定

通过bindtap绑定用户触摸按钮事件

//wxml中绑定函数
<button type="primary" bindtap="btnTapHandler">按钮</button>
​
//js中定义函数
//e 为事件event简写
btnTapHandler(e){
    console.log(e)
}

给页面data内数据重新赋要调用this.setData()

CountChange(e){
​
  this.setData({
​
   count : this.data.count + 1
​
  })
​
 },

可以通过bindinput绑定输入事件

<input value="{{msg}}" bindinput="inputHandler"></input>

输入的数值通过e.detail.value调用

inputHandler(e){
    //变化后文本框最新的值
    console.log(e.detail.value)
  }
})

4、事件传参与数据同步

通过事件传参，data-*来传参

<button type="primary" bindtap="btnTap2" data-info="{{2}}">+2</button>

参数值在tagert.dataset.*中

使用传来的参数

btnTap2(e){
  this.setData({
   count: this.data.count + e.target.dataset.info
​
  })
​
 }

5、条件渲染

<view wx:if="{{type ===1 }}">男</view>
<view wx:elif="{{type ===2}}">女</view>
<view wx:else>保密</view>

<block>不是一个组件，它只是一个包裹性的容器，不会在页面做任何渲染

6、列表渲染

wx:key一般是用在wx:for或者其他需要动态渲染的地方，采用wx:key可以对渲染列表中的元素给定唯一标识，使当我们的数组发生改变时，渲染中的原数据可以保持自己的特性

7、样式

1）导入外部样式

@import "/common/common.wxss";

2）全局样式与局部样式

app.wxss是全局样式

在页面.wxss文件中定义的样式为局部样式，只作用于当前页面

margin是外边距，即盒子与盒子之间的距离，而padding是内边距，是盒子的边与盒子内部元素的距离。margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔

3)全局配置Window

4）tabBar

设置位置为“position”

8、GET和POST请求

getInfo(){
    wx.request({
      url: 'https://www.baidu.com',
      method: "GET",
      data:{
        name: 'zs',
        age: 10
      },
      success:(res) => {
        console.log(res)
      }
    })
  }

9、导航

声明式导航

跳转到tabar页面

<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>

跳转到非tabar页面

<navigator url="/pages/message/message" open-type="navigate">导航到info页面</navigator>

导航页面路由?后面可以添加参数进行传递到另一个页面，然后在onLoad(options)函数中获取

后退导航

<navigator open-type="navigateBack" delta="1">后退</navigator>

编程式导航

tabar用wx.switchTab函数，非tabar用navigareTo函数

10、下拉刷新

在json文件中设置

"enablePullDownRefresh": true, //开启下拉刷新
"backgroundColor": "#efefef",	//设置下拉的背景颜色
"backgroundTextStyle": "dark"	//设置下拉刷新的小圆点样式 有dark和

在js文件中

/**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    console.log('触发了message页面的下拉刷新')
     this.setData({
       count: 0
     })
     wx.stopPullDownRefresh()//停止刷新
  },

11、上拉触底

基本

/**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log('触发了上拉触底的事件')
  }

上拉触底的距离默认50，也可以在JSON文件中设置

"onReachBottomDistance": 150

添加Loading提示效果

//展示
wx.showLoading({title: '数据加载中...',})
//隐藏
wx.hideLoading()

设置Loading节流阀

添加一个Boolean属性isLoading,当isLoading为false则能调用触底函数，true则不能调用

onReachBottom: function () {
   if(this.data.isloding) return
   this.getColors()
}

12、生命周期

13、wxs

入门

<view>{{m1.toUpper(username)}}</view>
<wxs module="m1">
// 向外共享方法
  module.exports.toUpper = function(str){
    return str.toUpperCase()
  }
</wxs>

Flex布局模型

父元素为容器，子元素为项目

1、容器