微信小程序背景渐变写法加占比以及微信小程序开发过程中长使用的代码段

本文链接：https://blog.csdn.net/ypz131023/article/details/131659243

在写微信小程序的过程中，ui设计了一个渐变的背景图，网上一搜很多都只写了怎么样让微信渐变色，但是我的需求就是渐变色而且控制渐变色范围，比如三个颜色一个头部是深蓝，中间浅蓝，最底下是白色，那么直接套用网上的列子（第一段代码），三个色渐变范围是一样的不是很好，我希望的效果是深蓝色占一小部分，浅蓝色占一半，其余的都是白色那么怎么写呢，我们需要给每个颜色占比设置大小，代码如（第二段代码）

（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
     });
   },