微信小程序路由导航、自定义组件、slot槽口、组件通信、小程序生命周期、各种API，缓存，掉接口、get，post网络

1.导航组件（声明式导航）

<!--navigate: 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面 
    redirect:关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
    switchTab:跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
    reLaunch  关闭所有页面，打开到应用内的某个页面(包含tabbar页面)
    navigateBack： 关闭当前页面，返回上一页面或多级页面

    能够tabber的：  switchTab, reLaunch
    跳转普通页面：   navigate，reLaunch，redirect
-->
<navigator target="self" open-type="navigate" url="/pages/index01/index01">
  <button>跳转-navigate</button>
</navigator>

<navigator target="self" open-type="redirect" url="/pages/list/list">
  <button>跳转-redirect</button>
</navigator>

<navigator target="self" open-type="switchTab" url="/pages/list/list">
  <button>跳转-switchTab</button>
</navigator>

<navigator target="self" open-type="reLaunch" url="/pages/index01/index01">
  <button>跳转-reLaunch</button>
</navigator>

2.路由API（编程式导航）

  

// wx.navigateTo({
    //   url: '../index01/index01',
    // })


    wx.switchTab({
      url: '../list/list',
    })

3.导航传参

组件传参：在路径后问号拼接
<navigator target="self" open-type="navigate" url="/pages/index01/index01?title=hello&id=99">
  <button>跳转-navigate</button>
</navigator>

api传参：
    wx.navigateTo({
      // url: '../index01/index01?id='+id+'&name='+name
      url:`../index01/index01?id=${id}&name=${name}`
    })

4.接收导航传参

在跳转到的页面里的onLoad函数里通过options形参接收
A-B  在B的onload接
  onLoad(options){
    console.log(options)
  },
      
/注意： 跳转到tabber页面时。无法接参

5、跳转到外部小程序

引流使用

<!-- 跳转到外部小程序   appid必须写 -->
<navigator target="miniProgram" app-id="wx8ca0e15a6a544407">
  <button>跳到外部小程序</button>
</navigator>

api:
 wx.navigateToMiniProgram

说明**：可以在微信开发者工具选择普通编译–继续选择添加编译模式–选择启动页面–添加启动参数即可，然后即可在当前目标页面的onLoad中获取参数

五、自定义组件（自己写组件）

1.概述

小程序支持简洁的组件化编程，开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；自定义组件在使用时与基础组件非常相似

2.创建自定义组件

1、新建一个components目录
2、在目录里新建一个组件子目录
3、右击-选择新建component

3.组件引用与使用

1、局部引入（在某个页面的json里写）
  "usingComponents": {
    "my-btn":"/components/my-btn/my-btn"
  }
  
2、全局引入，（在app.json里引入） 
  "usingComponents": {
    "my-btn":"/components/my-btn/my-btn"
  }

4.组件样式（丰富组件）

1、组件的wxml

<view bindtap="_click" class="{{size}}" style="background-color:{{color}}">{{color}}</view>

2、组件的wxss

/* components/my-btn/my-btn.wxss */
.mini{
  width: 120rpx;
  height: 80rpx;
  background-color: #999;
  border-radius: 40rpx;
  text-align: center;
  line-height: 80rpx;
}

.default{
  width:180rpx;
  height: 120rpx;
  background-color: #999;
  border-radius: 60rpx;
  text-align: center;
  line-height: 120rpx;
}

3、组件的js
  properties: {
    size:{
      type:String, // 传递的属性的值的类型
      value:'default'// size属性默认值
    },
    color:{
      type:String,
      value:'#999'
    }
  },

5.数据与方法

注意：  properties  里的属性 如果和data林相同，properties的优先级更高

data: {
    msg:"hello"
  },
  
  /**
   * 组件的方法列表
   */
  methods: {
    _click(){
      console.log(this.data.msg)
      this.setData({
        msg:"123"
      })
      
    }
  }

6.properties组件对外开放属性

组件的对外属性，用来接收外界传递到组件中的数据,组件的 properties 和 data 的用法类似，它们都是可读可写的，只不过：

  • data 更倾向于存储组件的私有数据
  • properties 更倾向于存储外界传递到组件中的数据

properties属性不需要在自定义组件内部进行修改，是通过组件调用时传递进来的！！！

语法结构：

属性名称:{
	type：String，NUmber，【null不限制数据类型】
	value:""
}

7.slot插槽使用

7.1默认插槽

自定义组件的wxml里写的：

<view bindtap="_click" class="{{size}}" style="background-color:{{color}}">
  <slot></slot>
</view>

7.2多个插槽

默认情况下，一个组件的 wxml 中只能有一个 slot 。需要使用多 slot 时，可以在组件 js 中声明启用
  // 使用多个插槽  在自定义组件的js文件里写
  options:{
    multipleSlots:true
  },
  
  wxml：
  <view bindtap="_click" class="{{size}}" style="background-color:{{color}}">
  <slot name="one"></slot>
  <slot name="two"></slot>
</view>

页面中调用组件：
<my-btn size="mini" color="red">
  <view slot="one">123</view>
  <view slot="two">456</view>
</my-btn>

8.组件间通信与事件

1、父（页面）传子（自定义的组件）
   在页面的调用处，传递属性  size  color  都是向子组件传递的数据

2、子传父
   vue this.$emit("事件类型","值")
	如下图：
	
3、子传父（通过this.selectComponent获取子组件的数据）
	-1、在父组件里设置选择器 <my-view class="com" bindtap="_getdata"></my-view>  
	-2、在父组件的js里写函数 
		 _getdata(){
               let res = this.selectComponent(".com")
               console.log(res)
              },

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XRTPjfxJ-1620906687454)(img/day03-1.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w0LMoVVm-1620906687456)(img/day03-2.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-agPPg3oU-1620906687457)(img/day03-3.png)]

9.observers数据监听器

组件的wxml：
<view>num1：{{num1}}</view>
<view>num2：{{num2}}</view>
<view>sum：{{sum}}</view>
<button bindtap="_change">change</button>

监听单个数据的改变

组件的js：
  data: {
    title:"",
    num1:10,
    num2:20,
    sum:0
  },
  attached(){
    this.setData({
      sum:this.data.num1+this.data.num2
    })
  },
  
   methods: {
    _change(){
      this.data.num1++
      this.data.num2++
      this.setData({
        num1:this.data.num1,
        num2:this.data.num2
      })
    }
  }

数据监听：
  observers:{
    "num1,num2":function(aa,bb){
      console.log(aa,bb)
      this.setData({
        sum:aa+bb
      })
    }
  },
      
      
  

监听对象， **  
  data: {
    title:"",
    num1:10,
    num2:20,
    sum:0,
    obj:{
      fieldId:10,
      price:99
    }
  },
  
   _change(){
      this.data.num1++
      this.data.num2++
      this.data.obj.fieldId++
      this.setData({
        num1:this.data.num1,
        num2:this.data.num2,
        obj:this.data.obj
      })
    }，
      observers:{
        "**":function(obj){
         console.log(obj)
       }


    "obj.**":function(obj){
      console.log(obj)
    }
  },

10.组件的生命周期

  • 组件实例刚刚被创建好时， created 生命周期被触发。此时还不能调用 setData 。 通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段。
  • 在组件完全初始化完毕、进入页面节点树后， attached 生命周期被触发。此时， this.data 已被初始化完毕。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。
  • 在组件离开页面节点树后， detached 生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则 detached 会被触发。

六、API

1.API概述

API（Application Programming Interface，应用程序接口）是一些预先定义的接口（函数），目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力。

小程序提供主要的API:小程序开发框架提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。

1.1api分类

1、事件监听api
以 on 开头的 API 用来监听某个事件是否触发，如：wx.onSocketOpen，wx.onCompassChange 等。
2、同步api
以 Sync 结尾的 API 都是同步 API， 如 wx.setStorageSync，wx.getSystemInfoSync 等
3、异步api
大多数 API 都是异步 API，如 wx.request，wx.login 等，异步api有回调函数，同样也支持promise的写法

2.缓存

在小程序里，单条缓存的大小不能超过1M，缓存的总数据量，不能超过10M，
缓存会一直存在，除非手动清空
  _setStorage(){
   let userinfo = {
     name:"admin",
     age:"18"
   },
   cart=[1,2,3,4]
  //  wx.setStorageSync('userinfo', userinfo)

  wx.setStorage({
    key:"cart",
    data:cart,
    success(res){
      console.log(res)
    }
  })
  
  },

  _getStorage(){
    let res = wx.getStorageSync('cart')
    // console.log(res)

    wx.getStorage({
      key:"cart",
      success(res1){
        console.log(res1.data)
      }

    })

  },
  _deleteStorage(){
    // let res = wx.removeStorageSync('cart')
    // console.log(res)

    wx.removeStorage({
      key: 'logs',
      success(res){
        console.log(res)
      }
    })
  },
  _clearStorage(){
    // let res =  wx.clearStorageSync()
    // console.log(res)

    wx.clearStorage()
  }

3.网络（重点）

语法

wx.request({
	url:"",
	method:"get/post",
	data:{},
	header:{"content-type":"application/json"},
	success(){
	
	},
	fail(){
	
	}
})

3.1get

  _get(){
    wx.request({
      url: 'http://localhost:3000/products',
      method:"GET",
      data:{},
      header:{"content-type":"application/json"},
      success(res){
        console.log(res)
      },fail(err){
        console.log(err)
      }
    })
  },

3.2post请求

  _post(){
    wx.request({
      url: 'http://localhost:3000/login',
      method:"POST",
      data:{name:"lisi"},
      header:{"content-type":"application/json"},
      success(res){
        console.log(res)
      }
    })
  }

http://www.niftyadmin.cn/n/508973.html

相关文章

服务器搬迁方案_邮箱数据协议迁移方案

服务器搬迁方案_邮箱数据协议迁移方案

功能简介网易企业邮箱提供邮件系统搬迁功能&#xff0c;给予刚开始启用网易企业邮箱的客户&#xff0c;用于完整地搬迁企业原邮件系统的邮箱帐号、密码以及邮箱里的所有邮件&#xff0c;让企业客户可以更快捷、更轻松地完成邮件系统搬迁工作。网易企业邮箱邮件系统搬迁功能&…
阅读更多...
供应商去市网维护银行账号信息_SAP MM供应商主数据

供应商去市网维护银行账号信息_SAP MM供应商主数据

SAP供应商主数据包括通用数据&#xff0c;会计数据&#xff0c;采购组织数据。通用数据属于(client)客户端级别数据&#xff0c;适用于同客户端所有公司&#xff0c;会计数据属于公司代码级别数据&#xff0c;采购组织数据属于采购组织级别数据。供应商主记录包含有关某个企业的…
阅读更多...
微信小程序常用界面api及案例、获取用户信息、获取手机号、WeUI组件库、微信小程序云开发、云函数、云存储

微信小程序常用界面api及案例、获取用户信息、获取手机号、WeUI组件库、微信小程序云开发、云函数、云存储

三.常用界面api及案例 常用界面API&#xff1a;wx.showToast()、wx.showLoading()、wx.hideLoading()、wx.setNavigationBarTitle() 案例需求&#xff1a;请求接口&#xff0c;获取数据&#xff0c;进行数据渲染&#xff0c;添加点击事件&#xff0c;跳转页面&#xff0c;动态…
阅读更多...
excel图片地址直接显示图_图片如何转换成pdf？免费教你几个宝藏方法，请低调使用！...

excel图片地址直接显示图_图片如何转换成pdf？免费教你几个宝藏方法，请低调使用！...

图片如何转换成pdf&#xff1f;很多人在传输图片的时候都喜欢直接打包文件将其压缩再传送&#xff0c;其实这样并不方便他人查看&#xff0c;并且受到压缩/解压缩工具的限制&#xff0c;很可能对方压根无法查看收到的图片。建议大家可以尝试把图片转换为PDF再进行传输&#xff…
阅读更多...
微信小程序、组件代码特性共享Behavior及计算属性computed

微信小程序、组件代码特性共享Behavior及计算属性computed

组件代码特性共享Behavior及计算属性computed 1.Behavior组件间代码共享特性 1.1介绍 behavior是用于组件间代码共享的特性,意思就是定义一部分公共代码特性&#xff0c;每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时&#xff0c;它的属性、数据…
阅读更多...
应届生web前端面试题_Web前端面试问什么？2020Web前端常见面试题及答案

应届生web前端面试题_Web前端面试问什么？2020Web前端常见面试题及答案

想成功就业Web前端工程师&#xff0c;想要高薪就业&#xff0c;不只要掌握Web技能&#xff0c;还需懂得面试技巧和面试时常见面试题做好面试时的准备。小科今日整理了五道前端常见面试题及答案解析&#xff0c;希望对您Web前端学习或面试提供参考。开课吧Web前端面试题及答案We…
阅读更多...
微信小程序如何进行分包，两兆变20，单车变摩托

微信小程序如何进行分包，两兆变20，单车变摩托

工程优化 1.分包 某些情况下&#xff0c;开发者需要将小程序划分成不同的子包&#xff0c;在构建时打包成不同的分包&#xff0c;用户在使用时按需进行加载。每个使用分包小程序必定含有一个主包。所谓的主包&#xff0c;即放置默认启动页面/TabBar 页面&#xff0c;以及一些…
阅读更多...
java计算器做连续运算_苹果、华为、小米手机计算器都阵亡？10%+10%=0.11？原来这个逻辑...

java计算器做连续运算_苹果、华为、小米手机计算器都阵亡？10%+10%=0.11？原来这个逻辑...

最近大量网友反馈称&#xff0c;苹果、华为、小米、OPPO等智能手机上自带的计算器计算10%10%0.11&#xff0c;而不是等于0.2。快看看你手机上的计算器能算出10%10%0.2不&#xff1f;据说只有中兴旗下努比亚、魅族、联想等手机能算出10%10%0.2。这到底是怎么啦&#xff1f;&…
阅读更多...
最新文章

Copyright @ 2022~2023