微信公众号开发

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

本文主要是介绍微信小程序个人总结-基础篇,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

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
属性说明
onLaunch监听⼩程序初始化。
onShow监听⼩程序启动或切前台
onHide监听⼩程序切后台。
onError错误监听函数。
onPageNotFound⻚⾯不存在监听函数。
  • 页面生命周期
    • 在每个页面的index.js
属性类型说明
dataObject页面的初始数据
onLoadfunction⽣命周期回调—监听⻚⾯加载
onShowfunction⽣命周期回调—监听⻚⾯显⽰
onReadyfunction⽣命周期回调—监听⻚⾯初次渲染完成
onHidefunction⽣命周期回调—监听⻚⾯隐藏
onUnloadfunction⽣命周期回调—监听⻚⾯卸载
------------------------------------------------------------------
onPullDownRefreshfunction监听用户下拉动作
onReachBottomfunction⻚⾯上拉触底事件的处理函数
onShareAppMessagefunction⽤⼾点击右上⻆转发
onPageScrollfunction⻚⾯滚动触发事件的处理函数
onResizefunction⻚⾯尺⼨改变时触发,详⻅响应显⽰区域变化
onTabItemTapfunction当前是 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"
}
这篇关于微信小程序个人总结-基础篇的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!