评论

平时开发一些小代码段,希望对新手有一些帮助。有问题也请大家指导一下

平时开发一些小代码段,希望对新手有一些帮助。有问题也请大家指导一下

小程序开发一段时间了,从小白慢慢走到熟练使用。从当初看文档查资料,一步步走来。总结了一些小代码段,希望对新手有一些帮助,如果有问题也可以一起讨论。

1.小程序API API Promise化

这点感谢老张,的确现在API接口原生支持Promise化

这个作为第一点,我是觉得特别的重要的。如果不了解promise,请自行百度一下,认真地了解与理解。这个对以后开发小程序非常地重要。特别是当使用

wx.login wx.getUserInfo 同时调用,或是关联获取相同信息内容时。如果没有使用promise化API接口,很容易在回调在迷失了。

像以下代码,要success连续有其它操作,整段代码非常不易于阅读

getuserinfo:function (){
 //登陆
 wx.login({
  success:function (res){
   let code = res.code;
   //获取使用信息
   wx.getUserInfo({
    withCredentials:true,
    lang:'zh_CN',
    success:function(res){
     //与后端接口通讯
     wx.request({
      url : '',
      data : ,
      header : ''
      method : 'GET',
      dataType : 'json',
      responseType : 'text',
      success:function(res){
       //通讯成功返回操作
      }
     })
    }
   })
  }
 });
}


如果API使用promise化为,代码如下,整体比较易于阅读。需要阅读的习惯就是JS代码一行行执行下去

getuserinfo:async function (){
 try {
  //登陆
   let login = await wx.login();//code
  if(login.code){
   //获取用户数据
    let userinfo = await wx.getUserInfo({
     withCredentials : true,
     lang : 'zh_CN'
    });
    //与后端通讯
    let res = await wx.request({
     url : '',
     data : {code : login.code, userinfo : userinfo},
     header : ''
     method : 'GET',
     dataType : 'json',
     responseType : 'text'
    });
    if(res.errCode){
     console.log(res)
    }else{
     console.log()
    }
  }
 }catch (e) {
  //出错
  console.log(e);
 }
}


2.页面公共方法

在开发过程可能会大量使用到一些方法 如跳转,页面重新加载(刷新)。。。这些比较多的api,我一般都把些方法写一个通用接口中

wx.navigateTo

module.exprots = { page_init : page_init }
function page_init(page){
  tap_nav(page);
}
//page为当前页面 this
function tap_nav(page){
  //获取当前页面栈,用于判断是否已经到达数量
  let history = getCurrentPages();
  page.tap_nav = function (e){
   //获取链接地址
   let url = e.currentTarget.dataset.url;
   //判断当前页面栈是否大于或等于9,这里不可以是10
   if(history.length >= 9){
   //如果是大于或等于9,则现在替换页面记录跳转
    wx.redirectTo({
     url : url
    })
  }else{
  //正常现在跳转链接
   wx.navigateTo({
    url: url
   })
  }
 }
}

js调用
const page_tools = require('');
Page({
  onLoad : function(){
    let that = this;
    page_tools.page_init(thst);
  }
})

wxml如下
跳转
使用其它元素也可以 button image
最后一次编辑于  06-27  
点赞 1
收藏
评论

3 个评论

  • kiki~
    kiki~
    08-19

    你好楼主 根据第一个方法 在高版本里可以 但低版本的基础库里失败 你直接提示提高微信版本还是再适配一个?

    08-19
    赞同
    回复
  • 🇨🇳紫升
    🇨🇳紫升
    06-29

    3.小程序全局数据

    在小程序的,有时会有一些全局共用数据。比如用户信息或是其它一些配置信息。

    一般都是使用app.globalData 或是 缓存,设置一下过期时间,达到过期时间后,再重新获取一下数据。但缓存有时会出现一些小问题,建议使用app.globalData。

    App({
      globalData: {
        userInfo: null,
        config : null
      },
      onLaunch: function () {
    
      },
      page_load : async function (page){
        let that = this;
        let result = [];
        try {
          result['config'] = await that.load_config(page);
          return result;
        }catch (e) {
         console.log(e);
         return false;
        }
      },
      load_config : async function (page){
        let that = this;
        //当前时间戳
        let time = new Date().getTime();
        try {
          //读取数据
          let config = that.globalData.config || false;
          //如果数据存在,且过期时间大于当前时间
          if(config && config.exit_time >= time){
            //把数据setData到页面
           page.setData({
             config : config
           })
            //返回获取到的数据
            return config;
          }else{
            //数据不存在或是过期时间小于当前时间,重新通过接口获取数据
           let res = await wx.request({
            url : '',
            data : {},
            header : '',
            method : 'GET',
            dataType : 'json',
            responseType : 'text'
           });
           config = res.data.config;
           //配置过期时间
           config['exit_time'] = time + 7200 * 1000;
            //把数据setData到页面
           page.setData({
             config : config
           })
            //数据写入到globalData
            that.globalData.config = config;
            //返回获取到的数据
           return config;
          }
        }catch (e) {
         console.log(e);
         return false;
        }
      },
    })
    


    页面调用

    const app = getApp();
    
    Page({
      //页面的初始数据
      data: {},
      //*生命周期函数--监听页面加载
      onLoad:async function (options) {
      let that = this;
      try{
       let page_load = await app.page_load(that);
       console.log(page_load);
        }catch (e){
       console.log(e);
       return false;
        }
      }
    })
    
    06-29
    赞同
    回复
  • 老张
    老张
    06-27

    1、大部分原生的wx.xxx函数已经原生支持promise了,可直接用了。比如let res = await wx.showModal()

    2、wx.navigateTo这么用,显然是用力过猛了。

    06-27
    赞同
    回复 3
    • ttyp
      ttyp
      06-27
      前端现在也直接支持async/await了吗?不是要调用一些库吧
      06-27
      回复
    • 老张
      老张
      06-27回复ttyp
      不要勾选es6转es5.
      06-27
      回复
    • 🇨🇳紫升
      🇨🇳紫升
      06-27
      是用力猛点,主要是为是省心
      06-27
      回复
登录 后发表内容