微信小程序 本地背景图片设置

1、背景图片设置可以用服务器上的图片。

2、也可以将本地图片转成base64的。

wxml:

<view class="topview-left" style="background-image: url({{background}})mode='scaleToFill'"/>

js:

data: {

    background: "/style/images/icon_coupon_backgroud.png",

  },

/**

  * 生命周期函数--监听页面加载

  */

  onLoad: function(options) {

    //设置背景图片

    let base64 = wx.getFileSystemManager().readFileSync(this.data.background, 'base64')

    this.setData({

      'background': 'data:image/pngbase64,' + base64

    })

    //设置导航栏标题

    wx.setNavigationBarTitle({

      title: '下发优惠券'

    })

  },

wxss:

.topview-left {

  display: flex

  flex-direction: column

  align-items: center

  justify-content: center

  width: 30%

  height: 113px

  background-repeat: no-repeat/** 不重复*/

  background-size: 100% 100%

  background-image: url('data:image/pngbase64,base64码')/** 添加背景图片的*/

}

3、也可以直接设置定位实现。

         <view style="display: flexalign-items: centertext-align:centerjustify-content: centermargin-bottom:10px">

               <image src="/pagesChronic/images/icon_case_background.png" style="height:26pxwidth:167pxposition:absolute"></image>

                <text style="position: relativecolor:#FF9721">评价</text>

           </view>

效果：

您可以按照以下步骤将截图放到腾讯小程序中：

1. 在电脑上打开微信 Web 开发者工具，并在其菜单栏中选择“工具” ->“项目详情”。

2. 然后，在“项目详情”页面中，单击“本地设置”选项卡，并启用“调试基础库最低版本设置”，确保您的微信小程序基础库版本符合您的程序所需的版本。

3. 回到“开发者工具”的主界面，单击“新建项目”，输入项目名称和项目路径，并选择您所需要的小程序模板。

4. 接下来，单击“创建项目”，微信 Web 开发者工具将自动生成所需的文件结构。

5. 然后，找到您要放置截图的位置，可以通过右键单击相应的文件夹或资源，然后选择“新建文件”或“导入文件”。如果您使用的是 Mac，您可以使用 Command + N 快捷键来创建新文件。如果您要导入文件，则可以使用“文件”->“导入”菜单选项。

6. 浏览到您的电脑上的截图，选择它并导入。

7. 最后，将修改保存到本地，并在微信 Web 开发者工具中刷新页面，查看所做的更改是否已成功。

完成以上过程后，您就可以在腾讯小程序中使用您的截图了。

小程序开发的时候，参数值改变，前端页面会自动的响应的

页面中：<image class="img-tree" src="../../img/{{index}}.png"></image>

js中:

Page({

data:{ index:1,},//图片名称

getPower:function(){//更换图片的函数

this.setData({ index:2,})//更换参数值

}

})

---