小程序基础语法--常用（个人小总结）

祥的小程序笔记
基本文件：wxml（结构），wxss（样式），js（行为），json（配置）
语法：wx:if…wx:elif…wx:else（判断是否创建）hidden（通过display属性控制显示与隐藏），wx:for(循环数组是key—value； 循环对象是value—key)。
事件绑定：bind，input框绑定事件是bindinput=“函数名”，点击事件是bindtap
获取默认值：事件源对象（e.default.value）；
赋值：需要通过this.setData（{num：e.default.value}）
事件传参方式：通过自定义属性，找到事件源对象找到自定义属性值，并通过this.setData（{num：e.default.value}）
样式
样式单位，rpx 不管设备分辨率是多少，设备都是750rpx
分辨率750px；750px=750rpx；1px=1rpx
分辨率375px；375px=750rpx；1px=2rpx
样式导入，
同级目录下，相同文件名不用导入，
不同级，导入到同级目录下的文件（wxss）@import导入（相对路径）
选择器
不支持通配符（）可以采用标签名代替通配符
小程序中使用less或sass
标签
view类似与div；
text文本标签，仅此标签支持长按复制功能，只支持text标签内嵌；支持空格回车代码转码
image图片标签，小程序上线有大小限制，所以通常使用网络图片
存在默认宽高320240px
mode属性，决定图片内容与图片标签的适配
支持懒加载，直接加属性lazy-lode
swiper 默认宽高width：100%；height：150px无法实现高度由内容撑开
button 标签写上了pain背景透明属性，在自定义样式时需要加上" !important"

事件
bindtap 绑定事件 手指触摸后马上离开 不可以在事件名后面加括号传参，可以使用data-xxx自定义属性传递参数,通过事件对象e.currentTarget.dataset获取自定义属性的参数

<view bindtap="handleTap" data-abc="abc">
    Click here!
</view>
//js
handleTap(e){
    console.log(e.currentTarget.dataset.abc)//'abc'/
}

catchtap 绑定事件并阻止冒泡

<view id="outer" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</view>

组件通信
父传子 通过properties
子传父

// A.wxml
<component-tag-name bindmyevent="onMyEvent" />
<!-- 或者可以写成 -->
<component-tag-name bind:myevent="onMyEvent" />
//A.js
Page({
  onMyEvent: function(e){
    e.detail // 自定义组件触发事件时提供的detail对象
  }
})
// B.wxml
<button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>

// b.js
Component({
  properties: {},
  methods: {
    onTap: function(){
        var myEventDetail = {} // detail对象，需要传递的参数
        var myEventOption = {} // 触发事件的选项
        this.triggerEvent('myevent', myEventDetail, myEventOption)
    }
  }
})

小程序路由https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.reLaunch.html
注意：路由跳转地址 （url）只能是字符串

小程序引用vant weapp组件库

1.npm init -y //初始化npm
2.npm install --production 安装生产开发
3.npm i @vant/weapp -S --production 安装组件库
4.打开微信开发者工具->详情->勾选 使用 npm 模块 选项
5.打开微信开发者工具->工具->构建npm
6.引用方式按照vant weapp方式引用

微信小程序上拉刷新

注意：内容不撑满组件不出现滚动条则无法滚动，触发滚动条触底事件
采用scroll-view

自己的总结
只有导入模块不支持绝对路径

export default 函数名
import 函数名 from “…/相对路径”;

data属性在结构中使用时，全部是{{}}

wx:if="{{}}"

wx:for="{{数组}}"
wx:key="*this" 相当于 vue :key=“item”

bind事件名=“事件处理方法”
事件处理函数不能写逻辑代码

git remote add origin https://gitee.com/small_whirlwind_01234/hangw-guang-quan.git

方法中的this就是Page实例

1. this.方法名
2. this.data.属性名
3. 如果想改变属性 this.setData({属性名：值})

存storage

wx.setStorageSync('key', 'value')

声明式跳转传值

<navigator url="/pages/dome/dome?title=joven">声明式跳转传值</navigator>
  onLoad: function (options) {
    this.setData({
      title: options.title
    })
  }

编程式导航
跳转页面并传参
发

<van-button type="info" bindtap="toLogin" data-name="gr">去登录页</van-button>
  toLogin(even) {
    let name = even.currentTarget.dataset.name;
    wx.navigateTo({
      url: '/pages/login/login?name='+name,
    })
  },

接

  onLoad: function (options) {
    this.setData({
      name: options.name
    })
  },

wx.navigateTo({ url:’/pages/login/login?name=joven’ })
目标页面获取参数
Page({onLoad(options){ console.log(options.title) } })

事件传参
注册事件并传参
<button bindtap=“toLogin” data-属性名=“值”>点我去登录
事件处理方法获取传参
toLogin(event){ event.currentTarget.dataset.属性名 }
事件对象的target和currentTarget

1. target指向源dom，你点哪个dom，target就是那个dom
2. currentTarget注册事件所在的dom
   编译模式的设置
3. 模式名称：取个名字
4. 启动页面：页面路径，模拟器默认首页的路径
5. 启动参数：设置页面的参数
6. 页面配置
7. 属性名和app.json全局配置一样
8. 页面配置就是一个JSON对象，不需要window 3. 页面配置优先于全局

// 动态设置导航栏
wx.setNavigationBarTitle({
title:${hero.title} - ${hero.name},
})