wx小程序

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