小程序第二天
bindtap 單擊事件（會冒泡）
不想要冒泡 catchtap
bindtouchstart
bindxxx， bind開頭的會冒泡；catchxxx ，catch開頭的不會冒泡；
bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。
- 事件觸發的函數 寫在 js裏面和data是同級；
- 事件函數裏面e是事件參數 裏面有坐標觸發的目標 ；
e.detail 坐標
參數只能 寫 自定義屬性 data-xxx：
<button bindtap="abc" data-id="1" data-name="張三">點擊</button>參數怎麽獲取：
e.target.dataset.id
e.target.dataset.name
1.雙向數據綁定 vue angular
v-model 文本框綁定的值一改變就全改變 只需要寫好即可 框架會自動給你觸發；
- 單向數據綁定
沒有v-model這種功能了 數據改變 需要你自己寫代碼去做；
怎麽改變數據？this.setData()
this.setData({username:“另一個值”})
bindinput 文本框值改變就會觸發這個事件
移動端：
- 百分比；
- rem 現在比較流行的；
- rpx 微信小程序特有的，微信已經給你計算好了比例 你直接用；
750rpx 百分百；
375rpx 一半屏幕；（也可以用百分比）；
小程序怎麽發送一個類似ajax請求，沒有跨域概念
wx.request({
url:"...",
data: ,
success:function(res){
}
})
如果真實開發 需要在 小程序賬號裏面配置你要請求的地址；
申請域名服務器
1，阿裏雲買域名 www.abc.com
- 買服務器 配置域名和服務器的對應關系
- 服務器域名需要備案 （現在一般需要20天） ××× 合同單
發請求——如果成功之後再發送，那麽會一直在success裏面嵌套下去
這種一直嵌套的函數 會形成 地獄回調，新語法 promise 可以解決這個問題。
module.exports 導出東西給別人用
new Promise((resolve, reject) => {
wx.request({
url:
https://locally.uieee.com/${url},data: data,
success: resolve,
fail: reject
})
})
new Promise 給一個承諾
resolve 成功會觸發這個
reject 失敗會觸發這個
使用
必須.then才會去拿到結果
返回的promise對象.then(function(){
//成功會執行這個函數 就是resolve
},
function(){
//失敗 就是reject
}
)
promise資料
http://es6.ruanyifeng.com/#docs/promise
跳轉要使用 navigator 這個標簽
- 輪播圖
是否可以點擊跳轉 如果有link這個屬性就可以跳轉 沒有就不行
<navigator wx:if="{{item.link}}" url="{{item.link}}">
<image src="{{item.image}}" mode="aspectFill"/>
</navigator>
<image wx:else src="{{item.image}}" mode="aspectFill"/>
2.九宮格
跳轉到list頁面
<navigator class="item" url="/pages/list/list?cat={{item.id}}
cat當前分類
如果點擊跳轉到了list頁面
list頁面
1.獲取到你是哪個分類
在 onLoad: function (options) {
//options獲取到的是url傳過來的參數
}
- 發送請求拿到當前分類的數據
- 顯示當前分類的商品
設置頭部中間的名字 - 在json裏面配置 但是這種是寫死
- 使用js代碼來操作
wx.setNavigationBarTitle({
title: ‘美食‘ })
渲染當前分類的數據
下拉加載 不需要你去判斷 你只需要配置好
list.json
"onReachBottomDistance": 20 距離底部20px的時候就觸發去加載下一頁
觸發的函數在
list.js
onReachBottom: function () {
// console.log(‘到底了，別拉了‘)
// 在這裏加載下一頁的數據
//發送請求獲取下一頁的數據顯示追加到頁面上
loadMore()函數是封裝的發送request請求下一頁
下拉刷新 配置
list.json
"enablePullDownRefresh": true, 啟用下拉刷新
刷新觸發的函數
list.js
onPullDownRefresh: function () {
// 發送請求獲取 到第一頁的數據 然後更新頁面 數據能改成初始狀態的都要改
}
點擊某個商品 跳轉到詳情頁
為了知道是哪個商品 我們需要把當前商品的id傳過去
1.詳情頁 獲取到商品id 發送請求拿到圖片 拿到對應的評論
- 點擊圖片
調用微信提供的方法
wx.previewImage()
做的效果 和 手機自帶的功能有關系 那麽一般小程序都自己封裝了
vue接口
http://vue.studyit.io/api/getlunbo
小程序第二天