小程序常见问题和方法

1.本地储存和取值

//储存值
saveData: function (e){
	let value = e.detail.value;
	wx.setStorageSync('wechat', value)
}
//在需要的页面取值
let quzhi = wx.getStorageSync('wechat');
this.setData({
	quzhi: quzhi 
})

2.在wxml中使用js中的方法

//第一步 创建xxx.wxs文件
//第二步 在文件内封装需要使用的方法函数 例如
var turnMin = function (s) { //秒数转分钟
  s = Number(s);
  if (isNaN(s)) {
    return 0;
  }
  var min = (s/60).toFixed(2);
  return min;
}
//第三步 在文件末尾暴露需要的方法
module.exports = {
	 //fixed: fixed,
	 turnMin: turnMin
};
//第四步 在wxml中顶部外层引入xxx.wxs文件 
<wxs src="../../utils/wxs/xxx.wxs" module="cont（自定义模块名称）" />
<view>{{cont.turnMin(60)}}</view>

3.不开调试draw绘制canvas在手机上不显示问题

1.查看里面需要绘制的图片路径是否和小程序配置的安全域名一致（前缀是否为https）
2.去除页面的wx:if 或者hidden属性

4.弹出弹窗后下面内容依然可以滑动解决

外层容器使用 catchtouchmove="true"

5.动态修改页面标题

wx.setNavigationBarTitle({
 title: '页面标题'
})

6.返回当前的上一级页面（一般用在保存/提交成功的回调中）

var pages = getCurrentPages();
var prePage = pages[pages.length - 1];
prePage.onLoad();
setTimeout(function () {
  wx.navigateBack({ delta: 1 });
}, 500);

7.滑动页面到指定位置时，固定指定元素在顶部

//1.data中定义
   scrollTop: null //滚动条位置
//2.页面监听滚动事件
   onPageScroll: function (e) { 
	    this.setData({
	      scrollTop: e.scrollTop
	    })
   }
//3.设置样式
  .topnavFixed{
     position:fixed;width:100%;height:100rpx; top:0rpx;background:white;z-index: 1;
  }
  .topnavAbsolute{
     position:absolute;width:100%;height:100rpx; top:340rpx;background:white;z-index: 1;
  }
//4.在滚动到一定位置需要固定的元素盒子上加
  <!-- 切换菜单导航 --> 
  <view class="ct-navbar {{scrollTop>170?'topnavFixed':'topnavAbsolute'}}"></view>
  <!-- 菜单内容 -->
  <view>内容</view>

8.获取上级页面的数据

//获取上级页面数据
superior: function(){
	  var self = this;
	  var pages = getCurrentPages();
	  var prePage = pages[pages.length - 2];
	  self.setData({
	    superiorList: prePage.data.promotionList //promotionList上个页面定义的数据
	  })
}

9.三条数据的三目运算

state == 1 ? 'xxx' : (state == 2 ? 'xxx' : 'xxxx' )

10.输入中文字符和英文字符换行问题

 //给设置打点的容器加上
 word-break: keep-all;
 word-wrap: break-word;

11.页面可以左右拉动问题

1.给最外层盒子设置overflow-x: hidden; 即可解决
2.当给页面的每个容器设置了定位属性的话，光设置overflow-x: hidden;不能生效
  解决方法，给最外层盒子加上position:relative;属性即可

12.终止下拉刷新

wx.stopPullDownRefresh();

13.下拉刷新状态控制

1.调接口前加上 wx.showNavigationBarLoading(); //显示loading
2.调接口后 
  wx.hideNavigationBarLoading(); //隐藏loading
  wx.stopPullDownRefresh(); //停止下拉刷新

14.超过4位数字转为1w，type=1(保留一位小数)type=2(保留二位小数)type为空(不保留小数，展示为w+)

var numStr = function (num,type) {
  num = Number(num);
  if (isNaN(num)) {
    return 0;
  }
  var w = num / 10000;
  switch(type){
    case 1:
      w = w.toFixed(1)
      break;
    case 2:
      w = w.toFixed(2)
      break;
  }
  if (w > 99) {
    w = 99;
  }
  if (w >= 1) {
    w = Math.floor(w);
    var text = !type ? 'w+' : 'w';
    return w + text;
  }
  return num;
}

15.秒转分钟

var turnMin = function (s) {
  s = Number(s);
  if (isNaN(s)) {
    return 0;
  }
  var min = (s/60).toFixed(2);
  return min;
}

**16.保留2位小数，如：2，会在2后面补上00.即2.00 **

var fixed = function toDecimal2(x) {
  var f = parseFloat(x);
  if (isNaN(f)) {
    return '0.00' ;
  }
  var f = Math.round(x * 100) / 100;
  var s = f.toString();
  var rs = s.indexOf('.');
  if (rs < 0) {
    rs = s.length;
    s += '.';
  }
  while (s.length <= rs + 2) {
    s += '0';
  }
  return s;
}  

17.文字绘制方法

//文字绘制方法
function fillTextFn(ctx, str, fontSize, fontColor, startX, startY, maxWidth, twoLine) {
  let maxLength = Math.floor(maxWidth / fontSize);
  ctx.setTextBaseline('top');
  ctx.setFontSize(fontSize);
  ctx.setTextAlign('left');
  ctx.setFillStyle(fontColor);
  if (str.length <= maxLength) {
    ctx.fillText(str, startX, startY, maxWidth);
  } else {
    if (!!twoLine){
      ctx.fillText(str.substring(0, maxLength-2), startX, startY, maxWidth);
      if (str.length > (maxLength - 2) * 2){
        ctx.fillText(str.substring(maxLength - 2, (maxLength - 2) * 2) + '...', startX, startY + fontSize + 10, maxWidth);
      } else {
        ctx.fillText(str.substring(maxLength - 2, (maxLength - 2) * 2) , startX, startY + fontSize + 10, maxWidth);
      }
      
    } else {
      ctx.fillText(str.substring(0, maxLength - 3) + '...', startX, startY, maxWidth);
    }
    
  }
}