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