zoukankan      html  css  js  c++  java
  • WeChat--API

    获取用户信息

    fetchinfo: function(){
    	var that = this
    	wx.getUserInfo({
    	  withCredentials: true,
    	  lang: '',
    	  success: function(res) {
    		that.setData({
    		  name:res.userInfo.nickName,
    		  path:res.userInfo.avatarUrl
    		})
    	  },
    	  fail: function(res) {},
    	  complete: function(res) {},
    	})
      },
    

    获取地理位置

    getLocalPath:function(){
    	var that = this
    	wx.chooseLocation({
    	  success: function(res) {
    		that.setData({
    		  localPath:res.address
    		})
    	  },
    	  fail: function(res) {},
    	  complete: function(res) {},
    	})
      },
    

    上传图片,储存在缓冲中

    uploadImage:function(){
    	var that = this
    	wx.chooseImage({
    	  count: 9,
    	  sizeType: ['original', 'compressed'],
    	  sourceType: ['album', 'camera'],
    	  success: function(res) {
    		that.setData({
    		  imageList:that.data.imageList.concat(res.tempFilePaths)
    		})
    	  },
    	  fail: function(res) {},
    	  complete: function(res) {},
    	})
      },
    

    页面跳转

    '''
    
    # 路由5种跳转方式
    (1)wx.switchTab :只能跳转到导航页,并关闭其他的导航页
    (1)wx.reLaunch :关闭所有页面,打开到应用内的某个页面
    (1)wx.redirectTo :关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 导航 页面
    (1)wx.navigateTo :只保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面(最多10层)
    (1)wx.navigateBack :返回上一页,可以返回多级页面
    
    '''
    
    click_acution:function(e){
    	var nid = e.currentTarget.dataset.nid;
    	wx.navigateTo({
    	  url: '/pages/redirect/redirect?id=' + nid,
    	  success: function(res) {},
    	  fail: function(res) {},
    	  complete: function(res) {},
    	})
      },
    ## 跳转到指定页面后自动触发指定页面的js文件中的的onLoad函数,option接收传过来的参数
    
    ```
    Page({
    /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
    	console.log(options);
      }
    })
    ```
    

    弹窗接口:wx.showToast

    wx.showToast({
      title: '',
      icon: '',
      image: '',
      duration: 0,
      mask: true,
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
    

    wxml页面

    <view>手机号:</view>
    <input value="{{phone}}" placeholder="请输入手机号" bindinput="getPhone"></input>
    
    <view>验证码:<view bindtap="messageCode">点击获取验证码 </view></view>
    <input value="{{code}}" placeholder="请输入验证码" bindinput="getCode"></input>
    
    <button bindtap="login">登录</button>
    

    手机格式验证:

      * 发送短信验证码
      messageCode: function () {
    	// 手机长度限制
    	if (this.data.phone.length != 11) {
    	  // 弹窗
    	  wx.showToast({
    		title: '手机号长度错误',
    		icon: "none", // loading/success/none
    	  })
    	  return;
    	}
    
    
    	// 正则匹配手机格式
    	var reg = /^(1[3|4|5|6|7|8|9])d{9}$/;
    	if (!reg.test(this.data.phone)) {
    	  wx.showToast({
    		title: '手机号格式错误',
    		icon: "none", // loading/success/none
    	  })
    	  return;
    	}
    
    	wx.request({
    	  url: 'http://127.0.0.1:8000/api/message/',
    	  data: { phone: this.data.phone },
    	  method: 'GET',
    	  success: function (res) {
    		console.log(res);
    	  }
    	})
      },
    

    API接口发送请求:wx.request

    wx.request({
      url: '',
      data: '',
      header: {},
      method: 'GET',
      dataType: 'json',
      responseType: 'text',
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
    

    示例:手机号验证码登陆

    	* 用户登录
    
      login: function () {
    	console.log(this.data.phone, this.data.code);
    	// 将手机号和验证码发送到后端,后端进行登录。
    	wx.request({
    	  url: 'http://127.0.0.1:8000/api/login/',
    	  data: { phone: this.data.phone, code: this.data.code },
    	  method: 'POST',
    	  success: function (res) {
    		console.log(res);
    	  }
    	})
      },
    

    选择框

    wx.showModal({
    

      title: '提示',
      content: '这是一个模态弹窗',
      success (res) {
        if (res.confirm) {
          console.log('用户点击确定')
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })

    加载中

    wx.showLoading({
    

      title: '加载中',
    })

    # 设置超时时间
    setTimeout(function () {
      wx.hideLoading()
    }, 2000)
    

    分享

    onLoad: function (options) {
      this.getDate(options.id)
      wx.showShareMenu({
    	// 要求小程序返回分享目标信息
    	withShareTicket: true
      })
    },
    /* 转发*/
    onShareAppMessage: function (ops) {
      if (ops.from === 'button') {
    	// 来自页面内转发按钮
    	console.log(ops.target)
      }
      return {
    	title: '转发dom',
    	path: `pages/index/index`,
    	success: function (res) {
    	  // 转发成功
    	  console.log("转发成功:" + JSON.stringify(res));
    	  var shareTickets = res.shareTickets;
    	},
    	fail: function (res) {
    	  // 转发失败
    	  console.log("转发失败:" + JSON.stringify(res));
    	}
      }
    }
    

    本地缓冲

    function wx.setStorageSync(key: string): void
    
    将 data 存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个同步接口
    
    
    function wx.getStorageSync(key: string): void
    
    从本地缓存中同步获取指定 key 对应的内容
    
    
    function wx.getStorageSync(key: string): void
    
    从本地缓存中同步获取指定 key 对应的内容
    

    本地缓冲示例:将userinfo缓冲到本地---app.js

    //app.js
    
    App({
      onLaunch: function() {
    	var userInfo = wx.getStorageSync('userInfo');
    	if (userInfo) {
    	  this.globalData.userInfo = userInfo;
    	}
      },
      globalData: {
    	userInfo: null
      },
      initUserInfo: function(tokenInfo, userInfo) {
    	var info = {
    	  nickName: userInfo.nickName,
    	  avatarUrl: userInfo.avatarUrl,
    	  token: tokenInfo.token,
    	  phone: tokenInfo.phone
    	};
    	this.globalData.userInfo = info
    	wx.setStorageSync('userInfo', info);
      },
      logoutUserInfo:function(){
    	wx.removeStorageSync('userInfo');
    	this.globalData.userInfo=null;
      }
    })
    

    打电话

    <button bindtap="onClickCall">
      <image src="/static/images/icon/phone_contact_icon_show.png"></image>
    </button>
    
    onClickCall:function(){
    wx.makePhoneCall({
      phoneNumber: '15000000000'
    })
    },
    希望你眼眸有星辰,心中有山海,从此以梦为马,不负韶华
  • 相关阅读:
    JAVA8学习——Stream底层的实现三(学习过程)
    JAVA8学习——Stream底层的实现二(学习过程)
    JAVA8学习——Stream底层的实现一(学习过程)
    2020年的第一天-我的IDEA出现This license ... has been cancelled
    Java Applet与Java Application的区别
    Spring AOP 详解
    Spring中的代理(proxy)模式
    hibernate中查询方式(二):常用查询
    hibernate中查询方式(一):
    Spring(二)DI( Dependency Injection依赖注入)
  • 原文地址:https://www.cnblogs.com/daviddd/p/12168158.html
Copyright © 2011-2022 走看看