微信小程序开发3 自定义组件(传参), 页面跳转(传参), 小程序本地存储, 小程序向django请求接口
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域名
