|
學習兩周左右微信小程序了，做個小結吧，以后有時間再學了。玩玩還是挺有意思的。以下是小結：
傳遞參數的3種方式（注意：以下傳遞的參數名都要使用小寫字母，不要使用駝峰命名法或任何有大寫字母的命名方式，不然傳遞過去都會被強轉成小寫字母，導致獲取的時候出錯?。。?nbsp;
1、形式如 data-variable="{{variable}}"，(variable代表變量名)：
.wxml設置傳遞的參數:variable，格式如下：
-
[html] view plain copy print?
-
<view bindtap="functionName" data-variable="{{variable}}">
.js接收傳遞過來的參數:event.currentTarget.dataset.variable;（注意是currentTarget而不是target，直接console.log(event);具體可在控制臺查看event存放的數據結構再決定訪問方式。）
-
[javascript] view plain copy print?
-
functionName:function(event){
-
console.log(event);
-
var variableData = event.currentTarget.dataset.variable;
-
}
2、形式如 variable="{{variable}}"，(variable代表變量名)：（此方式經測試貌似有局限性，只能傳遞id過去，其它變量名無法接收），接收id:event.currentTarget.id或event.target.id。 hotMovies.wxml文件：
-
[html] view plain copy print?
-
<view wx:for="{{hotMovies(你的內容)}}" wx:for-item="item">
-
<view class="picView">
-
<image class="pic" src="{{item.images.medium(你的圖片路徑)}}" id="{{item.id(每一項的id)}}" bindtap="toDetail(綁定的點擊函數)" />
-
</view>
-
</view>
-
hotMovies.js文件：
-
[javascript] view plain copy print?
-
toDetail: function (event) {//參數：事件對象
-
console.log(event);
-
wx.navigateTo({
-
url: '/pages/detail/detail?id=' + event.currentTarget.id,/**url傳參*/
-
})
-
}
3、繼續(xù)接著2的例子看，這個主要是 url 傳參： hotMovies.js文件：
-
[javascript] view plain copy print?
-
toDetail: function (event) {//參數：事件對象
-
console.log(event);
-
wx.navigateTo({
-
url: '/pages/detail/detail?id=' + event.currentTarget.id,/**url傳參*/
-
})
-
}
detail.js文件：
-
[javascript] view plain copy print?
-
onLoad: function (options) {
-
/**括號內的options可以改名的，結果一樣，無影響，已測試！*/
-
console.log("options:");
-
-
console.log(options);//就是一個接收傳遞過來的參數的對象
-
var filmId = options.id;（接受url傳參，不限制只能傳遞id變量名，可以傳遞多個變量名值）
-
console.log(filmId);//獲取在首頁點擊的電影圖片的id
-
/**具體邏輯實現 */
-
}
設置一個input輸入要搜索的內容加上一個按鈕點擊即搜索（簡單例子）： .wxml文件
-
[html] view plain copy print?
-
<input bindinput="keyword" placeholder="默認文字的內容" placeholder-style="默認文字的樣式"/>
-
<button bindtap="requestSomething" data-keyword="{{keyword}}">搜索</button><!--data-keyword
-
-
向函數傳參keyword-->
.js文件
-
[javascript] view plain copy print?
-
keyword:function(event){
-
this.setData({
-
keyword:event.detail.value /**獲取input輸入的值并設置到搜索值 */
-
});
-
}
-
requestSomething: function (event) {
-
var keyword = null;
-
if(event){//點擊了搜索按鈕才有此值
-
keyword = event.currentTarget.dataset.keyword;/**獲取到值后再請求相關數據 */
-
}
-
/**此處根據需要請求相關api獲取數據 */
-
}
微信小程序本地存儲數據與讀取數據： 存儲數據：
-
[javascript] view plain copy print?
-
wx.setStorage({
-
//不會覆蓋原來key的內容！
-
key: 'detailInfo'+id,
-
-
data: data,
-
-
})
或wx.setStorageSync('key', data); //會覆蓋原來key的內容來存儲新的內容！
讀取數據：
-
[javascript] view plain copy print?
-
var storageInfo = wx.getStorageSync(key);/**獲取本地同步數據 */
微信小程序的發(fā)請求request:
-
[javascript] view plain copy print?
-
var data={...params...};//傳遞的參數對象
-
wx.request({
-
url: url, //請求api的接口地址
-
data: data,//傳遞的參數
-
header: {
-
'content-type': 'json'//不能寫"application/json"否則報400錯誤。
-
},
-
success: function (res) {//請求數據成功后才執(zhí)行的回調函數。
-
console.log(res);
-
that.setData({/**放在外部沒效果，因為還沒執(zhí)行成功就分配了數據結果是空數據 */
-
key: value
-
});
-
wx.setStorageSync('key', data);//第一次請求之后存儲數據在本地
-
}
-
});
|
