当前位置:网站首页>Wechat applet - simple diet recommendation (3)
Wechat applet - simple diet recommendation (3)
2022-07-05 09:55:00 【Sunqk5665】
This article is my article Simple diet recommendations ( One ) In function realization Turntable meal selection module .
Catalog
Custom turntable assembly reference article :https://blog.csdn.net/qq_23375733/article/details/81274955
1、 Introduction to the random catering function of the turntable :
This module mainly uses small programs , Support customization of simple components , Use simple component-based programming supported by applets , Through this function, the design of turntable is realized . Then through the turntable , Realize random selection , Choose your meal today , Catering is through scientific diet , To serve you , The results of the catering will be displayed , If you are not satisfied , You can also choose this meal again .
2、 Module creativity
In this module , The creative points are as follows :
The creative point is in the form of turntable , To achieve the random choice of catering , It is not only possible to choose meals at one time , You can still achieve , Choose... Again , Choose the final one .
Another creative point is to use the custom components of wechat applet , The customization module of wechat applet is a way for developers to customize , Developers can abstract the function modules in the page into custom components , In order to reuse in different pages ; You can also split a complex page into multiple low coupling modules , Helps code maintenance . The custom component is very similar to the basic component when used .
3、 Design thinking
To complete this module and realize the corresponding functions of dish identification , The following problems must be solved :
- Implementation of custom components
- Use custom components
- Rotary table rotation is realized through components
- Return to catering
- Display catering data
- Overall interface design
4、 Implementation process
4.1 Use custom components
After searching for relevant information , Learned that wechat applets can use custom components , Custom components are a custom way for wechat developers , You can abstract the function modules in the page into custom components , In order to reuse in different pages ; You can also split a complex page into multiple low coupling modules , Helps code maintenance . The custom component is very similar to the basic component when used .
4.2 How to use custom components
Create custom components ( Official custom component development documentation ): Similar to page , A custom component consists of json wxml wxss js 4 Files make up . To write a custom component , The first thing you need to do is json File for custom component declaration ( take component Field set to true This set of files can be set as custom components ):
{
"component": true
}
meanwhile , Still in wxml Write component template in file , stay wxss Add component styles... To the file , They are written in a similar way to the way pages are written .
<!-- This is the inside of the custom component WXML structure --> <view class="inner">
{
{
innerText}}
</view>
<slot></slot>
/* The style here only applies to this custom component */
.inner {
color: red;
}
In the custom component of js In file , Need to use Component() To register components , And provide the property definition of the component 、 Internal data and custom methods .
The property values and internal data of the component will be used for the component wxml Rendering of , among , Property values can be passed in from outside the component .
Component({
properties: {
// It's defined here innerText attribute , Property values can be specified when the component is used
innerText: {
type: String,
value: 'default value',
}
},
data: {
// Here are some component internal data
someData: {
}
},
methods: {
// Here is a custom method
customMethod: function(){
}
}
})
Before using registered custom components , First of all, on the page json Make a reference statement in the document . At this time, you need to provide the tag name of each custom component and the corresponding custom component file path :
{
"usingComponents": {
"component-tag-name": "path/to/the/custom/component"
}
}
such , On page wxml You can use custom components just like basic components . The node name is the tag name of the custom component , The node property is the property value passed to the component .
4.3 Write custom components of the turntable
Write through wechat applet development documents , Custom components of turntable , Because this is the first time to write custom components , So I'm not familiar with the process , So there are many problems when using , And the idea went wrong , By using online tutorials , By reading someone else's code , Change writing code , The customization of components has been successfully realized .
The color of the first row turntable , Treatment of appearance , Use fan-shaped processing , Color is through JS The document defines .
<view animation="{
{animationData}}" class="gb-wheel-content" style='width:{
{
size.w}}rpx;height:{
{
size.h}}rpx;'>
<!-- Fan colored background When the option length is equal to 2 perhaps 3 Special treatment was made during -->
<view class="canvas-list">
<view class="canvas-item2" wx:for="{
{awardsConfig.awards}}" wx:key="key" style="transform: rotate({
{
item.item2Deg}});background-color:{
{
awardsConfig.awards.length==2?item.color:''}};opacity:{
{
awardsConfig.awards.length==2?item.opacity:awardsConfig.awards.length==3?item.opacity:''}};width:{
{
size.h}}rpx;height:{
{
size.h/2-2}}rpx;transform-origin:{
{
size.h/2}}rpx {
{
size.h/2}}rpx">
<view class="canvas-item2-after" style="transform: rotate({
{
item.afterDeg}});background-color:{
{
item.color}};opacity:{
{
awardsConfig.awards.length==3?'':item.opacity}};width:{
{
size.h/2}}rpx;height:{
{
size.h/2}}rpx;transform-origin: {
{
size.h/2}}rpx {
{
size.h/2}}rpx"></view>
<view wx:if='{
{awardsConfig.awards.length==3}}' class="canvas-item2-after" style="background-color:{
{
item.color}};width:{
{
size.h/2}}rpx;height:{
{
size.h/2}}rpx;transform-origin: {
{
size.h/2}}rpx {
{
size.h/2}}rpx"></view>
</view>
</view>
Then deal with the options :
<!-- Options content -->
<view class="gb-wheel-list">
<view class="gb-wheel-item" data-index="{
{index}}" wx:for="{
{awardsConfig.awards}}" wx:key='key'>
<view class="gb-wheel-icontent" style="height:262rpx;overflow:hidden;font-size:{
{
item.name.length>9?'20':'26'}}rpx;line-height:{
{
item.name.length>9?'20':'26'}}rpx;width:26rpx;padding-top:5rpx;transform: rotate({
{
index*turnNum}}turn);transform-origin: 50% {
{
size.h/2-2}}rpx">
<text style='word-break:break-all;'>{
{item.name}}</text>
</view>
</view>
</view>
</view>
Then the style processing of the middle start key :
<!-- The button in the middle of the turntable -->
<image bindtap="_zhuan" src='/images/canvas_button_go_unclick.png' style='width:{
{
size.h/4.4}}rpx;position:absolute;left:41%;top:38%;margin-top:-11rpx;z-index:9999;display:{
{
block1}}' mode='widthFix'></image>
<image src='/images/canvas_button_go_click.png' style='width:{
{
size.h/4.4}}rpx;position:absolute;left:41%;top:38%;margin-top:-11rpx;z-index:9999;display:{
{
block2}}' mode='widthFix'></image>
<image bindtap="reset" src='/images/canvas_button_reset_unclick.png' style='width:{
{
size.h/4.4}}rpx;left:41%;top:38%;position: absolute;margin-top:-11rpx;z-index:9999;display:{
{
block3}}' mode='widthFix'></image>
<image src='/images/canvas_button_reset_click.png' style='width:{
{
size.h/4.4}}rpx;position:absolute;left:41%;top:38%;margin-top:-11rpx;z-index:9999;display:{
{
block4}}' mode='widthFix'></image>
And then in JS The definition of component attributes is implemented in the file. The attribute list of the component is used for component custom settings External properties of components , This can be achieved when calling components , The style has changed , Length and width , Color , Even the turning probability of the turntable .
properties: {
myProperty: {
// Property name myProperty2: String, A simplified way to define
type: String, // type ( Required ), The current types of acceptance include :String, Number, Boolean, Object, Array, null( Represents any type of )
value: '', // Property default Initial value ( Optional ), If it is not specified, it will select one... According to the type
observer: function (newVal, oldVal, changedPath) {
// The function executed when the property is changed ( Optional ), It can also be written in methods The method name string defined in the section , Such as :'_propertyChange'
// Usually newVal Is the newly set data , oldVal It's old data
}
},
probability: {
type: Boolean, // Probability switch , Default random false
value: false
},
musicflg: {
type: Boolean, // Turntable sound switch , Default true
value: true
},
fastJuedin: {
type: Boolean, // The switch that turns the turntable quickly , Default false
value: false
},
repeat: {
type: Boolean, // Repeat the extraction switch , Default false
value: false
},
size: {
type: Object, // Turntable size , Width height unit rpx
value: {
w: 659, // Note that width is smaller than height 1rpx
h: 660
}
},
zhuanpanArr: {
// Turntable options that can be switched , Support multiple
type: Array,
value: [
{
id: 0,
option: ' Title name of the turntable ',
awards: [
{
id: 0,
name: " most 17 An option ", // Option name
color: 'red', // Background color of options
probability: 0 // probability
},
{
id: 1,
name: " Options can be filled in at most 13 word ", // exceed 9 The font will become smaller when you write two words
color: 'green',
probability: 0
}
],
}
]
},
// Limit : most 17 An option , A single option can be filled in at most 10-13 A word , The maximum number of option names 21 A word
awardsConfig: {
// Default current turntable options
type: Object,
value: {
option: ' My little decision ?',
awards: [
{
id: 0,
name: " most 17 An option ",
color: 'red',
probability: 0
},
{
id: 1,
name: " Options can be filled in at most 13 word ",
color: 'green',
probability: 0
}
],
}
}
},
Define the turntable animation :
data: {
id: '',
animationData: {
}, // Turntable animation
zhuanflg: false, // Whether the rotary table can click the switch flag
fastTime: 7600, // The time when the turntable rotates rapidly
slowTime: 3900, // The time when the turntable rotates slowly
block1: 'block', // The picture flag in the center of the turntable , Used to show hidden
block2: 'none',
block3: 'none',
block4: 'none',
},
Then use the component life cycle , Pay attention to Create What cannot be used in the life cycle setDate,
Then, carry out various definitions and settings of the turntable , The button in the middle of the turntable starts to rotate , After the rotation is completed, return the data , Rotate reset , Then the position of the turntable changes randomly .
4.4 Use customized turntable components
The above is for customized components , Just for the following use . First , On the page where the component is to be referenced json In file , write :
{
"usingComponents": {
"zhuanpan":"/components/zhuanpan/zhuanpan" // Directory of your custom components
}
}
And then it's in WXML The interface references these components , The data that must be used in the reference process is size,myData,myAwars,startZhuan,zhuanpanArr,awardsConfig, With these, you can define the data on the turntable , How much data of the turntable , Rewriting of events after the turntable turns , The event occurs after the turntable stops .
<!--index.wxml-->
<view >
<view class="title">
What are you going to eat today ?
</view>
<view class="title"> I'll tell you .....</view>
<!-- Refer to the component ↓↓↓ -->
<zhuanpan id='zhuanpan' bind:myData='getData' bind:myAwards="getAwards" bind:startZhuan="startZhuan" size='{
{size}}' musicflg='{
{musicflg}}' fastJuedin='{
{fastJuedin}}' repeat='{
{repeat}}' zhuanpanArr='{
{xiaojuedingArr}}' awardsConfig='{
{awardsConfig}}'></zhuanpan>
<!-- Refer to the component ↑↑↑ -->
<view class="title">{
{s_awards}}</view>
<view class="liebiao"> Catering list :
<text>\n{
{liebiao}}</text>
</view>
</view>
Write the data of the turntable ,
data: {
size:{
// The size of the turntable can be configured
w:599,
h:600
},// Turntable size ,
musicflg: true, // voice
fastJuedin: false,// Make a quick decision
repeat: false,// Do not repeat extraction
probability: false,// probability
s_awards: '?',// result
option: ' title ',
id:'?',
liebiao:'',
// Total data of turntable , If you want to add more than one, you can add a piece of data with the same format to this array
xiaojuedingArr: [
{
id: 0,
option: '',// Title name of the turntable
awards: [
{
id: 0, // id Increasing
name: " Food match 1", // Option name exceed 9 The font will become smaller when you write two words Greater than 13 The number will hide the excess
color: '#FFA827', // Background color of options
probability: 10 // probability 0 The representative will never turn to this option , The larger the number, the greater the probability ,data Medium probability Property is set to true Only when it comes into effect , This attribute must also be filled , If you don't fill in, you will make an error
},
{
id: 1,
name: " Food match 2",
color: '#AA47BC',
probability: 10
},
{
id: 2,
name: " Food match 3",
color: '#42A5F6',
probability: 10
}
],
Then there is the writing and calling of events .
Receive the data from the initialization of the turntable ,
getData(e) {
this.setData({
option: e.detail.option
})
},
Receive the answer option after the end of the current turntable , For a data transmission after the completion of the turntable , Show the list of the table and table you choose .
getAwards(e) {
this.setData({
liebiao:lie[e.detail.id],
s_awards: e.detail.end ? "?" : e.detail.s_awards,
// id:e.detail.id,
})
},
At the beginning or end of rotation , The occurrence of the incident .( There are some codes used in the experiment , Was noted out )
startZhuan(e) {
// if(f == 0){
// a = Math.floor(Math.random()*7)
// console.log(a)
// f = 1
// }else{
// f = 0
// }
this.setData({
zhuanflg: e.detail ? true : false
})
},
Event to reset the turntable , An event called when using the reset turntable occurs , Switch the turntable , Reset the order of the turntable .
switchZhuanpan(e) {
// Switch the turntable only when the turntable stops
if (!this.data.zhuanflg) {
var idx = e.currentTarget.dataset.idx, zhuanpanArr = this.data.zhuanpanArr, obj = {
};
for (let i in zhuanpanArr) {
if (this.data.option != zhuanpanArr[i].option && zhuanpanArr[i].id == idx) {
obj.option = zhuanpanArr[i].option;
obj.awards = zhuanpanArr[i].awards;
this.setData({
awardsConfig: obj // In fact, by default, if you want to change the data of the current turntable, you need to transfer this object , It works
})
break;
}
}
}
},
Another important thing is , For instantiation of component objects , Without instantiation, the use of component objects cannot be realized , So I instantiate this component object , Write directly into OnLoad In the life cycle , This enables the instantiation of component objects in the process of applet loading
onLoad: function () {
// Instantiate component objects , In this way, the methods in the component can be called when necessary
this.zhuanpan = this.selectComponent("#zhuanpan");
}
4.5 The method of displaying the randomly selected catering list
The method used is a relatively simple way to use the data written in the component id Return , This function was not written at the beginning , In the previous custom component , So I added this later id Return , Data transferred by the turntable , Return the id. Below r This is the return id, Before using random numbers , Produced , Returned the result , But not back id, Lead to later use id Can't call , So I added a id Return .
that.setData({
animationData: {
},
s_awards: awardsConfig.awards[r].name,// The final selected result
awardsConfig: awardsConfig,
id:r,
block1: 'none',
block2: 'none',
block3: 'block',
zhuanflg: false,
})
Then through the return id, To call the catering retrieved from the global data ,
// Receive the answer option after the end of the current turntable
getAwards(e) {
this.setData({
liebiao:lie[e.detail.id],// Call up the list of catering
s_awards: e.detail.end ? "?" : e.detail.s_awards,
// id:e.detail.id,
})
},
5、 Overall appearance design
5.1 Design of turntable
This part wxml The key codes are as follows
<view animation="{
{animationData}}" class="gb-wheel-content" style='width:{
{
size.w}}rpx;height:{
{
size.h}}rpx;'>
<!-- Fan colored background When the option length is equal to 2 perhaps 3 Special treatment was made during -->
<view class="canvas-list">
<view class="canvas-item2" wx:for="{
{awardsConfig.awards}}" wx:key="key" style="transform: rotate({
{
item.item2Deg}});background-color:{
{
awardsConfig.awards.length==2?item.color:''}};opacity:{
{
awardsConfig.awards.length==2?item.opacity:awardsConfig.awards.length==3?item.opacity:''}};width:{
{
size.h}}rpx;height:{
{
size.h/2-2}}rpx;transform-origin:{
{
size.h/2}}rpx {
{
size.h/2}}rpx">
<view class="canvas-item2-after" style="transform: rotate({
{
item.afterDeg}});background-color:{
{
item.color}};opacity:{
{
awardsConfig.awards.length==3?'':item.opacity}};width:{
{
size.h/2}}rpx;height:{
{
size.h/2}}rpx;transform-origin: {
{
size.h/2}}rpx {
{
size.h/2}}rpx"></view>
<view wx:if='{
{awardsConfig.awards.length==3}}' class="canvas-item2-after" style="background-color:{
{
item.color}};width:{
{
size.h/2}}rpx;height:{
{
size.h/2}}rpx;transform-origin: {
{
size.h/2}}rpx {
{
size.h/2}}rpx"></view>
</view>
</view>
Here is the fan-shaped design of the turntable , Can pass JS File changes .
awards: [
{
id: 0, // id Increasing
name: " Food match 1", // Option name exceed 9 The font will become smaller when you write two words Greater than 13 The number will hide the excess
color: '#FFA827', // Background color of options
probability: 10 、
},
In this way, the implementation effect of this part is shown in the following figure :
5.2 Middle button design
This part wxml The key codes are as follows
<!-- The button in the middle of the turntable -->
<image bindtap="_zhuan" src='/images/canvas_button_go_unclick.png' style='width:{
{
size.h/4.4}}rpx;position:absolute;left:41%;top:38%;margin-top:-11rpx;z-index:9999;display:{
{
block1}}' mode='widthFix'></image>
<image src='/images/canvas_button_go_click.png' style='width:{
{
size.h/4.4}}rpx;position:absolute;left:41%;top:38%;margin-top:-11rpx;z-index:9999;display:{
{
block2}}' mode='widthFix'></image>
<image bindtap="reset" src='/images/canvas_button_reset_unclick.png' style='width:{
{
size.h/4.4}}rpx;left:41%;top:38%;position: absolute;margin-top:-11rpx;z-index:9999;display:{
{
block3}}' mode='widthFix'></image>
<image src='/images/canvas_button_reset_click.png' style='width:{
{
size.h/4.4}}rpx;position:absolute;left:41%;top:38%;margin-top:-11rpx;z-index:9999;display:{
{
block4}}' mode='widthFix'></image>
The icon is obtained from Alibaba vector icon library .
The effect is as follows .
6、 Verification effect
Click on “GO”, The turntable began to turn .
Select ,? Become a catering table , And the food came out .
Click Reset button , The sequence is reset .
边栏推荐
- [how to disable El table]
- Understanding of smt32h7 series DMA and DMAMUX
- Develop and implement movie recommendation applet based on wechat cloud
- How to use sqlcipher tool to decrypt encrypted database under Windows system
- 揭秘百度智能测试在测试自动执行领域实践
- Getting started with Apache dolphin scheduler (one article is enough)
- 如何获取GC(垃圾回收器)的STW(暂停)时间?
- Lepton 无损压缩原理及性能分析
- 剪掉ImageNet 20%数据量,模型性能不下降!Meta斯坦福等提出新方法,用知识蒸馏给数据集瘦身...
- [object array A and object array B take out different elements of ID and assign them to the new array]
猜你喜欢
Observation cloud and tdengine have reached in-depth cooperation to optimize the cloud experience of enterprises
分布式数据库下子查询和 Join 等复杂 SQL 如何实现?
Project practice | excel export function
TDengine × Intel edge insight software package accelerates the digital transformation of traditional industries
Unity skframework framework (XXIII), minimap small map tool
Why do offline stores need cashier software?
Unity skframework framework (24), avatar controller third person control
【C语言】动态内存开辟的使用『malloc』
Solve liquibase – waiting for changelog lock Cause database deadlock
What should we pay attention to when developing B2C websites?
随机推荐
From "chemist" to developer, from Oracle to tdengine, two important choices in my life
盗版DALL·E成梗图之王?日产5万张图像,挤爆抱抱脸服务器,OpenAI勒令改名
.Net之延迟队列
[listening for an attribute in the array]
The popularity of B2B2C continues to rise. What are the benefits of enterprises doing multi-user mall system?
mysql安装配置以及创建数据库和表
oracle 多行数据合并成一行数据
Mobile heterogeneous computing technology GPU OpenCL programming (Advanced)
Roll up, break through 35 year old anxiety, and animate the CPU to record the function call process
Small program startup performance optimization practice
TDengine 连接器上线 Google Data Studio 应用商店
First understanding of structure
【sourceTree配置SSH及使用】
Oracle combines multiple rows of data into one row of data
[JS sort according to the attributes in the object array]
Unity SKFramework框架(二十三)、MiniMap 小地图工具
正式上架!TDengine 插件入驻 Grafana 官网
解决Navicat激活、注册时候出现No All Pattern Found的问题
Tutorial on building a framework for middle office business system
Flutter development: a way to solve the problem of blank space on the top of listview