当前位置:网站首页>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 × Intel edge insight software package accelerates the digital transformation of traditional industries
- How to use sqlcipher tool to decrypt encrypted database under Windows system
- TDengine 离线升级流程
- Project practice | excel export function
- ThreadLocal source code learning
- [200 opencv routines] 219 Add digital watermark (blind watermark)
- 揭秘百度智能测试在测试自动执行领域实践
- Deep understanding of C language pointer
- 让AI替企业做复杂决策真的靠谱吗?参与直播,斯坦福博士来分享他的选择|量子位·视点...
- [listening for an attribute in the array]
猜你喜欢
Viewpager pageradapter notifydatasetchanged invalid problem
Community group buying exploded overnight. How should this new model of e-commerce operate?
Roll up, break 35 - year - old Anxiety, animation Demonstration CPU recording Function call Process
A keepalived high availability accident made me learn it again
【OpenCV 例程200篇】219. 添加数字水印(盲水印)
让AI替企业做复杂决策真的靠谱吗?参与直播,斯坦福博士来分享他的选择|量子位·视点...
百度交易中台之钱包系统架构浅析
How to choose the right chain management software?
Apache dolphin scheduler system architecture design
Solve liquibase – waiting for changelog lock Cause database deadlock
随机推荐
Node の MongoDB Driver
[NTIRE 2022]Residual Local Feature Network for Efficient Super-Resolution
微信小程序获取住户地区信息
How to choose the right chain management software?
LeetCode 556. Next bigger element III
What should we pay attention to when developing B2C websites?
Kotlin Compose 多个条目滚动
Deep understanding of C language pointer
cent7安装Oracle数据库报错
Cross process communication Aidl
小程序启动性能优化实践
Flutter development: use safearea
【两个对象合并成一个对象】
Go 语言使用 MySQL 的常见故障分析和应对方法
Analysis on the wallet system architecture of Baidu trading platform
Tdengine can read and write through dataX, a data synchronization tool
Principle and performance analysis of lepton lossless compression
Solve liquibase – waiting for changelog lock Cause database deadlock
The writing speed is increased by dozens of times, and the application of tdengine in tostar intelligent factory solution
让AI替企业做复杂决策真的靠谱吗?参与直播,斯坦福博士来分享他的选择|量子位·视点...