精华内容
下载资源
问答
  • 微信小程序的wx.downloadFile Api使用的时候,pc开发者工具有效,移至android手机调试的时候方法内的任何回调都没有执行,判断方法没有执行(真机调试),但是上传至体验版之后神奇的有效了,状况不明 ...

    微信小程序的wx.downloadFile Api使用的时候,pc开发者工具有效,移至android手机调试的时候方法内的任何回调都没有执行,判断方法没有执行(真机调试),但是上传至体验版之后神奇的有效了,状况不明

    展开全文
  • 微信小程序wx.downloadFile()使用体验 想给单位做一个小程序,实现模板文件下载的功能,方便办事群众把文件下载到手机上自行打印填写,也能提高办事效率。 不过想法是好的,截止目前2018年10月24日,微信小程序还...

    微信小程序wx.downloadFile()使用体验

    想给单位做一个小程序,实现模板文件下载的功能,方便办事群众把文件下载到手机上自行打印填写,也能提高办事效率。
    不过想法是好的,截止目前2018年10月24日,微信小程序还不支持这样的功能。
    wx.downloadFile()获取到的文件缓存在手机上,这个文件保存时间是很短暂的,当退出小程序的时候就会被销毁,如果想在下次打开小程序的时候还能看到这个文件,就需要使用wx.saveFile()把装载在临时地址tempFilePath中的文件保存到长期缓存中。

    wx.downloadFile({
          url: 'filepath',
          header: {},
          success: function(res) {
            var tempFilePath = res.tempFilePath
            //console.log('临时文件地址是:' + tempFilePath)
            wx.saveFile({
              tempFilePath: tempFilePath,
              success: function(res) {
                  var saveFilePath = res.savedFilePath   
              },//可以将saveFilePath写入到页面数据中
              fail: function(res) {},
              complete: function(res) {
                console.log('complete后的res数据:')
              },
            }) //,
          },
          fail: function(res) {
            wx.showModal({
              title: '下载失败',
              content: '请联系管理员',
            })
          },
          complete: function(res) {},
        })
    }
    

    下载图片可以通过微信小程序API提供的预览接口预览图片之后长按图片达到保存到手机的目的,但是DOC等其他类型文件就不行了,比如doc文档,只能使用wx.openDocument

    wx.openDocument({
            filePath: saveFilePath,
            //就是之前的那个saveFilePath
            success: function(res){
              console.log(res)
            }
          })
    

    这样可以打开预览,但是这个文件使用手机自带的文件查看器是不能打开的。也不能手动保存……

    展开全文
  • 微信小程序、uni-app开发微信小程序、taro开发微信小程序基础知识 一、基本目录介绍 1.微信小程序 app.js ------ 小程序逻辑 app.json — 小程序公共配置(配页面路由、导航条、选项卡等页面类信息) app.wxss ---- ...

    微信小程序、uni-app开发微信小程序、taro开发微信小程序基础知识


    一、基本目录介绍

    1.微信小程序

    app.js ------ 小程序逻辑
    app.json — 小程序公共配置(配页面路由、导航条、选项卡等页面类信息)
    app.wxss ---- 小程序公共样式表
    components — 组件目录
    pages ------- 业务页面文件存放的目录
    resources ---- 存放应用引用静态资源(如图片、视频等)的目录
    utils ---------- 接口文件

    2.uni-app开发小程序

    pages.json ------- 公共配置(配页面路由、导航条、选项卡等页面类信息)
    App.vue ---------- 应用配置,用来配置App全局样式以及监听
    main.js ------------ Vue初始化入口文件
    components — 组件目录
    pages ------- 业务页面文件存放的目录
    static -------- 存放应用引用静态资源(如图片、视频等)的目录
    utils ---------- 接口文件

    3.taro开发小程序

    dist --------- 编译结果目录
    config ------ 配置目录
    src ------ 源码目录(包含:
    –|--------- pages ----- 页面文件目录
    –|--------- app.scss — 项目总通用样式
    –|--------- app.jsx ------ 项目入口文件
    –|--------- resources – 存放应用引用静态资源(如图片、视频等)的目录
    –|--------- utils ---------- 接口文件
    –|--------- components — 组件目录

    二、全局配置

    1. 微信小程序

    在app.json文件内配置:
    pages: 页面文件路径
    window: 设置小程序的状态栏、导航条、标题、窗口背景色
    tabBar: 客户端窗口的底部或顶部有 tab 栏可以切换页面
    networkTimeout: 各类网络请求的超时时间,单位均为毫秒
    debug: 者工具中开启 debug 模式

    {
      "pages": [
        "pages/index/index",
        "pages/logs/index"
      ],
      "window": {
      	"navigationBarTitleText": "Demo"
      },
      "tabBar": {
        "list": [{
          "pagePath": "pages/index/index",
          "text": "首页"
        }, {
          "pagePath": "pages/logs/index",
          "text": "日志"
        }]
      },
      "networkTimeout": {
        "request": 10000,
        "downloadFile": 10000
      },
      "debug": true,
      "navigateToMiniProgramAppIdList": [
        "wxe5f52902cf4de896"
      ]
    }
    

    【注意】:页面的导航栏标题文字内容修改,需要到页面json文件内修改。

    详细流程介绍:https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE

    2. uni-app开发小程序

    pages.json文件内配置:
    pages: 页面文件路径
    globalStyle: 设置小程序的状态栏、导航条、标题、窗口背景色
    tabBar: 客户端窗口的底部或顶部有 tab 栏可以切换页面

    {
        "pages": [{
            "path": "pages/component/index",
            "style": {
                "navigationBarTitleText": "组件"
            }
        }],
        "condition": { //模式配置,仅开发期间生效
            "current": 0, //当前激活的模式(list 的索引项)
            "list": [{
                "name": "test", //模式名称
                "path": "pages/component/view/index" //启动页面,必选
            }]
        },
        "globalStyle": {
            "navigationBarTextStyle": "black",
            "navigationBarTitleText": "演示",
            "navigationBarBackgroundColor": "#F8F8F8",
            "backgroundColor": "#F8F8F8",
            "usingComponents":{
                "collapse-tree-item":"/components/collapse-tree-item"
            },
        "pageOrientation": "portrait"//横屏配置,全局屏幕旋转设置(仅 APP/微信/QQ小程序),支持 auto / portrait / landscape
        },
        "tabBar": {
            "color": "#7A7E83",
            "selectedColor": "#3cc51f",
            "borderStyle": "black",
            "backgroundColor": "#ffffff",
            "height": "50px",
            "fontSize": "10px",
            "iconWidth": "24px",
            "spacing": "3px",
            "list": [{
                "pagePath": "pages/component/index",
                "iconPath": "static/image/icon_component.png",
                "selectedIconPath": "static/image/icon_component_HL.png",
                "text": "组件"
            }, {
                "pagePath": "pages/API/index",
                "iconPath": "static/image/icon_API.png",
                "selectedIconPath": "static/image/icon_API_HL.png",
                "text": "接口"
            }],
            "midButton": {
                "width": "80px",
                "height": "50px",
                "text": "文字",
                "iconPath": "static/image/midButton_iconPath.png",
                "iconWidth": "24px",
                "backgroundImage": "static/image/midButton_backgroundImage.png"
            }
        },
      "easycom": {
        "autoscan": true, //是否自动扫描组件
        "custom": {//自定义扫描规则
            "uni-(.*)": "@/components/uni-$1.vue"
        }
      }
    }
    

    在uni-app里页面文件路径不是在pages里直接写,是在pages下面path属性里面写,页面导航栏标题在pages下面style属性里修改

    详细流程介绍:https://uniapp.dcloud.io/collocation/pages?id=pages

    3. taro开发小程序

    src目录下app.jsx文件内配置:

    pages: 页面文件路径
    window: 设置小程序的状态栏、导航条、标题、窗口背景色
    tabBar: 客户端窗口的底部或顶部有 tab 栏可以切换页面

    import Taro, { Component } from '@tarojs/taro'
    import Index from './pages/index'
    import './app.scss'
    
    // 如果需要在 h5 环境中开启 React Devtools
    // 取消以下注释:
    // if (process.env.NODE_ENV !== 'production' && process.env.TARO_ENV === 'h5')  {
    //   require('nerv-devtools')
    // }
    
    class App extends Component {
    
      componentDidMount () {}
    
      componentDidShow () {}
    
      componentDidHide () {}
    
      componentDidCatchError () {}
    
      config = {
        pages: [
          'pages/index/index',
          'pages/logs/index'
        ],
        window: {
      	  navigationBarTitleText: 'Demo'
        },
        tabBar: {
          selectedColor: '#e1251b',
          list: [
            {
                pagePath: 'pages/component/index',
                iconPath: 'static/image/icon_component.png',
                selectedIconPath: 'static/image/icon_component_HL.png',
                text: '组件"
            }, 
            {
                pagePath: 'pages/API/index',
                iconPath: 'static/image/icon_API.png',
                selectedIconPath: 'static/image/icon_API_HL.png',
                text: '接口'
            }]
        }
      }
    
      // 在 App 类中的 render() 函数没有实际作用
      // 请勿修改此函数
      render () {
        return (
          <Index />
        )
      }
    }
    Taro.render(<App />, document.getElementById('app'))
    

    taro开发小程序基本语法跟react相同,引入组件首字母需要大写,不然会被当做html标签,key值一律不加引号,value只加单引号,图片使用相对路径。
    全局配置API跟微信小程序一样
    详细流程介绍: https://taro-docs.jd.com/taro/docs/tutorial.html

    三、生命周期

    1. 微信小程序
    • 生命周期(全局)
      app.js文件内
    App({
      onLaunch (options) { 
        console.log('小程序初始化')
      },
      onShow(options) {
        console.log('监听小程序启动或切前台')
      },
      onHide() {
        console.log('监听小程序切后台')
      },
      onError(msg) {
        console.log('错误监听函数')
      },
      onPageNotFound(res) {
        console.log('小程序要打开的页面不存在时触发');
        wx.redirectTo({ // 重定向
          url: 'pages/...'
        }) // 如果是 tabbar 页面,请使用 wx.switchTab
      },
      globalData: { //全局变量
        userInfo: null,
      },
      f1() {
      	console.log('自定义函数')
      }
    })
    

    onLaunch一般用于请求数据,onShow是当前页面显示时执行(可以多次执行),onHide当前页面隐藏时执行(可以多次执行),onError出现错误时执行

    • 页面生命周期:
      页面js文件内
    Page({
    
     /**
      * 页面的初始数据
      */
     data: {
     },
     
     /*页面生命周期*/
      onReady: function () {
        console.log('监听页面初次渲染完成')
      },
      onShow: function () {
        console.log('监听页面显示')
      },
      onHide: function () {
        console.log('监听页面隐藏')
      },
      onUnload: function () {
        console.log('监听页面卸载')
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
      }
    })
    

    onLaunch一般用于请求数据,onShow是当前页面显示时执行(可以多次执行),onHide当前页面隐藏时执行(可以多次执行),onUnload完全退出当前页面时执行

    • 组件生命周期:
    Component({
      /**
       * 组件的属性列表
       */
      properties: {
      },
    
      /**
       * 组件的初始数据
       */
      data: {
      },
    
      /**
       * 组件的方法列表
       */
      methods: {
      },
      
      /*组件生命周期*/ 
      lifetimes: {
        created() {
          console.log("在组件实例刚刚被创建时执行")
        },
        attached() { 
          console.log("在组件实例进入页面节点树时执行")
        },
        ready() {
          console.log("在组件在视图层布局完成后执行")
        },
        moved() {
          console.log("在组件实例被移动到节点树另一个位置时执行")
        },
        detached() {
          console.log("在组件实例被从页面节点树移除时执行")
        },
        error() {
          console.log("每当组件方法抛出错误时执行")
        },
        
        /*组件所在页面的生命周期 */
        pageLifetimes: {
          show: function () {
            console.log("页面被展示")
          },
          hide: function () {
            console.log("页面被隐藏")
          },
          resize: function (size) {
            console.log("页面尺寸变化")
          }
        }
      }
    })
    

    properties父子传递时候,子组件接收数据;methods子组件自定义函数

    2. uni-app
    • 生命周期(全局)
      App.vue文件内
    <script>
        // 只能在App.vue里监听应用的生命周期
        export default {
            onLaunch: function() {
                console.log('App Launch')
            },
            onShow: function() {
                console.log('App Show')
            },
            onHide: function() {
                console.log('App Hide')
            }
        }
    </script>
    
    • 页面生命周期
    函数名 说明 平台差异说明 最低版本
    onLoad 监听页面加载,其参数为上个页面传递的数据,参数类型为Object(用于页面传参),参考示例
    onShow 监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面
    onReady 监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发
    onHide 监听页面隐藏
    onUnload 监听页面卸载
    onResize 监听窗口尺寸变化 App、微信小程序
    onPullDownRefresh 监听用户下拉动作,一般用于下拉刷新,参考示例
    onReachBottom 页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据。具体见下方注意事项
    onTabItemTap 点击 tab 时触发,参数为Object,具体见下方注意事项 微信小程序、支付宝小程序、百度小程序、H5、App(自定义组件模式)
    onShareAppMessage 用户点击右上角分享 微信小程序、百度小程序、头条小程序、支付宝小程序
    onPageScroll 监听页面滚动,参数为Object nvue暂不支持
    onNavigationBarButtonTap 监听原生标题栏按钮点击事件,参数为Object App、H5
    onBackPress 监听页面返回,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack ;详细说明及使用:onBackPress 详解 app、H5、支付宝小程序
    onNavigationBarSearchInputChanged 监听原生标题栏搜索输入框输入内容变化事件 App、H5 1.6.0
    onNavigationBarSearchInputConfirmed 监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发。 App、H5 1.6.0
    onNavigationBarSearchInputClicked 监听原生标题栏搜索输入框点击事件 App、H5 1.6.0

    详细流程介绍: https://uniapp.dcloud.io/collocation/frame/lifecycle

    • 组件生命周期
    函数名 说明 平台差异说明 最低版本
    beforeCreate 在实例初始化之后被调用。详见
    created 在实例创建完成后被立即调用。详见
    beforeMount 在挂载开始之前被调用。详见
    mounted 挂载到实例上去之后调用。详见 注意:此处并不能确定子组件被全部挂载,如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档
    beforeUpdate 数据更新时调用,发生在虚拟 DOM 打补丁之前。详见 仅H5平台支持
    updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。详见 仅H5平台支持
    beforeDestroy 实例销毁之前调用。在这一步,实例仍然完全可用。详见
    destroyed Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。详见

    详细流程介绍: https://uniapp.dcloud.io/collocation/frame/lifecycle

    3. taro开发
    • 生命周期(全局)
      App.jsx
    // app.jsx
    // onLaunch 在微信/百度/字节跳动/支付宝小程序中这一生命周期方法对应 app 的 onLaunch
    componentWillMount() {}
    
    // onLaunch 在微信/百度/字节跳动/支付宝小程序中这一生命周期方法对应 app 的 onLaunch,在 componentWillMount 后执行
    componentDidMount () {}
    
    // 在微信小程序中这一生命周期方法对应 onShow
    componentDidShow () {}
    
    // 在微信小程序中这一生命周期方法对应 onHide
    componentDidHide () {}
    
    // 错误监听函数,在微信小程序中这一生命周期方法对应 onError
    componentDidCatchError () {}
    
    // 页面不存在监听函数,在微信小程序中这一生命周期方法对应 onPageNotFound
    componentDidNotFound () {}
    
    • 页面生命周期
    //创建对象初始化state.this的指向
    constructor () { }
    
    //页面即将加载----react一致
    componentWillMount () { }
    
    //页面加载完毕----react一致
    componentDidMount () { }
    
    //在微信小程序中这一生命周期方法对应 onShow
    componentDidShow () { }
    
    //在微信小程序中这一生命周期方法对应 onHide
    componentDidHide () { }
    
    //页面是否需要更新----react 一致
    shouldComponentUpdate () { }
    
    //页面即将更新----react一致
    componentWillUpdate () { }
    
    //页面更新完毕----react一致 
    componentDidUpdate () { }
    
    //页面卸载时触发,在微信小程序中这一生命周期方法对应 onUnload
    componentWillUnmount () { }
    
    //页面相关事件处理函数–监听用户下拉动作
    onPullDownRefresh () { }
    
    //页面上拉触底事件的处理函数
    onReachBottom () { } 
    
    //用户点击右上角转发
    onShareAppMessage () { }
    
    //页面滚动触发事件的处理函数
    onPageScroll () { } 
    
    //当前是 tab 页时,点击 tab 时触发
    onTabItemTap () { }
    
    //预加载,只在微信小程序中可用
    componentWillPreload () { }
    
    • 组件生命周期
    // 创建对象初始化state
    constructor(): 
    
    // 在渲染前调用,在客户端也在服务端
    componentWillMount() { }
    
    // 在第一次渲染后调用
    componentDidMount() { }
    
    // 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用
    componentWillReceiveProps(newProps) { }
    
    // 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 
    shouldComponentUpdate(newProps, newState) { }
    
    // 组件将要被更新,在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
    componentWillUpdate(nextProps, nextState) { }
    
    // 组件更新完毕,在组件完成更新后立即调用。在初始化时不会被调用。
    componentDidUpdate(prevProps, prevState) { }
    
    // 组件将要被卸载,在组件从 DOM 中移除之前立刻被调用。
    componentWillUnmount() { }
    
    render () { }
    

    详细流程介绍: https://zh-hans.reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class

    四、声明式导航跳转

    跳转

    // 微信小程序
    <navigator url="{{'/pages/detail/detail?proid=' + item.proid}}" >
    	<view class="" >
    		声明式导航跳转
    	</view>
    </navigator>
    
    //uni-app
    <navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
    	<button type="default">跳转到新页面</button>
    </navigator>
    
    //taro
    <View className="prolist">
    	<Navigator url={ '/pages/detail/index?value='+1 }>
    		声明式导航跳转
    	</Navigator>
    </View>
    

    获取数据:

    //微信小程序
    Page({
      onLoad: function(options) {
        this.setData({
          title: options.title
        })
      }
    })
    
    //uni-app
    onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数
            console.log(option.id); //打印出上个页面传递的参数。
            console.log(option.name); //打印出上个页面传递的参数。
    }
    
    //taro
    const { proid } = this.$router.params
    

    微信小程序详细流程介绍: https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
    uni-app详细流程介绍: https://uniapp.dcloud.io/component/navigator
    taro详细流程介绍: https://taro-docs.jd.com/taro/docs/components/navig/navigator.html

    五、编程式导航渲染

    1. 微信小程序

    跳转:

    // 微信小程序
    wx.navigateTo({
    	url: 'test?id=1'
    })
    // uni-app
    uni.navigateTo({
        url: 'test?id=1&name=uniapp'
    });
    // taro
    Taro.navigateTo({
    	url: '/pages/detail/index?proid=' + item.proid
    })
    

    获取数据:

    // 微信小程序
    Page({
      onLoad: function(option){
        console.log(option.query)
      }
    })
    // uni-app
     onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数
        console.log(option.id); //打印出上个页面传递的参数。
        console.log(option.name); //打印出上个页面传递的参数。
    }
    
    // taro
    const { proid } = this.$router.params
    

    微信小程序详细流程介绍: https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html
    uni-app详细流程介绍: https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html
    uni-app详细流程介绍: https://taro-docs.jd.com/taro/docs/apis/interface/navigation/navigateTo.html#%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81l

    六、父子传递参数

    1. 微信小程序
    2. uni-app

    – props

    // 父:
    <template>
        <view>
            <child :showModal="showModal"></child>
        </view>
    </template>
    <script>
        import child from "../../components/child.vue"
        export default {
            components: {
                child
            },
            data() {
                return {
                    showModal: " parent say"
                };
            },
          
        }
    </script>
    
    
    // 子:
    <template>
         <view class="child"> hi {{showModal}}</view> 
    </template>
    <script>
     export default {
          props: {
              showModal: {
                  type: String,
                  default: 'hello'
              }
          },
    </script>
    

    $emit(父子传递函数)

    // 父:
    <template>
    	<view>
    		<v-sub @returnDate=returnDate :backGround=backGround></v-sub>
    	</view>
    </template>
    <script>
    	import vSub from "../../../components/v-sub.vue"
    	export default {
    		components:{
    			vSub
    		},
    		data() {
    			return {
    				backGround:"#000"
    			}
    		},
    		methods: {
    			returnDate(e){
    				console.log("接收到的值==>>"+e)
    			}
    		}
    	}
    </script>
    
    // 子:
    <template>
    	<view class="content">
    		<button @tap="passValue">点击传值</button>
    	</view>
    </template>
     
    <script>
    	export default {
    		props:{ },
    		methods:{
    			passValue(){
    				this.$emit("returnDate","yoyoyo")
    			}
    		}
    	}
    </script>
    
    
    
    

    直接定义新的数据名

    // 父:
    <view>
    	<v-sub :backGround=backGround></v-sub>
    </view>
    
    // 子:
    props:{
    	backGround:{
    		type:String,
    		default:"#fff"
    	}
    }
    
    3. taro

    父:

     <Prolist prolist={ this.state.prolist }/>
    

    子:

    Index.propTypes = {
      prolist: PropTypes.array
    }
    

    七、语法

    1. 微信小程序
                 {{ 参数名 }} ---- 数据绑定
         wx:for="{{ 数据名 }}" --- 列表渲染
                 wx:for-item ----- 可以指定数组当前元素的变量名,
                wx:for-index ----- 可以指定数组当前下标的变量名:
           wx:key="{{ 值 }}" ----- 列表中项目的唯一的标识符
       wx:if="{{condition}}" ----- 条件渲染
           bindtap="tapName" ----- 点击事件
    
    2. uni-app
                 {{ 参数名 }} ---- 数据绑定
                 	  v-if="" ---- 条件渲染
                 v-bind:class -----属性绑定
    v-for="(item, index) in items" ---- 列表渲染	
    v-on:click="counter "/@click ----- 点击事件
    
    2. taro

    在taro中语法跟react一样,事件要大小写class要写成className,使用组件开头字母要大写

       <p>{str}</p>
       <div className={`box ${act}`}></div>
       <div className="box" style={{
    	   'background':'red',
    	   'transform':'rotate(45deg)'
       }}></div>
    
    展开全文
  • 微信小程序商城 微信小程序商城,奢侈品线上商城! 扫码体验 项目部分截图 -------- --------- 调用微信小程序API wx.showModal 小程序模态框 wx.setStorage wx.getStorage 数据缓存 onShareAppMessage 分享 wx....
  • 这篇文章主要介绍了微信小程序之网络请求简单封装实例详解的相关资料,需要的朋友可以参考下微信小程序之网络请求简单封装实例详解在微信小程序中实现网络请求相对于Android来说感觉简单很多,我们只需要使用其提供的...

    这篇文章主要介绍了微信小程序之网络请求简单封装实例详解的相关资料,需要的朋友可以参考下

    微信小程序之网络请求简单封装实例详解

    在微信小程序中实现网络请求相对于Android来说感觉简单很多,我们只需要使用其提供的API就可以解决网络请求问题。普通HTTPS请求(wx.request)

    上传文件(wx.uploadFile)

    下载文件(wx.downloadFile)

    WebSocket通信(wx.connectSocket)

    为了数据安全,微信小程序网络请求只支持https,当然各个参数的含义就不在细说,不熟悉的话可以;可以去阅读官方文档的网络请求api,当我们使用request时header的content-typ默认是application/json,在文档中指出method 的value必须是大写,不过经过测试,小写也能请求成功。request默认的超时时间是60s,如果我们想自定义超时时间,我们可以在app.json中加入下面代码片段,分别设置request,socket,和上传文件及下载文件的超时时间。

    "networkTimeout": {

    "request": 5000,

    "connectSocket": 5000,

    "uploadFile": 5000,

    "downloadFile": 5000

    }

    设置过超时时间,我们就开始封装网络请求,平时我们所接触的网络请求,一般会分为两类,一类是在后台运行的,没有加载对话框提示,另一种就是有提示,如提示正在加载数据,,那么我们就以此为线索来进行封装。先创建一个network的网络请求工具类,然后

    // 展示进度条的网络请求

    // url:网络请求的url

    // params:请求参数

    // message:进度条的提示信息

    // success:成功的回调函数

    // fail:失败的回调

    function requestLoading(url, params, message, success, fail) {

    console.log(params)

    wx.showLoading({

    title: message,

    })

    wx.request({

    url: url,

    data: params,

    header: {

    'content-type': 'application/x-www-form-urlencoded'

    },

    method: 'post',

    success: function (res) {

    //console.log(res.data)

    wx.hideLoading()

    if (res.statusCode == 200) {

    success(res.data)

    } else {

    fail()

    }

    },

    fail: function (res) {

    wx.hideLoading()

    fail()

    },

    complete: function (res) {

    },

    })

    }

    上面函数很好理解,参数的含义已在代码中解释,在网络请求开始前,先展示Loading对话框,提示用户当前网络正在请求数据,当网络请求成功或者失败后调用wx.hideLoading()取消提示框的展示。在api中还提供了wx.showNavigationBarLoading()用于显示当前页面的导航条加载动画,那么如果我们想展示这个动画可以在requestLoading执行开始调用wx.showNavigationBarLoading(),然后在网络请求成功或者失败后调用wx.hideNavigationBarLoading()隐藏导航栏加载动画。

    当网络请求成功并且状态码为200时,将请求到的数据回调通过success(res.data)回调给我们的方法,在上面我们没有对失败原因进行细分,当然你也可以给失败回调加个参数,用于提示用户失败的原因,如res.statusCode ==500时提示服务器内部错误,res.statusCode ==-1时提示请检查网络,res.statusCode ==404,找不到地址等等。

    然后我们在创建一个不显示对话框,用户后台请求数据的请求函数,为了少写代码,我们共用上面的函数,如下

    //不显示对话框的请求

    function request(url, params, success, fail) {

    this.requestLoading(url, params, "", success, fail)

    }

    我们看到我们最终还是调用的requestLoading,那么我们可以在该函数作下判断,如果提示信息message==''就不显示对话框。

    最终的代码

    function request(url, params, success, fail) {

    this.requestLoading(url, params, "", success, fail)

    }

    // 展示进度条的网络请求

    // url:网络请求的url

    // params:请求参数

    // message:进度条的提示信息

    // success:成功的回调函数

    // fail:失败的回调

    function requestLoading(url, params, message, success, fail) {

    console.log(params)

    wx.showNavigationBarLoading()

    if (message != "") {

    wx.showLoading({

    title: message,

    })

    }

    wx.request({

    url: url,

    data: params,

    header: {

    //'Content-Type': 'application/json'

    'content-type': 'application/x-www-form-urlencoded'

    },

    method: 'post',

    success: function (res) {

    //console.log(res.data)

    wx.hideNavigationBarLoading()

    if (message != "") {

    wx.hideLoading()

    }

    if (res.statusCode == 200) {

    success(res.data)

    } else {

    fail()

    }

    },

    fail: function (res) {

    wx.hideNavigationBarLoading()

    if (message != "") {

    wx.hideLoading()

    }

    fail()

    },

    complete: function (res) {

    },

    })

    }

    module.exports = {

    request: request,

    requestLoading: requestLoading

    }

    使用就很简单了,如下

    //路径根据自己项目路径修改

    var network = require("/utils/network.js")

    getData:function(){

    network.requestLoading(URL.MY_SCORE, that.data.params, '正在加载数据', function (res) {

    //res就是我们请求接口返回的数据

    console.log(res)

    }, function () {

    wx.showToast({

    title: '加载数据失败',

    })

    })

    }

    以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

    相关推荐:

    展开全文
  • 小程序获取用户微信头像过程中图片损坏,在使用wx.downloadFile下载图片的时候加上失败的回调,可以在失败回调里面setData一个默认的图片,当下载图片失败时用默认图片 注意 下载图片失败时,log里面可能会随机报一...
  • 微信小程序中调用wx.downloadFile api url路径总是报404,找不到, 请教大神,这个也不需要进后台查询吧 ![图片说明](https://img-ask.csdn.net/upload/201907/12/1562923437_269312.png)
  • 这篇文章主要介绍了微信小程序之网络请求简单封装实例详解的相关资料,需要的朋友可以参考下微信小程序之网络请求简单封装实例详解在微信小程序中实现网络请求相对于Android来说感觉简单很多,我们只需要使用其提供的...
  • 登录微信小程序,找到开发、开发设置获取APPID。 开发工具 下载地址 第一个微信小程序 打开开发者工具 登录需要扫码登录 新建项目 填写项目信息,复制获取的AppID,后端服务暂时选择不使用云服务。 开发工具 开发工具...
  • 这是「从 0 到 1 开发微信小程序」系列的第一篇,我是字节莫。 鉴于是光速入门指南,这里就不涉及微信小程序的运行原理等高深的东西。经过两年的发展,微信小程序的框架已经非常地完善,如果不是一些很底层的需求...
  • 微信小程序–倒放音频的实现 注:灵感来源与玩法参考:https://www.bilibili.com/video/av76976000 设计思路: 1.微信小程序端:使用微信开发者工具实现微信小程序端的展示及交互的设计: 1.1包括小程序的展示页面...
  • 我们在开发小程序之前,首先需要安装小程序开发者工具,今天就来教大家安装小程序开发者工具。 1-1,其实很简单,只需要进入小程序官网,然后点击工具,如下图所示。 当然了,也可以直接通过下面链接去下载 ...
  • 微信小程序

    2021-01-19 13:36:38
    为什么是微信小程序1.2.微信小程序历史1.3.疯狂的微信小程序1.4.还有其他的小程序 不容忽视1.5.体验1.5.1.官方微信小程序体验1.5.2. 优秀的微信第三方小程序2.环境准备2.1.注册账号2.2.获取APPID2.3.开发工具3.第一...
  • 微信小程序调用api wx.downloadFile下载图片(甄姬),有时候会出现格式.unknown的bug 针对这个问题我们可以通过自定义图片名称,并且传入filePath指定文件下载后存储的路径。 let filePath = wx.env.USER_DATA_...
  • 简介上一篇文章,主要是介绍下微信小程序的开发环境安装和微信组件什么的一些基础的开发内容,所以最近一直在业余找练手的机会。由于之前没有接触过JS,自己学习起来还算是比较的吃力,一点一点的来吧!要持久。先看...
  • 文章目录前言一、云开发环境配置二、云数据库云数据库的使用方法(js):1.增2.删3.改4.查1.通过 .doc2.通过 .where三、云存储1.上传2.下载3.删除四、云函数1....微信小程序提供的云开发主要是云数据库、云存储和.
  • Fundebug专注于JavaScript、微信小程序、微信小游戏,Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务,众多大佬公司都在使用。 1、申请小程序 我们假设你是从零开始开发第一个微信小程序,那么首先...
  • 开发前必读简要 基于大量无效开发,无法上线的案例,所以开发前部分知识十分重要;| 链接 微信小程序个人注册简单步骤 ... 微信开发者工具【项目】详解 ...为了方便大家了解并入门微信小程序,我将一些可能会需
  • 微信小程序无法播放本地音频在微信小程序中,可以通过 audio 组件播放网络音频资源。现在想将音频先下载到本地,之后不用每次都下载,提高用户体验。使用 wx.downloadFile 接口将音频文件下载后,无法通过 audio ...
  • 一、微信小程序注册申请 作为开发者可以用测试版。也可以申请测试号。https://developers.weixin.qq.com/miniprogram/dev/devtools/sandbox.html 注意:测试版不要发布,频繁发布,会被惩罚。 小程序的入口方式:1...
  • 开发微信小程序的时候,经常要遇到如上图这样的,保存小程序二维码图片的分享功能。 网上找了很多都没有具体的写法,于是自己看官方文档写了一个,分享一下。 首先,需要在 wxml 中 创建一个 画板 canvas 。 wxml...
  • 微信小程序入门

    2020-07-22 17:34:30
    了解微信小程序 掌握微信小程序开发工具的使用 了解小程序的目录以及文件结构 掌握小程序中常用的组件 掌握WXML、WXSS、WXS的基本使用 微信小程序1、微信小程序介绍以及开发准备1.1、了解微信小程序1.2、小程序开发...
  • 微信小程序开发

    千人学习 2019-04-25 20:09:19
    本课程主要介绍如何开发微信小程序,是一门比较基础入门的微信小程序开发课程,本套课程涵盖了大部分的基础内容,使学员们可以尽快的掌握小程序的开发技巧 本套课程大部分可分为如下几个层面 一:小程序的开发工具...
  • 微信小程序进行网络通信,只能和指定的域名进行通信,微信小程序包括四种类型的网络请求。 普通HTTPS请求(wx.request) 上传文件(wx.uploadFile) 下载文件(wx.downloadFile) WebSocket通信(wx.connectSocket) ...
  • 初识微信小程序

    2019-02-21 15:47:05
    初识微信小程序微信小程序:3.创建小程序 注册小程序账户 小程序工具功能介绍 以及小程序的目录结构分析4.小程序MINA框架介绍 wxml wxss pages逻辑层js 介绍 绑定数据、绑定属性、条件判断、循环渲染数据MINA框架...
  • 本篇文章给大家带来的内容是关于微信小程序中json配置的配置方法介绍(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。json配置可以分为:1、app.json2、page.json一、app.jsonapp.json...
  • 配置好request合法域名和downloadFile合法域名,可以在微信开发工具中:详情->域名信息中查看是否已经配置,若没有配置请登录微信公众号进行配置 url中的前面那部分是域名(https://example.weixin.com) ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,897
精华内容 1,158
关键字:

微信小程序downloadfile

微信小程序 订阅