微信小程序快速了解

超人真的不会飞——

已于 2023-08-01 21:09:43 修改

阅读量361

点赞数

文章标签：微信小程序小程序

于 2023-08-01 21:00:34 首次发布

本文链接：https://blog.csdn.net/weixin_63248625/article/details/132050753

版权

小程序组件

1.view视图组件

相当于HTML中的div

2.scroll-view:可以滚动的视图区域

添加scroll-y或者scroll-x可以使元素进行横向或者纵向滚动
需要给scroll-view强制机加一个高度或者宽度
常用属性
- horizontal：指定 scroll-view 是否为水平滚动，默认为 false。
- vertical：指定 scroll-view 是否为垂直滚动，默认为 true。
- scroll-x：开启水平滚动功能，设置为 true。
- scroll-y：开启垂直滚动功能，设置为 true。
- scroll-with-animation：滚动时是否使用动画效果，默认为 false。
- upper-threshold：距顶部/左边多远时（单位px），触发 scrolltoupper 事件。
- lower-threshold：距底部/右边多远时（单位px），触发 scrolltolower 事件。
- scroll-top：设置初始滚动位置距顶部的距离（单位px）。
- scroll-left：设置初始滚动位置距左边的距离（单位px）。
- scroll-into-view：通过设置该值为某个子元素的 id，使 scroll-view 滚动到该子元素位置。
- scroll-with-paging：是否根据指定的 item 数量进行分页滚动，默认为 false。
- enable-back-to-top：是否开启快速返回顶部功能，默认为 false。
- bindscroll：滚动时触发的事件的处理函数。
- bindscrolltoupper：滚动到顶部/左边时触发的事件的处理函数。
- bindscrolltolower：滚动到底部/右边时触发的事件的处理函数。

<scroll-view class="left_menu" scroll-y>
      <view 
          wx:for="{{leftBigType}}"
          class="menu_item  {{index == newIndex ?'active':''}}"
          wx:key="*this"
          data-index="{{index}}"
          bindtap="handleTap"
          >
        {{item}}
    </view>
</scroll-view>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wzcm746J-1690894747127)(C:\Users\31164\AppData\Roaming\Typora\typora-user-images\image-20230801092012746.png)]

3.swiper和swiper-item：轮播图组件

常用属性
- indicator-dots：是否显示指示点，默认为 false。
- autoplay：是否自动切换，默认为 false。
- current：当前所在滑块的 index（从 0 开始计数）。
- duration：滑动动画时长（单位 ms），默认为 500。
- interval：自动切换时间间隔（单位 ms），默认为 5000。
- circular：是否采用衔接滑动，默认为 false。
- vertical：滑动方向，设置为 true 为纵向滑动，默认为 false（横向滑动）。
- previous-margin：前边距（单位 px），设置为某个数值时，指定前边距的大小。
- next-margin：后边距（单位 px），设置为某个数值时，指定后边距的大小。
- easing-function：指定滑动动画的类型，默认为 “default”，可选值为 “default”、“linear”、“ease-in”、“ease-out”、“ease-in-out”。
- indicator-color：指示点颜色。
- indicator-active-color：当前选中的指示点颜色。
- bindchange：当 swiper 切换时触发的事件的处理函数。
- bindtransition：当 swiper 滑动过程中触发的事件的处理函数。

<swiper class="index_swiper" indicator-dots autoplay circular>
    <!--第一个轮播图-->
      <swiper-item class="item">
        <navigator url="">
          <image src="" mode="widthFix" />
        </navigator>
      </swiper-item>
    <!--第二个轮播图-->
      <swiper-item class="item">
        <navigator url="">
          <image src="" mode="widthFix" />
        </navigator>
      </swiper-item>
    <!--第三个轮播图-->
      <swiper-item class="item">
        <navigator url="">
          <image src="" mode="widthFix" />
        </navigator>
      </swiper-item>
 </swiper>

4.text文本组件

相当用HTML中的span
可以使用selectable或者user-select使用于可以复制里面内容

5.rich-text富文本组件

可以识别标签和样式

<rich-text nodes="<h1 style='color:red;'>可以识别</h1>"></rich-text>

6.button组件

按钮组件
可以通过open-type属性去调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)
常用属性
- type：按钮的样式类型，可选值为 primary（绿色）、default（白色）、warn（红色）。
- size：按钮的尺寸，可选值为 default（默认尺寸）、mini（小尺寸）。
- plain：是否为镂空按钮，设置为 true 时，按钮为镂空样式。
- disabled：是否禁用按钮，默认为 false。
- loading：是否显示为加载状态（带 Loading 图标），默认为 false。
- form-type：用于表单的提交类型，可选值为 submit、reset。
- open-type：开放能力，可用于获取用户信息、授权登录等操作，支持的值包括 getUserInfo、getPhoneNumber、contact、openSetting 等。

7.image组件

图片组件
image组件的默认宽度为300px、高度为240px
常用属性
- src：图片的路径，可以是本地路径或网络路径。
- mode：图片的裁剪、缩放模式，可选值包括 scaleToFill、aspectFit、aspectFill、widthFix、top、bottom、left、right、center、top left 等。
- lazy-load：是否开启图片懒加载，默认为 false。
- show-menu-by-longpress：是否开启长按图片显示菜单，默认为 false。
- webp：是否支持 WebP 格式的图片，默认为自动检测。
- bindload：图片加载成功时触发的事件的处理函数。
- binderror：图片加载失败时触发的事件的处理函数。

8.navigator组件

类似于HTML中的超链接

小程序中的API

事件监听API

特点：以on开头，用来监听事件的触发
举例：wx.onWindowResize(function callback)监听窗口尺寸的变化

同步API

特点1：以Sync结尾的API都是同步API
特点2: 同步API的执行结果，可以通过函数返回值直接获取，如果出错会抛出异常

异步API

类似于JQuery中的$.ajax(options)函数，需要通过success、fail、complete接收调用的方法

WXML模板语法

数据绑定

将数据写在data中，在页面上使用插值表达式进行渲染

js文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IS2Q8t8U-1690894747128)(C:\Users\31164\AppData\Roaming\Typora\typora-user-images\image-20230801105708473.png)]

页面书写

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ObTOS5bu-1690894747129)(C:\Users\31164\AppData\Roaming\Typora\typora-user-images\image-20230801105809751.png)]

插值表达式可以使用比较运算，可以使用三元运算以及算术运算

事件绑定

类型	绑定方式	事件描述
tap	bindtap或者bind:tap	手指触摸，类似于点击事件
input	bindinput或者bind:input	文本框输入事件
change	changetap或者bind:change	状态改变

1.事件回调函数中的事件对象（event）,中的一些属性

属性	类型	说明
type	String	事件类型
timeStamp	Integer	页面打开到触发事件经过的毫秒值
target	Object	触发事件的组件的一些属性的集合
currentTarget	Object	当前组件的一些属性值集合
detail	Object	额外的信息
touches	Array	触摸事件，当前停留在屏幕中的触摸点的信息的数组

2.事件处理函数修改data中的值

data:{
    // 计算器
    count:0
},
this.setData({
    count:this.data.count+1
})

3.事件传参

小程序中事件传参比较特殊，**不可以**通过以下方式进行传递参数

<button bindtap="selectById(1)">
    按钮
</button>

小程序中是如何处理事件传参的？

html页面

<button bindtap="selectById"
        data-one="{{1}}"
        data-two="{{2}}"
        >按钮</button>

<!-- 使用data-one="1" 传递过去的是字符串形式的数据   -->

js界面

// 获取当前的点击对象
bindtap(e){
    // 通过获取点击对象的自定义数据集来获取参数
    let one = e.target.dataset.one
    let two = e.target.dataset.two
    // 这样就获取到你想传递的参数了.....
}

4.bindinput事件

bindinpu事件如何进行事件处理

selectInput(e){
    // 获取文本框中的最新值
    let s = e.detal.value
}

注意: 小程序中没有原生

条件渲染

wx:if
wx:else

可以在标签上添加wx:if来判断元素的显示

<view wx:if="{{type === 1}}">A</view>
<view wx:if="{{type === 2}}">A</view>
<view wx:if="{{type === 3}}">A</view>

如果要一次性控制多个组件的展示与隐藏，可以使用一个标签将多个组件包装起来，并在标签上使用 wx:if 控制属性。

<block wx:if="{{true}}">
	<view>A</view>
    <view>A</view>
    <view>A</view>
</block>

在小程序中，直接使用 hidden="{{ condition}}"也能控制元素的显示与隐藏

列表渲染

wx:for

<view wx:for={{array}}>
	索引:{{index}} 当前项：{{item}}
</view>

默认情况索引用index表示，循环项用item表示

使用 wx:for-index 可以指定当前循环项的索引的变量名
使用 wx:for-item 可以指定当前项的变量名

wx:key的使用

<view wx:for={{array}} wx:key="id">
	索引:{{index}} 当前项：{{item}}
</view>

类似于 Vue 列表渲染中的 :key，小程序在实现列表染时，也建议为渲染出来的列表项指定唯一的 key 值
从而提高渲染的效率。

wxss样式

全局配置

1.全局配置文件及常用配置项

小程序根目录下的 app.json 文件是小程序的全局配置文件常用的配置项如下

pages记录当前小程序所有页面的存放路径
window全局设置小程序窗口的外观
tabBar全局设置小程序窗口的外观设置小程序底部的 tabBar 效果
style是否启用新版的组件样式

2.全局配置window

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-arfbvPdR-1690894747130)(C:\Users\31164\AppData\Roaming\Typora\typora-user-images\image-20230801150035638.png)]

navigationBarTitleText：设置页面标题栏的文字内容。
navigationBarTitleColor：设置页面标题栏的文字颜色，仅支持黑色 #000000 和白色 #ffffff。
navigationBarBackgroundColor：设置页面标题栏的背景颜色。
navigationBarTextStyle：设置页面标题栏的样式，可选值为 black（标题颜色为黑色）和 white（标题颜色为白色）。
backgroundColor：设置窗口的背景色。
backgroundTextStyle：设置下拉加载时窗口的背景文本样式，可选值为 dark（字体颜色为浅色）和 light（字体颜色为深色）。
disableScroll：禁止页面的垂直滚动，默认为 false。
enablePullDownRefresh：是否开启下拉刷新功能，默认为 false。
onReachBottomDistance：触发上拉触底事件时距离页面底部的距离。

3.全局配置tabBar

底部tabBar
顶部tabBar

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vPlfGHJ7-1690894747131)(C:\Users\31164\AppData\Roaming\Typora\typora-user-images\image-20230801152419348.png)]

tabBar中只能配置最少2个，最多5个tab标签

顶部的tabBar不会显示icon

tabBar中的6个组成部分

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9cMDXYvK-1690894747132)(C:\Users\31164\AppData\Roaming\Typora\typora-user-images\image-20230801153051413.png)]

"tabBar": {
    "color": "#999",
    "selectedColor": "#ff5700",
    "backgroundColor": "#fafafa",
    "list": [{
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "./icons/_home.png",
        "selectedIconPath": "./icons/home.png"
      },
      {
        "pagePath": "pages/category/index",
        "text": "分类",
        "iconPath": "./icons/_category.png",
        "selectedIconPath": "./icons/category.png"
      },
      {
        "pagePath": "pages/cart/index",
        "text": "购物车",
        "iconPath": "./icons/_cart.png",
        "selectedIconPath": "./icons/cart.png"
      },
      {
        "pagePath": "pages/my/index",
        "text": "我的",
        "iconPath": "./icons/_my.png",
        "selectedIconPath": "./icons/my.png"
      }
    ]
  }

页面配置

每一个页面下面都有一个对应的index.json文件，可以单独对某一个页面进行配置

当页面配置和全局配置冲突时，根据就近原则按照当前页面配置

"navigationBarTitleText"：设置页面标题栏的文字内容。
“navigationBarBackgroundColor”：设置页面标题栏的背景颜色。
"navigationBarTextStyle"：设置页面标题栏的样式，可选值为 "black"（标题颜色为黑色）和 "white"（标题颜色为白色）。
"backgroundColor"：设置页面的背景色。
"enablePullDownRefresh"：是否开启下拉刷新功能，默认为 false。
"onReachBottomDistance"：触发上拉触底事件时距离页面底部的距离。
"disableScroll"：禁止页面的垂直滚动，默认为 false。
"usingComponents"：声明页面需要引用的自定义组件。
"disableSwipeBack"：禁止页面右滑手势返回上一级页面，默认为 false。
"backgroundTextStyle"：设置下拉加载时页面的背景文本样式，可选值为 "dark"（字体颜色为浅色）和 "light"（字体颜色为深色）。
"navigationStyle"：设置页面导航栏的样式，可选值为 "default"（默认样式）和 "custom"（自定义样式）。

网络数据请求

出于安全考虑，小程序官方对数据接口的请求作出了如下两个限制

只能请求HTTPS类型的接口
必须将接口的域名添加到信任列表中

自己写项目可以通过设置不校验域名

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tRJcO386-1690894747133)(C:\Users\31164\AppData\Roaming\Typora\typora-user-images\image-20230801204934947.png)]

写法1

wx.request({
    url:'http://www.ggapi.cn/api/icp/', //请求的url路径
    method:'GET',  //请求方式
    data:{
        name:'icss',
        age:20
    },   //请求参数
    success:(res) => {
        console.log(res)   //请求成功返回的结果
    }
})

写法2(用于将数据传递到请求头中)

wx.request({
  url: 'https://example.com/api/endpoint',
  method: 'POST',
  header: {
    'Content-Type': 'application/json',
    'token': 'your_token_value_here' // 将实际的 token 值替换到这里
  },
  data: {
    // 请求体数据
  },
  success: function (res) {
    // 请求成功的处理
  },
  fail: function (error) {
    // 请求失败的处理
  }
});