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)},
}