小程序的一些總結

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