【0 微信小程序学习 - 常用知识与配置】

配置

全局配置

{
//页面注册
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  //全局窗口配置
  "window": {
    "navigationBarTitleText": "Demo"
  },
  //底部tabbar配置
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/index",
      "text": "日志"
    }]
  },
  //网络请求配置
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

单页面配置

//导航栏标题配置
"navigationBarTitleText": "个人信息",
//导航栏背景色配置
  "navigationBarBackgroundColor": "#f00",
  //下拉刷新配置
  "enablePullDownRefresh": true,
  //滚动到距离底部配置
  "onReachBottomDistance": 100

知识

数据处理.js

//数据定义,wxml只能绑定data的数据
data: {
    message: "",
    listCount: 30
  },
// 修改数据并渲染,不进行渲染不使用setData, 并且希望页面重新渲染, 这里必须使用this.setData()
    this.setData({
      counter: this.listCount.counter + 1
    })

函数.js

//函数的定义
decrement() {
    console.log("-1");
    this.setData({
      counter: this.data.counter - 1
    })
  }

数据绑定.wxml

<!-- 动态绑定属性,使用{{}}-->
<view class="message">{{ message }}</view>

//for循环
<!-- 动态展示列表数据 -->
<view class="movies">
  <!-- for循环: block类似temtemplatea ,会默认创建item,和index,*this代表item自身作为key,当item是对象时不能这样用,因为每个对象便利出来都是object,要使用对象的key,比如name -->
  <block wx:for="{{movies}}" wx:key="*this">
    <view>
      {{ item }}-{{ index }}
    </view>
  </block>
</view>

事件绑定

//1 为按钮绑定点击事件 bindtap
<button size="mini" type="primary" bindtap="increment">+1</button>

//2 多个按钮绑定同一个事件,需要自定义属性,data-xxx
<block wx:for="{{btns}}" wx:key="*this">
    <button 
      bindtap="onBtnClick"
      data-color="{{item}}"
    >
    </button>
  </block>
onBtnClick(event) {
//或者自定义属性,判断是哪个按钮被点击
    console.log("btn click:", event.target.dataset.color);
  },

事件监听

监听系统配置事件

需要直接在对应的文件,配置开始对应事件的触发配置

//1 下拉事件配置
"enablePullDownRefresh": true,
//下拉事件监听
// 监听下拉刷新
  onPullDownRefresh() {
    console.log("用户进行下拉刷新~");
	// API: 停止下拉刷新
      wx.stopPullDownRefresh()
  },

//2 滚动底部配置,可指定距离底部的触发距离,不配置默认为0,没有上拉加载
"onReachBottomDistance": 100
// 监听页面滚动到底部,自动调用
  onReachBottom() {
    console.log("滚动到了指定位置");
    
  }

属性

//1 在属性中使用插值语法
<image src="{{item.image}}"></image>

//2 自定义属性,用于事件发生时传递控件本身的数据
<button 
      bindtap="onBtnClick"
      data-color="{{item}}">
//获取传递的数据event.target.dataset.color
onBtnClick(event) {
    console.log("btn click:", event.target.dataset.color);
  },
  
//3 css最高权重优先级后缀
! important

API

//1 获取用户信息
  wx.getUserProfile({
    desc: 'desc',
    // success: (res) => {
    //   console.log(res);
    // }
  }).then(res => {
    console.log(res);
  })

//2   

页面间的数据传递

//点击事件,传递事件参数
<viode-item bindtap="onVideoClick" data-item="{{item}}" class="item" itemData="{{item}}"></viode-item>
//跳转下一个界面,并传递参数id
  onVideoClick(event){
    const id = event.currentTarget.dataset.item.id
    wx.navigateTo({
      // url: `/pages/detail-video/detail-video?id=${id}`,
      url: '/pages/detail-video/detail-video?id='+id,
    })
  }
//保存传递的数据
  onLoad(options) {
    const id = options.id
    this.setData({id:id})
  },

css知识

1 单独滚动的view

// 1 创建scroll-view,并设置滚动方向
<scroll-view class="content" scroll-y>
// 2 设置页面高度,100%获取到的才是正确的
page {
  height: 100vh;
}
// 设置固定高度
.content {
//减去其他组件的高度
  height: calc(100% - 225px);
}