zoukankan      html  css  js  c++  java
  • 微信小程序三

    昨日回顾

    1 小程序的双线程默写,渲染线程和逻辑线程来共同完成页面的渲染,当数据有改变的时候采用是的diff算法,来改变不同的数据,也就是变化的数据,把变化数据传递渲染层。
    2 app.js中的App对象的生命周期,
    - onlaunch 在小程序初始话完成,会触发,整个小程序全局只触发一次,除非关闭小程序,重新打开,才会再次执行一次
    - onshow 当小程序启动的时候会执行,还有当小程序从后台切换到前台,这里的后台指的是,手机在后台运行,前台,指的是,在小程序在手机的前台运行,onshow里面有一个参数,这个参数中的scene可以判断用户是通过怎样场景进入小程序的。
    - onhide 当小程序从前台切换到后台的时候,会执行onhide。这个里的前后台和上面onshow的前后台意思一样。
    - app中还可以设置全局的变量,让所有都可以使用
    
    3 page.js 中page对象的生命周期
    - onload加载页面的时候会执行,页面在不关闭,只会执行一次。
    - onshow 监听页面的显示,当页面从页面的覆盖,到显示的时候,会执行onshow
    - onhide 在页面重显示变成覆盖的时候,会执行onhide。
    - onunload 当页面被销毁(卸载)的时候,会执行
    - onready 当页面初次渲染真实的dom的时候,会执行,这说明他也只会执行一次
    - onpulldownrefresh 下拉刷新的时候会执行。但是这个页面配置必须enablepulldownrefresh=true
    - onReachBottom 页面上拉到底部触发的事件,这个触发条件,必须一个页面不够显示,必须大于页面长度50px,才会触发 
    
    4 事件的绑定,<button bind:事件名="响应函数的函数名" data-变量名 = "变量值">我是按钮</button>
    事件的响应函数,就直接是写在 page对象里面。上面事件传递的参数,可以在响应函数中接收。
    
    

    自定义组件

    如何自定义组件

    1 创建一个文件夹,这个文件夹用来存放所有自定义组件
    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 ="jia"></com>
    
    4 页面的事件的响应函数
     jia: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域名
    
    
  • 相关阅读:
    我的WCF之旅(1):创建一个简单的WCF程序
    网页设计中颜色的搭配
    CSS HACK:全面兼容IE6/IE7/IE8/FF的CSS HACK
    UVa 1326 Jurassic Remains
    UVa 10340 All in All
    UVa 673 Parentheses Balance
    UVa 442 Matrix Chain Multiplication
    UVa 10970 Big Chocolate
    UVa 679 Dropping Balls
    UVa 133 The Dole Queue
  • 原文地址:https://www.cnblogs.com/yafeng666/p/12466695.html
Copyright © 2011-2022 走看看