微信小程序之間的參數(shù)傳遞、獲取的操作方法
更新時(shí)間：2025年01月02日 10:39:12 作者：25號底片~
這篇文章主要介紹了微信小程序中如何獲取和傳遞參數(shù),包括獲取當(dāng)前頁面參數(shù)、單獨(dú)input文本框參數(shù)的獲取、表單獲取參數(shù)信息、點(diǎn)擊表格單元格信息獲取行ID以及前端頁面跳轉(zhuǎn)傳遞多個參數(shù)等,感興趣的朋友跟隨小編一起看看吧
一、獲取當(dāng)前頁面參數(shù)
js
onLoad: async function (options) {
var pages = getCurrentPages() //獲取加載的頁面
var currentPage = pages[pages.length - 1] //獲取當(dāng)前頁面的對象
var options = currentPage.options //如果要獲取url中所帶的參數(shù)可以查看options
this.setData({
contactid: options.contactid//這里的options.表示獲取參數(shù)，contactid表示參數(shù)名稱
})
},當(dāng)前頁面參數(shù)可以在小程序開發(fā)工具的右下角查看
二、單獨(dú)input文本框參數(shù)的獲取
wxml：這里的bindconfirm指的是回車事件，也可以使用別的事件
<input class="input_comments" type="text" bindconfirm="comments" placeholder="請輸入內(nèi)容"/>
js
comments(e) {
console.log("參數(shù)",e.detail.value) //這里面的值就是獲取到文本框在中的值
},輸出結(jié)果：在文本框輸入：這是一個測試，回車，得到的結(jié)果如下
三、表單獲取參數(shù)信息（包括多選，下拉列表，文本框，文本域）
案例
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>手機(jī)號</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>是否為關(guān)鍵決策人</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%;
}
/* 點(diǎn)擊事件執(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%;
}
/* 點(diǎn)擊事件執(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;
}
js
const app = getApp()
Page({
data: {
index6: 0, //選擇的下拉列 表下標(biāo),
seleNull6: null, //設(shè)置的變量
contactremarks: '',
valid: '', //客戶選擇頁面?zhèn)鱽淼闹?
showView: false,
selectDatas6: ['', '是', '否'],//從前端獲取下拉列表的值
customerinfo: '',
checkedList: [],
},
//職位復(fù)選框
handleItemChange(e) {
console.log(e.detail.value);
// 1 事件觸發(fā)時(shí)選中復(fù)選框的值
const checkedList = e.detail.value;
// 2 進(jìn)行賦值
this.setData({
checkedList
})
},
//是否為決策人
bindPickerChange6: function (e) {
console.log('picker發(fā)送選擇改變，攜帶下標(biāo)為', 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) {
//獲取輸入值(獲取前端的參數(shù))
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)
//添加數(shù)據(jù)
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' // 默認(rèn)值（固定，我開發(fā)過程中還沒有遇到需要修改header的）
"Content-Type": "application/x-www-form-urlencoded"
},
method: 'POST',
dataType: 'json',
success: res => {
wx.showToast({
title: '新建成功',
duration: 1000 //持續(xù)的時(shí)間
})
var pages = getCurrentPages(); //獲取當(dāng)前頁面信息
var prevPage = pages[pages.length - 2]; //上一個頁面
prevPage.onLoad(); //觸發(fā)上一個頁面的onLoad生命周期函數(shù)(相當(dāng)于刷新上一個頁面)
wx.navigateBack({ //返回上一個頁面
delta: 1
})
},
fail(res) {
console.log("查詢失敗")
}
})
}
},
//進(jìn)入頁面顯示
onLoad: async function (options) {
//查詢所有職務(wù)，從服務(wù)器查詢職務(wù)信息
wx.request({
url: app.globalData.position + 'Crm/customejob_select',
data: {},
header: {
// 'content-type': 'application/json' // 默認(rèn)值（固定，我開發(fā)過程中還沒有遇到需要修改header的）
"Content-Type": "application/x-www-form-urlencoded"
},
method: 'POST',
dataType: 'json',
success: res => {
// console.log("職務(wù)", res.data)
this.setData({
list: res.data
})
},
fail(res) {
console.log("查詢失敗")
}
})
},
onShow(options) {
console.log(this.data.valid) //獲取到選擇頁面的數(shù)據(jù)
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(); //需要再次調(diào)用接口的函數(shù)
setTimeout(function () {
// 不加這個方法真機(jī)下拉會一直處于刷新狀態(tài)，無法復(fù)位
wx.stopPullDownRefresh()
}, 3000)
},
})thinkphp(后端)
//新增聯(lián)系人
public function addcontact()
{
$time = time(); //獲取當(dāng)前時(shí)間戳
$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'); //負(fù)責(zé)人
$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)系人數(shù)據(jù)庫中的id
$maxid = DB::table('customer_contact_xcx')->max('id');
//向客戶動態(tài)添加數(shù)據(jù)
$data2 = [
'customer_code' => $customer_code,
'operation' => '新增聯(lián)系人',
'details_id' => $maxid,
'creation_date' => $time,
'customer_principal' => $business_code,
];
db::table('schedule_flow')->insert($data2);
}
//查詢所有職務(wù)
public function customejob_select()
{
$customer_job = DB::table('customer_job')->select();
echo json_encode($customer_job);
}四、點(diǎn)擊表格單元格信息，獲取改行id
樣式：點(diǎn)擊報(bào)價(jià)單號，跳轉(zhuǎn)到詳情頁
wxml:
<view style="padding:15px;">
<view class="table">
<view class="table-tr">
<view class="table-th1">報(bào)價(jià)單號</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">報(bào)價(jià)日期</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>在報(bào)價(jià)單的td中，設(shè)置方法bindtap="ppricelist_update"
設(shè)置需要傳遞的參數(shù)信息data-id="{{item.id}}"
js:執(zhí)行方法跳轉(zhuǎn)到另外一個頁面
//點(diǎn)擊報(bào)價(jià)單號進(jìn)入詳情頁
ppricelist_update(e){
// console.log(e.currentTarget.dataset.id)//獲取到報(bào)價(jià)單頁面的參數(shù)
wx.navigateTo({ //需要修改為wx.navigateTo
//跳轉(zhuǎn)到新增頁面，不銷毀原頁面
url: '/pages/price_list_update/price_list_update?pricelist_id=' + e.currentTarget.dataset.id,
})
},e.currentTarget.dataset.id：為前端設(shè)置的data-id的數(shù)據(jù)
?后面的數(shù)據(jù)即為參數(shù)信息pricelist_id=' + e.currentTarget.dataset.id
在新頁面獲取數(shù)據(jù)
js:
//進(jìn)入頁面
onLoad: async function (options) {
var pages = getCurrentPages() //獲取加載的頁面
var currentPage = pages[pages.length - 1] //獲取當(dāng)前頁面的對象
var options = currentPage.options //如果要獲取url中所帶的參數(shù)可以查看options
// console.log(options.pricelist_id);//控制臺輸出頁面參數(shù)
},五、前端頁面跳轉(zhuǎn)，傳遞多個參數(shù)
follow_up(e) {
wx.navigateTo({//跳轉(zhuǎn)到新增頁面，不銷毀原頁面
url: '/pages/new_followrecord/new_followrecord?customer_code=' + e.currentTarget.dataset.id + "&issent=" + 1 + "&nowDate=" + this.data.nowDate,
})
},如上圖：有參數(shù)customer_code，issent，nowDate
？后面加參數(shù)，參數(shù)與參數(shù)之間&連接
到此這篇關(guān)于微信小程序之間的參數(shù)傳遞、獲取的文章就介紹到這了,更多相關(guān)微信小程序參數(shù)傳遞獲取內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- 微信小程序 動態(tài)修改頁面數(shù)據(jù)及參數(shù)傳遞過程詳解
- 微信小程序?qū)崿F(xiàn)頁面跳轉(zhuǎn)傳遞參數(shù)（實(shí)體，對象）
- 微信小程序?qū)崿F(xiàn)傳遞多個參數(shù)與事件處理
- 微信小程序?qū)W習(xí)筆記之跳轉(zhuǎn)頁面、傳遞參數(shù)獲得數(shù)據(jù)操作圖文詳解
- 微信小程序之頁面跳轉(zhuǎn)和參數(shù)傳遞的實(shí)現(xiàn)
- 微信小程序教程系列之頁面跳轉(zhuǎn)和參數(shù)傳遞（6）
- 微信小程序開發(fā)之?dāng)?shù)據(jù)存儲 參數(shù)傳遞 數(shù)據(jù)緩存
- 微信小程序 navigator 跳轉(zhuǎn)url傳遞參數(shù)
相關(guān)文章
Layui table 組件的使用之初始化加載數(shù)據(jù)、數(shù)據(jù)刷新表格、傳參數(shù)
這篇文章主要介紹了Layui table 組件的使用之初始化加載數(shù)據(jù)、數(shù)據(jù)刷新表格、傳參數(shù)的實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-09-09
11種JavaScript前端數(shù)據(jù)去重方式總結(jié)
這篇文章主要為大家總結(jié)了JavaScript去重的11種方式，各有優(yōu)缺點(diǎn)，文中的示例代碼講解詳細(xì)，具有一定的學(xué)習(xí)價(jià)值，需要的可以根據(jù)需求合理使用2023-06-06
在JavaScript編程中,過多的if...elseif...else語句可能導(dǎo)致代碼難以維護(hù),可以通過switch語句、對象字面量、函數(shù)映射、數(shù)組或映射對象分發(fā)、提前返回以及使用數(shù)組的find方法來優(yōu)化這種復(fù)雜的條件判斷,提高代碼的可讀性和維護(hù)性,下面就來介紹一下2024-09-09
在寫js的時(shí)候,很多時(shí)候都會遇到異步轉(zhuǎn)同步的問題,下面這篇文章主要給大家介紹了關(guān)于JS中如何讓異步執(zhí)行的方法同步執(zhí)行的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
表格控件是我們在開發(fā)中經(jīng)常要用到的控件。有沒有能夠在多種前端控件下都能使用的表格控件？最近研究發(fā)現(xiàn)Wijmo中的FlexGrid是一款不錯的表格控件，它能支持很多主流的框架。這里主要介紹在純JavaScript和AngularJS下FlexGrid的使用。2017-01-01
用javascript實(shí)現(xiàn)無刷新更新數(shù)據(jù)的詳細(xì)步驟 asp
用javascript實(shí)現(xiàn)無刷新更新數(shù)據(jù)的詳細(xì)步驟 asp...2006-12-12
本文主要介紹了圖解Javascript——作用域、作用域鏈、閉包等知識。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
javascript中數(shù)組（Array)對象和字符串（String)對象的常用方法總結(jié)
這篇文章主要介紹了javascript中數(shù)組（Array)對象和字符串（String)對象的常用方法,結(jié)合實(shí)例形式總結(jié)分析了javascript中關(guān)于數(shù)組和字符串的常用函數(shù)與使用技巧,需要的朋友可以參考下2016-12-12
js 時(shí)間函數(shù)應(yīng)用加、減、比較、格式轉(zhuǎn)換的示例代碼
時(shí)間函數(shù)應(yīng)用加、減、比較、格式轉(zhuǎn)換等等，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下，希望對大家有所幫助2013-08-08
利用threejs實(shí)現(xiàn)一個簡易的泊車功能
這篇文章主要為大家詳細(xì)介紹了如何利用threejs實(shí)現(xiàn)一個簡易的泊車功能,文中的示例代碼講解詳細(xì),對大家的學(xué)習(xí)和工作有一定的幫助,感興趣的小伙伴可以動手嘗試一下2024-01-01