微信小程序--day03

一、 小程序的开放能力

获取网络状态以及在线预览文档

Page({
  // 点击“预览文档”的按钮，触发tap回调
  tap: function() {
    wx.getNetworkType({
      success: function(res) {
        // networkType字段的有效值：
        // wifi/2g/3g/4g/unknown(Android下不常见的网络类型)/none(无网络)
        if (res.networkType == 'wifi') {
          // 从网络上下载文档
          wx.downloadFile({
            url:' https://lark-temp.oss-cn-hangzhou.aliyuncs.com/__temp/464110/docx/bb5d8e7d-97bc-406b-be94-ca2b4724c0e6.docx?OSSAccessKeyId=LTAI4GKnqTWmz2X8mzA1Sjbv&Expires=1644944885&Signature=qUYOtNWZOaopjkEFbcKpvgmn%2B1U%3D',
            success: function (res) {
 
              // 下载成功之后进行预览文档
              wx.openDocument({
                filePath: res.tempFilePath
              })
            }
          })
        } else {
          wx.showToast({ title: '当前为非Wifi环境' })
        }
      }
    })
  }
})

扫码能力--扫一扫

Page({
  // 点击“扫码订餐”的按钮，触发tapScan回调
  tapScan: function() {
    // 调用wx.login获取微信登录凭证
    wx.scanCode({
      success: function(res) {
        var num = res.result // 获取到的num就是餐桌的编号
      }
    })
  }
})

小程序分享

promise

如果该参数存在，则以 resolve 结果为准，如果三秒内不 resolve，分享会使用上面传入的默认参数

Page({
  onShareAppMessage() {
    const promise = new Promise(resolve => {
      setTimeout(() => {
        resolve({
          title: '自定义转发标题'
        })
      }, 2000)
    })
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123',
      promise 
    }
  }
})

朋友圈分享

onShareTimeline(){
 return {
      title: '自定义转发标题',
      path: '/page/user?id=123'
    }
}

二、自定义组件

1、创建组件

构造器使用的时Component

配置文件中设置component:true

2、引入组件

首先声明这个组件，在配置文件声明

"usingComponents": {   "my-button":"/components/MyButton/MyButton"},
3、设置插槽<slot></slot>

4、命名插槽

开启配置

Component({  options: {    multipleSlots: true // 在组件定义时的选项中启用多slot支持  },})// 使用的时候// 父组件<son> <view slot="名字"> </view> </son>// 子组件中<slot name="名字"></slot>

 

三、父子组件传值

父传子

//父
  <son1 today="周四"></son1>
//子接收
  properties: {
    today:{
    type:[Number,String],
    value:'默认'
   }
  },
//子
<view>父传子{{today}}</view>

子传父 

//子
<button bindtap="tofather">点击子传父</button>
<view>{{Behavior}}</view>
<view class="red">{{msg}}</view>
 methods: {
    tofather(){
      this.triggerEvent('myevent',"这是子传父")
    }
  }
//父
<son1 bind:myevent="myevent"></son1>
{{fromson}}
  //获取子传父
  myevent(res){
    console.log(res);
    this.setData({
      fromson:res.detail
    })
  },

四、Behaviors

behaviors 是用于组件间代码共享的特性，类似于一些编程语言中的 “mixins” 或 “traits”。

每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。 每个组件可以引用多个 behavior ，behavior 也可以引用其它 behavior 
 

module.exports = Behavior({
  data:{
    Behavior:"Behavior",
    msg:"msg",
  },
  created(){
    //behavior的生命周期优先级要高
    console.log(123);
  },
 })

Component({
  behaviors:[Behavior],
  data: {
    msg:"msg1111",
  },
}
//组件中的msg会覆盖behavior中的msg