微信小程序跳转页面传多个参数(拼接)

简介: 微信小程序跳转页面传多个参数(拼接)
//事件处理函数,带着4个参数跳转,姓名时间被访部门
    bindViewTapsuccess: function() {
        wx.navigateTo({
            //url: '../success/success?id=' + id,
            url: '../success/success?a=' + this.data.name + '&b=' + this.data.phone+'&c='+this.data.phone+'&d='+ this.dataidNumber
        })
    },

test.wxml

<form catchsubmit="confirmPublish">
    <view class="title d-flex">
        姓名<input maxlength="15" value="{{name}}" data-name="name" bindblur="setInput"></input>
    </view>
    <view class="title d-flex">
        日期<input maxlength="15" value="{{subscribeTime}}" data-name="name" bindblur="setInput"></input>
    </view>
    <view class="title d-flex">
        来访公司<input maxlength="15" value="{{visitCompany}}" data-name="visitCompany" bindblur="setInput"></input>
    </view>
    <view class="title d-flex">
        被访姓名<input maxlength="15" value="{{interviewee}}" data-name="interviewee" bindblur="setInput"></input>
    </view>
    <button class='btn1' bindtap="bindViewTapsuccess" form-type="submit">完成</button>
</form>

test.js

// pages/addsign/addsign.js
const app = getApp()
Page({
    data: {
        name: '',
        subscribeTime: '2021-6-17 18:00',
        visitCompany: '',
        interviewee: '',
    },
    //事件处理函数,带着4个参数跳转,姓名时间被访部门
    bindViewTapsuccess: function() {
        wx.navigateTo({
            //url: '../success/success?id=' + id,
            url: '../nav/nav?name=' + this.data.name + '&subscribeTime=' + this.data.subscribeTime+'&interviewee='+this.data.interviewee+'&visitCompany='+ this.data.visitCompany
        })
    },
    onConfirm(e) {
        // this.setData({
        //   time: this.formatDate(e.detail),
        //   show: false
        // })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function(options) {},
      setInput:function(e) {
        const {name} = e.target.dataset
        this.data[name] = e.detail.value
        this.setData(this.data)
      },
    confirmPublish: function() {
        const data = {}
        data.name = this.data.name
        data.subscribeTime = this.data.subscribeTime
        data.visitCompany = this.data.visitCompany
        data.interviewee = this.data.interviewee
        console.log(JSON.stringify(data))
    },
})

跳转界面,接受参数

nav.wxml

<form catchsubmit="confirmPublish">
        <view class="successlist">
            <span>
                预约人
            </span>
            <span>
                {{name}}
            </span>
        </view>
        <view class="successlist">
            <span>
                预约时间
            </span>
            <span>
                {{subscribeTime}}
            </span>
        </view>
        <view class="successlist">
            <span>
                被访姓名
            </span>
            <span>
                {{interviewee}}
            </span>
        </view>
        <view class="successlist">
            <span>
                被访部门
            </span>
            <span>
                {{visitCompany}}
            </span>
        </view>
</form>

nav.js

// pages/instructions/instructions.js
Page({
    /**
     * 页面的初始数据
     */
    data: {
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function(options) {
        console.log(options)
         // 生命周期函数--监听页面加载
            this.setData({
              name: options.name,
              subscribeTime: options.subscribeTime,
              visitCompany: options.visitCompany,
              interviewee: options.interviewee,
            })
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function() {
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function() {
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function() {
    },
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function() {
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function() {
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function() {
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function() {
    }
})

相关文章
|
27天前
|
缓存 小程序 UED
微信小程序如何在切换页面后原页面状态不变
微信小程序如何在切换页面后原页面状态不变
24 0
|
1月前
|
JSON 小程序 JavaScript
【微信小程序】-- 自定义组件 - 组件所在页面的生命周期 & 插槽(三十七)
【微信小程序】-- 自定义组件 - 组件所在页面的生命周期 & 插槽(三十七)
|
9天前
|
小程序
uniapp 实现当前页面分享至微信好友或朋友圈功能(带参数和无参数)
uniapp 实现当前页面分享至微信好友或朋友圈功能(带参数和无参数)
9 0
|
27天前
|
缓存 小程序 开发者
微信小程序如何刷新当前页面
微信小程序如何刷新当前页面
16 0
|
1月前
|
开发框架 小程序 .NET
C#动态生成带参数的小程序二维码
C#动态生成带参数的小程序二维码
|
1月前
|
存储 JSON 小程序
【微信小程序】-- 页面处理总结(三十一)
【微信小程序】-- 页面处理总结(三十一)
|
1月前
|
JSON 小程序 API
【微信小程序】-- 案例 - 本地生活(列表页面)(三十)
【微信小程序】-- 案例 - 本地生活(列表页面)(三十)
|
16天前
|
小程序 前端开发 API
小程序全栈开发中的多端适配与响应式布局
【4月更文挑战第12天】本文探讨了小程序全栈开发中的多端适配与响应式布局。多端适配涉及平台和设备适应,确保统一用户体验;响应式布局利用媒体查询和弹性布局维持不同设备的布局一致性。实践中,开发者可借助跨平台框架实现多平台开发,运用响应式布局技术适应不同设备。同时,注意兼容性、性能优化和用户体验,以提升小程序质量和用户体验。通过这些方法,开发者能更好地掌握小程序全栈开发。
|
16天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
16天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。