微信小程序的点击事件、页面跳转、数据绑定、数据修改、获取用户信息及定位、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

相关文章

  • 路飞项目前端主页搭建

    前端主页 图片准备 首先把主页需要到图片资源放到项目的img文件夹下 页头组件:components/Header.vue <template> <div class=”header”> <div class=”slogan”> <p>老男孩IT教育 | 帮助有志向的年轻人通过努力学习获得体面的工作和生活&lt…

    2023年4月2日
    00
  • 如何制作验证码

    推导步骤1:在img标签的src属性里放上验证码的请求路径 补充1.img的src属性: 1.图片路径 2.url 3.图片的二进制数据 补充2:字体样式 我们计算机上之所以可以输出各种各样的字体样式,其内部其实对应的是一个个以.ttf结尾的文件 由于img的src属性里可以放图片的二进制数据,因此我们可以在src里放上图片的请求路径,返回的是一个图片的二进…

    Python开发 2023年4月2日
    00
  • 后台response和异常处理封装

    我们自己封装的一些东西,往往放在一个utils文件夹内,以后也方便管理和导入 后台response封装 # 自己封装的Response对象 from rest_framework.response import Response class APIResponse(Response): def __init__(self,code=1,msg=’成功’,re…

    2023年4月2日
    00
  • flask基础介绍和语法

    flask基础介绍和语法 flask项目初始化的app.py介绍 # 从flask包中导入flask类 from flask import Flask # 使用flask类实例化出一个app对象 # __name__:代表当前app.py这个模块 app = Flask(__name__) # 创建一个路由和视图的映射 @app.route(‘/’) def…

    2023年4月2日
    00
  • 模板语法之标签

    语法 {% 开始标签 %} …. {% 结束标签%} if标签 例:{% if … %} {% elif %} {% else %} {% endif %} if语句支持 and 、or、==、>、<、!=、<=、>=、in、not in、is、is not判断。 for标签 # for 标签带有一个可选的{% empty %…

    Python开发 2023年4月2日
    00
  • 小程序用户和登录页面展示

    用户页面wxml <!–pages/home/home.wxml–> <view class=”container”> <view class=”top-view”> <view class=”user”> <view class=”row”> <image class=”avatar” …

    Python开发 2023年4月2日
    00
  • form表单内容序列化的两种方法

    form表单内容序列化 form表单自带两种方法serialize()方法和serializeArray()方法 1.serialize()方法 描述:序列化表单内容为字符串(不包括文件),用于Ajax请求。 格式:var data = $(‘#form’).serialize(); 2.serializeArray()方法 描述:序列化表单元素(类似’.s…

    2023年4月2日
    00
  • 小程序发布流程、小程序进度条组件、修改data里的局部数据、小程序api位置设置、首页瀑布流展示

    发布 发布流程的问题 方式一 1. 打开图片进行本地预览 2. 输入文字 & 选择相应的信息 3. 点击发布按钮 3.1 将本地图片上传到 腾讯云对象存储中COS(oss),并将COS中的图片地址返回。 3.2 将COS中的图片URL和文字等信息一起提交到后台。 BUG: 在3.2步骤时可能拿不到COS中的图片。 function onClickSu…

    Python开发 2023年3月31日
    00
合作推广
合作推广
分享本页
返回顶部