Overview
Realize a personal free product display and promotion program through cloud development of WeChat applet
detailed
WeChat cloud development small mall
Preliminary preparation : appid, small program development tool
Project structure diagram:
Page effect:
Page layout: By dividing the left and right pages, a single page style is encapsulated, where single is a single component of the encapsulated product.
<view class="of-content">
<view class="of-ct-area">
<view class="leftcont">
<view class="itemlist" wx:for="{
{bgleftC}}" wx:key="index">
<single shops="{
{item}}" />
</view>
</view>
<view class="rightcont">
<view class="itemlist" wx:for="{
{bgrightC}}" wx:key="index">
<view class="item-img">
<single shops="{
{item}}" />
</view>
</view>
</view>
</view>
</view>Animated pop-up box:
Use WeChat’s official Animation API:
1) Slowly pop up the product purchase box
uptab() {
var animation = wx.createAnimation({
duration: 500,
timingFunction: 'ease',
delay: 0
})
animation.translateY(0).step()
this.setData({
animationData: animation.export() //动画实例的export方法导出动画数据传递给组件的animation属性
})
},2) Slowly hide the product purchase box downwards
dowmtab() {
var animation = wx.createAnimation({
duration: 700,
timingFunction: 'ease',
delay: 0
})
animation.translateY('100vh').step()
this.setData({
animationData: animation.export() //动画实例的export方法导出动画数据传递给组件的animation属性
})
},control center:
Login will verify whether it is the user himself, thereby displaying the operation process of the product. This is achieved by checking the user's WeChat nickname.
Product release page
<view class="sendyna">
<view class="picbox">
<image class="pic" src="{
{item}}" bind:longpress="deletePic" data-index="{
{index}}" mode="aspectFill" wx:for="{
{imgdatas}}" wx:key="index" />
<view class="add-btn" bind:tap="addPic" wx:if="{
{imgdatas.length<3}}">+</view>
</view>
<view class="priceB">
<view class="one">
现价 <input class="inputstyle" type="number" placeholder="现价" bindinput="bindNew"></input>
</view>
<view class="one">
原价 <input class="inputstyle" type="number" placeholder="原价" bindinput="bindOld"></input>
</view>
</view>
<view class="spanB">
标签 <input class="inputstyle" placeholder="标签" bindinput="bindspan"></input>
</view>
<view class="radios">
<radio-group bindchange="choosetype" class="radioss">
<radio value="0" checked="{
{typeindex==0}}">红包</radio>
<radio value="1" checked="{
{typeindex==1}}">VIP</radio>
<radio value="2" checked="{
{typeindex==2}}">修图</radio>
<radio value="3" checked="{
{typeindex==3}}">修图</radio>
</radio-group>
</view>
<view class="input-text">
<textarea class="input-area" placeholder="说点什么吧..." placeholder-class="textarea-placeholder" adjust-position="{
{true}}" maxlength="1000" bindinput="inputContent">
</textarea>
</view>
<view class="sendbtn" bind:tap="sendMoment">发表</view>
</view>
Part of the logic of the publishing process. Since the text and pictures published by the mini program need to be tested, the cloud function in cloud development is used here to achieve free verification.
const fileID = []
imgdatas.forEach(val => {
console.log(val);
let uppath = this.getimgpath(val)
wx.cloud.uploadFile({
cloudPath: uppath,
filePath: val, // 文件路径
success: res => {
console.log(res);
if (res.statusCode == 200) {
fileID.push(res.fileID)
if (imgdatas.length == fileID.length) {
console.log('图片上传成功');
thinginfo.imglist = fileID
thinginfo.imgdatas = imgdatas
// console.log(thinginfo);
this.checkcont(thinginfo)
}
} else {
wx.showToast({
title: '上传图片失败',
})
}
}
})
}) wx.cloud.callFunction({
name: "check",
data: detail,
success: res => {
console.log(res);
const _id = res.result._id;
if (_id) {
wx.hideLoading();
wx.showToast({
title: '发送成功',
icon: "none"
});
wx.navigateBack({
delta: 1
})
} else {
wx.showToast({
title: '发布失败！',
icon: "none"
});
}
},
fail: err => {
console.log(err);
}
})