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