自定義組件
如何自定義組件：
1.創建一個文件夾，這個文件夾用來存放所有的自定義組件
2.每個組件都由一個文件夾包裹，模擬pages的方式來管理自定義組件
com.wxml
<text>components/com/com.wxml</text>
<view>God is a girl!</view>
com.json
{
"component": true,
"usingComponents": { }
}
3.在頁面引用自定義組件，必須在test.json中注冊我們的自定義組件
{
"usingComponents": {
"com" : "/componentes/com/com"
}
}
4.在test.wxml中就可以直接使用
<text>pages/test/test.wxml</text>
<view>
<com></com>
</view>
test頁面就會顯示：
pages/test/test.wxml
components/com/com.wxml
God is a girl!
頁面向組件傳值
1.組件中的xml文件肯定是有一個變量來接收頁面的傳值
name值是由頁面決定的
<view>{{name}} is girl!</view>
2.我們要在組件的js文件中給這個name變成組件的屬性：
properties:{
// 屬性名
name:{
type:String, //屬性的類型
value:"god" // 屬性的默認值，如果頁面沒有給這個name賦值，就使用這個value
}
}
3.頁面中直接給這個組件的name屬性賦值
兩種方式：
<com name = "godlover"></com> //可以是固定值
<com name = "{{name}}"></com> //這里的可以是變量 再在js中給變量賦值 data:{name:"godsee"}
結果：
pages/test/test.wxml
components/com/com.wxml
godlover is a girl!
components/com/com.wxml
godsee is a girl!
組件向頁面傳遞事件
1.組件要綁定一個事件
<button bindtap="com_jia" data_num="3">點我增加三</button>
2.在組件的js中：
/**
* 組件的方法列表
*/
methods:{
com_jia:function(e){
console.log(e) // e里的dataset.num包含這個參數
// 把事件拋給頁面
this.triggerEvent("jia1",{num:e.currentTarget.dataset.num})
// jia1是組件向頁面拋出的事件類型，所以我們在頁面中 要去捕獲這個事件，如果我們要向頁面拋事件時候傳參數：｛num:e.currentTarget.dataset.num｝
}
}
3.頁面wxml中如何捕獲組件傳過來的事件：
<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)
})
}
圖片展示：
console.log(e) e里的dataset.num包含這個參數
console.log(e) 組件傳過來的參數，在e.detail中
小程序的頁面跳轉
小程序的頁面跳轉有兩種，一種是通過a標簽，一種是通過js
這里說的是js
wx.SwitchTab({
url:'/pages/test/test',
}) // 只能跳轉到tabBar頁面，不能跳轉到非tarBar頁面，並且關閉所有非tarBar頁面，url不能攜帶參數
wx.reLauch({
url:'/pages/test1/test1?name=123&age=18',
}) // 關閉所有的頁面，打開應用內的某個頁面，他的url可以攜帶參數，在跳轉到的頁面的onload生命周期函數中去接受
wx.redirectTo({
url:'/pages/test1/test1?name='+this.data.name1+'&age=17',
})// 關閉當前頁面，跳轉到應用內的某個頁面，但是不允許跳轉到tabBar頁面，他的路由也是可以攜帶參數的
wx.navigateTo({
url:'/pages/test1/test1?name=333'
})// 保留當前頁面，跳轉到應用的某個頁面，但是不能跳轉到tabBar頁面，可以使用wx.navicateBack返回原來的頁面，他的url也可以帶參數，小程序中頁面最多的棧有10層，to進棧，back出棧
多了一個回退按鈕
//delta 表示回退多少層
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',"god") // 存
wx.setStorageSync('name1',"godlover")
},
qu:function(){
wx.setStorageSync('name',"god is girl") // 改
console.log(wx.getStorageSync('name')) // 取
}，
del:function(){
// wx.clearStorageSync() // 清除所有的本地數據
wx.removeStorageSync('name') // 清除指定的本地數據
}
存數據：
取數據：
小結：
1.本地存儲有同步也有異步，用法一樣
2.這個本地數據的生命周期，和小程序同步，要清除數據，除非我們用代碼刪除，或者用戶刪除小程序，清理微信數據
3.本地數據單個鍵最多只能存1M內容，所有本地數據不能超過10M
小程序如何向我們的django等服務請求接口（wx.request）
wxml
<button bindtap="reque">請求</button>
js
reque:function(){
wx.request({
url:'http://127.0.0.1:8000/test/', //路由
data:{ //數據
"name":"god"
},
method:"post",//請求方法
header:{
//請求頭
"content-type":"application/json"
},
success(e){//回調
//e為后台返回的值
console.log(e.data.data)
}
})
}
本地請求接口的時候，一定要關閉小程序編輯器中的詳情——》本地設置——》不校驗https域名
后端django
views.py
from rest_framework.views import APIView
from rest_framework.response import Response
class Test(APIView):
def post(self, request):
print(request.data)
return Response({"code": "ok", "data": request.data})
urls.py
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())
]
圖片展示：
