• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序开发3 自定义组件(传参), 页面跳转(传参), 小程序本地存储, 小程序向djang ...

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

自定义组件

如何自定义组件

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: {        // properties属性是受页面控制的, 下面的data属性是不受页面控制的
    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){    // 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来选择和上面一样的跳转方式

具体参数见    https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

 

小程序本地数据的存储

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域名

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap