微信小程序的点击事件、页面跳转、数据绑定、数据修改、获取用户信息及定位、for指令、获取用户上传图片

小程序中实现页面跳转

对标签绑定点击事件

data是点击时传入的参数
<view bindtap="clickMe" data-nid="123" data-name="SD" >点我跳转</view>

    /**
   * 用户点击事件
   */
  clickMe(e){
    console.log(e)
    var nid = e.currentTarget.dataset.nid  //通过这种方式可以拿到传过来的参数
    console.log(nid)

页面跳转

通过wx里的方法跳转

// navigateTo, redirectTo 只能打开非 tabBar 页面。
// switchTab 只能打开 tabBar 页面。
// reLaunch 可以打开任意页面。
    wx.switchTab({
      url: '/pages/home/home', // 路由后面可以加?的方式传参数,调用页面路由带的参数可以在目标页面的onLoad方法中获取。
    })
  }

通过标签跳转(类似a标签)

<navigator url="/pages/redirect/redirect?id=666">跳转到新页面</navigator> 只能跳转非tabbar页面

数据绑定

  • wxml

    <view>数据1:{{message}}</view>
    
  • 展示数据

    // pages/bind/bind.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        message:"沙雕李业",
      }
    )}
    

数据双向绑定

前台input框修改了,js里的data数据也会相应改变

wxml

input框添加了一个bindinput属性,后面接了一个函数,当input框的值变化时,就会触发bindPhone函数
<view>手机号:</view>
<input value="{{phone}}" bindinput="bindPhone" placeholder="请输入手机号"></input>

js

// 该函数实时跟新数据的值
  bindPhone:function(e){
    this.setData({ phone:e.detail.value});
  },

数据修改

  • wxml

    <view>数据2:{{message}}</view>
    
    <button bindtap="changeData">点击修改数据</button>
    
  • 修改数据

    Page({
      data: {
        message:"沙雕李业",
      },
      changeData:function(){
        // 修改数据
        this.setData({ message: "大沙雕李业"});
      }
    })
    

获取用户信息

方式一

  • wxml

    <view bindtap="getUserName">获取当前用户名</view>
    
  • js

      getUserName:function(){
      	// 调用微信提供的接口获取用户信息
        wx.getUserInfo({
          success: function (res) {
            // 调用成功后触发
            console.log('success',res)
      	  // 然后可以用this.setData修改对应数据,展示在前台上,注意this指的不是pages的而是wx了
      	  // 我们需要在getUserName函数后面使用var that = this ,然后在wx里就可以使用that.setData修改对应数据了
          },
          fail:function(res){
            // 调用失败后触发
            console.log('fail', res)
          }
        })
      },
    

方式二

  • wxml

    当点击该按钮时,会弹出一个框询问是否授权获取用户信息
    <button open-type="getUserInfo" bindgetuserinfo="xxxx">授权登录</button>
    
  • js

     xxxx:function(){
        wx.getUserInfo({
          success: function (res) {
            // 调用成功后触发
            console.log('success', res)
          },
          fail: function (res) {
            // 调用失败后触发
            console.log('fail', res)
          }
        })
      }
    

    注意事项:

    • 想要获取用户信息,必须经过用户授权(button)。

    • 已授权

    • 不授权,通过调用wx.openSetting

      // 打开配置,手动授权。
      // wx.openSetting({})
      

获取用户位置

  • wxml

    <view bindtap="getLocalPath">{{localPath}}</view>
    
  • js

      data: {
          localPath:"请选择位置",
      },
      getLocalPath:function(){
        var that = this;
        wx.chooseLocation({
          success: function(res) {
            that.setData({localPath:res.address});
          },
        })
      },
    

for指令

  • wxml

    <!--pages/goods/goods.wxml-->
    <text>商品列表</text>
    <view>
      <view wx:for="{{dataList}}" >{{index}} -  {{item}}</view>
      <view wx:for="{{dataList}}" wx:for-index="idx" wx:for-item="x">{{idx}} -  {{x}}</view>
    </view>
    <view>
      {{userInfo.name}}
      {{userInfo.age}}
    </view>
    <view>
      <view wx:for="{{userInfo}}">{{index}} - {{item}}</view>
    </view>
    
    
  • js

      data: {
        dataList:["白浩为","海狗","常鑫"],
        userInfo:{
          name:"alex",
          age:18
        }
      },
    

获取图片

  • wxml

    <!--pages/publish/publish.wxml-->
    <view bindtap="uploadImage">请上传图片</view>
    <view class="container">
      <image wx:for="{{imageList}}" src="{{item}}"></image>
    </view>
    
    
  • js

      data: {
        imageList: ["/static/hg.jpg", "/static/hg.jpg"]
      },
    
      uploadImage:function(){
        var that = this;
    
        wx.chooseImage({
          count:9, //图片最多的个数
          sizeType: ['original', 'compressed'], // 图片大小
          sourceType: ['album', 'camera'], //图片的来源,相机或者本地
          success:function(res){
            // 设置imageList,页面上图片自动修改。
            // that.setData({
            //   imageList: res.tempFilePaths
            // });
    
            // 默认图片 + 选择的图片; 
            that.setData({
              imageList: that.data.imageList.concat(res.tempFilePaths) //concat方法拼接两个列表
            });
          }
        });
      },
    

注意:图片目前只是上传到了内存。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:微信小程序的点击事件、页面跳转、数据绑定、数据修改、获取用户信息及定位、for指令、获取用户上传图片 - Python技术站

(0)
上一篇 2023年4月2日 下午4:13
下一篇 2023年4月2日 下午4:14

相关文章

  • 迭代器与生成器

    1.什么是迭代器 迭代器是用来迭代取值的工具,而迭代的意思是一个重复的过程,每一次的重复都是基于上一次的结果继续的,单纯的重复并不是迭代 2.为何要有迭代器 在python中涉及到需要把多个值循环取出来的类型有:字符串、列表、元组、字典、集合、打开文件等,我们可以考虑使用while循环的方式来循环取出多个值,例如: list=[‘egon’,’lin’,11…

    Python开发 2023年4月2日
    00
  • drf之请求与响应、drf之视图组件

    drf之请求与响应 Request from rest_framework.request import Request def __init__(self, request, parsers=None, authenticators=None, negotiator=None, parser_context=None): # 二次封装request,将原生…

    2023年4月2日
    00
  • 变量与常量

    1.什么是变量 变量是指可以变化的量,量指的是事物的状态,比如年龄,金钱、身高等等 2.为什么要有变量 为了能够让计算机像人一样记忆某一种事物的状态,并且这个状态是可以发生变化的。 程序的执行其实本质就是一系列状态的变化! 3.如何使用变量 (1)变量的基本使用 # 原则:先定义,再引用 name=’zhang’ print(name) (2) 内存管理(垃…

    2023年4月2日
    00
  • 登录功能

    思路分析 登录页面,我们还是采用ajax的方式提交用户数据 唯一需要学习的是如何制作图片验证码! 具体的登录页面效果图如下: 如何制作图片验证码 推导步骤1:在img标签的src属性里放上验证码的请求路径 补充1.img的src属性: 1.图片路径 2.url 3.图片的二进制数据 补充2:字体样式 我们计算机上之所以可以输出各种各样的字体样式,其内部其实对…

    2023年4月2日
    00
  • django中有关ajax的部分

    Django_ajax 1 简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)。 同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求; 异步交互:客户…

    Python开发 2023年4月2日
    00
  • JWT的介绍和使用

    JWT的含义 Json web token(JWT),是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准(RFC 7519),该token被设计为紧凑且安全的,特别适用于分布式站点的单点登录(sso)场景,JWT的声明一般被用来在身份提供者和服务者间传递被认证的用户身份信息,以便于从资源服务器获取资源,也可以增加一些额外的其他业务逻辑所必须的声…

    2023年4月2日
    00
  • django中CBV视图模式的View源码分析

    位置: 1.找到自己项目用的解释器存储位置H:\pythonProject\Lib\site-packages\django\views\generic\base.py在base.py里有一个View类 2.也可以通过from django.views import View 按住ctrl点击View会直接跳到该类的位置 CBV形式的路由 path(r’^l…

    Python开发 2023年4月2日
    00
  • flask操作数据库

    flask操作数据库 准备工作 安装flask-script(版本过高可能会报错) pip install flask-script==2.0.3 使用flask-script里的Manager类实例化来管理项目的启动等 from apps import create_app from flask_script import Manager app = cr…

    2023年4月2日
    00
合作推广
合作推广
分享本页
返回顶部