小程序开发中常用的方法(wepy)

简介: 1.缓存的读取 //添加Storage await wepy.setStorageSync('userInfo', ret.data.

1.缓存的读取

       //添加Storage
      await wepy.setStorageSync('userInfo', ret.data.data);
      //获取Storage
      let userInfo = await wepy.getStorageSync('userInfo');

2.滚动区域页面的高度通过wx.getSystemInfo 方法获取

      //
      <scroll-view scroll-y style="height:{{height}}px;"></scroll>
      
      async onLoad() {
    let self = this;
    wx.getSystemInfo({
        success: function(res) {
            console.log(res)
         //res.windowHeight为获取到的屏幕高度
            self.height = (res.windowHeight - 50);
            self.$apply()
        }
    });
    };

3.页面的跳转与返回

      //普通跳转
     wx.navigateTo({
                url: url
            })
      //跳转选项卡的页面
      wx.switchTab({
            url: url
     })
      //返回页面
      wx.navigateBack({
                changed: true
      })

4拨打电话

      //
      wx.makePhoneCall({
        phoneNumber:"12580"
    })

5 判断苹果还是安卓手机

    wx.getSystemInfo({
    success: function(res) {
      //苹果手机
    if (res.platform == "ios") {
        that.screenScroll = true
    }
       //安卓手机
    if (res.platform == "android") {
        that.screenScroll = false
    }
}

})

6.小程序返回页面同时刷新页面
(有些时候当我们从A页面跳转到B页面,在b页面更新了缓存中的数据,返回到a页面,a额面没有同步更新数据,可以尝试一下这种方法。)

          //B页面获取页面栈
            let pages = getCurrentPages();
            if (pages.length > 1) {
                //上一个页面实例对象
                let prePage = pages[pages.length - 2];
                //关键在这里,changeData方法是a页面中方法调用,可以传入你想要的数据
                prePage.changeData(historyArr) 
            }
              //返回A页面
            wx.navigateBack({
                changed: true
            })

          //A页面方法调用
            changeData(historyArr) {
                this.addingMore = true
          }

7.小程序的下拉刷新

   config = {
        //首先在config中配置enablePullDownRefresh参数
        enablePullDownRefresh: true
   }
  async onPullDownRefresh() {
        //在onPullDownRefresh函数中设置你下拉之后调用的请求
        await this.getBuildings()
  }

      //也可以在函数中手动的调用下拉刷新事件
        let ret = await api.getBuildings(where);
        if (ret.data.code === 0) {
            wx.stopPullDownRefresh()
            this.$apply()
        } 

8.图片上传

async doUpload(field) {
            let self = this;
                          //首先获取用户token
            let token = await wepy.getStorageSync('token');
                          //调用微信api
            wx.chooseImage({
                count: 1, // 默认9
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
                success: async(ret) => {
                    var tempFilePaths = ret.tempFilePaths;
                    wx.uploadFile({
                      //图片上传的路径
                        url: `https://api.*****.com/v1/file/upload-image?access-token=${token}`,
                        filePath: tempFilePaths[0],
                        name: 'file',
                        header: {
                            "Content-Type": "multipart/form-data;application/json",
                        },
                        success: async(res) => {
                            var data = JSON.parse(res.data);
                            if (data.code === 500) {} else {
                                //成功以后的回调 data.data.url就是图片的路径                   
                                self.$apply()
                            }
                        },
                        fail(e) {
                            console.error(e)
                        }
                    })
                }
            })
相关文章
|
4月前
|
人工智能 小程序 前端开发
一个小程序轻量AR体感游戏,开发实现解决方案
针对青少年运动兴趣不足问题,AR体感游戏凭借沉浸式互动体验脱颖而出。结合小程序“AI运动识别”插件与WebGL渲染技术,可实现无需外设的轻量化AR健身游戏,如跳糕、切水果等,兼具趣味性与锻炼效果,适用于儿童健身及职工团建,即开即玩,低门槛高参与。
|
4月前
|
移动开发 小程序 前端开发
小程序开发平台有哪些?哪个好
小程序的开发方式丰富多元,开发团队可根据自身的技术背景、项目具体需求以及资源状况,灵活挑选最为适宜的开发路径。以下将详细介绍几种主流的小程序开发方式。
513 1
|
4月前
|
运维 小程序 数据可视化
小程序开发平台有哪些?SaaS小程序制作平台哪个好
小程序开发模式详解:自主开发、SaaS小程序制作平台与外包全对比 选择合适的小程序开发模式,是项目成功的基石。这三种模式在成本、周期、控制力和灵活性上各有千秋,适用于不同阶段和不同类型的企业。下面我们将逐一深入剖析。
397 7
|
4月前
|
移动开发 小程序 前端开发
小程序快速开发平台有哪些?
小程序开发并非“一刀切”,需结合技术储备、资金预算、时间规划及功能需求等多维度因素综合考量。以下为您详细拆解五种主流开发方案及其适用场景,助您精准匹配开发路径。
320 3
|
4月前
|
移动开发 小程序 前端开发
小程序开发平台有哪些?小程序开发制作软件推荐
小程序开发方案全解析:5种主流方式与选择指南 小程序开发需根据技术能力、预算、时间及功能需求综合决策。以下为5种主流开发方案及适用场景分析:
25932 0
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
612 0
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
333 0
在线课堂+工具组件小程序uniapp移动端源码
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
400 1
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目