Shulou(Shulou.com)06/02 Report--

This article will explain in detail how JS realizes the function of adding custom background to Mini Program in the curriculum. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Gif demo:

The open source address of gitee will be placed at the bottom.

Recently, I always feel that the current interface is too simple to meet the needs of a decent person like me, so I add the function of customizing the background of the course schedule.

New page:

Effect:

You need to add an entry to the mine.js:

{name: "set class schedule background", icon: "/ images/scheduleIcon.png", url: "/ pages/schedule/schedule?",}

New page schedule

Wxml code

{{couples? "setting background for Ta": "setting background for class schedule"} upload background for couples, background background start showing time Set background display duration {{item.label}} Save setup course schedule background users can upload their favorite pictures as the background display of the class schedule (click the picture to replace) Daily schedule background uploading daily schedule background weekly schedule background Upload weekly class schedule background to restore the default background

Js code

Import {scheduleBG, couplesBG, couplesInfoAdd, setbgdefault,} from ".. /.. / utils/api/user"; / / get the application instance const app = getApp (); const dayjs = require (".. /.. / utils/dayjs/dayjs.min"); import {wxShowToast} from ".. /.. / utils/promisify" Page ({data: {StatusBar: app.globalData.StatusBar, CustomBar: app.globalData.CustomBar, ImgUrl: app.globalData.ImgUrl, displayArea: app.globalData.displayArea, CouplesBG: null, / / couple schedule background dailySchedule: null, / / daily schedule background weeklySchedule: null, / / weekly schedule background sendTime: "now" / / displayTimeList: [{label: "one day", checked: false, time: 1,}, {label: "one week", checked: true, time: 7,} {label: "one month", checked: false, time: 30,},], startTime: null,}, onLoad: function (query) {let {index_bgimage, table_bgimage} = app.globalData.userInfo This.setData ({couples: query.couples? Query.couples: null, dailySchedule: index_bgimage? App.globalData.ImgUrl + index_bgimage: null, / / Daily schedule background weeklySchedule: table_bgimage? App.globalData.ImgUrl + table_bgimage: null, / / weekly class schedule background});}, / * back one page * / BackPage () {wx.navigateBack ({delta: 1,}) }, / * switch display time * / showTime (e) {let id = e.currentTarget.dataset.id; console.log (e.currentTarget.dataset.id); let displayTimeList = this.data.displayTimeList.map ((v, I) = > {v.checked = id = = i; return v;}) This.setData ({displayTimeList,});}, / * modify background * / modifyImage (e) {let type = e.currentTarget.dataset.type Wx.chooseImage ({count: 1, sizeType: ["compressed"], sourceType: ["album"], success: (res) = > {/ / tempFilePath can be used as the src attribute of the img tag to display pictures const tempFilePaths = res.tempFilePaths Switch (type) {case "week": scheduleBG (tempFilePaths [0], "table"). Then ((v) = > {app.getSet (); v.code & & wxShowToast (v.msg)) This.setData ({weeklySchedule: tempFilePaths [0],});}; break Case "daily": scheduleBG (tempFilePaths [0], "index"). Then ((v) = > {app.getSet (); v.code & & wxShowToast (v.msg)) This.setData ({dailySchedule: tempFilePaths [0],});}; break Case "Couples": couplesBG (tempFilePaths [0]). Then ((v) = > {console.log (v); app.getSet (); v.code & & wxShowToast (v.msg)) This.setData ({CouplesBG: app.globalData.ImgUrl + v.data.imgurl,});}); break Default: wxShowToast ("failed to set, please try again"); break;}},}) }, / * restore default background * / saveButton () {this.setData ({dailySchedule: null, weeklySchedule: null,}); setbgdefault () .then ((v) = > {v.code & & wxShowToast (v.msg); app.getSet ();})) }, / TimePicker (e) {let day = dayjs (e.detail) .format ("mm month DD day"); let am = dayjs (e.detail) .format ("A") = "PM"? "afternoon": "morning"; let time = dayjs (e.detail) .format ("HH:mm"); let sendTime = `${day} ${am} ${time}`; console.log (sendTime, "TimePicker"); this.setData ({sendTime, startTime: dayjs (e.detail),}) }, / * Save couple background * / saveCouplesBG () {let {displayTimeList, startTime, CouplesBG} = this.data; let endType = displayTimeList.filter ((v) = > v.checked = = true) [0]; let _ startTime = startTime? Dayjs (startTime): dayjs (); let endTime = endType.time; let tid = app.globalData.userInfo.lovers_id; if (! tid) {wx.showToast ({title: "Save failed", icon: "none", duration: 2000,}); return } couplesInfoAdd ({tid, starttime: _ startTime.unix (), endtime: endTime, love_sort: 1, contents: CouplesBG.replace (this.data.ImgUrl, "),}) .then ((v) = > {wxShowToast (v.msg)) If (v.code) {app.getSet () .then (() = > {this.BackPage ();});}});},})

Wss code

HeadBox {width: 750rpx;} page {background-color: # fff;}. BGListBox {flex-wrap: wrap; justify-content: space-between;}. BGBox {width: 321rpx; height: 321rpx; border-radius: 34rpx; overflow: hidden; margin-top: 22rpx;} .BGBox .BGImg {width: 321rpx; height: 321rpx;} .BGBox .BGState {position: relative; background: # 000000; opacity: 0.5; padding: 10rpx 20rpx Bottom: 50rpx; color: # fff;}. AddBG {width: 321rpx; height: 321rpx; margin-top: 22rpx; border: 1rpx dashed # 92979d; border-radius: 24rpx; border-radius: 34rpx;}. Message {width: 70rpx; height: 70rpx; margin-top: 20rpx;}. Title {font-size: 32rpx; font-weight: 500; line-height: 45rpx; color: # 282b2f;}. Tips {font-size: 24rpx; font-weight: 400 Line-height: 33rpx; color: # 92979d;}. SendTimeBox {width: 686rpx; height: 90rpx; background: # ffffff; border: 1rpx solid # dfe4ea; border-radius: 14rpx; margin: 24rpx 0 } this is the end of the article on "how JS realizes the function of adding custom background to Mini Program of curriculum schedule". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.