微信小程序之間的參數傳遞、獲取的操作方法

更新時間：2025年01月02日 10:39:12 作者：25號底片~

這篇文章主要介紹了微信小程序中如何獲取和傳遞參數,包括獲取當前頁面參數、單獨input文本框參數的獲取、表單獲取參數信息、點擊表格單元格信息獲取行ID以及前端頁面跳轉傳遞多個參數等,感興趣的朋友跟隨小編一起看看吧

一、獲取當前頁面參數

  onLoad: async function (options) {
    var pages = getCurrentPages() //獲取加載的頁面
    var currentPage = pages[pages.length - 1] //獲取當前頁面的對象
    var options = currentPage.options //如果要獲取url中所帶的參數可以查看options
    this.setData({
      contactid: options.contactid//這里的options.表示獲取參數，contactid表示參數名稱
    })
  },

當前頁面參數可以在小程序開發(fā)工具的右下角查看

二、單獨input文本框參數的獲取

wxml：這里的bindconfirm指的是回車事件，也可以使用別的事件

<input class="input_comments" type="text" bindconfirm="comments" placeholder="請輸入內容"/>

  comments(e) {
    console.log("參數",e.detail.value) //這里面的值就是獲取到文本框在中的值
  },

輸出結果：在文本框輸入：這是一個測試，回車，得到的結果如下

三、表單獲取參數信息（包括多選，下拉列表，文本框，文本域）

案例

wxml

<form action="" bindsubmit="addcontent_submit">
  <view class="pop1" bindtap="customerselect">
    <view class="pop1_title">
      <text style="color:red;">*</text>
      <text>客戶</text>
    </view>
    <view style=" display: flex;">
      <input class="pop1_input" disabled="true" placeholder="請選擇" name="customername" />
      <view style="color:#808080;text-align:right;padding-right:5px;;width:15%">></view>
    </view>
    <view class="customered bright789_view_hide{{showView?'bright789_view_show':''}}">
      <view class="customered1">
        <view class="customered_title">客戶名稱</view>
        <view class="customered_content" >{{valid.customer_name}}</view>
      </view>
    </view>
  </view>
  <view class="pop2">
    <view class="pop2_title">
      <text style="color:red;">*</text>
      <text>姓名</text>
    </view>
    <input class="pop2_input" placeholder="請輸入" name="contactname" />
  </view>
  <view class="pop3">
    <view class="pop3_title">
      <text>手機號</text>
    </view>
    <input class="pop3_input" placeholder="請輸入" name="contactphone" />
  </view>
  <view class="pop4">
    <view class="pop4_title">
      <text>職位</text>
    </view>
    <view class="pop4_checkbox">
      <checkbox-group bindchange="handleItemChange">
        <checkbox value="{{item.jobname}}" wx:for="{{list}}" wx:key="id">
          {{item.jobname}}
        </checkbox>
      </checkbox-group>
      <view>選中職位：{{checkedList}}</view>
    </view>
  </view>
  <view class="pop5" bindtap="policymaker">
    <view class="pop5_title">
      <text>是否為關鍵決策人</text>
    </view>
    <picker name="policymaker" bindchange="bindPickerChange6" value="{{index6}}" range="{{selectDatas6}}">
      <view class="pop5_input" style="float:left" name="policymaker">
        {{seleNull6?selectDatas6[index6]:'請選擇'}}
      </view>
      <view style="font-size:18px;color:#808080;float:right;width:20px;">></view>
    </picker>
  </view>
  <view class="pop6">
    <view class="pop6_title">
      <text>郵箱</text>
    </view>
    <input class="pop6_input" name="contactemail" placeholder="請輸入郵箱" />
  </view>
  <view class="pop7">
    <view class="pop7_title">
      <text>備注</text>
    </view>
    <textarea bindblur="bindTextAreaBlur1" class="pop7_input" name="contactremarks" placeholder="請輸入"></textarea>
  </view>
  <view class="pop8">
    <view style="padding-top:2%;"> <button style="background-color:#70bdac;width:90%;" form-type="submit">提交</button></view>
  </view>
</form>

wxss

.pop1 {
  background-color:white;
  width: 100%;
  padding-top:2%;
  margin-bottom:2%;
}
/* 點擊事件執(zhí)行樣式變化 */
.pop1:active{
  background-color:rgb(212, 211, 211);
}
.pop1_title {
  margin-left:5%;
}
.pop1_input{
  margin-left:7%;
  width:85%;
  color:#808080;
}
.customered{
  width:100%;
  padding-bottom:5%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bright789_view_hide{
  display: none;
}
.bright789_view_show{
  display: block;
}
.customered1{
  border:1px solid #EDEDEE;
  width:85%;
}
.customered_title{
  color:#808080;
  margin:3% 0 0 2%;
}
.customered_content{
  word-break: break-all;
  padding-left:2%;
  margin:0 0 3% 2%;
}
.pop2{
  background-color:white;
  width: 100%;
  padding-top:2%;
  height:8%;
  margin-bottom:2%;
}
.pop2_title{
  margin-left:5%;
}
.pop2_input{
  margin-left:7%;
}
.pop3{
  background-color:white;
  width: 100%;
  padding-top:2%;
  height:8%;
  margin-bottom:2%;
}
.pop3_title{
  margin-left:7%;
}
.pop3_input{
  margin-left:7%;
}
.pop4{
  background-color:white;
  width: 100%;
  height:20%;
  margin-bottom:2%;
}
.pop4_title{
  margin-left:7%;
  padding-top:2%;
  padding-bottom:2%;
}
.pop4_checkbox{
  margin-left:7%;
  color:#808080;
  width:90%;
}
.pop4_checkbox checkbox{
  margin-left:2%;
  margin-bottom:2%;
}
.pop5{
  background-color:white;
  width: 100%;
  margin-bottom:2%;
  height:9%;
}
.pop5_title{
  margin-left:7%;
  padding-top:2%;
}
/* 點擊事件執(zhí)行樣式變化 */
.pop5:active{
  background-color:rgb(212, 211, 211);
}
.pop5_input{
  margin-left:7%;
  width:85%;
  color:#808080;
}
.pop6{
  background-color:white;
  width: 100%;
  height:9%;
  margin-bottom:2%;
}
.pop6_title{
  margin-left:7%;
  padding-top:2%;
}
.pop6_input{
  margin-left:7%;
}
.pop7{
  background-color:white;
  width: 100%;
  margin-bottom:4%;
}
.pop7_title{
  margin-left:7%;
  padding-top:2%;
}
.pop7_input{
  margin-left:7%;
}
.pop8{
  height:10%;
  background-color:white;
  width: 100%;
  bottom:0px;
}
.pop8 button{
  color:white;
}

const app = getApp()
Page({
  data: {
    index6: 0, //選擇的下拉列 表下標,
    seleNull6: null, //設置的變量
    contactremarks: '',
    valid: '', //客戶選擇頁面?zhèn)鱽淼闹?
    showView: false,
    selectDatas6: ['', '是', '否'],//從前端獲取下拉列表的值
    customerinfo: '',
    checkedList: [],
  },
  //職位復選框
  handleItemChange(e) {
    console.log(e.detail.value);
    // 1 事件觸發(fā)時選中復選框的值
    const checkedList = e.detail.value;
    // 2 進行賦值
    this.setData({
      checkedList
    })
  },
  //是否為決策人
  bindPickerChange6: function (e) {
    console.log('picker發(fā)送選擇改變，攜帶下標為', e.detail.value)
    console.log('picker發(fā)送選擇改變，攜帶值為' + this.data.selectDatas6[e.detail.value])
    this.setData({
      seleNull6: '0',
      index6: e.detail.value
    })
  },
  //選擇客戶
  customerselect() {
    wx.navigateTo({
      url: '/pages/customerselect/customerselect',
    })
  },
  //新增聯(lián)系人
  addcontent_submit(e) {
    //獲取輸入值(獲取前端的參數)
    this.setData({
      customer_id: this.data.valid.customer_id, //客戶
      customer_code: this.data.valid.customer_code, //客戶
      contactname: e.detail.value.contactname, //聯(lián)系人姓名
      contactphone: e.detail.value.contactphone, //聯(lián)系人電話
      checkedList: this.data.checkedList, //職位
      policymaker: this.data.selectDatas6[e.detail.value.policymaker], //決策人
      contactemail: e.detail.value.contactemail, //郵箱
      contactremarks: e.detail.value.contactremarks //備注
    })
    //定義輸入的值  
    let customer_id = this.data.customer_id
    let customer_code = this.data.customer_code
    let contactname = this.data.contactname
    let contactphone = this.data.contactphone
    let checkedList = this.data.checkedList
    let policymaker = this.data.policymaker
    let contactemail = this.data.contactemail
    let contactremarks = this.data.contactremarks
    console.log('客戶id', customer_id)
    console.log('客戶', customer_code)
    console.log('名稱', contactname)
    console.log('電話', contactphone)
    console.log('職位', checkedList)
    console.log('決策人', policymaker)
    console.log('郵箱', contactemail)
    console.log('備注', contactremarks)
    if (this.data.valid.customer_code == "" || this.data.valid.customer_code == null || this.data.valid.customer_code == undefined) {
      wx.showToast({
        title: '請選擇客戶',
        icon: 'none'
      })
      return
    } else if (contactname.length == 0) {
      wx.showToast({
        title: '請輸入姓名',
        icon: 'none'
      })
      return
    } else {
      console.log(app.globalData.username)
      //添加數據
      wx.request({
        url: app.globalData.position + 'Crm/addcontact',
        data: {
          customer_id: customer_id,
          customer_code: customer_code,
          contactname: contactname,
          contactphone: contactphone,
          checkedList: checkedList,
          policymaker: policymaker,
          contactemail: contactemail,
          contactremarks: contactremarks,
          username: app.globalData.username
        },
        header: {
          // 'content-type': 'application/json' // 默認值（固定，我開發(fā)過程中還沒有遇到需要修改header的）  
          "Content-Type": "application/x-www-form-urlencoded"
        },
        method: 'POST',
        dataType: 'json',
        success: res => {
          wx.showToast({
            title: '新建成功',
            duration: 1000 //持續(xù)的時間
          })
          var pages = getCurrentPages(); //獲取當前頁面信息
          var prevPage = pages[pages.length - 2]; //上一個頁面
          prevPage.onLoad(); //觸發(fā)上一個頁面的onLoad生命周期函數(相當于刷新上一個頁面)
          wx.navigateBack({ //返回上一個頁面
            delta: 1
          })
        },
        fail(res) {
          console.log("查詢失敗")
        }
      })
    }
  },
  //進入頁面顯示
  onLoad: async function (options) {
    //查詢所有職務，從服務器查詢職務信息
    wx.request({
      url: app.globalData.position + 'Crm/customejob_select',
      data: {},
      header: {
        // 'content-type': 'application/json' // 默認值（固定，我開發(fā)過程中還沒有遇到需要修改header的）  
        "Content-Type": "application/x-www-form-urlencoded"
      },
      method: 'POST',
      dataType: 'json',
      success: res => {
        // console.log("職務", res.data)
        this.setData({
          list: res.data
        })
      },
      fail(res) {
        console.log("查詢失敗")
      }
    })
  },
  onShow(options) {
    console.log(this.data.valid) //獲取到選擇頁面的數據
    if (this.data.valid == "" || this.data.valid == null || this.data.valid == undefined) {
      // console.log("為空");
      this.setData({
        showView: false
      })
    } else {
      // console.log("不為空");
      this.setData({
        showView: true
      })
    }
  },
  //分享
  onShareAppMessage() {
    wx.removeStorageSync('username');
    return {
      title: 'crm系統(tǒng)',
      path: '/pages/login/login',
      imageUrl: '/images/title/title.jpg',
    }
  },
  //刷新
  onPullDownRefresh() {
    this.onLoad(); //需要再次調用接口的函數 
    setTimeout(function () {
      // 不加這個方法真機下拉會一直處于刷新狀態(tài)，無法復位
      wx.stopPullDownRefresh()
    }, 3000)
  },
})

thinkphp(后端)

  //新增聯(lián)系人
  public function addcontact()
  {
    $time = time(); //獲取當前時間戳
    $customer_code = input('post.customer_code'); //客戶代號
    $contactname = input('post.contactname'); //姓名
    $contactphone = input('post.contactphone'); //電話
    $checkedList = input('post.checkedList'); //職位
    $policymaker = input('post.policymaker'); //決策人
    $contactemail = input('post.contactemail'); //郵箱
    $contactremarks = input('post.contactremarks'); //備注
    $username = input('post.username'); //負責人
    $business_code = DB::table('fa_crm_user')->where(['username' => $username])->value('business_code');
    $data = [
      'customer_code' => $customer_code,
      'contacts_name' => $contactname,
      'contacts_phone' => $contactphone,
      'contacts_position' => $checkedList,
      'key_decision_makers' => $policymaker,
      'contacts_email' => $contactemail,
      'contacts_remark' => $contactremarks,
      'customer_principal' => $business_code,
      'creation_date' => $time,
      'enable_flag' => 'Y'
    ];
    db::table('customer_contact_xcx')->insert($data);//新增
    //獲取聯(lián)系人數據庫中的id
    $maxid = DB::table('customer_contact_xcx')->max('id');
    //向客戶動態(tài)添加數據
    $data2 = [
      'customer_code' => $customer_code,
      'operation' => '新增聯(lián)系人',
      'details_id' => $maxid,
      'creation_date' => $time,
      'customer_principal' => $business_code,
    ];
    db::table('schedule_flow')->insert($data2);
  }
//查詢所有職務
  public function customejob_select()
  {
    $customer_job = DB::table('customer_job')->select();
    echo json_encode($customer_job);
  }

四、點擊表格單元格信息，獲取改行id

樣式：點擊報價單號，跳轉到詳情頁

wxml:

<view style="padding:15px;">
        <view class="table">
          <view class="table-tr">
            <view class="table-th1">報價單號</view>
            <view class="table-th2">客戶簡稱</view>
            <view class="table-th3">客戶名稱</view>
            <view class="table-th4">金額</view>
            <view class="table-th4">需求日期</view>
            <view class="table-th4">報價日期</view>
            <view class="table-th4">交貨日期</view>
          </view>
          <view class="table-tr" wx:for="{{pricelist_item}}" wx:key="unique">
            <view class="table-td1" bindtap="ppricelist_update" data-id="{{item.id}}">{{item.pricelist_num}}</view>
            <view class="table-td2">{{item.customer_code}}</view>
            <view class="table-td2">{{item.customer_name}}</view>
            <view class="table-td2">{{item.amount}}</view>
            <view class="table-td2">{{item.need_time}}</view>
            <view class="table-td2">{{item.offer_time}}</view>
            <view class="table-td2">{{item.delivery_time}}</view>
          </view>
        </view>
      </view>

在報價單的td中，設置方法bindtap="ppricelist_update"

設置需要傳遞的參數信息data-id="{{item.id}}"

js:執(zhí)行方法跳轉到另外一個頁面

//點擊報價單號進入詳情頁
  ppricelist_update(e){
    // console.log(e.currentTarget.dataset.id)//獲取到報價單頁面的參數
    wx.navigateTo({ //需要修改為wx.navigateTo
      //跳轉到新增頁面，不銷毀原頁面
      url: '/pages/price_list_update/price_list_update?pricelist_id=' + e.currentTarget.dataset.id,
    })
  },

e.currentTarget.dataset.id：為前端設置的data-id的數據

?后面的數據即為參數信息pricelist_id=' + e.currentTarget.dataset.id

在新頁面獲取數據

js:

 //進入頁面
    onLoad: async function (options) {
      var pages = getCurrentPages() //獲取加載的頁面
      var currentPage = pages[pages.length - 1] //獲取當前頁面的對象
      var options = currentPage.options //如果要獲取url中所帶的參數可以查看options
      // console.log(options.pricelist_id);//控制臺輸出頁面參數
    },

五、前端頁面跳轉，傳遞多個參數

follow_up(e) {
  wx.navigateTo({//跳轉到新增頁面，不銷毀原頁面
     url: '/pages/new_followrecord/new_followrecord?customer_code=' + e.currentTarget.dataset.id + "&issent=" + 1 + "&nowDate=" + this.data.nowDate,
    })
},

如上圖：有參數customer_code，issent，nowDate

？后面加參數，參數與參數之間&連接

到此這篇關于微信小程序之間的參數傳遞、獲取的文章就介紹到這了,更多相關微信小程序參數傳遞獲取內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Layui table 組件的使用之初始化加載數據、數據刷新表格、傳參數
這篇文章主要介紹了Layui table 組件的使用之初始化加載數據、數據刷新表格、傳參數的實現(xiàn)代碼,需要的朋友可以參考下
2017-09-09
11種JavaScript前端數據去重方式總結
這篇文章主要為大家總結了JavaScript去重的11種方式，各有優(yōu)缺點，文中的示例代碼講解詳細，具有一定的學習價值，需要的可以根據需求合理使用
2023-06-06
JS中去掉if...else的多種方法
在JavaScript編程中,過多的if...elseif...else語句可能導致代碼難以維護,可以通過switch語句、對象字面量、函數映射、數組或映射對象分發(fā)、提前返回以及使用數組的find方法來優(yōu)化這種復雜的條件判斷,提高代碼的可讀性和維護性,下面就來介紹一下
2024-09-09
JS中如何讓異步執(zhí)行的方法同步執(zhí)行
在寫js的時候,很多時候都會遇到異步轉同步的問題,下面這篇文章主要給大家介紹了關于JS中如何讓異步執(zhí)行的方法同步執(zhí)行的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-04-04
詳解能在多種前端框架下使用的表格控件
表格控件是我們在開發(fā)中經常要用到的控件。有沒有能夠在多種前端控件下都能使用的表格控件？最近研究發(fā)現(xiàn)Wijmo中的FlexGrid是一款不錯的表格控件，它能支持很多主流的框架。這里主要介紹在純JavaScript和AngularJS下FlexGrid的使用。
2017-01-01
用javascript實現(xiàn)無刷新更新數據的詳細步驟 asp
用javascript實現(xiàn)無刷新更新數據的詳細步驟 asp...
2006-12-12
圖解Javascript——作用域、作用域鏈、閉包
本文主要介紹了圖解Javascript——作用域、作用域鏈、閉包等知識。具有很好的參考價值。下面跟著小編一起來看下吧
2017-03-03
javascript中數組（Array)對象和字符串（String)對象的常用方法總結
這篇文章主要介紹了javascript中數組（Array)對象和字符串（String)對象的常用方法,結合實例形式總結分析了javascript中關于數組和字符串的常用函數與使用技巧,需要的朋友可以參考下
2016-12-12
js 時間函數應用加、減、比較、格式轉換的示例代碼
時間函數應用加、減、比較、格式轉換等等，具體實現(xiàn)如下，感興趣的朋友可以參考下，希望對大家有所幫助
2013-08-08
利用threejs實現(xiàn)一個簡易的泊車功能
這篇文章主要為大家詳細介紹了如何利用threejs實現(xiàn)一個簡易的泊車功能,文中的示例代碼講解詳細,對大家的學習和工作有一定的幫助,感興趣的小伙伴可以動手嘗試一下
2024-01-01