在写微信小程序的过程中，ui设计了一个渐变的背景图，网上一搜很多都只写了怎么样让微信渐变色，但是我的需求就是渐变色而且控制渐变色范围，比如三个颜色一个头部是深蓝，中间浅蓝，最底下是白色，那么直接套用网上的列子（第一段代码），三个色渐变范围是一样的不是很好，我希望的效果是深蓝色占一小部分，浅蓝色占一半，其余的都是白色那么怎么写呢，我们需要给每个颜色占比设置大小，代码如（第二段代码）文章来源地址https://www.toymoban.com/news/detail-798819.html
（1）代码段一渐变色（写在app.wxss文件中）
page {
font-family: Monospaced Number, Chinese Quote, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif !important;
background: -webkit-linear-gradient(top, #1f70c9, #02b0ea, #f2f2f2);
background-repeat: no-repeat;
} （2）代码段二 （重点在颜色后面的百分比）
page {
font-family: Monospaced Number, Chinese Quote, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif !important;
background: -webkit-linear-gradient(top, #1f70c9 10%, #02b0ea 40%, #f2f2f2 60%);
background-repeat: no-repeat;
}（3）if用法
wx:if="{{goodsList.length === 0 && hasLoaded}}"（4）for用法
wx:for="{{goodsList}}" wx:for-item="item" wx:key="index"（5）微信自带页面分享写法（需要分享的界面js中写入即可）
onLoad: function (options) {
//开启分享好友功能
wx.showShareMenu({
withShareTicket: true
});
},文章来源：https://www.toymoban.com/news/detail-798819.html
到了这里，关于微信小程序背景渐变写法加占比以及微信小程序开发过程中长使用的代码段的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
