小程序模板網

微信小程序學習--傳遞參數的3種方式

發(fā)布時間:2018-04-21 10:03 所屬欄目:小程序開發(fā)教程

學習兩周左右微信小程序了,做個小結吧,以后有時間再學了。玩玩還是挺有意思的。以下是小結: 
傳遞參數的3種方式(注意:以下傳遞的參數名都要使用小寫字母,不要使用駝峰命名法或任何有大寫字母的命名方式,不然傳遞過去都會被強轉成小寫字母,導致獲取的時候出錯?。。?nbsp;
1、形式如 data-variable="{{variable}}",(variable代表變量名): 
.wxml設置傳遞的參數:variable,格式如下:

 

				
  1. [html] view plain copy print?
  2. <view bindtap="functionName" data-variable="{{variable}}">

.js接收傳遞過來的參數:event.currentTarget.dataset.variable;(注意是currentTarget而不是target,直接console.log(event);具體可在控制臺查看event存放的數據結構再決定訪問方式。)

 

				
  1. [javascript] view plain copy print?
  2. functionName:function(event){
  3. console.log(event);
  4. var variableData = event.currentTarget.dataset.variable;
  5. }

2、形式如 variable="{{variable}}",(variable代表變量名):(此方式經測試貌似有局限性,只能傳遞id過去,其它變量名無法接收),接收id:event.currentTarget.id或event.target.id。  hotMovies.wxml文件:

 

				
  1. [html] view plain copy print?
  2. <view wx:for="{{hotMovies(你的內容)}}" wx:for-item="item">
  3. <view class="picView">
  4. <image class="pic" src="{{item.images.medium(你的圖片路徑)}}" id="{{item.id(每一項的id)}}" bindtap="toDetail(綁定的點擊函數)" />
  5. </view>
  6. </view>
  7. hotMovies.js文件:
  8. [javascript] view plain copy print?
  9. toDetail: function (event) {//參數:事件對象
  10. console.log(event);
  11. wx.navigateTo({
  12. url: '/pages/detail/detail?id=' + event.currentTarget.id,/**url傳參*/
  13. })
  14. }

3、繼續(xù)接著2的例子看,這個主要是 url 傳參:  hotMovies.js文件:

 

				
  1. [javascript] view plain copy print?
  2. toDetail: function (event) {//參數:事件對象
  3. console.log(event);
  4. wx.navigateTo({
  5. url: '/pages/detail/detail?id=' + event.currentTarget.id,/**url傳參*/
  6. })
  7. }

detail.js文件:

 

				
  1. [javascript] view plain copy print?
  2. onLoad: function (options) {
  3. /**括號內的options可以改名的,結果一樣,無影響,已測試!*/
  4. console.log("options:");
  5.  
  6. console.log(options);//就是一個接收傳遞過來的參數的對象
  7. var filmId = options.id;(接受url傳參,不限制只能傳遞id變量名,可以傳遞多個變量名值)
  8. console.log(filmId);//獲取在首頁點擊的電影圖片的id
  9. /**具體邏輯實現 */
  10. }

設置一個input輸入要搜索的內容加上一個按鈕點擊即搜索(簡單例子):  .wxml文件

 

				
  1. [html] view plain copy print?
  2. <input bindinput="keyword" placeholder="默認文字的內容" placeholder-style="默認文字的樣式"/>
  3. <button bindtap="requestSomething" data-keyword="{{keyword}}">搜索</button><!--data-keyword
  4.  
  5. 向函數傳參keyword-->

.js文件

 

				
  1. [javascript] view plain copy print?
  2. keyword:function(event){
  3. this.setData({
  4. keyword:event.detail.value /**獲取input輸入的值并設置到搜索值 */
  5. });
  6. }
  7. requestSomething: function (event) {
  8. var keyword = null;
  9. if(event){//點擊了搜索按鈕才有此值
  10. keyword = event.currentTarget.dataset.keyword;/**獲取到值后再請求相關數據 */
  11. }
  12. /**此處根據需要請求相關api獲取數據 */
  13. }

微信小程序本地存儲數據與讀取數據:  存儲數據:

 

				
  1. [javascript] view plain copy print?
  2. wx.setStorage({
  3. //不會覆蓋原來key的內容!
  4. key: 'detailInfo'+id,
  5.  
  6. data: data,
  7.  
  8. })

或wx.setStorageSync('key', data); //會覆蓋原來key的內容來存儲新的內容!

讀取數據:

 

				
  1. [javascript] view plain copy print?
  2. var storageInfo = wx.getStorageSync(key);/**獲取本地同步數據 */

微信小程序的發(fā)請求request:

 

				
  1. [javascript] view plain copy print?
  2. var data={...params...};//傳遞的參數對象
  3. wx.request({
  4. url: url, //請求api的接口地址
  5. data: data,//傳遞的參數
  6. header: {
  7. 'content-type': 'json'//不能寫"application/json"否則報400錯誤。
  8. },
  9. success: function (res) {//請求數據成功后才執(zhí)行的回調函數。
  10. console.log(res);
  11. that.setData({/**放在外部沒效果,因為還沒執(zhí)行成功就分配了數據結果是空數據 */
  12. key: value
  13. });
  14. wx.setStorageSync('key', data);//第一次請求之后存儲數據在本地
  15. }
  16. });


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/23865.html 復制鏈接 如需定制請聯系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢