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

女爷i 2022-12-15 12:50 220阅读 0赞

### 目录 ###

*  基础
 *   *  基础标签
     *  文本渲染
     *  条件渲染
     *  列表渲染
     *  template模板
     *  引入文件
     *  事件
     *  表单
     *  页面内跳转（超链接）navigator
 *  路由 -- 底部导航栏（tabBar）
 *  知识点
 *   *  图片
 *  事件相关操作
 *  公众号

# 基础 #

下面用到的数据定义在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: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>

## 引入文件 ##

wxml文件

include.xml文件

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

## 事件 ##

wxml文件

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文件

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属性:  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjMyODE0NA_size_16_color_FFFFFF_t_70_pic_center]

# 事件相关操作 #

1.  获取事件下标

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

1.  监听页面滚动距离

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

1.  获取元素的宽高

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()

1.  页面下拉不回弹

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

# 公众号 #

*  关注博主微信公众号

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjMyODE0NA_size_16_color_FFFFFF_t_70_pic_center 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjMyODE0NA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/748feff4916e4b6f8719ce56f07a0e17.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjMyODE0NA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/0c6b4ad4273142bbab3b2f13192d0784.png