精华内容
下载资源
问答
  • 微信小程序商城api
    千次阅读
    2021-09-08 11:46:36

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。[[点击跳转到网站。]]

    小程序Api

    App

    全局入口,整个小程序项目中,只允许有一个App入口函数。

    全局数据

    • globalData:写在全局的js里

    • 使用this.globalData.data

    私有的生命周期【全局的生命周期】

    • onLaunch:初始化函数

    • onShow:启动或切换前台

    • onHide:小程序后台运行

    Page

    私有的生命周期【页面的生命周期】

    • onLoad:页面加载

    • onShow:页面显示

    • onHide:页面隐藏

    • onReady:页面初始化渲染完成

    • onUnload:页面卸载–销毁

    Component

    1. 构建自定义组件的,需要在json组件中声明:"component":true之后才可以在page文件中使用。

    2. 使用组件:在page页面的json里引入

    
        "usingComponents":{
            "wk-header":"/components/header/header"
    
        }
    
    

    生命周期

    • created:创建组件的生命周期

    小程序语法

    渲染数据

    1. 在文档内使用插值的写法{{}}

    2. 在标签上属性内使用也需要{{}}

    3. 修改数据使用this.setData({data:newValue})

    条件渲染

    wx:if,‘wx:else if’,‘wx:else’

    循环渲染

    wx:for="{{data}}"

    默认在for语法内注入了item变量和index变量;

    如果需要修改名字,在元素上使用wx:for-item="别名".

    事件绑定

    bind:eventType='callback'

    移动端没用click事件,对应的是tap事件
    事件又分成俩种
    冒泡事件

    • 父级标签:bindtap='parentChange'
    • 子集标签:bindtap='childrenChange'

    点击子集父级也会执行

    非冒泡事件

    • 父级标签:catchtap='parentChange'
    • 子集标签:catchtap='childrenChange'

    点击子集父级并不会触发

    路由

    例子:

    parent(){
        wx.navigateTo({
              url: '../logs/logs'
            })
      },
    

    wx.switchTab(Object object)

    跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

    wx.reLaunch(Object object)

    关闭所有页面,打开到应用内的某个页面

    wx.redirectTo(Object object)

    关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面

    属性

    url string 是 需要跳转的 tabBar 页面的路径 (代码包路径)(需在 app.json 的 tabBar 字段定义的页面),路径后不能带参数 **

    success function 否 接口调用成功的回调函数

    fail function 否 接口调用失败的回调函数

    complete function 否 接口调用结束的回调函数(调用成功、失败都会执行

    wx.navigateTo(Object object)

    保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。

    比前三个多出一个属性

    events Object 否 页面间通信接口,用于监听被打开页面发送到当前页面的数据。基础库 2.7.3 开始支持。

    wx.navigateBack(Object object)

    关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈

    属性将url替换成了

    delta number 1 否 返回的页面数,如果 delta 大于现有页面数,则返回到首页

    内置的网络请求

    wx:request({})写法和jq.ajax几乎一样

    更多相关内容
  • 主要介绍了微信小程序通过api接口将json数据展现到小程序示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 微信小程序如何封装api接口 首先创建个http文件夹(可自定义名字) 一:创建个env.js文件用来设置公共访问的url,即环境地址 module.exports = { //开发环境 dev:{baseUrl:http://localhost:3000}, //测试环境 ...
  • 微信小程序demo:豆瓣电影:使用API(源代码+截图)微信小程序demo:豆瓣电影:使用API(源代码+截图)微信小程序demo:豆瓣电影:使用API(源代码+截图)微信小程序demo:豆瓣电影:使用API(源代码+截图)微信小程序demo:...
  • 3_微信小程序官方API文档(带目录),详细的介绍了微信小程序开发过程,方便读者查找使用,给小程序开发带来帮助
  • 微信小程序实现智能饲喂后台数据对接,登录,注册,数据查询
  • 微信小程序API使用大全

    千人学习 2019-01-22 18:47:26
    微信小程序中所有API的使用课程
  • 微信小程序不支持html5的DeviceOrientationEvent重力感应API,而是自己实现的wx.onAccelerometerChange 这个API回调实现,频率为5次/s 在这个背景下,要实现平滑的重力感应的视差体验就那么优雅了,
  • 微信小程序 网络API微信小程序 网络API发起请求 微信小程序 网络API 上传、下载 微信小程序 网络API Websocket 微信小程序 wx.request(OBJECT) ​ wx.request发起的是https请求。一个微信小程序,同时只能有5个...
  • 主要给大家通过代码实例分析了promise化微信小程序api的使用方法,对此有需要的朋友可以参考学习下。
  • wxSmartApp 本项目主要展示微信小程序中组件以及微信api的使用示例,关于微信项目环境的搭建以及各目录结构创建请参考小程序基础教程https://mp.weixin.qq.com/debug/wxadoc/dev/
  • 例如在《 C#开发微信门户及应用(43)--微信各个项目模块的定义和相互关系 》介绍了相关模块的划分,在《 基于微信小程序的系统开发准备工作 》介绍了Web API的架构设计思路。本篇随笔对之前介绍的架构内容进行...
  • 微信小程序异步API同步化研究.pdf
  • 微信小程序常用api

    千次阅读 2021-06-28 22:44:43
    微信小程序常用api获取用户个人信息获取用户手机号客服获取收获地址 获取用户个人信息 <font color="#eee>代码如下: wx.getUserProfile({ desc: '自定义描述信息', success:(res)=>{ console.log...


    获取用户个人信息


    <font color="#eee>代码如下:

     wx.getUserProfile({
         desc: '自定义描述信息',
         success:(res)=>{
           console.log(res.);
           let {userInfo}=res;
           console.log(userInfo.avatarUrl)//用户头像
           console.log(userInfo.nickName)//用户名
         }
       })
    

    res中的数据
    在这里插入图片描述

    获取用户手机号


    1. 获取手机号

    获取微信用户绑定的手机号,需先调用wx.login接口。
    因为需要用户主动触发才能发起获取手机号接口,所以该功能不由 API 来调用,需用 button 组件的点击来触发。

    注意:目前该接口针对非个人开发者,且完成了认证的小程序开放(不包含海外主体)。需谨慎使用,若用户举报较多或被发现在不必要场景下使用,微信有权永久回收该小程序的该接口权限。

    1. 使用方法

    需要将 button 组件 open-type 的值设置为 getPhoneNumber,当用户点击并同意之后,可以通过 bindgetphonenumber 事件回调获取到微信服务器返回的加密数据, 然后在第三方服务端结合 session_key 以及 app_id 进行解密获取手机号。

    注意
    在回调中调用 wx.login 登录,可能会刷新登录态。此时服务器使用 code 换取的 sessionKey不是加密时使用的 sessionKey,导致解密失败。建议开发者提前进行 login;或者在回调中先使用 checkSession 进行登录态检查,避免 login 刷新登录态。

    <font color="eee >代码如下(示例):

     getPhoneNumber (e) {
        console.log(e.detail.errMsg)
        console.log(e.detail.iv)
        console.log(e.detail.encryptedData)
      }
    
     <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">手机号</button>
    

    json中的数据结构如下

    {
        "phoneNumber": "13580006666",
        "purePhoneNumber": "13580006666",
        "countryCode": "86",
        "watermark":
        {
            "appid":"APPID",
            "timestamp": TIMESTAMP
        }
    }
    
    参数说明类型
    phoneNumberString用户绑定的手机号(国外手机号会有区号)
    purePhoneNumberString没有区号的手机号
    countryCodeString区号

    客服


    只能在小程序端显示,或者真机调试
    代码如下:
    <view> <button open-type="contact">客服</button></view>
    

    在这里插入图片描述

    获取收获地址

    <view class="container">
      <form>
        <view class="page-section">
          <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell weui-cell_input">
              <view class="weui-cell__hd">
                <view class="weui-label">收货人姓名</view>
              </view>
              <view class="weui-cell__bd">
                {{ addressInfo.userName }}
              </view>
            </view>
    
            <view class="weui-cell weui-cell_input">
              <view class="weui-cell__hd">
                <view class="weui-label">邮编</view>
              </view>
              <view class="weui-cell__bd">
                {{ addressInfo.postalCode }}
              </view>
            </view>
    
            <view class="weui-cell weui-cell_input region">
              <view class="weui-cell__hd">
                <view class="weui-label">地区</view>
              </view>
              <view class="weui-cell__bd">
                {{ addressInfo.provinceName }}
                {{ addressInfo.cityName }}
                {{ addressInfo.countyName }}
              </view>
            </view>
    
    
            <view class="weui-cell weui-cell_input detail">
              <view class="weui-cell__hd">
                <view class="weui-label">收货地址</view>
              </view>
              <view class="weui-cell__bd">
                {{ addressInfo.detailInfo }}
              </view>
            </view>
    
              <view class="weui-cell weui-cell_input">
              <view class="weui-cell__hd">
                <view class="weui-label">国家码</view>
              </view>
              <view class="weui-cell__bd">
                {{ addressInfo.nationalCode }}
              </view>
            </view>
    
            <view class="weui-cell weui-cell_input">
              <view class="weui-cell__hd">
                <view class="weui-label">手机号码</view>
              </view>
              <view class="weui-cell__bd">
                {{ addressInfo.telNumber }}
              </view>
            </view>
    
          </view>
        </view>
      </form>
      
      <view class="btn-area">
        <button type="primary" bindtap="chooseAddress">获取收货地址</button>
      </view>
    </view>
    
    
    Page({
      data: {
        addressInfo: null
      },
      chooseAddress() {
        wx.chooseAddress({
          success: (res) => {
            this.setData({
              addressInfo: res
            })
          },
          fail: function(err) {
            console.log(err)
          }
        })
      }
    })
    
    展开全文
  • Springboot整合微信小程序支付第一步:第二步:导入微信支付的依赖第三步:在springboot核心配置文件中配置参数第四步:创建配置类WxPayAppConfig第五步:支付方法service层方法Controller层方法 第一步: 先准备好 ...
  • 微信小程序 网络API微信小程序 网络API发起请求 微信小程序 网络API 上传、下载 微信小程序 网络API Websocket wx.connectSocket(OBJECT) ​ 创建一个 WebSocket 连接;一个微信小程序同时只能有一个WebSocket...
  • 微信小程序简单天气预报查询系统,利用API接口实现天气预报的调用查询,需要自己去设置request,在微信公众开发平台里面设置白名单。 天气接口api 地址:http://wthrcdn.etouch.cn/weather_mini?city=城市名称 不得...
  • 主要为大家详细介绍了微信小程序实现刷脸登录,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 微信小程序 网络API微信小程序 网络API发起请求 微信小程序 网络API 上传、下载 微信小程序 网络API Websocket wx.uploadFile(OBJECT) 将本地资源上传到开发者服务器。如页面通过 wx.chooseImage 等接口...
  • 增强微信小程序API 为什么要增强微信小程序API 微信小程序因其双线程框架,导致大部分API都是异步API,比如,最常用的wx.request。而小程序的API的设计,都是采用回调形式。这样,业务过于复杂的时候,就会陷入回调...
  • TodayOnHistory 用API开发的微信小程序 -- 历史今日 已失效 这个demo编写的时候小程序开发工具版本为0.9,现在运行这个demo会有问题。 此外,接入的API是非https,而微信要求必须使用https。
  • 微信小程序api拦截器

    2021-03-29 17:40:03
    微信小程序api拦截器 完美兼容原生小程序项目 完美兼用小程序api的原本调用方式,无痛迁移 小程序api全Promise化 和axios一样的请求方式 小程序api自定义拦截调用参数和返回结果 强大的async拦截快速开始安装 npm ...
  • 主要为大家详细介绍了微信小程序实现弹出菜单动画,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 通过开发一个已上线的小程序商城全栈应用,学会如何打造iOS,Android,Web多端适配的服务端标准API,掌握三端分离开发方式,理解现代Web的基本架构思想
  • .NET开发微信小程序-上传图片到服务器 1.上传图片分为几种:  a:上传图片到本地(永久保存)  b:上传图片到本地(临时保存)  c:上传图片到服务器 a和b在小程序的api文档里面有。直接说C:上传图片到服务器 前端...
  • 微信小程序文件API 文章目录微信小程序文件API一、 保存文件二、 获取文件信息三、 获取本地文件列表四、 获取本地文件信息五、 删除本地文件六、 打开文档 一、 保存文件 二、 获取文件信息 三、 获取本地文件...

    微信小程序文件API



    一、 保存文件

    小程序使用wx.saveFile(OBJECT)保存文件到本地。注意:saveFile会把临时文件移动,因此调用成功后传入的tempFilePath将不可用。其OBJECT参数说明如表所示。
    参数类型必填说明
    tempFilePathString需要保存的文件的临时路径
    successFunction返回文件的保存路径,res = {savedFilePath: '文件的保存路径?}
    failFunction接口调用失败的回调函数
    completeFunction接口调用结束的回调函数(调用成功与否都执行)

    例题

    js文件

     data: {
        src: '' //图片临时地址
      },
      //下载文件
      downloadFile: function () {
        var that = this
        wx.downloadFile({
          url: 'https://img-blog.csdnimg.cn/2c838b6cb29e4d9dbbbc1197edc83c36.jpg#pic_center',
          success: function (res) {
            if (res.statusCode === 200) {
              that.setData({
                src: res.tempFilePath
              })
            }
          }
        })
      },
      //保存文件
      saveFile: function () {
        var that = this
        let src = this.data.src
        if (src == '') {
          wx.showToast({
            title: '请先下载文件!',
            icon: 'none'
          })
        } else {
          wx.saveFile({
            tempFilePath: src,
            success: function (res) {
              console.log('文件被保存到:' + res.savedFilePath)
              wx.showToast({
                title: '保存成功!'
              })
            }
          })
        }
      },
    

    json文件

    {"navigationBarTitleText": "智慧云工具箱-微信小程序文件API"
    
    }
    

    wxml文件

    <view class='page-body'>
        <view class='title'>1. 保存文件的简单应用</view>
        <view class='demo-box'>
          <view class='title'>(1)下载文件</view>
          <button type="primary" bindtap="downloadFile">下载文件</button>
          <image wx:if='{{src}}' src='{{src}}' mode='widthFix'></image>
        </view>
        <view class='demo-box'>
          <view class='title'>(2)保存文件</view>
          <button type="primary" bindtap="saveFile">保存文件</button>
        </view>
      </view>
    

    wxss文件

    button{
      margin: 15rpx;
    }
    

    在这里插入图片描述在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述

    二、 获取文件信息

    小程序使用wx.getFileInfo(OBJECT)获取文件信息,该接口从基础库 1.4.0 开始支持,低版本需做兼容处理。OBJECT参数说明如表所示。
    参数类型必填说明
    filePathString本地文件路径
    digestAlgorithmString计算文件摘要的算法。默认值md5,有效值: md5, sha1
    successFunction接口调用成功的回调函数
    failFunction接口调用失败的回调函数
    completeFunction接调用结束的回调函数〔调用成功与否都执行)

    例题

    js文件

     
     data: {
        tempFilePath: '' //临时文件路径
      },
      //下载文件
      downloadFile: function () {
        var that = this
        wx.downloadFile({
          url: 'https://img-blog.csdnimg.cn/2c838b6cb29e4d9dbbbc1197edc83c36.jpg#pic_center', //用户可以更改
          success: function (res) {
            // 只要服务器有响应数据,就会进入 success 回调
            if (res.statusCode === 200) {
              console.log('文件被下载到:' + res.tempFilePath)
              that.setData({
                tip1: '提示:文件已下载。',
                tempFilePath: res.tempFilePath
              })
            }
          }
        })
      },
      //获取临时文件信息
      getFileInfo: function () {
        var that = this
        let tempFilePath = this.data.tempFilePath
        if (tempFilePath == '') {
          //文件尚未保存到本地
          wx.showModal({
            title: '提示',
            content: '请先下载文件!',
            showCancel: false
          })
        } else {
          //获取保存的文件信息
          wx.getFileInfo({
            filePath: tempFilePath,
            success: function (res) {
              that.setData({
                tip2: '文件大小:' + res.size + '字节。'
              })
            }
          })
        }
      },
    

    wxml文件

      <view class='page-body'>
        <view class='title'>2. 获取临时文件信息的简单应用</view>
        <view class='demo-box'>
          <view class='title'>(1)下载文件</view>
          <button type="primary" bindtap="downloadFile">下载文件</button>
          <view class='title'>{{tip1}}</view>
        </view>
        <view class='demo-box'>
          <view class='title'>(2)获取临时文件信息</view>
          <button type="primary" bindtap="getFileInfo">获取文件信息</button>
          <view class='title'>{{tip2}}</view>
        </view>
      </view>
    

    wxss文件

    button{
      margin: 15rpx;
    }
    

    在这里插入图片描述在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述

    三、 获取本地文件列表

    小程序使用wx.getSavedFileList(OBJECT)获取本地已保存的文件列表。 OBJECT参数说明如表所示。
    参数类型必填说明
    successFunction接口调用成功的回调函教
    failFunction接口调用失败的回调函教
    completeFunction接口调用结束的回调函数〔调用成功与否都执行)

    例题

    js文件

     data: {
        savedFilePath: '' //本地文件路径
      },
      //下载和保存文件
      saveFile: function () {
        var that = this
        wx.downloadFile({
          url: 'https://img-blog.csdnimg.cn/2c838b6cb29e4d9dbbbc1197edc83c36.jpg#pic_center', //用户可以更改
          success: function (res) {
            // 只要服务器有响应数据,就会进入 success 回调
            if (res.statusCode === 200) {
              //保存文件到本地
              wx.saveFile({
                tempFilePath: res.tempFilePath,
                success: function (res) {
                  console.log('文件保存成功!')
                  that.setData({
                    tip1: '提示:文件已保存。',
                    savedFilePath: res.savedFilePath
                  })
                }
              })
            }
          }
        })
      },
      //获取本地文件列表
      getSavedFileList:function(){
        var that = this
        wx.getSavedFileList({
          success: function (res) {
            console.log(res.fileList)
            that.setData({
              tip2: '提示:文件列表已获取。'
            })
          }
        })
      },
    

    json文件

    {"navigationBarTitleText": "智慧云工具箱-微信小程序文件API"
    
    }
    

    wxml文件

    <view class='page-body'>
        <view class='title'>3. 获取本地文件列表的简单应用</view>
        <view class='demo-box'>
          <view class='title'>(1)保存文件</view>
          <button type="primary" bindtap="saveFile">保存文件</button>
          <view class='title'>{{tip1}}</view>
        </view>
        <view class='demo-box'>
          <view class='title'>(2)获取本地文件列表</view>
          <button type="primary" bindtap="getSavedFileList">获取文件列表</button>
          <view class='title'>{{tip2}}</view>
        </view>
      </view>
    

    wxss文件

    button{
      margin: 15rpx;
    }
    

    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述

    四、 获取本地文件信息

    小程序使用wx.getSavedFileInfo(OBJECT)获取本地文件的文件信息。此接口只能用于获取已保存到本地的文件,若需要获取临时文件信息,请使用 wx.getFileInfo 接口。 OBJECT参数说明如表所示。
    参数类型必填说明
    filePathString文件路径
    successFunction接口调用成功的回调函数。返回结果见success返回参教说明
    failFunction接口调用失败的回调函数
    completeFunction接口调用结束的回调函数(调用成功与否都执行)

    例题

    js文件

     data: {
        tempFilePath: '', //临时文件路径
        savedFilePath: '' //本地文件路径
      },
      //下载文件
      downloadFile: function () {
        var that = this
        wx.downloadFile({
          url: 'https://img-blog.csdnimg.cn/2c838b6cb29e4d9dbbbc1197edc83c36.jpg#pic_center', //用户可以更改
          success: function (res) {
            // 只要服务器有响应数据,就会进入 success 回调
            if (res.statusCode === 200) {
              console.log('文件被下载到:' + res.tempFilePath)
              that.setData({
                tip1: '提示:文件已下载。',
                tempFilePath: res.tempFilePath
              })
            }
          }
        })
      },
      //保存文件
      saveFile: function () {
        var that = this
        let tempFilePath = this.data.tempFilePath
        if (tempFilePath == '') {
          //文件尚未下载
          wx.showModal({
            title: '提示',
            content: '请先下载文件!',
            showCancel: false
          })
        } else {
          //保存文件到本地
          wx.saveFile({
            tempFilePath: tempFilePath,
            success: function (res) {
              console.log('文件被保存到:' + res.savedFilePath)
              that.setData({
                tip2: '提示:文件已保存。',
                savedFilePath: res.savedFilePath
              })
            }
          })
        }
      },
      //获取文件信息
      getSavedFileInfo: function () {
        var that = this
        let savedFilePath = this.data.savedFilePath
        if (savedFilePath == '') {
          //文件尚未保存到本地
          wx.showModal({
            title: '提示',
            content: '请先保存文件!',
            showCancel: false
          })
        } else {
          //获取保存的文件信息
          wx.getSavedFileInfo({
            filePath: savedFilePath,
            success: function (res) {
              that.setData({
                tip3: '文件大小:' + res.size + '字节。'
              })
            }
          })
        }
      },
    

    json文件

    {"navigationBarTitleText": "智慧云工具箱-微信小程序文件API"
    
    }
    

    wxml文件

    <view class='container'>
      <include src='../../common/head.wxml' />
      <view class='page-body'>
        <view class='title'>4. 获取本地文件信息的简单应用</view>
        <view class='demo-box'>
          <view class='title'>(1)下载文件</view>
          <button type="primary" bindtap="downloadFile">下载文件</button>
          <view class='title'>{{tip1}}</view>
        </view>
        <view class='demo-box'>
          <view class='title'>(2)保存文件</view>
          <button type="primary" bindtap="saveFile">保存文件</button>
          <view class='title'>{{tip2}}</view>
        </view>
        <view class='demo-box'>
          <view class='title'>(3)获取本地文件信息</view>
          <button type="primary" bindtap="getSavedFileInfo">获取文件信息</button>
          <view class='title'>{{tip3}}</view>
        </view>
      </view>
    

    wxss文件

    button{
      margin: 15rpx;
    }
    

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    五、 删除本地文件

    小程序使用wx.removeSavedFile(OBJECT)删除本地已保存的文件。 OBJECT参数说明如表所示。
    参数类型必填说明
    filePathString需要删除的文件路径
    successFunction接口调用成功的回调函数
    failFunction接口调用失败的回调函教
    completeFunction接口调用结束的回调函数(调用成功与否都执行)

    例题

    js文件

     data: {
        savedFilePath: '' //本地文件路径
      },
      //下载和保存文件
      saveFile: function () {
        var that = this
        wx.downloadFile({
          url: 'https://img-blog.csdnimg.cn/2c838b6cb29e4d9dbbbc1197edc83c36.jpg#pic_center', //用户可以更改
          success: function (res) {
            // 只要服务器有响应数据,就会进入 success 回调
            if (res.statusCode === 200) {
              console.log('文件被下载到:' + res.tempFilePath)
              //保存文件到本地
              wx.saveFile({
                tempFilePath: res.tempFilePath,
                success: function (res) {
                  console.log('文件被保存到:' + res.savedFilePath)
                  that.setData({
                    tip1: '提示:文件已保存。',
                    savedFilePath: res.savedFilePath
                  })
                }
              })
            }
          }
        })
      },
      //删除文件
      removeFile: function () {
        var that = this
        let savedFilePath = this.data.savedFilePath
        if (savedFilePath == '') {
          //文件尚未保存
          wx.showModal({
            title: '提示',
            content: '请先下载和保存文件!',
            showCancel: false
          })
        } else {
          //删除本地文件
          wx.removeSavedFile({
            filePath: savedFilePath,
            success: function (res) {
              that.setData({
                tip2: '提示:文件已被删除。'
              })
            }
          })
        }
      },
      //获取文件信息
      getSavedFileInfo: function () {
        var that = this
        let savedFilePath = this.data.savedFilePath
        //获取保存的文件信息
        wx.getSavedFileInfo({
          filePath: savedFilePath,
          success: function (res) {
            that.setData({
              tip3: '文件大小:' + res.size + '字节。'
            })
          },
          fail: function (res) {
            console.log(res)
            that.setData({
              tip3: '提示:文件不存在。'
            })
          }
        })
      },
    

    json文件

    {"navigationBarTitleText": "智慧云工具箱-微信小程序文件API"
    
    }
    

    wxml文件

     <view class='page-body'>
        <view class='title'>5. 删除已保存文件的简单应用</view>
        <view class='demo-box'>
          <view class='title'>(1)下载并保存文件</view>
          <button type="primary" bindtap="saveFile">下载并保存文件</button>
          <view class='title'>{{tip1}}</view>
        </view>
        <view class='demo-box'>
          <view class='title'>(2)删除文件</view>
          <button type="primary" bindtap="removeFile">删除文件</button>
          <view class='title'>{{tip2}}</view>
        </view>
        <view class='demo-box'>
          <view class='title'>(3)获取本地文件信息</view>
          <button type="primary" bindtap="getSavedFileInfo">获取文件信息</button>
          <view class='title'>{{tip3}}</view>
        </view>
      </view>
    

    wxss文件

    button{
      margin: 15rpx;
    }
    

    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述

    六、 打开文档

    小程序使用wx.openDocument(OBJECT)新开页面打开文档,支持格式:doc, xls, ppt, pdf, docx, xlsx, pptx。OBJECT参数说明如表所示。
    参数类型必填说明
    filePathString文件路径,可通过downFile获得
    fileTyneString文件类型,指定文件类型打开文件,有效值doc, xls, ppt, pdf, docx, xlsx, pptx (最低版本1.4.0)
    successFunction接口调用成功的回调函教
    failFunction接口调用失败的回调函数
    completeFunction接口调用结束的回调函教〔调用成功与否都执行)

    例题

    js文件

    data: {
        path: ''
      },
      //下载文件
      downloadFile: function () {
        var that = this
        wx.downloadFile({
          url: 'https://img-blog.csdnimg.cn/2c838b6cb29e4d9dbbbc1197edc83c36.jpg#pic_center', //用户可以更改
          success: function (res) {
            // 只要服务器有响应数据,就会把响应内容写入文件并进入 success 回调,业务需要自行判断是否下载到了想要的内容
            if (res.statusCode === 200) {
              console.log(res)
              that.setData({
                tip: '提示:文件已下载',
                path: res.tempFilePath
              })
            }
          }
        })
      },
      //打开文件
      openDocument: function () {
        let path = this.data.path
        //文档尚未下载
        if (path == '') {
          wx.showModal({
            title: '提示',
            content: '请先下载文档!',
            showCancel: false
          })
        }
        //打开文档
        else {
          wx.openDocument({ filePath: path })
        }
      },
    

    json文件

    {"navigationBarTitleText": "智慧云工具箱-微信小程序文件API"
    
    }
    

    wxml文件

      <view class='page-body'>
        <view class='title'>6. 打开文档的简单应用</view>
        <view class='demo-box'>
          <view class='title'>(1)下载文件</view>
          <button type="primary" bindtap="downloadFile">下载文件</button>
          <view class='title'>{{tip}}</view>
        </view>
        <view class='demo-box'>
          <view class='title'>(2)打开文件</view>
          <button type="primary" bindtap="openDocument">打开文件</button>
        </view>
      </view>
    

    wxss文件

    button{
      margin: 15rpx;
    }
    

    在这里插入图片描述
    在这里插入图片描述

    七、 推荐小程序(欢迎各位大佬指导)

    在这里插入图片描述

    展开全文
  • 微信小程序案例包.zip

    2020-09-03 10:01:20
    WxValidate微信小程序使用步骤及其插件下载和案例查看,到官网下载WxValidate插件,用谷歌浏览器可以翻译英文界面为中文(点击绿色按钮code下载),分为64位和32位

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 112,958
精华内容 45,183
关键字:

微信小程序商城api