当前位置：网站首页>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 .
边栏推荐
- 正式上架！TDengine 插件入驻 Grafana 官网
- Resolve the horizontal (vertical) sliding conflict between viewpager and WebView
- 观测云与 TDengine 达成深度合作，优化企业上云体验
- Understand the window query function of tdengine in one article
- Why does everyone want to do e-commerce? How much do you know about the advantages of online shopping malls?
- Officially launched! Tdengine plug-in enters the official website of grafana
- Cross process communication Aidl
- Are databases more popular as they get older?
- Unity skframework framework (XXIII), minimap small map tool
- TDengine 连接器上线 Google Data Studio 应用商店
猜你喜欢
![[listening for an attribute in the array]](/img/1f/96eb85ee0af83d601918bcd04e405e.png)
[listening for an attribute in the array]
90%的人都不懂的泛型，泛型的缺陷和应用场景
Baidu app's continuous integration practice based on pipeline as code
Go 语言使用 MySQL 的常见故障分析和应对方法
Understanding of smt32h7 series DMA and DMAMUX
让AI替企业做复杂决策真的靠谱吗？参与直播，斯坦福博士来分享他的选择｜量子位·视点...
【数组的中的某个属性的监听】
A keepalived high availability accident made me learn it again
Unity SKFramework框架（二十二）、Runtime Console 运行时调试工具
What are the advantages of the live teaching system to improve learning quickly?
随机推荐
How to choose the right chain management software?
Unity SKFramework框架（二十二）、Runtime Console 运行时调试工具
Flutter development: a way to solve the problem of blank space on the top of listview
为什么不建议你用 MongoDB 这类产品替代时序数据库？
TDengine可通过数据同步工具 DataX读写
SQL learning alter add new field
[sourcetree configure SSH and use]
Optimize database queries using the cursor object of SQLite
如何正确的评测视频画质
Go 语言使用 MySQL 的常见故障分析和应对方法
The comparison of every() and some() in JS uses a power storage plan
TDengine ×英特尔边缘洞见软件包 加速传统行业的数字化转型
[team PK competition] the task of this week has been opened | question answering challenge to consolidate the knowledge of commodity details
90%的人都不懂的泛型，泛型的缺陷和应用场景
Uncover the practice of Baidu intelligent testing in the field of automatic test execution
Deep understanding of C language pointer
7 月 2 日邀你来TD Hero 线上发布会
Tdengine can read and write through dataX, a data synchronization tool
From "chemist" to developer, from Oracle to tdengine, two important choices in my life
Community group buying has triggered heated discussion. How does this model work?