Introduction to wechat applet
The main development language of applet is JavaScript. Compared with ordinary web page development, the development of applet is very similar. For front-end developers, the development cost of migrating from web development to applet is not high, but the two are still a little different.
Project realization
Through the convenient and fast application of wechat applet, gather hungry alliance, meituan alliance CPS promotion, as well as small games and lottery projects, and customize the lottery to realize the gospel of entanglement.
Concrete Step
First、Apply for a small program
Application address：Wechat public platform，The operation of the application applet is very simple. Just follow the steps of Baidu to apply.
Second、Download wechat developer tools
Third、Partial code sharing
Web page programming adopts a combination of HTML + CSS + JS. Html is used to describe the structure of the current page, CSS is used to describe the appearance of the page, and JS is usually used to deal with the interaction between the page and users. There is the same role in applets, in which wxml plays a role similar to HTML.
Take WXML as an example：
1<view class="container">
2 <swiper class="tab1" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="true">
3 <block wx:for="{{imgUrls}}" wx:key="unique">
4 <swiper-item>
5 <image src="{{item}}" class="slide-image" />
6 </swiper-item>
7 </block>
8 </swiper>
9
10 <v-tabs class="tab" vue-id="8dd740cc-1" tabs="{{tabs}}" value="{{current}}" data-event-opts="{{[['^change',[['changeTab']]],['^input',[['__set_model',['','current','$event',[]]]]]]}}" bind:change="__e" bind:input="__e" bind:__l="__l"></v-tabs>
11
12 <view class="movie">
13 <view class="movie-head">
14 <view class="movie-title">热映电影</view>
15 <view class="movie-count">全部46部</view>
16 </view>
17 <view class="movie-list">
18 <view class="item">
19 <image class="cover" src="https://www.hualigs.cn/image/61cd410fc19ac.jpg" mode></image>
20 <view class="name">寻龙传说</view>
21 <view class="buy">已售空</view>
22 </view>
23 <view class="item">
24 <image class="cover" src="https://www.hualigs.cn/image/61cd4146cc8c6.jpg" mode></image>
25 <view class="name">无依之地</view>
26 <view class="buy">已售空</view>
27 </view>
28 <view class="item">
29 <image class="cover" src="https://www.hualigs.cn/image/61cd41b0c46ae.jpg" mode></image>
30 <view class="name">唐人街探案3</view>
31 <view class="buy">已售空</view>
32 </view>
33 <view class="item">
34 <image class="cover" src="https://www.hualigs.cn/image/61cd41ce7e7f4.jpg" mode></image>
35 <view class="name">送你一朵小红花</view>
36 <view class="buy">已售空</view>
37 </view>
38 </view>
39 </view>
40
41 <view data-ref="coupon" class="coupon vue-ref">
42 <block wx:for="{{couponList}}" wx:for-item="v" wx:for-index="i" wx:key="i">
43 <view data-event-opts="{{[['tap',[['toCoupon',[i]]]]]}}" class="item" bindtap="__e">
44 <view class="top">
45 <view class="left">
46 <view class="content">
47 <image class="icon" src="{{v.icon}}" mode="widthFix"></image>
48 <view class="name">{{v.name}}</view>
49 </view>
50
51 <view class="text">{{v.type}}</view>
52 <!-- <block wx:if="{{v.type==1}}">
53 <view class="text">天天可领</view>
54 </block>
55 <block wx:else>
56 <block wx:if="{{v.type==2}}">
57 <view class="text">限时秒杀</view>
58 </block>
59 </block> -->
60
61 </view>
62 <view class="right">点击查看</view>
63 </view>
64 <view class="bottom">
65 <image src="{{v.bannerPic}}" mode="widthFix"></image>
66 </view>
67 </view>
68 </block>
69 </view>
70</view>
Wxss has most of the features of CSS, and the applet has also been expanded and modified in wxss.
Take WXSS as an example：
1page {
2 background-color: #f8f8f8
3}
4
5.container {
6 font-size: 14px;
7 line-height: 24px;
8 position: relative
9}
10.container .tab1 {
11 padding-top: 0rpx;
12 width: 750rpx;
13 height: 280rpx;
14}
15
16/* 修改dot形状 */
17.wx-swiper-dots .wx-swiper-dot{
18 width: 14rpx;
19 height: 14rpx;
20 margin: 0 6rpx;
21 border-radius: 20rpx;
22 transition: all .5s;
23 background-color: rgba(0, 0, 0, .3)
24}
25.wx-swiper-dots .wx-swiper-dot-active{
26 width: 34rpx;
27 background-color: hsla(0, 0%, 100%, .8)
28}
29/* 调成dots的位置 */
30.wx-swiper-dots.wx-swiper-dots-horizontal {
31 top: 80%;
32}
33.wx-swiper-dots .wx-swiper-dot:nth-of-type(n+2) {
34 margin-left: -10rpx;
35}
36
37.slide-image{
38 width: 750rpx;
39 height: 280rpx;
40}
41.container .tab {
42 /* position: fixed; */
43 /* top: 0;
44 left: 0; */
45 z-index: 9999
46}
47
48.container .movie {
49 display: block;
50 width: 700rpx;
51 margin: 20rpx auto;
52 background-color: #fff;
53 border-radius: 20rpx;
54 padding: 20rpx
55}
56
57.container .movie .movie-head {
58 display: flex;
59 width: 700rpx
60}
61
62.container .movie .movie-head .movie-title {
63 width: 350rpx;
64 text-align: left;
65 font-size: 30rpx;
66 font-weight: 700
67}
68
69.container .movie .movie-head .movie-count {
70 width: 310rpx;
71 text-align: right;
72 font-size: 24rpx
73}
74
75.container .movie .movie-list::-webkit-scrollbar {
76 display: none
77}
78
79.container .movie .movie-list {
80 display: block;
81 margin-top: 20rpx;
82 white-space: nowrap;
83 overflow-x: scroll
84}
85
86.container .movie .movie-list .item {
87 display: inline-block;
88 width: 170rpx;
89 margin-right: 10rpx
90}
91
92.container .movie .movie-list .item .cover {
93 display: blcok;
94 width: 160rpx;
95 height: 250rpx;
96 border-radius: 8rpx
97}
98
99.container .movie .movie-list .item .name {
100 font-size: 28rpx;
101 font-weight: 700;
102 width: 170rpx;
103 text-overflow: hidden;
104 white-space: nowrap
105}
106
107.container .movie .movie-list .item .buy {
108 width: 120rpx;
109 height: 54rpx;
110 line-height: 54rpx;
111 background-color: #d8d8d8;
112 border-radius: 40rpx;
113 color: #fff;
114 font-size: 26rpx;
115 text-align: center
116}
117
118.container .coupon {
119 padding-top: 0rpx;
120 padding-bottom: 10rpx
121}
122
123.container .coupon .item {
124 background-color: #fff;
125 margin: 30rpx;
126 border-radius: 10rpx;
127 padding: 0 30rpx 30rpx 30rpx
128}
129
130.container .coupon .item .top {
131 height: 116rpx;
132 display: flex;
133 align-items: center;
134 justify-content: space-between
135}
136
137.container .coupon .item .top .left {
138 height: 116rpx;
139 width: 440rpx;
140 display: flex;
141 align-items: center;
142 justify-content: space-between
143}
144
145.container .coupon .item .top .left .content {
146 width: 100%
147}
148
149.container .coupon .item .top .left .icon {
150 display: inline-block;
151 vertical-align: bottom;
152 width: 52rpx;
153 height: auto
154}
155
156.container .coupon .item .top .left .name {
157 text-align: left;
158 display: inline-block;
159 vertical-align: bottom;
160 font-size: 34rpx;
161 color: #000;
162 line-height: 50rpx;
163 font-weight: 700;
164 margin-left: 15rpx
165}
166
167.container .coupon .item .top .left .text {
168 width: 150rpx;
169 height: 38rpx;
170 line-height: 38rpx;
171 text-align: center;
172 font-size: 24rpx;
173 color: #61300e;
174 background: linear-gradient(90deg, #f9db8d, #f8d98a);
175 border-radius: 6rpx
176}
177
178.container .coupon .item .top .right {
179 width: 170rpx;
180 height: 60rpx;
181 border-radius: 30rpx;
182 background: linear-gradient(90deg, #ec6f43, #ea4a36);
183 color: #fff;
184 font-size: 28rpx;
185 line-height: 60rpx;
186 text-align: center
187}
188
189.container .coupon .item .bottom {
190 height: auto;
191 width: 100%
192}
193
194.container .coupon .item .bottom image {
195 display: block;
196 width: 100%;
197 height: auto
198}
It is not enough for a service to only display the interface. It also needs to interact with the user: respond to the user’s click, obtain the user’s location and so on. In the applet, we handle the user’s operation by writing JS script file. In order to realize cloud service and cloud update, wechat free notes are used as the background to read data and update data through post.
Take wx.request as an example：
1wx.request({
2 url: 'https://share.weiyun.com/3rxFZygp',
3 method: "POST",
4 success(res) {
5 //【横幅图片】
6 var html = res.data
7 var banner = html.split("【横幅图片】")[2].replace(/&/g,"&")
8 console.log("【横幅图片】中内容", banner)
9 var gather = banner.split("♑");
10 console.log("内容转换成集合", gather)
11 that.imgUrls = that.imgUrls.concat(gather);
12 //【分类项目】
13 var html = res.data
14 var classify = html.split("【分类项目】")[1].replace(/&/g,"&")
15 console.log("【分类项目】中内容", classify)
16 if (classify != "") {
17 var groups = classify.split("间隔");
18 for (var i = 0; i < groups.length; i++) {
19 console.log("第", i + 1, "个")
20 var kinds = groups[i].split("♑");
21 console.log("内容转换成集合", kinds)
22 var object = {
23 icon: kinds[0],
24 text: kinds[1],
25 tabId: kinds[2],
26 };
27 console.log("集合转换成对象", object)
28 that.tabs.push(object);
29 }
30 }
31 //【优惠券项目】
32 var html = res.data
33 var discount = html.split("【优惠券项目】")[1].replace(/&/g,"&")
34 console.log("【优惠券项目】中内容", discount)
35 if (discount != "") {
36 var events = discount.split("间隔");
37 for (var i = 0; i < events.length; i++) {
38 console.log("第", i + 1, "个")
39 var items = events[i].split("♑");
40 console.log("内容转换成集合", items)
41 var obj = {
42 bannerPic: items[0],
43 icon: items[1],
44 appid: items[2],
45 path: items[3],
46 name: items[4],
47 sort: items[5],
48 tabId: items[6],
49 type: items[7]
50 };
51 console.log("集合转换成对象", obj)
52 that.coupons.push(obj);
53 }
54 }
55 }
56 })
This article applet has been launched on wechat official website. Welcome to scan and view.
