微信小程序超出代码大小限制，使用云开发调用文件+js动态调取（实例）

微信小程序代码上传大小有限制（可能是因为个人），但是提供了方便的云开发，有云数据库、数据存放、云函数，等功能。基础版还是免费的！

我在页面中需要调用13张图片，但是上传、预感、真机调试时都以“代码大小超出2048kb”，阻止我进行下一步。后来官方文档中有云开发的介绍…就把图片简单的上传然后src改为fileID就可以了。
首先在app.js中Onlaunch添加如下：

 wx.cloud.init({
      traceUser: true,
      })

允许使用云文件。

wxml代码：

<!--页面根标签-->
<view class="content">
	<!--pics文件夹下的background.jpg文件-->
	<image class='background' wx:if="{{iShow}}" src="cloud://iksl.696b-iksl-1304224674/picture/tushuguan/{{url}}.jpg" data-msg="{{url}}" mode="aspectFill"></image>
	<!--页面其它部分-->
<view class="btn1">
  <view class="btn">
    <button class="go1" bindtap="Goout">上一步</button>
  </view>
  <view class="btn">
    <button class="go2" bindtap="Goin">您已到达该位置</button>
  </view>
</view>
</view>

wxss代码：

/* pages/tushuguan/tushuguan.wxss */
page{
  height:100%;
}
.background {
  width: 100%;
  height: 100%;
  position:fixed; 
  background-size:100% 100%;
  z-index: -1;
}

.btn1{
  /* left: 1000px; */
  bottom: 0;
  }


.go1{
  position:fixed; 
  bottom:0;
  left: 0;
  background-color: 	#CEA070 ;
  color: white;
  font-size: 30rpx ;
  width: 50%;
  height: 10%;
}
 .go2{
    position:fixed; 
    bottom:0;
    right: 0;
    background-color: 	#CEA070 ;
    color: white;
    font-size: 30rpx ;
    width: 50%;
    height: 10%;
 }

js代码：

// pages/tushuguan/tushuguan.js
var i = 1;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isShow:false,
    url:1,
    iShow:true,
    // i : 1
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  // goin:function(){
  //   var i = 1;
  //   i = 
  // }
 
  Goin:function(res){
    
    console.log(res);
    let url

    // var i = url;
    i = i+1;
    // url=url+1;
    if(i>13){
      wx.navigateTo({
        url: '../books/books',
      })
    }
    // url = i.toString()
    
    
    this.setData({
    url:i
    
    })
    
    },
    Goout:function(res){
    
      console.log(res);
      let url
      // var i = url;
      i = i-1;
      if(i<1){
        wx.navigateTo({
          url: '../haiyangkejixue/haiyangkejixue',
        })
      }
      // url=url+1;
      url = i.toString()
      this.setData({
      url:i
      })
      
      },


})

注释没去，json里就一个设置window颜色的。
over！