小程序自定义组件，页面跳转

目录

• 自定义组件
• 页面向组件传值
• 组件向页面传递事件
• 小程序的页面跳转
• 小程序本地数据的存储
• 小程序如何向 Django 等服务请求接口（wx.request）

自定义组件

如何自定义组件

1. 创建一个文件夹 components ，这个文件夹用来存放所有自定义组件

2. 每个组件都被一个文件夹包裹，模拟这个 pages 的方式来管理自定义组件

3. 在页面引用自定义组件，必须现在 page.json 中注册我们自定义组件

   /**
   {
     "usingComponents": {
       "com" : "/componentes/com/com"
     }
   }
   
   **/
   

4. 在 wxml 中就可以直接使用

   <com></com>
   

页面向组件传值

1. 组件中的 wxml 文件肯定有一个变量来接收页面的传值

   <!-- name值是由页面决定的 -->
   <view>{{name}} is dsb</view>
   

2. 我们要在组件的 js 文件中给这个 name 变成组件的属性：

     properties: {
       name:{    //属性名
         type:String,  //属性的类型
         value:"egon"  // 属性的默认值，如果页面没有给这个name赋值，就使用这个value的值
       }
     },
   

3. 页面中直接给这个组件的name属性赋值就可以了，就相当于传值

   <com name = "lxx"></com>  //可以是固定值
   <com name = "{{name1}}"></com> //这里的可以是变量
   

组件向页面传递事件

1. 组件要绑定一个事件 写法如下

   <button bindtap="com_jia" data-num="3">点我加1</button>
   

2. 在组件的 js 中的中：

     /**
      * 组件的方法列表
      */
     methods: {
       com_jia:function(e){
         console.log("con-jia",e)
         // 把事件抛给页面
         this.triggerEvent("jia1",{num:e.currentTarget.dataset.num}) 
           // jia1是组件向页面抛出的事件类型。所以我们在页面重要去捕获这个事件，
           // 如果我们要向页面抛事件时候，传参数，例如：{num:e.currentTarget.dataset.num}
       }
     }
   

3. 页面中如何捕获组件中传过来的事件

   <com  bind:jia1 ="jia1"></com>
   

4. 页面的事件的响应函数

    jia1:function(e){
       console.log(e)//组件传过来的参数，在e.detail中
       var that = this
       that.setData({
         num : that.data.num + +(e.detail.num)
       })
      
     }
   

小程序的页面跳转

小程序的页面跳转又两种，一种是通过标签，一种是通过 js,我们只讲js,因为标签和js很像

    // 只能跳转到tabBar页面，不能跳转到非tabBar页面，并且关闭
    //所有非tabBar页面，url不能携带参数
     wx.switchTab({
      url: '/pages/test/test',
     })


  //关闭所有的页面，打开应用内的某个页面，他的url可以携带参数
  //在跳转页面的onload生命周期函数中去接收
     wx.reLaunch({
        url: '/pages/test1/test1?name=123&age=18',
      })


    //关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到
    //tabbar页面，他的路由也是可以携带参数的
    wx.redirectTo({
    	url: '/pages/test1/test1?name='+this.data.name1+'&age=17',
     })

    //保留当前页面，跳转到应用内的某个页面，但是不能跳转到
    //tabbar,可以使用wx.navigateBack返回到原来的页面，
    //他的url也可以带参数，小程序中页面最多栈10层
    wx.navigateTo({
      url: '/pages/test1/test1?name=333',
    })

  //delat表示回退多少层
  wx.navigateBack({
     delta:1
   })

路由跳转的标签形式

 <navigator url="/pages/test/test" open-type="switchTab" >跳转到新页面</navigator>
 通过open-type来选择和上面一样的跳转方式

小程序本地数据的存储

wxml

 <button bindtap="cun">存数据</button>
  <button bindtap="qu">取数据</button>
   <button bindtap="del">删</button>

js

  cun:function () {
    wx.setStorageSync('name', "jason") //存
    wx.setStorageSync('name1', "sean")
  },
  qu:function () {
    wx.setStorageSync('name', "jason is  sb") //改
   console.log( wx.getStorageSync('name')) //取
  },
  del:function() {
    //wx.clearStorageSync() //清除所有的本地数据
    wx.removeStorageSync('name') //清除指定的本地数据
    
  }

总结：

1. 本地存储有同步，也有异步，用法一样，同步与异步的区别，就是我们平时理解的同步与异步
2. 这个本地数据的生命周期，和小程序同步，要清除数据，除非我们用代码删除，或者用户删除（卸载）小程序，用户清理微信数据
3. 本地数据单个键最多只能存1M内容，所有本地数据不能超过10M

小程序如何向 Django 等服务请求接口（wx.request）

wxml

 <button bindtap="qing">请求</button>

js

qing:function(){
    wx.request({
      url: 'http://127.0.0.1:8000/test/', //路由
      data:{   //数据
        "name":"egon"
      },
      method:"POST",//请求方法
      header:{ //请求头
        "content-type":"application/json"
      },
      success(e){ //回调
          //e为后台返回的值
        console.log(e.data)
      }
    })

  }

注意

本地请求接口的时候，一定要关闭小程序编辑器中的 详情 -> 本地设置 -> 不校验https域名