@[TOC]
⭐ 前言
大家好，我是yma16，不止前端，本文将介绍微信小程序 制作表情包的实现。
⭐ 后端实现
使用django的request抓取百度表情包实现，我在2021年的接口现在还能用
传送门：web站点搜索图片看冰冰
⭐ 页面排版布局
元素：输入框、搜索框、图片展示
点击图片可以保存。
点击图片保存
页面布局
view视图
<!--pages/imgs/imgs.wxml-->
<view class="container">
<view class="container-header">
{
{
config.title}}
</view>
<view class="container-content">
<view class="container-content-top">
<view class="container-content-left">
<input class="weui-input" bindinput="bindKeyInput" value="{
{searchVal}}" Loading="{
{loading}}" placeholder="{
{config.searchPlaceholder}}" />
</view>
<view class="container-content-right">
<button class="mini-btn" type="primary" size="mini"
bindtap="searchImg"
>{
{
config.searchText}}</button>
</view>
</view>
<view class="imgs-list">
<view class="imgs-list-content" wx:for="{
{imgsArray}}" wx:for-item="item" wx:key="index">
<view class="img_title">{
{
item.text}}</view>
<view class="img-box">
<image class="img-content" mode="{
{item.mode}}" src="{
{item.src}}" data-url="{
{item.src}}" bindtap="previewImage"></image>
</view>
</view>
</view>
</view>
</view>
样式
/* pages/imgs/imgs.wxss */
.container {
position: relative;
width: 100vw;
height: 90vh;
background: rgba(255, 255, 255, 0.8);
overflow: hidden;
}
.container-header {
background: rgba(16, 116, 187);
width: 100%;
text-align: center;
height: 40px;
line-height: 40px;
font-weight: bold;
}
.container-content {
position: relative;
width: 100%;
text-align: center;
}
.container-content-top {
position: relative;
padding: 10px 2px;
display: flex;
}
.imgs-list{
padding: 5px 5px;
max-height: calc( 100vh - 165px);
overflow: auto;
}
.img-box{
display: inline;
}
.weui-input{
position: relative;
border: 1px solid rgba(16, 116, 187,.2);
color: #333;
height: 32px;
line-height: 32px;
width: 100%;
}
.mini-btn{
background:rgba(16, 116, 187) !important;
color: #fff;
border-radius: 5px;
width: 100%;
}
.container-content-left{
margin-left: 20px;
width: 80%;
}
.container-content-right{
width: 20%;
margin-left: 2px;
line-height: 32px;
}
.img-content{
width: 200px;
height: 100px;
margin-bottom: 5px;
}
逻辑实现
js逻辑
包括事件绑定
// pages/imgs/imgs.js
Component({
/**
* 继承父级样式
*/
options: {
addGlobalClass: true,
},
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
title: '表情包',
loading: false,
searchVal: '二次元',
baseUrl: 'https://ip',
config: {
title: '表情包搜索',
searchPlaceholder: '输入搜索图片',
searchText: '查询'
},
imgsArray: []
},
lifetimes: {
// 生命周期函数，可以为函数，或一个在 methods 段中定义的方法名
attached: function () {
console.log('获取attached')
this.searchImg()
},
moved: function () {
},
detached: function () {
console.log('detached')
},
},
/**
* 组件的方法列表
*/
methods: {
bindKeyInput(e) {
this.setData({
searchVal: e.detail.value
})
},
previewImage(e) {
console.log('click png', e)
const url = e.target.dataset.url
wx.previewImage({
current: url, // 当前显示图片的http链接
urls: [url] // 需要预览的图片http链接列表
})
},
searchImg() {
this.setData({
loading: true
})
const prefix = 'path' + this.data.searchVal
const remotePath = this.data.baseUrl + prefix
const thisBack = this
wx.request({
url: remotePath,
method: 'GET',
success: (res) => {
console.log('res', res)
let imgData = []
if (res.data) {
const {
data } = res.data
imgData = data.map(item => {
return {
mode: 'aspectFill',
title: '图片',
src: item
}
})
}
thisBack.setData({
loading: false,
imgsArray:imgData
})
},
fail: () => {
thisBack.setData({
loading: false,
imgsArray: []
})
}
})
}
}
})
⭐ 结束
感谢阅读，如有问题欢迎指正！
