微信小程序api，带代码详解

微信小程序内置api

1、界面

1、wx.showToast(Object object)显示消息提示框

 wx.showToast({
    
    
       title: '你好',
       icon:"none"
     })

事件属性

属性	类型	说明
success	function	接口调用成功的回调函数
fail	function	接口调用失败的回调函数
complete	function	接口调用结束的回调函数 （成功失败都会调用）

2、wx.hideToast(Object object)隐藏消息提示框
2秒后关闭提示

  setTimeout(() => {
    
    
     wx.hideToast();
    }, 2000)

3、wx.showModal(Object object)显示模态对话框

  wx.showModal({
    
    
      title:"需要看广告才能解锁",
      content:"每天试用两次"
    })

属性	类型	默认值	说明
title	string	无	提示的标题
content	string	无	提示的内容
showCancel	boolean	true	是否显示取消按钮
cancelText	string	‘取消’	取消按钮的文字 最多4个字符
cancelColor	string	#000	取消按钮的文字颜色，必须是16进制格式的颜色字符串
confirmText	string	‘确定’	确认按钮的文字，最多4个字符
confirmColor	string	#576B95	确认按钮的文字颜色，必须是16进制格式的颜色字符串

4、wx.showLoading(Object object) 提示框
需主动调用 wx.hideLoading 才能关闭提示框

wx.showLoading({
    
    
      title: '加载中。。。'
    })

setTimeout(() => {
    
    
      wx.hideLoading();
    }, 2000)

注意：
①wx.showLoading 和 wx.showToast 同时只能显示一个
②wx.showToast 应与 wx.hideToast 配对使用
5、wx.showActionSheet(Object object)显示操作菜单

属性	类型	默认值	说明
itemList	Array	无	按钮的文字数组，数组长度最大为
itemColor	string	#000	按钮的文字颜色
success	function	无	接口调用成功的回调函数
fail	function	无	接口调用失败的回调函数
complate	function	无	接口调用结束的回调函数 （成功失败都会调用）

位置api

（1）wx.getLocation(Object object)
作用：获取当前的地理位置、速度。当用户离开小程序后，此接口无法调用。
注意：调用前需要 用户授权 scope.userLocation

success成功回调函数参数



配置：先配置定位权限认证app.json，小程序配置文件中添加如下配置
在这里插入图片描述

转发API

wx.showShareMenu(Object object)

  onShareAppMessage() {
    
    
    // 默认以当前页面截图
    // 实际中，可以网络请求一个数组。冲数组随机的获取一组参数
    return {
    
    
      title: "送你50元大礼包",
      path: "/pages/home/home.js",
      imageUrl: "https://ts1.cn.mm.bing.net/th?id=OIP-C.ncrUEsrAOIkcmTzW_HmP0gHaEx&w=254&h=165&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2"
    }
  },

分享朋友圈wx.onShareTimeline()

  onShareTimeline() {
    
    
    // 不返回也是有个默认的当前页面效果
    return {
    
    
      title: "给你喜欢的",
      query: "/pages/user/user.js",
      imageUrl: "https://ts1.cn.mm.bing.net/th?id=OIP-C.4MYruHSYN8SmcZpmW_xndAHaIu&w=148&h=169&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2"
    }
  },

登录并渲染微信头像和微信名

wx.getUserProfile获取用户信息
wxml

<view wx:if="{
    
    {userInfo.nickName}}">
  <image style="width: 100px; height: 100px;" src="{
    
    {userInfo.avatarUrl}}" mode=""/>
  <view>
    {
    
    {
    
    userInfo.nickName}}
  </view>
</view>
<button wx:else size="mini" bindtap="getUser">获取用户信息</button>

getUser() {
    
    
    var that = this;
    wx.getUserProfile({
    
    
      desc: '需要获取您的昵称',
      success: res => {
    
    
        console.log(res);
        // 更新本地用户信息
        that.setData({
    
    
          "userInfo": res.userInfo
        })
        // 存储用户信息到本地
        wx.setStorageSync('userInfo', res.userInfo)
      }
    })
  },

  onLoad(options) {
    
    
    var sys = wx.getSystemInfoSync();
    console.log(sys);
    // 本地获取用户信息
    var userInfo = wx.getStorageInfoSync("userInfo") || {
    
    };
    // 更新用户信息
    this.setData({
    
    
      userInfo
    })
  },

 data: {
    
    
    pic: "https://ts1.cn.mm.bing.net/th?id=OIP-C.pT8DAupmnWX-LrKZfVds_gHaLH&w=115&h=169&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2",
    userInfo:{
    
    },//用户信息
  },

回到顶部

wxml

<view class="top" bindtap="goTop" wx:if="{
    
    {showTop}}">
  回到顶部
</view>

js

data: {
    
    
    showTop: false,
  },

onPageScroll(e) {
    
    
    // 当页面滚动距离大于100时候显示回到顶部
    if (e.scrollTop > 100) {
    
    
      this.setData({
    
    
        showTop: true
      })
    } else {
    
    
      this.setData({
    
    
        showTop: false
      })
    }
  },

// 回到顶部
  goTop() {
    
    
    // 页面滚动到0的位置事件为600毫秒
    wx.pageScrollTo({
    
    
      duration: 600,
      scrollTop: 0,
    })
  }

下载图片

wx.downloadFile

downPics() {
    
    
    wx.downloadFile({
    
    
      url: this.data.pic,
      success(res) {
    
    
        console.log(res);
        // 把文件报存到相册（需要用户授权）
        wx.saveImageToPhotosAlbum({
    
    
          filePath: res.tempFilePath,
          success() {
    
    
            // 提示保存成功
            wx.showToast({
    
    
              title: "下载图片成功",
              icon: "none"
            })
          }
        })
      }
    })
  },

data: {
    
    
    pic: "https://ts1.cn.mm.bing.net/th?id=OIP-C.pT8DAupmnWX-LrKZfVds_gHaLH&w=115&h=169&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2",
    userInfo:{
    
    },//用户信息
  },

 <image src="{
    
    {pic}}" bindtap="downPics" mode="" />

上传图片

 // 上传图片
  upImg() {
    
    
    var that = this;
    // 选择图片
    // wx.chooseImage()
    // 选择媒体
    wx.chooseMedia({
    
    
      count: 1, //媒体数量
      success(res) {
    
    
        console.log(res);
        // 获取选着的第0个图片临时地址
        var tempFile = res.tempFiles[0].tempFilePath;
        wx.uploadFile({
    
    
          filePath: tempFile,
          name: 'file',
          url: 'http://dida100.com/ajax/file.php',
          success: res => {
    
    
            console.log(res);
            // 转换成js对象
            var data = JSON.parse(res.data);
            // 更新图片
            that.setData({
    
    
              pic: "http://dida100.com" + data.pic
            })
          }
        })
      }
    })
  },

<button type="warn" bindtap="upImg">上传图片</button>

button开放功能

open-type：

1. share 触发分享
2. getPhoneNumber 获取用户的手机号
3. getUserInfo 获取用户信息
4. chooseAvatar 获取用户的头像
   都会弹框需要授权
   tips： 如果拒绝授权后，使用的话是无效的，然后需要手动授权，