微信小程序---语法总结

基础

下面用到的数据定义在js文件的data内

基础标签

• <view></view>块级元素
• <text></text>行内元素

文本渲染

<view class="p">{{msg}}</view>
<view class="p">2+1={{2+1}}</view>
<view class="p">msg长度：{{msg.length}}</view>

条件渲染

<view class="h1">条件渲染</view>
<view class="p" wx:if="{{isLog}}">欢迎回来，我的主人</view>
<view class="p" wx:else>游客·请登录</view>
<view class="p" wx:if="{{num>10}}"> A大于10 </view>
<view class="p" wx:elif="{{num>2}}"> B大于4 </view>
<view class="p" wx:else> 小于4 </view>

列表渲染

<view class="h1">列表渲染</view>
<view class="p" wx:for="{{list}}" wx:key="{{index}}">
  {{index+1}}-{{item}}
</view>
<view class="h1">列表渲染--自定义item</view>
<view class="p"
   wx:for="{{list}}" 
   wx:for-item="myitem"
   wx:for-index="myindex"
   >
  {{myindex+1}}--{{myitem}}
</view>

template模板

<view class="h1">template模板</view>
<import src="../template/template.wxml"></import>

<block wx:for="{{users}}">
<template is="userItem" data="{{...item}}" />
</block>
<!-- <template is="userItem" data="{{...users[1]}}"></template> -->

引入文件

wxml文件

<include src="../include/include.wxml"></include>

include.xml文件

<view>@2020 漂流在人海 版权所有</view>
<view>作者：想喝橙汁儿</view>

事件

wxml文件

<view class="h1">事件</view>
<view bindtap="tapHd" data-source="love">事件响应</view>

js文件

data: {
    msg:"醉卧沙场君莫笑，古来征战几人回。"
  },
  inputHd(e){
    console.log(e);
    this.setData({msg:e.datail.value})
  },
  tapHd(e){
    console.log(e);
    wx.showToast({
      // title: '点击事件响应',
      title: e.target.dataset.source,
      icon:'none',
    })
  },

表单

wxml文件

<view class="h1">表单</view>
<view>
  <input type="text" 
  value="{{msg}}" 
  class="inp"
  placeholder="请输入(可修改，不能保存)" 
  bindinput="inputHd"/>
</view>
<view class="p">{{msg}} --2 </view>

js文件

data: {
    msg:"醉卧沙场君莫笑，古来征战几人回。"
  },
  inputHd(e){
    console.log(e);
    this.setData({msg:e.datail.value})
  },

页面内跳转（超链接）navigator

<view class="h1">界面内连接</view>
<view class="p">
  <navigator url="/pages/logs/logs">日志</navigator>
  <navigator url="../logs/logs">日志-相对路径</navigator>
  <navigator url="../logs/logs" open-type="redirect">日志---不返回
  <navigator open-type="reLaunch">重启</navigator>
  <navigator open-type="exit">退出</navigator></navigator>
</view>

路由 – 底部导航栏（tabBar）

color ： 颜色
selectColor ：选中颜色

• app.json文件内：
  pagePath ：页面地址
  text ：底部栏文本
  iconPath ：图片地址(只能是本地图片，建议81px)
  selectedIconPath ： 选中的图片地址

"tabBar": {
	"selectedColor":"#1e90ff",
    "list": [
      {
        "pagePath": "pages/jok/jok",
        "text": "爱笑话",
        "iconPath": "./images/t1.png",
        "selectedIconPath": "./images/t1-h.png"
      },
      {
        "pagePath": "pages/base/base",
        "text": "base",
        "iconPath": "./images/t4.png",
        "selectedIconPath": "./images/t4-h.png"
      }
  ]
  },

知识点

图片

• 防止图片变形

  <image src="" mode="widthFix"></image>
  

• mode属性:
  

事件相关操作

1. 获取事件下标

e.target.dataset.index：  指的是该对象里的子对象，也是触发这个事件的对象
e.currentTarget.dataset.index：  指的是注册了事件监听器的对象

2. 监听页面滚动距离

onPageScroll: function (e) {
   // console.log(e.scrollTop)
},

3. 获取元素的宽高

 wx.createSelectorQuery().select('#jks').boundingClientRect(function (res) {
 	//rect.id      // 节点的ID
	//rect.dataset // 节点的dataset
	// rect.left    // 节点的左边界坐标
   	// rect.right   // 节点的右边界坐标
   	// rect.top     // 节点的上边界坐标
   	// rect.bottom  // 节点的下边界坐标
   	// rect.width   // 节点的宽度
   	// rect.height  // 节点的高度
   console.log(res);
 }).exec()

4. 页面下拉不回弹

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    wx.stopPullDownRefresh();
  },

公众号

• 关注博主微信公众号