微信小程序自定义组件，页面跳转，本地数据的存取删和获取django的服务接口
如何自定义组件
1 创建一个文件夹，这个文件夹用来存放所有自定义组件
2 没有个组件都一个文件夹包裹，模拟这个pages的方式来管理自定义组件
3 在页面引用自定义组件，必须现在某个page.json中注册我们自定义组件
/**
{
"usingComponents": {
"com" : "/componentes/com/com"
}
}
**/
4 在page.wxml中就可以直接使用了
<com></com>
总结：创建/注册/引用
页面向组件传值
1 组件中的com.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)
//把事件jia1抛给页面
this.triggerEvent("jia1",{num:e.currentTarget.dataset.num}) //jia1是组件向页面抛出的事件类型。所以我们在页面重要去捕获这个事件，如果我们要向页面抛事件时候，传参数，例如：{num:e.currentTarget.dataset.num}
}
}
3 页面中如何捕获组件中传过来的事件jia1；
<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
})
wx.redirectTo与wx.navigateTo的区别
1.利用wx.navigateTo跳转到下一个页面的时候（这时候会执行onHide方法），下一个页面头部会有返回按钮
2.如果不想有返回按钮，可以用wx.redirectTo进行页面跳转（这时候关闭此页面，会执行onUnload生命周期，这样下一个页面就不会有返回按钮了，因为上一个页面已经被关闭了，没有页面可以返回）
路由跳转的标签形式
<navigator url="/pages/test/test" open-type="switchTab" >跳转到新页面</navigator>
通过open-type来选择和上面一样的跳转方式
官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
导航组件Navigator
小程序本地数据的存储
wxml
<button bindtap="cun">存数据</button>
<button bindtap="qu">取数据</button>
<button bindtap="del">删</button>
js
wx.setStorageSync(string key, any data)(同步)
参数
string key: 本地缓存中指定的 key
any data: 需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。
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') //清除指定的本地数据
}
wx.setStorage(Object object)（异步）
参数
Object object
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| key | string | 是 | 本地缓存中指定的 key | |
| data | any | 是 | 需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。 |
|
| success | function | 否 | 接口调用成功的回调函数 | |
| fail | function | 否 | 接口调用失败的回调函数 | |
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
示例代码
wx.setStorage({
key: 'key',
data: 'value'
})
try {
wx.setStorageSync('key', 'value')
} catch (e) { }
总结：
1 本地存储有同步，也有异步，用法一样，同步与异步的区别，就是我们平时理解的同步与异步
2 这个本地数据的生命周期，和小程序同步，要清除数据，除非我们用代码删除，或者用户删除（卸载）小程序，用户清理微信数据
3 本地数据单个键最多只能存1M内容，所有本地数据不能超过10M.
小程序如何向我们django等服务请求接口（wx.request）
pycharm起一个django
#注册settings.py
INSTALLED_APPS = [
'rest_framework'
]
# app01.views
from rest_framework.views import APIView
from rest_framework.response import Response
# Create your views here.
class Test(APIView):
def post(self, request):
print(request.data)
return Response({"code":"ok", "data":"request.data"})
#总路由
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^test/', views.Test.as_view()),
]
page.wxml
<button bindtap="qing">请求</button>
page.js(类似于ajax)
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域名
