微信小程序优化注意点(用户体验,数据逻辑优化)

1.对于列表请求数据,使用二维数组,以分页的页码做一维下标,以条数做二维下标,每次setData只setData当前页的数据,其他页的数据不用。因为每次setData的数据量大小有限制,官网也有说明可以参考

2.对于列表中删除某一项,会存在状态不对的情况。例如:左滑删除,一页数据有10条,左滑删除第5条,此时第6条变为第5条,此时的第5条应该不是出于左滑状态,但是显示的是左滑状态,应该给每条for循环的添加一个key即可。(点击参考传送门

3.对于表单提交:

3.1对于input填写,然后提交信息的页面,建议使用form表单的方式;

3.2有些使用setData,然后提交时再把值取出来,放入接口提交。这种方式可能存在一些问题,例如在input框右侧加一个晴空按钮,input框有填充时展示清空按钮,input为空时不展示,如果通过setData的方式,会频繁setData,会出错。此时比较好的思路是,在搜索时把input里的值赋值给value,其他状态不赋值,清空的时候把value清空即可。

clear: function () {
    this.setData({
      search_list: '',
      show_clear: false,
      lpname: '',
      'no_result': false,
    });
  },
  get_search(event) {
    var that = this;
    var search = event.detail.value ? event.detail.value : '';
    that.setData({
      lpname: search
    });
    var param = {
      city: 'bj',
      search: search
    }
    if (search.trim() == '') {
      that.setData({
        search_list: '',
        show_clear: false,
        no_result: false,
      })
    } else {
	// 向接口发送数据请求
	}
})

4.对于tab切换的数据请求,每个tab下对应不同的数据,点击tab切换,则请求不同的数据。点击A请求A相关的数据,再点击B展示B相关的数据,这个没问题,需要重新请求。但是如果点击A,展示A的数据,再点击A就不应该请求接口,此时需要做一个限制。

click_tab(event) {
    var that = this;
    var index = event.currentTarget.dataset.index;
    if(that.data.cur_index == index){
      return false
    }
	// 如果不是连续两次点击同一个tab则往下走
}

5.对于一个页面的渲染应该有这么几个过程

(1)进入的初始状态到数据返回之前;(2)数据返回后,有数据;(3)数据返回后,无数据;(4)对于列表,还有请求中;(5)对于列表,还有加载完毕,到底了。

对于以上的状态都需要做一个处理:

5.1 如果接口比较慢(或者类似于详情这种,数据量比较大的页面),开始请求到请求结束时间比较长,用户不知道你在干嘛(是挂了,还是在请求),此时可以在页面放一个动态奔跑的小人gif图,并写一句“玩命加载中”,用户能感受到你的诚意,会等待加载结束;

5.2 做一个缺省页,让变用户知晓;

5.3 有数据正常展示即可;

5.4 对于列表加载中,可以在底部放一个动态的点点;

5.5 列表加载完毕,可以 放一行文字  “ 到底了 ” ,方便用户知道没有下一页了(不然死命的翻页,就是没有下一页)。

6.对于用户信息的缓存存取问题:

在某些情况下,需要将用户的存取的缓存名字变掉,如果每个地方都写死缓存的键名,改起来也会非常麻烦,所以建议在util.js中封装一个公共方法,通过公共方法来存取用户信息比较稳妥:

/**设置用户缓存信息**/
function set_user_infor(res) {
  var old_name = 'user_infor';
  var new_name = wx.getStorageSync(old_name);
  /**改变登录状态**/
  new_name.islogin = 1;
  /**储存用户名和手机号**/
  new_name.name = res.data.name ? res.data.name : "";
  new_name.phone = res.data.phone ? res.data.phone : "";
  new_name.uid = res.data.uid ? res.data.uid : "";
  wx.setStorageSync(old_name, new_name);
}
/**获取用户信息**/
function get_user_infor(name) {
  var old_name = 'user_infor';
  var myinfor = wx.getStorageSync(old_name);
  return myinfor[name];
}

7.对于页面有城市切换的情况:

当前页面有城市切换按钮跳转到一个城市选择页面,选择城市后,又back回该页面,此时该页面数据需要刷新,但是从非城市页面back会来是不需要刷新数据的。此时可以把城市存在全局变量中,在当前页的onload生命周期函数中对城市setData,同时取当前页的数据,并且在onshow生命周期中,取全局城市和this.data.city的值进行比较,如果不一致则重新拉取数据,并且把全局城市setData给当前页即可。

8.对于页面定位当前城市的情况:

先使用wx.getLocation获取经纬度,通过接口解析此经纬度对应的城市信息,使用wx.showModal提醒用户是否切换城市,如果切换则刷新页面信息,如果不切换则不用刷新即可。

/**城市定位**/
  city_locate: function () {
    var that = this;
    //获取定位
    wx.getLocation({
      type: 'wgs84',
      success: function (res) {
        //获取当前城市:ajax请求通过接口,传入经纬度获取城市
        common.getData(common.config.get_city_http, {
          latitude: res.latitude,
          longitude: res.longitude
        }, "get", function (res1) {
          if (res1.code == '') {} else {
            var code = app.globalData.city.code
            console.log("上次登录城市为:" + code)
            if (res1.code != code) {
			  //  提醒用户是否需要切换城市,如果切换,则刷新数据,否则不用
              wx.showModal({
                title: '您定位的城市为: ' + res1.cname,
                content: "是否切换",
                confirmText: "切换",
                cancelText: "取消",
                success: function (res2) {
                  if (res2.confirm) {
                    that.set_Data(res1, app);
                    if (res1.code != that.data.city.code) {
                      that.setData({
                        city: res1,
                      })
                      // 请求当前页数据,刷新页面
                    }
                  }
                }
              })
            }
          }
        })
      }
    })
  }
  
  // 改变缓存和全局城市信息
  set_Data(res1, app) {
  wx.setStorageSync('newcity', {
    code: res1.code,
    cname: res1.cname
  });
  app.globalData.city = {
    code: res1.code,
    cname: res1.cname
  };
}
	

9.对于需要登录的页面(须要检测检查登录态是否过期  登录信息一般存在缓存中)

9.1首先(wx.checkSession)检测检查登录态是否过期,如果过期则需要重新走登录流程。如果未过期,则取缓存信息,缓存信息存在则取缓存信息处理。如果缓存信息不存在,则重新走登录流程。

9.2再通过wx.login获取code,通过接口解析获取用户信息,储存在缓存中即可。

/**真实登录,调用微信登录方法**/
function login_true(callback) {
  wx.login({
    success: function (res) {
      if (res.code) {
        var param = {
          code: res.code
        };
        // return false;
        ajax_curl(config.login_api_http, param, function (result) {
          var user_info = result;
          wx.setStorageSync('user_info_new', user_info);
          typeof callback == "function" && callback(user_info);
        });
      } else {
        console.log('login获取code失败!', res)
      }
    },
    fail: function (res) {
      console.log('login执行失败!', res)
    }
  });
}
/**  页面中使用的登录方法:缓存信息需要检测 检查登录态是否过期   callback:回调函数;**/
function login(callback) {
  /**检查session是否失效**/
  wx.checkSession({
    success: function () {
      var user_info = wx.getStorageSync('user_info_new');
      if (user_info) {
        typeof callback == "function" && callback(user_info);
      } else {
        login_true(callback)
      }
    },
    fail: function () {
      login_true(callback) //重新登录
    }
  })
}

10.小程序的跳转,大概分为4种

内部路径(细分两种:navigateTo和switchTab),H5跳转,外部小程序跳转(又有细分:有指定路径跳转,无路径跳转(无路径默认跳转到首页))

/**
   * 1.跳转类型:(1)当前小程序、(2)外部小程序、(3)H5、(4)wx.switchTab
   * 2.link 地址;
   * 3.appid 外部小程序
   * 4.switchTab类型
   * **/
  go_diff_type(type, link, appid) {
    if (type == 1 && link) {
      wx.navigateTo({
        url: link
      });
    }
    if (type == 2 && appid) {
      if (link) {
        wx.navigateToMiniProgram({
          appId: appid,
          path: link
        })
      } else {
        wx.navigateToMiniProgram({
          appId: appid
        });
      }
    }
    if (type == 3 && link) {
      wx.navigateTo({
        url: '/page/index/webview?url=' + encodeURIComponent(link),
      })
    }
	if (type == 4 && link) {
      wx.switchTab({
        url: link,
      })
    }
  },

11.对于保存海报的功能

11.1详情参考,点击传送门

11.2对于多张图片的处理

11.3注意点(相册权限的授权获取,海报的绘制,保存为本地图片,网络图片转为本地图片的问题,上边都有详细说明):

(1)授权必须为button;

(2)canvas隐藏在页面中(不能直接display:none,需要设置opacity:0,同时移出页面可视范围);

(3)使用的图片不能是网络地址,需要转为本地路径,还可能涉及多张网络图片的问题;

(4)授权相册的问题,如果授权直接唤起保存方法api就行了;如果不同意授权,就需要重新唤起手机的授权页面让用户打开。

猜你喜欢

转载自blog.csdn.net/hangGe0111/article/details/107079616