微信小程序、uniapp、Taro事件绑定和组件通信以及路由跳转的区别

微信小程序、uniapp、Taro事件绑定和组件通信以及路由跳转的区别

微信小程序(微信小程序语法)

双引号内嵌双大括号语法"{ {}}"

基本语法

• wx:for="{ {}}"
• wx:key="" (此处不加{ {}}))
• wx:for-item=""
• 小程序根元素为page

修改data中的数据 this.setData({…})

事件绑定

• 绑定事件: bindtap–>轻触 (绑定事件不加{ {}})
  • bindtap catchtap (会阻止事件冒泡)
  • 事件函数要写在methods中
• 事件传参 data-

   
  <view bindtap="toDetail"  data-proid=" {
          {item.proid}}">view>
  

  methods: {
         
  toDetail(event){
         
      //在事件对象中通过event.currentTarget可以获得data-...传过来的值
      const {
         proid} = event.currentTarget.dataset
      let pro=proid.slice(1)
          wx.navigateTo({
         
              url: '/pages/detail/detail?proid='+pro,
          })
      }
  }
  

自定义组件及父子组件通信

1. 自定义组件

   • 定义

     // 组件.json文件
     {
              
         "component": true,
         "usingComponents": {
              }
     }
     

   • 引入

     //页面.json文件
     {
              
         "navigationBarTitleText": "首页",
         "enablePullDownRefresh": true,
         "usingComponents": {
              
             "prolist": "/components/prolist/prolist" //组件名:路径
         }
     }
     
     //使用
     <prolist prolist="{
              {prolist}}"></prolist>
     

2. 组件通信(父子通信)

   // 父组件给子组件传参
   <prolist prolist="{
          {prolist}}"></prolist>
   

   // 子组件接收参数
   //.js文件 properties选项接收参数
   //在子组件定义的地方,添加properties对象(.js文件中),key是自定义属性名,值是 数据类型
   properties: {
          
       prolist:Array
   }
   

   
   
   <view class="item" wx:for="{
           {prolist}}" wx:key="{
           {item.proid}}">
       ...
   view>
   

页面间的跳转

1. 声明式导航(a标签跳转)
   • 普通页面跳转

   <navigator url="" open-type="">navigator>
   
   
   

   • 动态路由跳转(路由传参/路由接参)

   
   
   <navigator url="" open-type="">navigator>
   

   //路由接参
   //在跳转到的页面的onLoad(options){}生命周期函数的options对象就是传递的参数
   onLoad(options){
          
       const {
           proid } = options
   }
   

2. 编程式导航 (js跳转 window.location.href="" )
   • 普通路由跳转

   // 定义事件,通过点击事件触发跳转
   toDetail(){
          
       wx.navigateTo({
          
           url: '/pages/detail/detail
       })
       //wx.redirectTo()  
       //wx.reLaunch()
       //wx.swtichTab()  
       //wx.navigateBack()
       // 如果跳转的是Tab页面,可以使用switchTab或relaunch
       // 如果跳转的是非Tab页面,可以使用redirectTo或navigateTo或者relaunch
   }
   

   • 动态路由跳转

     如果要传 数组, 字典等复杂类型, 要先用 JSON.stringify() 转成字符串传递,拼接在?后

   // 路由传参
   // 在url后添加 ?key1=value1&key2=value2...
   wx.navigateTo({
          
       url: '/pages/detail/detail?proid='+pro,
   })
   
   
   //路由接参 
   //在跳转到的页面的onLoad(options){}生命周期函数的options对象就是传递的参数
   onLoad(options){
          
       const {
           proid } = options
   }
   

下拉刷新

• 下拉刷新就是重新请求第一页数据,所以请求数据时要重置页码

// 页面的.json文件中配置
"enablePullDownRefresh": true,

onPullDownRefresh(){
     
    ...
    wx.stopPullDownRefresh() //下拉操作需要手动停止
}

上拉加载

• 重新请求下一页的数据,将获得的数据合并到数组中

onReachBottom(){
     
    ...
}

返回顶部按钮

• 滚动条距离顶部 …px时隐藏

onPageScroll(option){
     
    //监听页面滚动
    //option对象为 "scrollTop":滚动条距离顶部的距离
}

wx.pageScrollTo({
     
    scrollTop:0  //返回顶部
})

uniapp(vue语法)

自定义组件及父子通信

• 定义组件
  • components文件夹下定义组件
• 引入组件

import prolist from .....  //引入
export default {
      
    components:{
     
        prolist  //注册
    }
}

• 父子通信

<prolist :prolist="prolist"/>

//子组件接收参数 
// props选项
/*  在子组件定义的地方,添加props选项,props选项的值式一个数组或者对象
    1. 如果是数组,数组的元素就是自定义的属性名,可以在组件中通过自定义属性名访问数据
    2. 如果是对象,有两种形式
      2.1 key值为自定义属性的属性名,value值为数据类型
      2.2 key值为自定义的属性名,value为一个对象,该对象有两个选项,一个为type(数据类型),一个为default(默认值),如果默认值式对象或者数组,需要把default写为一个函数,返回对象和数组 */
export default{
     
    props:{
         // props选项接收参数   vue有3种形式
        prolist:{
     
            type:Array,
            default:function(){
     
                return []
            }
        }
    },


    props:['prolist']
}

页面间的跳转

1. 声明式跳转

   
   
   <navigator url="" open-type="">navigator>
   

   //路由接参
   //在跳转到的页面的onLoad(options){}生命周期函数的options对象就是传递的参数
   onLoad(options){
          
       const {
           proid } = options
   }
   

2. 编程式跳转
   • 动态路由跳转

     如果要传 数组, 字典等复杂类型, 要先用 JSON.stringify() 转成字符串传递,拼接在?后

   // 路由传参
   // 在url后添加 ?key1=value1&key2=value2...
   uni.navigateTo({
          
       url: '/pages/detail/detail?proid='+pro,
   })
   
   
   //路由接参 
   //在跳转到的页面的onLoad(options){}生命周期函数的options对象就是传递的参数
   onLoad(options){
          
       const {
           proid } = options
   }
   

taro(react语法)

自定义组件及父子通信

//引入组件
import Prolist from '../../components/prolist'

//使用组件
<Prolist prolist={
     this.state.prolist}></Prolist>

 
 <Prolist prolist={this.state.prolist}>Prolist>

// 校验参数
/*  安装prop-types 数据校验模块
组件名称.propTypes={
    参数名:PropTypes.array
} 
*/
//接参  this.props.参数名
this.props.prolist.map(item=>( ... ))

页面间的跳转

1. 声明式跳转

<Navigator url={
     '/pages/detail/index?proid='+item.proid} ></Navigator> 

//获取参数   this.$router.params
componentDidMount(){
     
    console.log(this.$router.params)
}

2. 编程式跳转

Taro.navigateTo({
     
    url:"..."
})

//获取参数   this.$router.params
componentDidMount(){
     
    console.log(this.$router.params)
}

绑定事件

<Button onClick={
     (e,prolist=this.state.prolist)=>{
     
    console.log(e)  //第一个参数为事件对象
    console.log(prolist)  //参数在()中赋值
}}
>按钮</Button>

 <Button onClick={this.aa.bind(this,this.state.prolist)}>按钮Button>

aa(a,e){
     
    console.log(a)   
    console.log(e)   //最后一个参数是事件对象
}