【星海随笔】微信小程序(二)

活跃的煤矿打工人

已于 2024-05-17 17:13:09 修改

阅读量1k

点赞数 24

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

于 2024-05-16 18:02:08 首次发布

本文链接：https://blog.csdn.net/weixin_41997073/article/details/138949864

版权

WXML 模板语法 - 数据绑定

在data中定义页面的数据

在页面对应的 .js 文件中，把数据定义到 data 对象中即可：

Page({
  data: {
    // 字符串类型的数据
    info: 'init data',
    // 数据类型的数据
    msgList: [{msg: 'hello'},{msg: 'world'}]
  }
})

Mustache 语法的格式

把 data 中的数据绑定到页面中渲染，使用 Mustache 语法 （双大括号）将大变量包起来即可。语法格式为：

wxml

<view>{{ 要绑定的数据名称 }}</view>

应用场景

绑定内容
- 动态绑定内容形式： {{ }}
绑定属性
- 首先在 data 中写入一个 imgSrc
- 然后在 html 中写入 <image src=“{{ imgSrc }}”> </image>
- 可设置 mode
运算 (三元运算、算数运算等)
- <view> {{ randomNumber >= 5 ? " 大于5 " : “小于5” }} </view>
- JS中支持函数Math 例如在data 中设置一个值 randomNum1: Math.random() * 10 ，则会生成一个随机数

支持的函数包括: Math.random().toFixed(2) .
生成一个带两位小数的随机数 , 例如 0.34 .
Mustache 中也可以写一些算数运算 .

事件绑定

事件是渲染层到逻辑层的通讯方式. 通过事件可以将用户在渲染层产生的行为, 反馈到逻辑层进行业务的处理 .
渲染层可以理解为是页面
逻辑层可以理解为是JS
Native (微信客户端)

小程序中常用的事件

tap 触摸后马上离开的事件,类似于 HTML 中的 click 事件.

绑定方式: bindtap 或 bind:tap

input 文本框的输入事件,文本框的输入事件

绑定方式: bindinput 或 bind:input

change 状态改变时触发, 状态改变时触发

绑定方式: bindchange 或 bind:change

事件对象的属性列表

当事件回调触发的时候 , 会受到一个事件对象event , 它的详细属性如下表所示 :

类型	属性	介绍
type:	String	事件类型.
timeStamp:	Integer	页面打开触发事件所经过的毫秒数.
target:	Object	触发事件的组件的一些属性值集合.
currentTarget	Object	当前组件的一些属性值集合.
detail	Object	额外的信息.
touches	Array	触发事件,当前停留在屏幕中的触摸点信息的数组.
changedTouched	Array	触摸事件,当前变化的触摸点信息的数组.

demo

HTML

<view class="tailedge">
  个人电话：
  <text selectable> {{telphone}} </text>
  <button type="default" bindtap="btnTapHandler" >微信催促</button>
</view>

Page({
  btnTapHandler(e){
    console.log("already post message"),
    console.log(e)
  },
  /**
   * 页面的初始数据
   */
  data: {
    telphone: '15135151098',
  },

购买货物按钮

<view> 数量:{{goodsOne}} </view>
<button class="goodsbutton" mode="primary" size="mini" bindtap="ChangeCountGoodsOneReduce">减少</button>
<button class="goodsbutton" mode="primary" size="mini" bindtap="ChangeCountGoodsOnePlus">购买</button>

  ChangeCountGoodsOnePlus(){
    
    this.setData({
      goodsOne: this.data.goodsOne + 1
    })
    // goodsOne: this.data.goodsOne + 1
  },
  ChangeCountGoodsOneReduce(){
    if (this.data.goodsOne == 0){
      console.log("pass")
    }else{
      this.setData({
        goodsOne: this.data.goodsOne - 1
    // goodsOne: this.data.goodsOne + 1
    })
    }
  },
  data: {
    telphone: '15135151098',
    goodsOne: 0
  },

事件传参

不能在绑定事件的同时为事件处理函数传递参数.

<button type="primary" bindtap="btnTap2" data-info="{{2}}"></button>

如果不加 {{ }} 括号的话, 则会为str 类型, 加花括号就是 int 类型了

  btnTap2(e){
    console.log(e)
  },

在target 属性中,可以看到 dataset 属性的 info 属性为传参的值

事件传参

  btnTap2(e){
    this.setData({
      goodsOne: this.data.goodsOne + e.target.dataset.info,
    })
  },
将count 的数值于传参的数值相加

抓取 input 值

<input bindinput="inputHandler"></input>

  inputHandler(e){
    console.log(e.detail.value)
  },

实现文本框和 data 之间的数据同步

实现步骤:
① 定义数据
② 渲染结构
③ 美化样式
④ 绑定 input 事件处理函数

HTML

<view size="mini">
  预留电话:
  <input value="{{msg}}" bindinput="inputHandler"></input>
</view>

JS

  data: {
    telphone: '15135151098',
    goodsOne: 0,
    msg: "这里填入信息"
  },
  inputHandler(e){
    console.log(e.detail.value),
    this.setData({
      msg: e.detail.value,
    })
  },

CSS

input {
  border: 1px solid #eee;
  margin: 5px;
  padding: 5px;
  border-radius: 3px;
}

条件渲染

AppData中可以修改 type 的值

HTML , 根据标签显示列表

<view wx:if="{{type === 1}}">
  预留电话:
  <input value="{{msg}}" bindinput="inputHandler"></input>
</view>

<view wx:elif="{{type === 2}}">
  预留微信:
  <input value="{{msg}}" bindinput="inputHandler"></input>
</view>

<view wx:elif="{{type === 3}}">
  预留地址:
  <input value="{{msg}}" bindinput="inputHandler"></input>
</view>
<view wx:else>保密</view>

使用block能够隐藏原来的 view ,在 html 中隐藏

<block wx:if="{{type === 1}}">
  预留电话:
  <input value="{{msg}}" bindinput="inputHandler"></input>
</block>

<block wx:elif="{{type === 2}}">
  预留微信:
  <input value="{{msg}}" bindinput="inputHandler"></input>
</block>

<block wx:elif="{{type === 3}}">
  预留地址:
  <input value="{{msg}}" bindinput="inputHandler"></input>
</block>
<block wx:else>保密</block>

也可以使用,判断一个True或者False时,去选择是否隐藏 view
如果为True 则隐藏, 还支持 display: none/block 控制元素的显示和隐藏

<view hidden="{{flag}}">
   xxx
</view>

hidden 是通过加样式来进行显示或隐藏
wx:if 是以创建和移除元素的方式进行控制元素的展示于隐藏

使用建议

频繁切换时,建议使用 hidden . 因为只有 True 和 False 去控制
控制条件复杂时,建议使用 wx:if ,可以有 elif 多种条件控制

列表渲染

通过 wx:for 可以根据指定的数组,循环渲染重复的组件结构,语法实例如下:

wxml

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

js

  data: {
    telphone: '15135151098',
    /**
    * 个人电话,接受各类合作
    */
    goodsOne: 0,
    msg: "这里填入信息",
    type: 1,
    flag: true,
    array: ['苹果','华为','小米']
  },

可以将默认的 index 和 item 换个名字进行识别展示:
例如:

<view wx:for="{{array}}">
  索引是：{{index}}, item项是: {{item}}
</view>

<view>~~~~~~~~~~~~~</view>

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  索引是：{{idx}}, item项是: {{itemName}}
</view>

这个时候虽然可以实现效果,但是会报一个警告缺少key的错误.
进行修改以下就可以了

<view wx:for="{{array}}" wx:key="index">
  索引是：{{index}}, item项是: {{item}}
</view>

<view>~~~~~~~~~~~~~</view>

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName" wx:key="idx">
  索引是：{{idx}}, item项是: {{itemName}}
</view>

什么是WXSS模板样式

WXSS具有 CSS 大部分特性, 同时 WXSS 还对 CSS 进行了扩充及修改,以适应微信小程序的开发.
与 CSS 相比, WXSS 扩展的特性有

rpx 尺寸单位
@Import 样式导入

wxss 不支持一些选择器样式规则,但是支持通用的样式规则

WXSS 模板样式 - rpx

什么是 rpx 尺寸单位
rpx (responsive pixel) 是微信小程序独有的, 用来解决屏适配的尺寸单位.

rpx 的实现原理
rpx 的实现原理非常简单: 鉴于不同设备屏幕的大小不同, 为了实现屏幕的自动适配, rpx 把所有设备的屏幕, 在宽度上等分为 750 份 ( 既:当前屏幕的总宽度为 750rpx )

在较小的设备上, 1rpx 所代表的宽度较小
在较大的设备上, 1rpx 所代表的宽度较大

rpx专门用来实现屏幕适配的一种实现

rpx 和 px 之间的单位换算

在 iPhone6 上, 屏幕宽度为 375px , 共有 750 个物理像素, 等分为 750rpx. 则:
750rpx = 375px = 750 物理像素
1 rpx = 0.5px = 1 物理像素

1rpx 等于不同的 px
因为每个手机的宽度不一样
举例:
iphone5 1rpx = 0.42px
iphone6 1rpx = 0.5px

换算方式屏幕宽度除以 750

WXSS 模板样式 - 样式导入

@import 的语法格式
@import 后面跟需要导入的外联样式表的相对路径, 用 ; 号表示语句结束. 实例如下:

.small-p {
  padding:5px;
}

@import "common.wxss"
.middle-p {
  padding:15px;
}

首先在顶级目录创建一个目录 common
然后在该目录下创建一个文件 common.wxss

写一个公共的css

.username{
  color: red;
}

然后尝试在其他的wxss中导入
例如使用list.wxss中进行导入
头部写入

@import "/common/common.wxss";

然后在list.wxml中写入一个 view 进行测试 - 发现显示的字变成了红色

<view class="username"> 注意事项: {{msg}}</view>

全局设置

如果在 app.wxss 中进行设置,则会对所有的块进行渲染

view {
  padding: 10rpx;
  margin: 10rpx;
  background-color: lightskyblue;
}

<!--pages/list/list.wxml-->
<!-- <text class="headcenter" id="head">WeChat</text> -->
<rich-text class="BT" nodes="<h1 style='color: red;'> 个人网页 </h1>"> </rich-text>


<view wx:for="{{array}}" wx:key="index">
  索引是：{{index}}, item项是: {{item}}
</view>

<view>~~~~~~~~~~~~~</view>

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName" wx:key="idx">
  索引是：{{idx}}, item项是: {{itemName}}
</view>

<view> 数量:{{goodsOne}} </view>
<button class="goodsbutton" type="primary" size="mini" bindtap="ChangeCountGoodsOnePlus">购买</button>
<button class="goodsbutton" type="warn" size="mini" plain bindtap="ChangeCountGoodsOneReduce">减少</button>
<view></view>
<button type="primary" mode="default" bindtap="btnTap2" data-info="{{10}}" size="mini">购买一组</button>

<scroll-view class="container1" scroll-y>
	<view>A</view>
	<view>B</view>
	<view>C</view>
</scroll-view>

<!-- 轮播图区域 -->
<!-- indicator-dots 属性： 显示面板指示点 -->
<!-- indicator-active-color 当前选中的知识点颜色 -->
<!-- autoplay 自动切换，默认五秒   interval() 会设置默认时间，单位为毫秒，1sec = 1000ms -->
<!-- 衔接滑动 circular -->
<swiper class="swiper-container" indicator-dots indicator-active-color="gray" indicator-active-color="black" autoplay interval="5000" circular>
  <!-- 第1项 -->
  <swiper-item>
    <view class="item">石头</view>
  </swiper-item>
  <!-- 第2项 -->
  <swiper-item>
    <view class="item">剪刀</view>
  </swiper-item>
  <!-- 第3项 -->
  <swiper-item>
    <view class="item">布</view>
  </swiper-item>
	<swiper-item>
	  <image src="/images/1.png"  mode="aspectFill"></image>
	</swiper-item>
</swiper>

<view>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~</view>
<!-- <button size="mini" >默认按钮</button> -->
<!-- <view class="tail-view" bindtap="outerHandler"> -->
  <button class="tailbutton" type="primary" size="mini" bindtap="inputType" data-info="{{1}}">电话</button>
  <button class="tailbutton" type="warn" plain size="mini" bindtap="inputType" data-info="{{2}}">微信</button>
  <button class="tailbutton" type="primary" size="mini" bindtap="inputType" data-info="{{3}}">地址</button>
<!-- </view> -->
<view>~~~~~~~~~~~~~~{{type}}~~~~~~~~~~~~~~~~~~~~</view>

<view wx:if="{{type === 1}}">
  预留电话:
  <input value="{{msg}}" bindinput="inputHandler"></input>
</view>

<view wx:elif="{{type === 2}}">
  预留微信:
  <input value="{{msg}}" bindinput="inputHandler"></input>
</view>

<view wx:elif="{{type === 3}}">
  预留地址:
  <input value="{{msg}}" bindinput="inputHandler"></input>
</view>
<block wx:else>保密</block>

<view class="tailedge">
  商家电话：
  <text selectable> {{telphone}} </text>
  <button type="default" bindtap="btnTapHandler" >微信催促</button>
</view>
<view class="username"> 注意事项: {{msg}}</view>

局部样式

只会作用于当前页面

注意:

①当局部样式和全局样式冲突时, 根据就近原则, 局部样式会覆盖全局样式.
②当局部样式的权重大于或等于全局样式的权重时, 才会覆盖全局的样式.

可以对第几个匹配到的块进行渲染,例如:

view:ntp-child(1) {
  backgroud-color: lightskyblue;
}

权重问题:
权重大 0,1,1
权重小 0,0,1

如何查看这个渲染函数的权重是多少,在微信开发者工具,鼠标指向该函数,则会自动显示该函数的权重值

全局配置文件及常用的配置项

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

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

全局配置 - window

1.小程序窗口的组成部分

导航栏区域
背景区域
页面的主题区域

了解 window 配置

属性名	类型	串值	说明
navigationBarTitleText	String	字符串	导航栏标题文字内容
navidationBarBackgroundColor	HexColor	#000000	导航栏背景颜色,如 #000000
navigationBarTextStyle	String	white	导航栏标题颜色,仅支持 black/white
backgroundColor	HexColor	#ffffff	串口的背景色
backgroundTextStyle	String	dark	下拉loading的样式,仅支持 dark/light
enablePullDownRefresh	Boolean	false	是否全局开启下拉刷新
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离,单位为px

如何设置导航栏的标题

设置步骤:
app.json -> window -> navigationBarTitleText

{
  "pages": [
    "pages/list/list",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "MyselfSupermarket",
    "navigationBarBackgroundColor": "#3b9b5b"
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

导航栏的标题颜色

  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "水上漂商铺",
    "navigationBarBackgroundColor": "#3b9b5b",
    "navigationBarTextStyle":"white"
  },

全局开启下拉刷新功能

概念: 下拉刷新是移动端的专有名词, 指的是通过手指在屏幕上的下拉滑动操作, 从而 重新加载页面数据 的行为.

🤣设置步骤: app.json -> window -> 把 enablePullDownRefresh 的值设置为 true

  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "水上漂商铺",
    "navigationBarBackgroundColor": "#3b9b5b",
    "navigationBarTextStyle":"white"
    "enablePullDownRefresh ":true
  },

默认不开启下拉刷新
.下拉刷新时候会显示定义的背景
注:会作用于小程序的每一个页面,全局开启下拉刷新

下拉刷新的背景色

自定制背景色

设置下拉刷新时窗口的背景色

backgroundColor

  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "水上漂商铺",
    "navigationBarBackgroundColor": "#3b9b5b",
    "navigationBarTextStyle":"white"
    "enablePullDownRefresh ":true,
    "backgroundColor": "#efefef"
  },

设置下拉刷新时的 Loading 的位置

当开启下拉刷新后, 默认窗口的 loading 样式为白色, 如果要更改loading 样式的效果, 设置步骤为 app.json -> window -> 为 backgroundTextStyle 指定 dark 值. 效果如下:

下拉刷新时,三个小圆点的颜色,白色和黑色.

  "backgroundTextStyle":"dark",

设置上拉触底的距离

概念: 上拉触底 是移动端的专有名词, 通过手指在屏幕上的上拉滑动操作, 从而 加载更多数据 的行为

设置步骤: app.json -> window -> 为 onReachBottomDistance 设置新的数值
注意: 默认距离为 50px , 如果没有特殊要求,建议使用默认值即可.

  "window": {
    "backgroundTextStyle":"dark",
    "navigationBarTitleText": "水上漂商铺",
    "navigationBarBackgroundColor": "#3b9b5b",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh":true,
    "backgroundColor": "#efefef",
    "onReachBottomDistance": 100
  },

全局配置 - tabBar

说明是tabBar
上端或者下端的可选择页面,用于实现多页面切换

底部 tabBar
顶部 tabBar

注意:

tabBar 中只能配置最少 2 个,最多 5 个tab页签
当渲染顶部 tabBar 时, 不显示 icon , 只显示文本

tabBar 的6个组成部分

①backgroundColor: tabBar 的背景色
②selectediconPath: 选中时的图片路径
③borderStyle: tabBar 上边框的颜色
④iconPath: 未选中时的图片路径
⑤selectedColor: tab上的文字选中时的颜色
⑥color: tab上文字默认的(未选中)颜色

控制不同区域的样式,或者图片.

tabBar 效果

app.json 和 window 平级
配置tabBar

  "tabBar": {
    "list": [
      {
        "pagePath": "pages/list/list",
        "text": "list"
      },
      {
        "pagePath": "pages/index/index",
        "text": "index"
      },
      {
        "pagePath": "pages/test/test",
        "text": "test"
      }
    ]
  },

属性	类型	必填	默认值	描述
position	String	否	bottom	tabBar的位置,仅支持 bottom/top
torderStyle	String	否	black	tabBar上边框的颜色,仅支持 black/white
color	HexColor	否		tab上文字的默认(未选中)颜色
selectedColor	~	~		tab上的文字选中的颜色
backgroundColor	HexColor	否		tabBar的背景色
list	Array	是		tab页签的列表,最少2最大5

每个tab项的配置选项

属性	类型	必填	描述
`pagePath`	String	是	页面路径,页面必须在pages中预定义
`text`	String	是	tab上显示的文字
iconPath	String	否	未选中时的图标路径;当position为top时,不显示icon
selectediconPath	String	否	选中时的图标路径;当position为top时,不显示icon

为 tabBar 配置选项

在 app.json “pages” 写入新增的页面, 会自动生成相关的四个文件

配置 tabBar选项

① 打开 app.json 配置文件, 和pages , windows 平级, 新增 tabBar 节点
② tabBar 节点中, 新增 list 数组, 这个数组中存放的, 是每个 tab 项的配置对象
③ 在 list 数组中, 新增每一个 tab 项的配置对象.对象中包含的属性如下:

pagePath
text
iconPath
selectediconPath

  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "index"
      },
      {
        "pagePath": "pages/list/list",
        "text": "list",
        "iconPath": "/images/tabs/darkList.png",
        "selectedIconPath": "/images/tabs/lightList.png"
      },
      {
        "pagePath": "pages/test/test",
        "text": "test"
      },
      {
        "pagePath": "pages/home/home",
        "text": "home",
        "iconPath": "/images/tabs/darkHome.png",
        "selectedIconPath": "/images/tabs/lightHome.png"
      }
    ]
  },

如果是tabBar的页面就必须放在 pages 的头部位置

小程序中的页面配置

小程序中,每个页面都有4个配置文件.
每个页面的 .json 配置文件, 用来对 当前页面 的窗口外观,页面效果等进行配置.

页面配置和全局配置的关系

小程序中, app.json 中的 window 节点, 可以全局配置小程序中每个页面的窗口表现.

如果某个小程序的页面想要拥有特殊的窗口表现, 此时, “页面级别的 .json 配置文件” 就可以实现这种需求.

注意: 当页面配置和全局配置冲突时,根据就近原则, 最终的效果以页面配置为准.

页面配置和全局配置的关系

当页面和全局冲突时,根据就近原则,最终的效果以页面配置为准.

页面配置中常用的配置项

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	当前页面导航栏背景颜色,如 #000000
navigationBarTextStyle	String	white	当前页面导航栏标题颜色,仅支持 black/white
navigationBarTitleText	String		当前页面导航栏标题文字内容
backgroundColor	HexColor	#ffffff	当前页面窗口的背景色
backgroundTextStyle	String	dark	当前页面下拉 loading 的样式,仅支持 dark/light
enablePullDownRefresh	Boolean	false	是否为当前页面开启下拉刷新的效果
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离,单位为 px