uniapp微信小程序生成分享海報模板

1、模板自取

2、可自行按需求更改調(diào)整

3、效果圖如下： 生成前? -----> 生成后的圖

需知：博主的實(shí)現(xiàn)效果是先把需要生成的圖片排版成靜態(tài)頁面，再點(diǎn)擊生成海報----->通過canvas生成海報?。?！

? ? ? ? ? ?不需要這樣效果話可以省略第一步，直接一進(jìn)頁面調(diào)用方法生成canvas海報?。。? 示例大部分代碼可省略?)

4、全部代碼如下所示：

html：

<template>
?? ?<view class="container">
?? ? ? <view class="bigTitle">分享簽到</view>
?? ? ? <view class="bigTitleTwo">堅(jiān)持打卡學(xué)習(xí)，和我一起吧！</view>
?? ??? ?
? ? ? <view class="shareBox">
?? ??? ?<view class="topTime">
?? ??? ??? ?<view class="topItem">{{todayTime}}</view>
?? ??? ??? ?<view class="topItem">{{today}}</view>
?? ??? ?</view>
?? ??? ?<!-- <u--image mode="widthFix" :showLoading="true" :src="mainPic" width="400rpx" height="400rpx"></u--image> -->
? ? ? ? <image :src="mainPic" mode="widthFix" class='bgImg'></image>
? ? ? ? <view class="shareText">
? ? ? ? ?<view class='text'>
?? ??? ??? ? <rich-text :nodes="todaySaying || '-'"></rich-text>
?? ??? ? </view>
? ? ? ? ? <!-- <text class='text text2'> ———— 周杰倫《晴天》</text> -->
? ? ? ? </view>
? ? ?
? ? ? ? <view class='imgBox'>
? ? ? ? ? <button open-type="share" class='zfbtn'>
? ? ? ? ? ? <image src="http://www.meitang.cn/static/img/images/share_weixin.png" class='img'></image>
? ? ? ? ? ? ?<text class='btntxt'>分享朋友</text>
? ? ? ? ? </button>
? ? ? ? ? <button class='zfbtn m_l' @click="formSubmit">
? ? ? ? ? ? <image src="http://www.meitang.cn/static/img/images/share_fuzhi.png" class='img'></image>
? ? ? ? ? ? <text class='btntxt'>生成海報</text>
? ? ? ? ? </button>
? ? ? ? </view>
? ? ??
? ? ? ? <!--生成海報后的圖 ?-->
? ? ? ? ? <view class='imagePathBox' :hidden="maskHidden == false">
? ? ? ? ? ? <image :src="imagePath" class='shengcheng' show-menu-by-longpress="true"></image>
? ? ? ? ? ? <button class='baocun' @click="baocun">保存相冊，分享到朋友圈</button>
? ? ? ? ? </view>
? ? ? ? ?<view :hidden="maskHidden == false" class="mask"></view>?
? ? ? ? <view class="canvas-box">
?? ??? ??? ?<!-- style="width: 500rpx;height: 840rpx;position:fixed;" -->
? ? ? ? ? ? <canvas canvas-id="mycanvas" style="width: 750rpx;height: 1334rpx;position:fixed;" />
? ? ? ? </view> ?
? ? ? </view>
?? ?</view>
? ?
</template>

? ? data數(shù)據(jù)：

?? ?data() {
?? ??? ??? ?return {
?? ??? ??? ? ? formatDate,
?? ??? ??? ? ? imgView:this.$api.viewFile,
?? ??? ??? ? ? canvasW:375, ? ? // 設(shè)備寬
? ? ? ? ? ? ? ?img: "1654073743713419267",
? ? ? ? ? ? ? ?maskHidden: false,
? ? ? ? ? ? ? ?name: "野生九五",
?? ??? ??? ? ? todaySaying:'好運(yùn)永遠(yuǎn)不會眷顧傻瓜',
?? ??? ??? ? ? imagePath:'', ? ?// 顯示生成的圖片
?? ??? ??? ? ? mainPic: this.$api.viewFile + '1654305599822200833',
?? ??? ??? ? ? erPic: this.$api.viewFile + '20230518001',
?? ??? ??? ? ? todayTime:'2023-03-18',
?? ??? ??? ? ? today:'星期一',
?? ??? ??? ? ? urlParams:{}, ? // 路由參數(shù)
?? ??? ??? ?}
?? ??? ?},

onShow（）：

?? ?onShow() {

? ? ? ? // 獲取屏幕的寬度為畫布寬
?? ??? ?let that = this
?? ??? ?uni.getSystemInfo({
?? ??? ??? ?success(res) {
?? ??? ??? ??? ?let { windowWidth } = res
?? ??? ??? ??? ?that.canvasW = windowWidth
?? ??? ??? ?}
?? ??? ?});
?? ??? ?
?? ??? ? this.getShareImgInfo(); ? // 獲取內(nèi)容信息
?? ??? ?
?? ?},

方法：

?? ? methods: {
?? ??? ??? ?
?? ??? ??? ?/* 獲取分享圖片上的內(nèi)容信息 */
?? ??? ??? ?async getShareImgInfo(){
?? ??? ??? ??? ?let { indexContent } = this.urlParams
?? ??? ??? ??? ?try{
?? ??? ??? ??? ??? ?let res = await this.$api.getShareImgInfo()
?? ??? ??? ??? ??? ?if(res.code === 200){
?? ??? ??? ??? ??? ??? ?let { content,img,localDate,week } = res.data
?? ??? ??? ??? ??? ??? ?this.mainPic = this.$api.viewFile + (img === null ? '1654305599822200833' : img )
?? ??? ??? ??? ??? ??? ?this.todayTime = localDate
?? ??? ??? ??? ??? ??? ?this.todaySaying = indexContent ? indexContent : content
?? ??? ??? ??? ??? ??? ?this.today = week
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}catch(e){
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ?}
?? ??? ??? ?},
?? ??? ??? ??? ?
?? ??? ??? ?
?? ??? ??? ?// 獲取圖片信息
?? ??? ??? ?getImageInfo(image) {
?? ??? ??? ??? ?return new Promise((req, rej) => {
?? ??? ??? ??? ??? ?uni.getImageInfo({
?? ??? ??? ??? ??? ??? ?src: image,
?? ??? ??? ??? ??? ??? ?success: function(res) {
?? ??? ??? ??? ??? ??? ??? ?req(res)
?? ??? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ?});
?? ??? ??? ??? ?})
?? ??? ??? ?},
?? ??? ??? ? ?/* ?canvas文本換行 */
?? ??? ??? ??? ?drawText (ctx, str, leftWidth, initHeight, titleHeight, canvasWidth) {
?? ??? ??? ??? ? ? ?let lineWidth = 0;
?? ??? ??? ??? ? ? ?let lastSubStrIndex = 0; //每次開始截取的字符串的索引
?? ??? ??? ??? ? ? ?for (let i = 0; i < str.length; i++) {
?? ??? ??? ??? ? ? ? ? ?lineWidth += ctx.measureText(str[i]).width;
?? ??? ??? ??? ? ? ? ? ?if (lineWidth > canvasWidth) {
?? ??? ??? ??? ? ? ? ? ? ? ?ctx.fillText(str.substring(lastSubStrIndex, i), leftWidth, initHeight); //繪制截取部分
?? ??? ??? ??? ? ? ? ? ? ? ?initHeight += 22; //22為 文字大小20 + 2
?? ??? ??? ??? ? ? ? ? ? ? ?lineWidth = 0;
?? ??? ??? ??? ? ? ? ? ? ? ?lastSubStrIndex = i;
?? ??? ??? ??? ? ? ? ? ? ? ?titleHeight += 22;
?? ??? ??? ??? ? ? ? ? ?}
?? ??? ??? ??? ? ? ? ? ?if (i == str.length - 1) { //繪制剩余部分
?? ??? ??? ??? ? ? ? ? ? ? ?ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight);
?? ??? ??? ??? ? ? ? ? ?}
?? ??? ??? ??? ? ? ?}
?? ??? ??? ??? ? ? ?// 標(biāo)題border-bottom 線距頂部距離
?? ??? ??? ??? ? ? ?titleHeight = titleHeight + 10;
?? ??? ??? ??? ? ? ?return titleHeight;
?? ??? ??? ??? ?},

?? ??? ??? ??? ?
? ? ? ? ? ? ? ? ?//將canvas轉(zhuǎn)換為圖片保存到本地，然后將圖片路徑傳給image圖片的src
? ? ? ? ? ? ? async createNewImg() {
? ? ? ? ? ? ? ? ?let that = this;
?? ??? ??? ??? ? let { mainPic,erPic,name,todaySaying,todayTime,today,canvasW } = this
?? ? ? ? ? ? ? ?
?? ??? ??? ??? ? this.mainPic = await this.getImageInfo(mainPic) ? ?// 處理圖片
?? ??? ??? ??? ? this.erPic = await this.getImageInfo(erPic) ? ? ? ?// 處理圖片
?? ??? ??? ??? ? ?
? ? ? ? ? ? ? ? ?var context = uni.createCanvasContext('mycanvas');
? ? ? ? ? ? ? ? ?context.setFillStyle("#FFF") ? ? ?// #F24077 ? ? ? ? ? ?// 背景顏色
? ? ? ? ? ? ? ? ?context.fillRect(0, 0, canvasW, 610) ? ? ? ? ? ? ?// ?667 繪制一個矩形作為背景矩形x坐標(biāo)、y坐標(biāo)、圖片寬、高
?? ??? ??? ??? ??
?? ??? ??? ??? ? context.setFontSize(26);
?? ??? ??? ??? ? context.setFillStyle('#000'); ? ? // #FFF
?? ??? ??? ??? ? context.setTextAlign('left');
?? ??? ??? ??? ? context.fillText("分享簽到", 37, 45);
?? ??? ??? ??? ? context.stroke();
?? ??? ??? ??? ? context.setFontSize(14);
?? ??? ??? ??? ? context.setFillStyle('#000');
?? ??? ??? ??? ? context.setTextAlign('left');
?? ??? ??? ??? ? context.fillText("堅(jiān)持打卡學(xué)習(xí)，和我一起吧！", 37, 75);
?? ??? ??? ??? ? context.stroke();
?? ??? ??? ??? ??
?? ??? ??? ??? ? context.setFontSize(14);
?? ??? ??? ??? ? context.setFillStyle('#333');
?? ??? ??? ??? ? context.setTextAlign('left');
?? ??? ??? ??? ? context.fillText(todayTime, 37, 100);
?? ??? ??? ??? ? context.stroke();
?? ??? ??? ??? ??
?? ??? ??? ??? ? context.setFontSize(16);
?? ??? ??? ??? ? context.setFillStyle('#333');
?? ??? ??? ??? ? context.setTextAlign('right');
?? ??? ??? ??? ? context.fillText(today, (canvasW - 37), 100);
?? ??? ??? ??? ? context.stroke();
?? ??? ??? ??? ??
?? ??? ??? ??? ??
? ? ? ? ? ? ? ? ?context.drawImage(this.mainPic.path, (canvasW - 300)/2, 110, 300, 320); ?// 262 349

? ? ? ? ? ? ? ? ?// context.drawImage(path2, 56, 400, 263, 121); ?// 繪制圖像到畫布src、x坐標(biāo)、y坐標(biāo)、圖片寬、高?
? ? ? ? ? ? ? ? ?
?? ??? ??? ??? ? // 今日上上簽
?? ??? ??? ? ? ? context.setFontSize(15);
?? ??? ??? ? ? ? context.setFillStyle('#333');
?? ??? ??? ? ? ? context.setTextAlign('left');
?? ??? ??? ? ? ? // context.fillText(todaySaying, 37, 480);
?? ??? ??? ??? ? this.drawText(context, todaySaying, 37, 470, 30, 300); ? // 調(diào)用行文本換行函數(shù)（300則換行）
?? ??? ??? ? ? ? context.stroke();
?? ??? ??? ? ??
? ? ? ? ? ? ? ? ?//繪制左下角文字
? ? ? ? ? ? ? ? ?context.setFontSize(12);
? ? ? ? ? ? ? ? ?context.setFillStyle('#333');
? ? ? ? ? ? ? ? ?context.setTextAlign('left');
? ? ? ? ? ? ? ? ?context.fillText("長按識別小程序", 80, 560);
? ? ? ? ? ? ? ? ?context.stroke();
? ? ? ? ? ? ? ? ?context.setFontSize(12);
? ? ? ? ? ? ? ? ?context.setFillStyle('#333');
? ? ? ? ? ? ? ? ?context.setTextAlign('left');
? ? ? ? ? ? ? ? ?context.fillText("跟我一起來學(xué)習(xí)吧~~", 80, 580);
? ? ? ? ? ? ? ? ?context.stroke();
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ?//繪制右下角小程序二維碼
? ? ? ? ? ? ? ? ?context.drawImage(this.erPic.path, 230, 525,70,70);
? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ?context.draw();
? ? ? ? ? ? ? ? ?//將生成好的圖片保存到本地
? ? ? ? ? ? ? ? ?setTimeout(function () {
? ? ? ? ? ? ? ? ? ?uni.canvasToTempFilePath({
? ? ? ? ? ? ? ? ? ? ?canvasId: 'mycanvas',
? ? ? ? ? ? ? ? ? ? ?success: function (res) {
? ? ? ? ? ? ? ? ? ? ? ?var tempFilePath = res.tempFilePath;
?? ??? ??? ??? ??? ? ? that.imagePath = tempFilePath,
?? ??? ??? ??? ??? ? ? that.canvasHidden = true
?? ??? ??? ??? ??? ? ??
?? ??? ??? ??? ??? ? ? ?console.log('將生成好的圖片保存到本地',res,that.imagePath)
?? ??? ??? ??? ??? ? ??
? ? ? ? ? ? ? ? ? ? ?},
? ? ? ? ? ? ? ? ? ? ?fail: function (res) {
? ? ? ? ? ? ? ? ? ? ? ?console.log(res);
? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ?});
? ? ? ? ? ? ? ? ?}, 200);
? ? ? ? ? ? ? ?},
?? ??? ??? ? ??
?? ??? ??? ? ? //點(diǎn)擊保存到相冊
?? ??? ??? ? ? ? baocun() {
?? ??? ??? ? ? ? ? var that = this
?? ??? ??? ??? ? ? let { imagePath } = this?
?? ??? ??? ??? ? ? console.log('點(diǎn)擊保存到相冊',imagePath)
?? ??? ??? ? ? ? ? uni.saveImageToPhotosAlbum({
?? ??? ??? ? ? ? ? ? filePath: imagePath,
?? ??? ??? ? ? ? ? ? success(res) {
?? ??? ??? ? ? ? ? ? ? uni.showModal({
?? ??? ??? ? ? ? ? ? ? ? content: '海報已保存到相冊',
?? ??? ??? ? ? ? ? ? ? ? showCancel: false,
?? ??? ??? ? ? ? ? ? ? ? confirmText: '確定',
?? ??? ??? ? ? ? ? ? ? ? confirmColor: '#333',
?? ??? ??? ? ? ? ? ? ? ? success: function (res) {
?? ??? ??? ? ? ? ? ? ? ? ? if (res.confirm) {
?? ??? ??? ? ? ? ? ? ? ? ? ? console.log('用戶點(diǎn)擊確定');
?? ??? ??? ? ? ? ? ? ? ? ? ? /* 該隱藏的隱藏 */
?? ??? ??? ??? ??? ??? ??? ? that.maskHidden = false
?? ??? ??? ? ? ? ? ? ? ? ? }
?? ??? ??? ? ? ? ? ? ? ? }, fail: function (res) {
?? ??? ??? ? ? ? ? ? ? ? ? console.log(11111)
?? ??? ??? ? ? ? ? ? ? ? }
?? ??? ??? ? ? ? ? ? ? })
?? ??? ??? ? ? ? ? ? },
?? ??? ??? ??? ??? ? fail() {
?? ??? ??? ??? ??? ? ? ? ?uni.showModal({
?? ??? ??? ??? ??? ? ? ? ? ?title: '提示',
?? ??? ??? ??? ??? ? ? ? ? ?content: '需要您授權(quán)保存相冊',
?? ??? ??? ??? ??? ? ? ? ? ?showCancel: false,
?? ??? ??? ??? ??? ? ? ? ? ?success() {
?? ??? ??? ??? ??? ? ? ? ? ? ?uni.openSetting({
?? ??? ??? ??? ??? ? ? ? ? ? ? ?success(settingdata) {
?? ??? ??? ??? ??? ? ? ? ? ? ? ? ?if (settingdata.authSetting['scope.writePhotosAlbum']) { ? ? ? //是否授權(quán)保存到相冊
?? ??? ??? ??? ??? ? ? ? ? ? ? ? ? ?wx.showModal({
?? ??? ??? ??? ??? ? ? ? ? ? ? ? ? ? ?title: '提示',
?? ??? ??? ??? ??? ? ? ? ? ? ? ? ? ? ?content: '獲取權(quán)限成功,再次保存圖片即可成功',
?? ??? ??? ??? ??? ? ? ? ? ? ? ? ? ? ?showCancel: false,
?? ??? ??? ??? ??? ? ? ? ? ? ? ? ? ?})
?? ??? ??? ??? ??? ? ? ? ? ? ? ? ?} else {
?? ??? ??? ??? ??? ? ? ? ? ? ? ? ? ?uni.showModal({
?? ??? ??? ??? ??? ? ? ? ? ? ? ? ? ? ?title: '提示',
?? ??? ??? ??? ??? ? ? ? ? ? ? ? ? ? ?content: '獲取權(quán)限失敗，無法保存到相冊',
?? ??? ??? ??? ??? ? ? ? ? ? ? ? ? ? ?showCancel: false,
?? ??? ??? ??? ??? ? ? ? ? ? ? ? ? ?})
?? ??? ??? ??? ??? ? ? ? ? ? ? ? ?}
?? ??? ??? ??? ?
?? ??? ??? ??? ??? ? ? ? ? ? ? ?},
?? ??? ??? ??? ??? ? ? ? ? ? ?})
?? ??? ??? ??? ??? ? ? ? ? ?},
?? ??? ??? ??? ??? ??? ??? ?fail() {
?? ??? ??? ??? ??? ??? ??? ??? ?uni.$u.toast('您已取消')
?? ??? ??? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ? ? ? ?})
?? ??? ??? ??? ??? ? ? ?},
?? ??? ??? ??? ??? ??
?? ??? ??? ? ? ? ? })
?? ??? ??? ? ? ? },
?? ??? ??? ??? ??
?? ??? ??? ??? ? ?//點(diǎn)擊生成
?? ??? ??? ??? ? ? formSubmit: function (e) {
?? ??? ??? ??? ? ? ? var that = this;
?? ??? ??? ??? ??? ? this.maskHidden = false
?? ??? ??? ??? ? ? ? // this.setData({
?? ??? ??? ??? ? ? ? // ? maskHidden: false
?? ??? ??? ??? ? ? ? // });
?? ??? ??? ??? ? ? ? uni.showToast({
?? ??? ??? ??? ? ? ? ? title: '海報生成中...',
?? ??? ??? ??? ? ? ? ? icon: 'loading',
?? ??? ??? ??? ? ? ? ? duration: 1000
?? ??? ??? ??? ? ? ? });
?? ??? ??? ??? ? ? ? setTimeout(function () {
?? ??? ??? ??? ? ? ? ? uni.hideToast()
?? ??? ??? ??? ? ? ? ? that.createNewImg(); ? // 繪圖
?? ??? ??? ??? ??? ? ??
?? ??? ??? ??? ??? ? ? that.maskHidden = true
?? ??? ??? ??? ? ? ? ? // that.setData({
?? ??? ??? ??? ? ? ? ? // ? maskHidden: true
?? ??? ??? ??? ? ? ? ? // });
?? ??? ??? ??? ? ? ? }, 1000)
?? ??? ??? ??? ? ? },
?? ??? ??? ??? ? ??
?? ??? ?},

css樣式：

<style lang="scss">

??
??
.container{
?? ?height: 100vh;
?? ?padding: 10%;
?? ?// background-image: linear-gradient(to bottom right,#F2427B,#EE2847);
?? ?background-color: #DAEDFB;
?? ?
?? ?.bigTitle{
?? ??? ?font-size: 42rpx;
?? ??? ?// color: #FFFFFF;
?? ??? ?padding-bottom: 25rpx;
?? ?}
?? ?.bigTitleTwo{
?? ??? ?font-size: 26rpx;
?? ??? ?// color: #FFFFFF;
?? ??? ?padding-bottom: 25rpx;
?? ?}
?? ?
?? ?.shareBox{
?? ? ? display: flex;
?? ? ? flex-direction: column;
?? ? ? background-color: #fff;
?? ? ??
?? ??? ?.topTime{
?? ??? ??? ?display: flex;
?? ??? ??? ?justify-content: space-between;
?? ??? ??? ?align-items: center;
?? ??? ??? ?padding: 40rpx;
?? ??? ??? ?
?? ??? ??? ?.topItem{
?? ??? ??? ??? ?font-size: 26rpx;
?? ??? ??? ??? ?color: #333;
?? ??? ??? ?}
?? ??? ?}
?? ??? ?
?? ??? ?
?? ??? ?// canvas
?? ??? ?.canvas-box{
?? ??? ??? ?position: fixed;
?? ??? ??? ?opacity: 0;
?? ??? ??? ?bottom: 9999999rpx;
?? ??? ??? ?// ?width: 600rpx;
?? ??? ??? ?// ?height: 860rpx;
?? ??? ??? ?// ?display: flex;
?? ??? ??? ?// ?flex-direction: column;
?? ??? ??? ?// ?align-items: center;
?? ??? ??? ?
?? ??? ??? ?// ?top: 50rpx;
?? ??? ??? ?// ?left: calc(50% - 300rpx);
?? ??? ??? ??
?? ??? ??? ?// canvas{
?? ??? ??? ?// ?? ?width: 100%;
?? ??? ??? ?// ?? ?height: 100%;

?? ??? ??? ?// }
?? ??? ?}
?? ?}
}
?? ?

.bgImg{
? width: 70%;
? height: 440rpx !important;
? margin: 0% 15%;
}
.shareText{
? color: #333;
? font-size: 28rpx;
? display: flex;
? flex-direction: column;
? align-content: center;
? justify-content: center;
? padding: 50rpx 30rpx;
}
.shareText .text{
? // line-height: 60rpx;
? width: 100%;
? box-sizing: border-box;
? display: block;
? color: #333;
}
.shareText .text2{
? text-align: right;
}
.btntxt{
? ?color: #333;
? ? ?font-size: 26rpx;
}
.imgBox{
? text-align: center;
? width: 100%;
? margin-top:20rpx;
? display: flex;
}
.img{
? display: inline-block;
? width: 100%;
? height: 100%;
}
.m_l{
? margin-left: 180rpx;
}
.zfbtn{
? display:flex;
? flex-direction: column;
? font-size: 28rpx;
? align-items: center;
? justify-content: center;
? background: #fff;
}
.zfbtn image{
? width: 70rpx;
? height: 70rpx;
}
button[class="zfbtn"]::after {
? border: 0;
}?
button[class="zfbtn m_l"]::after {
? border: 0;
}?
.imagePathBox{
? width: 100%;
? height: 100%;
? background: rgba(0,0,0,0.7);
? position: fixed;
? top: 0;
? left: 0;
? right: 0;
? bottom: 0;
? z-index: 100000;
}
.shengcheng{
? width: 86%;
? height: 80%;
? position: fixed;
? top: 10%;
? left: 50%;
? margin-left: -43%;
? z-index: 999;
}
.baocun{
? display: block;
? width: 80%;
? height: 75rpx;
? padding: 0;
? line-height: 75rpx;
? text-align: center;
? position: fixed;
? bottom: 50rpx;
? left: 10%;
? color: #fff;
? font-size: 32rpx;
? border-radius: 50rpx;
? background: #fdd668;

}
button[class="baocun"]::after{
? border: 0;
}
</style>文章來源地址http://www.zghlxwxcb.cn/news/detail-627749.html

到了這里，關(guān)于uniapp微信小程序生成分享海報(模板自取)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！