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

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. 打开微信并进入小程序界面。

2. 点击右上角的“＋”号，选择第一个小程序并进入。

3. 在第一个小程序中，向上滑动屏幕，并点击“添加标签页”按钮（图标为“＋”和“⦁”组成），再选择要打开的第二个小程序。

4. 此时，第二个小程序就会在新的标签页中打开，你可以在同一屏幕上同时浏览和 *** 作两个小程序了。

5. 如果需要关闭某个标签页，可以点击标签页上的“×”按钮来关闭。

需要注意的是，并不是所有的微信小程序都支持双标签模式。如果你发现在某些小程序中没有“添加标签页”按钮，则该小程序可能不支持双标签模式。同时，在双标签模式下，你需要注意你的设备屏幕大小和分辨率，以避免 *** 作不便或界面拥挤的情况发生。

微信小程序飞机大战外部引用图片方法：

1、直接在标签里加上style样式，加上背景图：。

2、使用外部引入的话，直接使用backqround会报渲染层错误，可以将图片上传到服务器，然后在使用background。

3、直接使用image标签引用。

---