小程序的一些总结

1. 真机测试时手机必须开调试模式才能对接上后端数据接口
   出现原因：小程序平台上配置的域名和代码中域名不完全一致
   如下图
   
   
   之前调用时未加www
   2.根据后台数据获取进度条的长度，并展示
   因为有重复操作，所以写一个公共方法，多次调用
   在app.js中加入该公共方法（）

var what = [];
App({
// 全局变量，为了方便在任意页面获取该值
  globalData: {
    // 进度条长度
    pro: '',
  },
  // 公共方法
  scorepro: function (score) {
  	// score为调用时所传参数，根据需求可传多个参数
    // console.log(score)
    var that = this;
    what.push((score / 1)*100) ;
    that.globalData.pro = what;
  }
})

调用页面的js

// 在page上面调用一下app.js
var app = getApp();
// 调用
app.scorepro(bindSource.a_score);
app.scorepro(bindSource.b_score);
app.scorepro(bindSource.c_score);
// 放入data中,相应的名字需要在data中提前定义
self.setData({
          apro: parseInt(app.globalData.pro[0]),
          bpro: parseInt(app.globalData.pro[1]),
        })
        

对应的wxml
先解释一下进度条的一些属性
percent 为已完成的进度条长度 ；
activeColor 为已完成的进度条的颜色；
backgroundColo 为未完成的颜色
stroke-width 进度条宽，默认6
show-info 展示百分数（默认不展示）
active 动态

/*  percent、activeColor分别为已完成的进度条长度 和颜色；   backgroundColo为未完成的颜色
stroke-width 进度条宽度
*/
<progress class="progress" percent="{{apro}}" backgroundColor="#CFCBF8" activeColor="#02109B" stroke-width="12px" show-info active></progress>
<progress class="progress" percent="{{bpro}}" backgroundColor="#CFCBF8" activeColor="#02109B" stroke-width="12px" show-info active></progress>

效果如图

3. 将后端传入的数组转化为对象
数据结构如图

//jjcircle为上图结构，需要将其中img_url转变为对象才可以用wx:for,坑
jjcircle.forEach(function (item, index) {
            //这里的item就是从数组里拿出来的每一个数组
            item['img_url'].forEach(function (item1, index1) {
              var obj = {
                'filesrc': item1,
              }
              that.data.filesrcarr.push(obj);
              // item[index].push(obj);
            });
            item.img_url = that.data.filesrcarr;
            that.data.filesrcarr = [];
          })

转换后的结构，可以使用wx:for