您现在的位置: 微信小程序 > 微信小程序开发 > 教程 >

微信小程序实现扫一扫,picker和range-key的用法

来源:微信小程序 编辑:Yiyongtong.com 发布时间:2018-04-18 09:28热度:

一:实现扫一扫

分享者:向往蓝天的飞鱼,来自原文地址 
//index.js

 

				
  1. //获取应用实例
  2. var app = getApp()
  3. Page({
  4. data: {
  5. show: "",
  6. },
  7.  
  8. onLoad: function () {
  9. console.log('onLoad')
  10. },
  11. click: function () {
  12. var that = this;
  13. var show;
  14. wx.scanCode({
  15. success: (res) => {
  16. this.show = "--result:" + res.result + "--scanType:" + res.scanType + "--charSet:" + res.charSet + "--path:" + res.path;
  17. that.setData({
  18. show: this.show
  19. })
  20. wx.showToast({
  21. title: '成功',
  22. icon: 'success',
  23. duration: 2000
  24. })
  25. },
  26. fail: (res) => {
  27. wx.showToast({
  28. title: '失败',
  29. icon: 'success',
  30. duration: 2000
  31. })
  32. },
  33. complete: (res) => {
  34. }
 

				
  1. .saoma{
  2. height: 40px;
  3. width:110px;
  4. line-height: 40px;
  5. margin-left: auto;
  6. margin-right: auto;
  7. color: #fff;
  8. background-color: #999;
  9. text-align: center;
  10. }
  11. .show{
  12. width: 100%;
  13. color: #666;
  14. background-color: #fff;
  15. height: auto;
  16.  
  17. }
 

				
  1. <view class="container">
  2. <view class="saoma" bindtap="click">点我扫一扫</view>
  3. <view class="show">{{show}}</view>
  4. </view>

微信小程序,真机测试通过

 

二:picker和range-key的用法

分享者:独鸣在彼岸,来自原文地址

 

				
  1. <picker bindchange="bindPickerChange" value="{{index}}" range="{{location}}" range-key="{{'name'}}">
  2. <view class="picker">
  3. 地州{{location[index]}}
  4. </view>
  5. </picker>

range-key用于渲染picker的源是数组的情形,range-key制定了需要picker展示的内容。index是系统自动指定的array的下标,不用修改。

对应的数组内容如下:

 

				
  1. [{
  2. "id": "XM4xZnN088X5",
  3. "name": "西双版纳州"
  4. }, {
  5. "id": "yrw6F6n30igs",
  6. "name": "昆明市"
  7. }]

注意range-key中的字段需要单引号指定。