wx小程序

news/2024/10/30 23:27:22/

wx小程序

1.基础知识点

  • 数据在js的data中绑定

  • 在.wxml中渲染使用双花括号 即:{{}} 在渲染时可以用三元表达式和算法

  • 在.wxss中写css样式

  • .wxml中没有div 标签,但是有相对应的标签view

2.事件绑定

1).点击事件

  • 给标签绑定事件
<text>{{num}}</text>
<button bindtap="getRes">点击+1</button>

data中定义数据;

data: {num:80},

js中处理事件

data: {num:80},getRes(){this.setData({num:this.data.num+1})}

备注 事件中更改data中的数据需要用this.setData方法

两种绑定事件 : bindtap 和catchtap

区别:bindtap不会阻止事件冒泡 catchtap会阻止事件冒泡

2).传值

按钮绑定事件

​ data-xx="{{ 需要传递的数据}}"

<button bindtap="getTotal" data-id="{{10}}">点击</button>

js中如下操作:

  getTotal(e){console.log(e)//触发的事件对象let id= e.target.dataset.id;//获取点击事件中传递的参数console.log(id)}

3).循环

  • 默认item和index 用wx:for="{{data当中的数据名 }}" wx:key=“index”

    <view wx:for="{{goodList}}" wx:key="index"><view>{{item.id}}</view><view>{{item.pname}}</view><view>{{item.price}}</view>
    </view>
    
  • 自定义当前项和索引 用 wx:for-index=“自己定义的名字” wx:for-item=“自己定义的名”

4).条件判断渲染

有两个条件判断语句

  • 第一种

    wx:if  wx:elif  wx:else
    
  • 第二种

    hidden="{{isShow}}"
    

    区别:

    运行方式不同 wx:if是动态创建和移除元素的方式来实现元素的显示和隐藏,hidden是通过更改元素的display:block;和display:none;来控制元素的显示和隐藏。

    效率不同 频繁切换时候建议使用hidden,但是如果条件较多的时候建议使用wx:if等。

    还有一个标签可以控制多个元素显示隐藏:标签

    用法:

    <block wx:if="{{data数据}}"><text>我是标题内容</text><view>我是主体内容</view>
    </block>
    

5).input数据绑定

<input value="{{msg}}" bindinput="handleInput"></input>

3.常用标签

1).view标签 相当于div

2).scroll-view 标签

​ 用于移动端常见滚动效果

​ 常见属性

  • scroll-x 横向滚动

    ​ 但是由于scroll-view设置flex布局会失效,如下为解决方案

    ​ 给scroll-view父盒子设置样式属性

  white-space: nowrap;

​ 给scroll-view子盒子设置样式属性

  display: inline-block;
  • scroll-y 纵向滚动

    在给scroll-view设置时需要小于子组件总和

3). button

size属性
  • default 默认大小
  • mini 小尺寸
type属性
  • primary 绿色
  • default 白色
  • warn 红色
form-type属性
  • submit 提交表单
  • reset 重置表单

5). swiper-item标签

即轮播图

swipe

  • indicator-dots 是否显示面板指示点
  • indicator-color 指示点颜色
  • indicator-active-color 当前选中的指示点颜色
  • autoplay 是否自动切换

4.全局配置

1).Windows属性配置

  • 设置导航栏背景色和文字内容:
navigationBarBackgroundColor  设置导航栏背景色
navigationBarTitleText 设置导航栏文字颜色
  • 下拉刷新 app.json中配置
  "window":{"enablePullDownRefresh":true},

2). tabBar设置

color

解释: 默认字体颜色 支持十六进制

selectedColor

解释:选中字体颜色 支持十六进制

backgroundColor

解释:tab 的背景色,仅支持十六进制颜色

list
  • pagePath 页面路径,必须在 pages 中先定义
  • text tab 上按钮文字
  • iconPath 图片路径,icon 大小限制为 40kb
  • selectedIconPath 选中时的图片路径,icon 大小限制为 40kb

5.请求接口

请求方式和传参

  • 小程序中get请求语法

    wx.request({url: '服务器地址',method:'get',data:{名:xx,名:xx},success:(res)=>{console.log(res)}})
    
  • 小程序中post请求语法:

    wx.request({url: '服务器地址',method:'post',data:{名:xx,名:xx},success:(res)=>{console.log(res)}})
    

6.页面跳转

声明式导航

  • tabber页面跳转 设置open-type=“swichTab”

    <navigator url="/pages/search/search" open-type="switchTab">跳转到tabBar页面</navigator>
    
  • 非tabBar页面 设置open-type=“navigate”

    <navigator url="/pages/detail/detail" open-type="navigate">跳转到详情页面</navigator>
    

编程式导航

  • tabber页面

    ​ 添加绑定事件

    <button bindtap="goToSearch">跳转到tabber页面</button>
    

​ js中添加跳转逻辑 调用wx.switchTab

goToSearch(){wx.switchTab({url: '/pages/search/search',})}
  • 跳转到非tabBar页面

    • 添加绑定事件

      <button bindtap="goToDetail">跳转到详情页面</button>
      
    • index.js中处理逻辑 调用 wx.navigateTo

      goToDetail(){wx.navigateTo({url: '/pages/detail/detail?id=1'})}
      

7.组价

1).引用

以全局引用为例 在app.json中定义 ,如果是个别页面引用就在那个页面的json中定义

"usingComponents": {"自定义组件名称":"组件路径"},

在页面中使用时就把自定义组件名称当标签使用

2).组件用法

​ 组件的事件处理函数需要放在methods中

Component({data: {},methods: {事件函数名:function(){}}
})

​ 在app.wxss中定义的样式不会影响组件

properties接受页面传递给组件的内容

3).组件传值

父传子

  • test.wxml使用组件并通过属性传值
<mytest num="{{1}}"></mytest>
  • 子组件son.js的properties中配置如下:
Component({properties: {num:Number}
}
  • 子组件通过{{}}模板语法渲染接收的num变量
<text>{{num}}</text>

子传父

  • 子组件test.wxml中绑定传递事件
<button bindtap="click">子组件给父组件传值</button>
  • 子组件的事件click方法中传递数据 注意triggerEvent中的第一个参数是传递的事件名,第二个参数是传递的值,可以是变量。
Component({data: {},methods: {click:function(){this.triggerEvent('handle',{value:111})}}
})
  • 页面中接收数据 页面test.wxml中处理如下:

    接收方法 bind:XX=“函数名”

<mytest1 bind:handle="getContent"></mytest1>

页面test.js中定义如下:

Page({data: {},getContent:function(event){console.log(event.detail.value)},
}

http://www.ppmy.cn/news/305213.html

相关文章

微信小程序开发之——weui-wxss的使用

概述&#xff1a; WeUI 是一套同微信原生视觉体验一致的基础样式库&#xff0c;由微信官方设计团队为微信内网页和微信小程序量身设计&#xff0c;令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。 预览&…

微信小程序 Wxs篇

WXS&#xff08;WeiXin Script&#xff09;是小程序的一套脚本语言&#xff0c;结合 WXML&#xff0c;可以构建出页面的结构。 【注意】 WXS 不依赖于运行时的基础库版本&#xff0c;可以在所有版本的小程序中运行。WXS 与 JavaScript 是不同的语言&#xff0c;有自己的语法&…

入门微信小程序开发(二)wxml与wxss

一.初识WXML 对于每一位前端开发者而言&#xff0c;熟练的编写静态页面是入门的开始&#xff0c;在小程序中这一点也无法避免。在介绍微信小程序功能交互之前&#xff0c;我们先了解在小程序中如何实现页面布局与页面样式&#xff0c;这里先来介绍WXML。 WXML全称WeiXin Mark…

【微信小程序WXS 模块】

WXS 模块WXS 代码可以编写在 wxml 文件中的 标签内&#xff0c;或以 .wxs 为后缀名的文件内。模块每一个 .wxs 文件和 标签都是一个单独的模块。每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数&#xff0c;默认为私有的&#xff0c;对其他模块不可见。一个模…

小程序wxs使用教程

1、什么是wxs wxs是小程序的一种脚本语言&#xff0c;它类似JavaScript&#xff0c;但是与JavaScript有所不同。wxs是一种数据绑定和逻辑处理的语言&#xff0c;它可以在wxml中使用&#xff0c;并且可以在wxml中直接调用。使用wxs可以实现更高效、更灵活的数据处理和渲染。 2…

robots.txt的作用是什么,看完了我默默加在了自己网站上

文章目录 背景robots.txt的主要作用使用示范User-agentDisallowAllowSitemap 总结 背景 最近在研究网站SEO相关的东西&#xff0c;第一次接触到robots.txt&#xff0c;才发现实际上很多网站都用到了它&#xff0c;尤其是对搜索引擎依赖特别高的C端系统或者网站&#xff0c;是一…

微信小程序实战 (WXSS:小程序版CSS、WXS:小程序版JavaScript)

上一篇讲了WXML:小程序版HTML&#xff0c;这一篇介绍WXSS:小程序版CSS。 1. WXSS:小程序版CSS。 WXSS是一套样式语言&#xff0c;为了便于前端开发的上手&#xff0c;WXSS同HTML的CSS样式文件大部分特性一样。它用来决定WXML的样式&#xff0c;同时在CSS基础上进行了修改扩充…

【微信小程序】WXML WXSS JS

目录 &#x1f353;小程序代码的构成 - WXML 模板 1. 什么是 WXML 2. WXML 和 HTML 的区别 &#x1f347;小程序代码的构成 - WXSS 样式 1. 什么是 WXSS 2. WXSS 和 CSS 的区别 &#x1f352;小程序代码的构成 - JS 逻辑交互 1. 小程序中的 .js 文件 2. 小程序中 .js 文…