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

wxWeb

基础

view->div

text->span

• 轮播图：swiper

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

• 导航组件：navigator

  • 点击跳转

• 富文本：rich-text

  • 1

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

// 1.标签字符串
// html: '
标签字符串
'
// 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}}">1view>
      <view wx:elif="{{true}}">2view>
      <view wx:else>3view>
      

  • 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/>

• 父传子
  • 通过标签传递：，然后子组件在通过properties列表获取。

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

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

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

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

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

<Tab bindUpdata="newData"/>

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

• 插槽：slot

// Tab.wxml
<slot>slot>

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

生命周期

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

属性	说明
onLaunch	监听⼩程序初始化。
onShow	监听⼩程序启动或切前台
onHide	监听⼩程序切后台。
onError	错误监听函数。
onPageNotFound	⻚⾯不存在监听函数。

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

属性	类型	说明
data	Object	页面的初始数据
onLoad	function	⽣命周期回调—监听⻚⾯加载
onShow	function	⽣命周期回调—监听⻚⾯显⽰
onReady	function	⽣命周期回调—监听⻚⾯初次渲染完成
onHide	function	⽣命周期回调—监听⻚⾯隐藏
onUnload	function	⽣命周期回调—监听⻚⾯卸载
----------------	-------	-------------------------------------------
onPullDownRefresh	function	监听用户下拉动作
onReachBottom	function	⻚⾯上拉触底事件的处理函数
onShareAppMessage	function	⽤⼾点击右上⻆转发
onPageScroll	function	⻚⾯滚动触发事件的处理函数
onResize	function	⻚⾯尺⼨改变时触发，详⻅响应显⽰区域变化
onTabItemTap	function	当前是 tab ⻚时，点击 tab 时触发

扩展

关于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"
}