微信小程序超出代码大小限制，使用云开发调用文件+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！

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

微信小程序：修复采集接口版云开发表情包
大家好,相信很多人对这个界面的表情包小程序肯定不陌生吧不错之前该款小程序是属于独立后端的,不管今天所发的这款是云开发的哟运营着这个表情包的用户应该发现了,最近很多表情包图片都失效了所以呢,今天小 ...
微信小程序-普通项目如何设置为云开发项目
最近写了一个简单的小程序,由于之前不知道小程序有云开发的功能,自己也不了解服务器开发,很多数据都是保存在了小程序本地,显然数据传到服务器是最合适的. 接触了云开发之后,发现这些问题都可以解决,但是之前 ...
通过调试微信小程序示例代码解析flex布局参数功能(一)
通过调试微信小程序示例代码解析flex布局参数功能官方示例小程序源代码下载地址:https://github.com/wechat-miniprogram/miniprogram-demo 通过调试 ...
微信开发上传视频到服务器,微信小程序中实现上传视频的开发代码
微信小程序中实现上传视频的开发代码,视频,接口,上传,代码,服务器微信小程序中实现上传视频的开发代码易采站长站,站长之家为您整理了微信小程序中实现上传视频的开发代码的相关内容. 本篇文章给大家带来 ...
写一个微信小程序的代码
微信小程序是使用小程序框架开发的,主要使用 WXML 和 WXSS 两种语言构建用户界面,使用 JavaScript 来编写逻辑. 以下是一个简单的微信小程序示例代码: <!-- index.w ...
php微信上传视频文件在哪里,微信小程序中实现上传视频的开发代码
本篇文章给大家带来的内容是关于微信小程序中实现上传视频的开发代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 其实这个比较简单,官方提供了API接口,基本上直接调用就可以了,话不多 ...
微信小程序实现代码高亮
预览老规矩,先上效果图. 看起来效果还不错,实名感谢日出一点一这位小哥的教程. 因为,当搜索微信小程序实现代码高亮后,结果基本都是微信小程序搜索,关键词高亮这一类的.Onz ,这可真是在 ...
微信小程序超出省略号
微信小程序超出省略号这个可以,分为多行超出和单行超出. 微信小程序超出省略号
微信小程序视频播放代码
微信小程序视频播放代码 1.index.wxml 2.index.wxss 3.index.js 4.小程序具体属性说明用法详见微信小程序官方文档video部分

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

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

最新文章

热门文章