微信小程序开发day02

本文主要介绍了微信小程序开发的基本语法操作

一.wxml模板语法

1.数据绑定

1
2
<view>{{info}}</view>
<!-- mustache语法 双花括号中间放要渲染的变量 -->

info定义在对于js文件的data:{ info = ‘hello world’}

mustache语法应用：

  • 绑定内容

    —同上—

  • 绑定属性

    1
    <image src="{{imgSrc}}"></image>

  • 运算（三元运算，算数运算）

    在data中加入 randomNumber :Math.random() * 10

    1
    <view>{{randomNumber >= 5 ? '大于五':'小于五'}}</view>

2.事件绑定

2.1常用事件

  • tap

    绑定方式：bindtap bind:tap

    1
    2
    3
    <button type="primary" bindTap="btnTapHandler">
        按钮
    </button>
    1
    2
    3
    btnTapHandler(e){
    	console.log(e)
    }

    手指触摸后马上离开，类似于HTML中的click事件

  • input

    bindinput bind:input

    文本的输入事件

  • change

    bindchange bind:change

    状态改变时触发

2.2事件对象属性列表

当事件回调触发的时候，会收到一个事件对象event

  • target

    触发事件的组件的一些属性集合

    它获得的是源头组件(与currentTarget区别)

  • detail

    额外的信息

  • touches

    触摸事件中，当前停留在屏幕上的触摸点的信息的数组

2.3事件处理函数中为data中数据赋值

调用this.setData({Object对象})

1
2
3
4
5
changeCount(){
    this.setData({
        count:this.data.count + 1
    })
}
2.4事件传参

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

可以为组件提供 **data- *** 自定义属性传参，其中 * 代表参数的名字

1
2
<button bindTap="btnHandler1" data-info="{{2}}"></button>
<!-- info会被解析为参数名字 数值2为参数的值 -->

处理函数中获取参数的值：event.target.dataset.参数名

1
2
3
4
5
btnHandler1(e){
    this.setData({
        count:this.data.count + e.target.dataset.info
    })
}
2.5bindinput语法格式
1
<input bindinput="inputHandler"></input>
1
2
3
4
inputHandler(e){
    //e.detail.value 是变化过后 文本框的最新的值
	console.log(e.detail.value)
}

3.条件渲染

3.1wx:if
1
2
3
4
5
6
<view wx:if="{{condition}}"> </view>
<!-- wx:elif  wx:else -->

<view wx:if="{{type === 1}}"> 男 </view>
<view wx:elif="{{type === 2}}">  女 </view>
<view wx:else> 保密 </view>

可以根据条件来判断渲染哪个view

3.2结合 < block > 使用wx:if

如果一次性控制多个组件的展示与隐藏，可以使用一个 < block > < /block > 标签将多个组件包装起来

1
2
3
4
<block wx:if="{{true}}">
	<view> 1 </view>
    <view> 2 </view>
</block>

block 不会被渲染，避免不必要的渲染

3.3hidden

控制隐藏

hidden=”“

3.4对比wx:if hidden
  • wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏
  • hidden以切换样式的方式(display:none/block;) 控制元素的显示与隐藏

使用建议：

  • 频繁切换 用 hidden 性能更好
  • 控制条件复杂时，使用wx:if 等

4.列表渲染

4.1 wx:for
1
2
3
<view wx:for="{{array}}">
	索引是: {{index}} 索引项是: {{item}}
</view>
4.2 手动指定索引和当前项的变量名
  • 使用wx:for-index 可以指定当前循环项的索引
  • 使用wx:for-item 可以指定当前项的变量名
  • 很少用 了解即可
1
2
3
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
	索引是: {{idx}} 索引项是: {{itemName}}
</view>
4.3 wx:key

渲染出唯一的key值

1
2
3
4
5
6
7
data:{
    userList:[
        {id :1 ,name :'楷1'}
        {id :2 ,name :'楷2'}
		{id :3 ,name :'楷3'}
    ]
}
1
2
<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>
<!-- key 那里不用mustache语法 -->

二.wxss模板样式

1. 在css上独有的特性

  • rpx 尺寸单位

    rpx 是把所有设备的屏幕宽度上分为750份 (750 rpx)

  • @import样式导入

    1
    @import "相对路径【common.wxss】";

三.全局配置

1. 常用配置项

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

2.window相关配置

2.1 小程序窗口组成部分
2.2 导航栏标题

app.json —> window —> navigatorBarTitleText

注：”navigationStyle” : “custom”, // 不显示导航栏

2.3 下拉刷新功能

app.json —> window —> enablePullDownRefresh

作用于所有页面

设置下拉刷新的背景色：

app.json —> window —> backgroundColor

设置下拉刷新loading样式

app.json —> window —> backgroundTextStyle

只有灰色和白色

设置上拉触底的距离

上拉触底：当距离底部多少时加载更多的数据

app.json —> window —> onReachBottomDistance

3.tabBar

3.1 介绍
3.2 组成部分
3.3 配置项
1
2
3
4
5
6
7
8
9
10
11
12
13
"tabBar": {
      "list": [{
          "pagePath": "pages/list/list",
          "text": "测试",
          "iconPath": "/images/cate.png",
          "selectedIconPath": "/images/cate-active.png"
      },{
        "pagePath": "pages/list/index",
        "text": "首页",
        "iconPath": "/images/home.png",
        "selectedIconPath": "/images/home-active.png"
    }]
  }

注：tabBar的页面要放在page的前几个

每个页面都有自己的json文件

与全局配置冲突时 就近原则

四. 网络数据请求

1. 限制

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

2. 配置request域名

步骤：

  • 登陆微信小程序管理后台
  • 开发
  • 开发设置
  • 服务器域名
  • 修改request合法域名

3. 发起get请求

wx.request()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//在page下面与data平级
*****(){
    wx.request({
        url:'',
        method:'GET',
        data:{
            name:'zs',
            age:20
        },
        success:(res)=>{ //请求成功的回调函数
			****
        }
    })
}

4. 发起post请求

wx.request()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//在page下面与data平级
*****(){
    wx.request({
        url:'',
        method:'POST',
        data:{
            name:'zs',
            age:20
        },
        success:(res)=>{ //请求成功的回调函数
			****
        }
    })
}

5. 在页面刚加载时请求数据

在onLoad事件中调用

6. 跳过request合法检验

开发工具 —-> 详情 —-> 本地设置 —-> 不检验合法域名

微信小程序
#微信小程序
微信小程序开发day02
http://kaikai12321.github.io/2023/12/29/微信小程序开发day02/
作者
Hou Kai
发布于
2023年12月29日
许可协议