微信小程序

微信小程序简介

小程序的主要开发语言是 JavaScript ，小程序的开发同普通的网页开发相比有很大的相似性。对于前端开发者而言，从网页开发迁移到小程序的开发成本并不高，但是二者还是有些许区别的。

项目实现

通过微信小程序的便捷型快应用方式，聚合饿了吗联盟，美团联盟CPS推广，以及小游戏、抽签项目，抽签自定义，实现纠结症福音。

具体步骤

一、申请一个小程序

申请地址：微信公众平台，申请小程序的操作很简单，大家百度一下跟着步骤申请就行。

二、下载微信开发者工具

三、部分代码分享

网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色。

以 WXML 为例：

 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 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。

以 WXSS 为例：

  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}

一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。为了实现云服务，云更新，应用微云免费笔记作为后台，通过post方式，读取数据，实现数据更新。

以 wx.request 为例：

 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(/&amp;/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(/&amp;/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(/&amp;/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            })

本文小程序已上线微信官方，欢迎扫描查看。

萌吃嗨喝

微信小程序