专栏首页编程微刊小程序扫码成功后带着参数跳转到指定页面

小程序扫码成功后带着参数跳转到指定页面

要扫的二维码,通过草料二维码生成的,这个网站挺好的,用起来比较简单方便,可以直接输入文字生成二维码,也可以放入链接生成二维码。

草料二维码:https://cli.im/

index.wxml

<view class="container">
  <button bindtap='getScancode'>绑定车辆</button>
</view>

index.js

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    result: ''

  },

  onLoad: function() {

  },

  getScancode: function() {
    var _this = this;
    // 允许从相机和相册扫码
    wx.scanCode({
      success: (res) => {
        wx.navigateTo({
          url: '../navigator/navigator?title=' + res.result

        })
        var result = res.result;

        _this.setData({
          result: result,

        })
      }
    })

  }

})

navigator.wxml

<view> {{title}} </view>

navigator.js

Page({
  data: {},
  onLoad: function (options) {
    // 生命周期函数--监听页面加载
    this.setData({
      title: options.title
     
    })
  }
})

简单的效果:没有写css相关的代码了,主要是实现这个过程

更加详细的demo:(项目之中实现了一下)

index.wxml

<!-- 底部的按钮 -->
<button class='Scancode' bindtap='getScancode'>绑定车辆</button>

index.wxss

/* 底部按钮 */
.Scancode {
  font-size: 39rpx;
  background: #010101;
  position: fixed;
  bottom: 35rpx;
  display: flex;
  width: 90%;
  justify-content: center;
  
  color: #fff;
  border-radius:10rpx;
  margin-left:30rpx;
  margin-right: 30rpx;
  z-index:999;
}

index.js

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    result: ''
  },

  onLoad: function() {

  },

  getScancode: function() {
    var _this = this;
    // 允许从相机和相册扫码
    wx.scanCode({
      success: (res) => {
        wx.navigateTo({
          url: '../bind/bind?title=' + res.result

        })
        var result = res.result;

        _this.setData({
          result: result,

        })
      }
    })

  }

})

要跳转到bind

bind.wxml

<view class='page_row'>
  <view class="search">

    <input class='carid' placeholder=" {{title}}" focus="{{focus}}" />
    <input class='carnumber' placeholder="请输入车牌号和驾驶证号码" focus="{{focus}}" />

    <button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="primary"> 绑定</button>

  </view>
  <view class='tip'>
    定位标签和车辆绑定后即可看跟踪车辆位置
  </view>
</view>

bind.wxss

.search input {
  height: 100rpx;
  border-radius: 5px;
  border: 1px solid #d0d0d0;
  margin: 100rpx 30rpx;
  padding: 0 15rpx;
}

.search button {
  border-radius: 5px;
  border: 1px solid #d0d0d0;
  margin: 100rpx 30rpx;
}

.tip {
  text-align: center;
  font-size: 34rpx;
}

/* 搜索列表名称 */

.list_name {
  position: relative;
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  border-bottom: 1rpx solid #ddd;
}

/* 列表名称 */

.lab_name {
  position: absolute;
  left: 30rpx;
}

bind.js

Page({
  data: {
    focus: false,
    inputValue: ''
  },
  onLoad: function(options) {
    // 生命周期函数--监听页面加载
    this.setData({
      title: options.title

    })
  }
})

要扫的二维码

图片.png

效果

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序文章详情页跳转案例

    里面所有的文章列表里面都是跳转了同一篇文章链接,那么,如果所有的列表跳转详情页的时候,跳转对应id所在的文章又该怎么写?

    王小婷
  • 小程序跳转公众号

    随着小程序不断的发展,现在个人的小程序也开放了很多功能了,个人小程序直接打开公众号链接。在群里看到的一款小程序,点击可以直接阅读文章了,所以琢磨了一下,写了一些...

    王小婷
  • 新功能:个人小程序直接打开公众号链接

    在此之前,想要从小程序里面跳转一个链接,要使用web-view才可以,而且个人 <web-view src="https://www.baidu.com/">...

    王小婷
  • 【PAT乙级】旧键盘打字

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    喜欢ctrl的cxk
  • 2015.11.30 HTML5真题练习

    HTML5学堂:每天一道题,强壮程序员!今日主要涉及昨日题目的解答,以及一道涉及函数的形参实参、arguments对象的题目 HTML5真题【2015.11.2...

    HTML5学堂
  • <进击的虫师>如何让程序"懂很多"?

    ? 最近在做一个有意思的小项目, 在一个聊天对话中, 你向电脑提出问题, 他会自动分词,然后根据关键字, 自动答复你 对所有的关键字做出解释, 工作量实在...

    zhaoolee
  • python列表与元组的用法

    7.列表生成式   #[i*i for i in range(10)]       [i*i for i in range(10) if i>5]

    py3study
  • Typo3 CVE-2019-12747 反序列化漏洞分析

    TYPO3是一个以PHP编写、采用GNU通用公共许可证的自由、开源的内容管理系统。

    Seebug漏洞平台
  • Typo3 CVE-2019-12747 反序列化漏洞分析

    TYPO3是一个以PHP编写、采用GNU通用公共许可证的自由、开源的内容管理系统。

    知道创宇云安全
  • 一个前端开发者的自我修养

    一个前端开发者的自我修养 今天给大家分享的主题是前端的自我成长,这是一个关于成长的话题。 很多人都有这样的感觉:听了很多技术圈子的分享,有的有深度,有的循循善诱...

    用户1289394

扫码关注云+社区

领取腾讯云代金券