wxWeb

微信小程序个人总结-基础篇

• wxWeb
• • 基础
  • 组件
  • 生命周期
  • 扩展

基础

view->div

text->span

• 轮播图：swiper

  • <swiper-item>
  • 100vw=手机宽度 100vh=手机高度
  • 图片拉伸：swiper宽度*原图高度/原图宽度

• 导航组件：navigator

  • <navigator url="">点击跳转</navigator>

• 富文本：rich-text

  • 1

<rich-text nodes="{{html}}"></rich-text>

// 1.标签字符串
// html: '<div style="color:red">标签字符串</div>'
// 2.对象数组
html: [
  {
    // 通过name属性指定div标签
    name: "div",
    // 标签属性
    attrs: {
      class: "my_div",
      style: "color:red"
    },
    // 子节点
    children: [
      {
        name: "p",
        attrs: {},
        // 文本
        children: [
          {
            type: "text",
            text: "对象数组"
          }
        ]
      }
    ]
  }
]

• 图标：icon
• 单选：radio
  • 必须和父元素radio-group配合使用
  • bindchange：绑定点击事件

<radio-group bindchange="handleChange">
  <radio value="male">男</radio>
  <radio value="female">女</radio>
</radio-group>

• 多选：checkbox
  • 父元素：``

<checkbox-group bindchange="handleChange">
  <checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">{{item.name}}</checkbox>

数据绑定、列表渲染、事件绑定

• 数据绑定

  • 数据绑定和Vue差不多

    • <view>{{message}}</view>
      

    • // index.js
      Page({
        data: {
        	message: 'Hello!'
        }
      })
      

  • 组件属性

    • <view id="item-{{id}}"> </view>
      

  • bool类型

    • <checkbox checked="{{MYBOOL}}"> </checkbox>
      

  • 三元运算

    • <view hidden="{{flag ? true : false}}"> Hidden </view>
      

  • 算术运算

    • <view> {{a + b}} + {{c}} + d </view>
      

  • 逻辑判断

    • <view wx:if="{{length > 5}}"> </view>
      

  • 字符串运算

    • <view>{{"hello" + name}}</view>
      

• 列表渲染

  • wx:for

    • 变量名：wx:for-item

    • 下标名：wx:for-index

    • wx:key="*this"表示绑定item本身

    • <view wx:for="{{array}}" wx:key="id">
      	{{index}}: {{item.message}}
      </view>
      <view wx:for="{{array}}"
            wx:for-item="item"
            wx:for-index="index">
      

    • Page({
        data: {
          array: [{
            id:0,
            message: 'foo',
          }, {
            id:1,
            message: 'bar'
          }]
        }
      })
      

  • block标签

  • wx:if

    • <view wx:if="{{false}}">1</view>
      <view wx:elif="{{true}}">2</view>
      <view wx:else>3</view>
      

  • hidden：隐藏组件

    • <view hidden> false </view>
      <view hidden="{{flase}}"> 显示 </view>
      

• 事件绑定

  • 绑定事件不能带参数，也就是括号。

  • <input bindinput="handleInput" data-item="100" />
    <button bindtap="add">+</button>
    

  • Page({
      // 绑定的事件
      handleInput: function(e) {
        this.setData({
          num : e.detail.value
        })
      },
      add: function() {
        this.setData({
          num: this.data.num + 1
        })
      }
    })
    

改变data值必须使用this.setData

获取data值：this.data.值名

• 属性传参

<button bindtap="add" data-operation="{{1}}">+</button>

console.log(e.currentTarget.dataset.operation);

通过给元素一个属性：data-自定义属性名="{{要传递的值}}"

组件

• 组件的使用

打开index.json，找到"usingComponents": {}，在里面填写组件路径

// index.json
{
  "usingComponents": {
    "Tab": "../../components/Tab/Tab"
  }
}

最后在wxml里面添加进入

<Tab/>

• 父传子
  • 通过标签传递：<Tab mydata="123" />，然后子组件在通过properties列表获取。

// Tab.js
properties: {
  mydata:{
    type: Number,
    value: 0
  }
},

• 子传父
  • 流程：子组件发送事件，父组件监听事件，最后父组件进行响应

提示一下：在第二步的时候要注意是bind然后加上事件名称

例如事件名称叫Updata，那么父组件就需要bindUpdata="响应函数"进行监听

// Tab.js 子组件
this.triggerEvent("Updata", "更新数据")

<!-- index.wxml 父组件监听事件 -->
<!-- bind+事件名称 -->
<Tab bindUpdata="newData"/>

// 父组件响应
newData: function(e) {
  console.log(e);
}

• 插槽：slot

// Tab.wxml
<slot></slot>

// index.wxml
<Tab bindUpdata="newData">
  <view>父组件传递过来</view>
</Tab>

生命周期

• 应用生命周期
  • 在app.js中

• 页面生命周期
  • 在每个页面的index.js中

扩展

关于rpx的计算

设计稿 750px=750rpx，那么就代表：1px=1rpx

如果设计稿宽度是pageSize，存在一个元素宽度为100px那么需要计算

• 1 px = 750rpx / pageSize
• 100 px = 750rpx * 100 / pageSize

view {
  width: calc(750rpx*100/375)
}

样式导入指支持相对路径

@import "common.wxss";

导入less

使用vscode安装插件easy less

给vscode添加设置

"less.compile": {
	"outExt": ".wxss"
}