温故而知新--小程序学习01

数据渲染

  /**
   * 页面的初始数据
   */
  data: {
    msg: 'one',
    list: [
      'vue',
      'react',
      'mina'
    ],
    arr: [{
        name: 'abc',
        age: 18,
        list: [
          'vue',
          'react',
          'mina'
        ]
      },
      {
        name: 'nba',
        age: 20,
        list: [
          'vue2',
          'react2',
          'mina2'
        ]
      }
    ]
  },`

渲染

<text>{{msg}}</text>
<view wx:for="{{list}}" wx:key="index">
  {{item}}
</view>
<view wx:for="{{arr}}" wx:key="idx" wx:for-item="user" wx:for-index="idx">
  {{user.name}}======{{idx}}
  <view wx:for="{{user.list}}" wx:key="index">
    {{user.name}} : {{item}}--{{index}}
  </view>
</view>

点击事件

不能写成show(),通过data-传值  e.target.dataset.title接收
<view>
  点击事件：<button data-title="传值title" bindtap="show">点击事件测试</button>
</view>

rpx单位为iphone6为准，375px转换后750rpx，即px值乘以2得到rpx

onPullDownRefresh监听用户下拉动作  需要设置app.jspn中"enablePullDownRefresh": true
onReachBottom页面上拉触底事件  距离底部50px时触发
下拉时不断追加，做分页
list:[1,2,3,4,5,6,7,8,9]
 this.setData({
   list:[...this.data.list,...[10,11,12,13,14,15,16,17,18,19]]
 })

导航

组件式导航

<navigator url="/pages/flex/flex" open-type="reLaunch">
  <button>跳转home</button>
</navigator>

编程式导航

    // wx.navigateTo({
    //   url: '/pages/flex/flex',
    // })
    // wx.reLaunch({
    //   url: '/pages/flex/flex',
    // })
    // wx.switchTab({
    //   url: '/pages/logs/logs',
    // })
    wx.redirectTo({
      url: '/pages/flex/flex?id=1',
    })

自定义组件Component

<view class="item">
  {{title}}
  <text class="del" bindtap="delItem">x</text>
</view>
--------------------------
  properties: {
    title:{
      type:String
    },
    idx:{
      type:Number
    }
  },
    methods: {
    delItem(){
      console.log('delItem',this.data)
      // 去父组件中找自定义的事件名
      this.triggerEvent('del',{id:this.data.idx},{})
    }
  }
  =============================
  <view>
  c-cources组件父传子传来的数据是：{{title}}
  <view>
    <!-- binddel自定义事件名del -->
    <c-item binddel="delCource" idx="{{index}}" wx:for="{{list}}" title="{{item}}" wx:key="index"></c-item>
  </view>
</view>
-------------------------------------
  data: {
    list:[
      "vue",
      "mina",
      "react"
    ]
  },
    methods: {
    delCource(e){
      // 父组件接收子组件的传参
      console.log('delCource删除了',e.detail)
      let id = e.detail.id
      this.data.list.splice(id,1)
      this.setData({
        list:this.data.list
      })
    }
  }

小程序的插槽组件

插槽就是在自定义标签内部添加的内容
    <!-- 自定义标签 -->
    <c-cources title="父传子">
      <view>我是自定义标签准备显示的默认内容</view>
      <view slot="header">命名slot------header</view>
      <view slot="footer">命名slot------footer</view>
    </c-cources>
    -------------------------------------
    <view>
  c-cources组件父传子传来的数据是：{{title}}
  <view>
    <!-- binddel自定义事件名del -->
    <c-item binddel="delCource" idx="{{index}}" wx:for="{{list}}" title="{{item}}" wx:key="index"></c-item>
  </view>
  <view>
    <!-- 默认插槽 -->
    <!-- 我是从父组件里插入的内容 -->
    <slot></slot>
    <!-- 命名插槽 -->
    <slot name="header"></slot>
    <!-- 命名插槽 -->
    <slot name="footer"></slot>
    <view>组件的内部细节</view>
  </view>
</view>
-----------------------------------------------
  options:{
    multipleSlots:true
  },

behaviors组件共享属性

<text>my-world自定义组件--{{title.value}}</text>
-------------------------------------------
公共的behaviors组件
module.exports = Behavior({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    title:{
      type:String,
      value:"组件的初始数据"
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    show(){
      wx.showLoading({
        title: 'showLoading--title',
      })
    }
  }
})
------------------------------------
组件修改behaviors中的默认值
Component({
  behaviors: [require('../myBehaviors')],
  data:{
    title:{
      value:"组件覆盖Behaviors的值"
    }
  }
})

组件的生命周期

created attached ready moved detached error

数据监听器observers

与watch一样
  observers:{
    "num":(value)=>{
      console.log(value)
    }
  }

组件间关系relations

  relations:{
    "../child/child":{
      type:"child"
    }
  },
      change(){
      let nodes = this.getRelationNodes('../child/child')
      nodes[0].setData({
        msg:"从父组件中修改子组件的状态"
      })
      nodes[1].setData({
        msg:"从父组件中修改子组件的状态"
      })
    }
    ------------------------------
      relations:{
    "../parent/parent":{
      type:"parent"
    }
  },

表单

**bindsubmit bindreset  注意**
<view class="container">
<form bindsubmit="doSubmit" bindreset="doReset">
  <view>
    用户名：<input type="text" name="username"></input>
  </view>
  <view>
    密码: <input type="text" password="true" name="pass"></input>
  </view>
  <view>
    金额: <input type="digit" name="money"></input>
  </view>
  <button form-type="submit">提交</button>
  <button form-type="reset">重置</button>
</form>
</view>

云开发

同步云函数

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()
const db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {
  let res = ""
  if(event.flag=="add"){
    res = await db.collection("mydb").add({
      data: {
        name: "云数据库"
      }
    })
  }else{
    res=await db.collection("mydb").get()
  }

  return {
    msg: res
  }
}
    // 新增调用云函数接口
    wx.cloud.callFunction({
      // name值为建立的云函数的name
      name:"mydb",
      data:{
      },
      success:(res)=>{
        console.log(res.result)
      }
    })