文章目录

微信小程序

现在微信小程序很流行，网上的学习资源也很多，但是源码资源还是很少。 其实，在学习开发微信小程序时，如果有源码可供我们学习，学习效率也会成倍提升。

无论是前端开发还是后端开发，时间长了，你总能总结出它的一些规律。 对于前端开发来说，主要有两个，页面展示、逻辑处理。 如果是全流程开发，即如何创建项目、如何实现页面、如何实现数据获取和逻辑处理、如何打包上线。 无论是移动端还是前端，基本的开发流程都是由这四个步骤组成。 所以在学习前端新的开发技术时，只要解决了这四个问题，就万事大吉了。

通过查看这些微信小程序的源码，可以了解如何控制页面跳转，如何注册页面，以及页面设计、js中的数据绑定等，很多都是有背景的，可以直接配合一起学习前端和后端。

后台语言包括Java和PHP。

源代码获取

只有部分源码包含背景，而且很多只是微信小程序的风格供我们查看。

微信搜索公众号“开小白学习编程”，回复微信小程序即可获取

种类很多，比如天气预报小程序、购物小程序、外卖小程序等。

因为很大，好几个G，网盘连接不会被释放。

你可以联系我的邮箱

或者到我博客的问答社区留言（我会收到消息通知）我的博客

发展

首先介绍一下如何开发微信小程序。

注册账户

进入微信公众平台，点击立即注册，选择微信小程序

注册成功后，登录小程序后台哪有微信小程序开发教程，修改小程序的服务类别、头像等。

上图为配置访问域名。 如果您不使用云开发，而是使用自己的服务器进行开发，则需要配置安全域名来发布访问。 域名必须是可访问的。

小程序部分源码展示

抽奖小程序部分页面

<view class="wrapper"> <view class="header"> <text class="header-title"> 大转盘抽奖 </text> <text class="header-subtitle"> 感恩节活动大抽奖，反馈广大客户 </text> </view> <view class="main"> <view class="canvas-container"> <view animation="{{animationData}}" class="canvas-content" > <canvas style="width: 300px; height: 300px;" class="canvas-element" canvas-id="lotteryCanvas"></canvas> <view class="canvas-line"> <view class="canvas-litem" wx:for="{{awardsList}}" wx:key="unique" style="-webkit-transform: rotate({{item.lineTurn}});transform: rotate({{item.lineTurn}})"></view> </view> <view class="canvas-list"> <view class="canvas-item" wx:for="{{awardsList}}" wx:key="unique"> <view class="canvas-item-text" style="-webkit-transform: rotate({{item.turn}});transform: rotate({{item.turn}})">{{item.award}}</view> </view> </view> </view> <view bindtap="getLottery" class="canvas-btn {{btnDisabled}}">抽奖</view> </view> <view class="main-container"> <view class="main-container-btn"> <button bindtap="gotoList" type="primary">查看中奖</button> </view> <view class="main-container-rule"> <text class="main-rule-title">活动规则：</text> <text class="main-rule-item">1. xxxxxxxxxxx</text> <text class="main-rule-item">2. xxxxxxxxxxx</text> <text class="main-rule-item">3. xxxxxxxxxxx</text> <text class="main-rule-item">4. xxxxxxxxxxx</text> <text class="main-rule-item">5. xxxxxxxxxxx</text> </view> </view> </view> </view>

以下是类似外卖购物平台首页的代码

<!--pages/index/index.wxml--> <view class="container"> <!-- 首页导航 --> <view class="myswiper"> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrls}}" wx:key="index"> <swiper-item> <image src="{{item}}" class="slide-image" /> </swiper-item> </block> </swiper> </view> <!-- 分类导航信息 --> <view class="components"> <block wx:for="{{components}}" wx:key="index"> <view class="functions" bindtap="changeTo" data-where="{{item.where}}"> <view class="functionImage"> <image src="{{item.image}}" /> </view> <text>{{item.function}}</text> </view> </block> </view> <!-- scroll-view嵌套swiper实现上下栏轮播 --> <scroll-view scroll-y-="true" > <view class="headlines"> <image src="{{headlinesImg}}" class="headlines-img" /> <view class="headlines-text"> <swiper autoplay="{{autoplay}}" interval="{{interval1}}" duration="{{duration}}" vertical="true"> <block wx:for="{{headLines}}" wx:key="index"> <swiper-item class="headLines-items"> <view class="headlines-text-items"> <view class="headlines-text-hd"> <text>{{item.head}}</text> </view> <view class="headlines-text-bd"> <text class="">{{item.body}}</text> </view> <image class="headlines-text-ft" src="{{item.img}}"></image> </view> </swiper-item> </block> </swiper> </view> </view> </scroll-view> <view class="todayTrump"> <image src="../../assets/icons/wangpai.png"/> <text>今日王牌大赏</text> <navigator class="todayTrump-right" url= "../class/myFruits/myFruits"> <text>更多</text> <image src="../../assets/icons/right.png"/> </navigator> </view> <!-- // --> <!-- 王牌产品列表 --> <view class="myTrump"> <scroll-view scroll-x-="true" class="content"> <block wx:for="{{classifyList}}" wx:key="index"> <view class="someTrumps"> <view class="trumps"> <image src="{{item.url}}" /> <view class="mes"> <text class="foodName">{{item.name}}</text> <text class="foodIntroduce">{{item.introduce}}</text> <view class="special">特价</view> <p>￥{{item.price}}</p> <view class="btn" bindtap="ordinInCart" data-id="{{item.id}}" data-stock="{{item.stock}}"> <icon type="{{item.selected ? 'success' : 'circle'}}" color="#23a3ff" size="30"></icon> </view> </view> </view> </view> </block> </scroll-view> </view> <!-- </view> --> <view class="GoodsLabel"> 新品上架 </view> <!-- 新产品列表 --> <view class="newGoods"> <block wx:for="{{newGoods}}" wx:key="index"> <navigator class="goods" url= "../class/myFruits/myFruits"> <view class="goodsImage"> <image src="{{item.image}}" /> </view> <text class="goods-price">￥{{item.price}}</text> <text class="goods-introduce">{{item.introduce}}</text> </navigator> </block> </view> <view class="GoodsLabel"> 经典系列 </view> <!-- 经典产品列表 --> <view class="newGoods"> <block wx:for="{{classicGoods}}" wx:key="index"> <navigator class="goods" url= "../class/myMeat/myMeat"> <view class="goodsImage"> <image src="{{item.image}}" /> </view> <text class="goods-price">￥{{item.price}}</text> <text class="goods-introduce">{{item.introduce}}</text> </navigator> </block> </view> </view>

Java后台的天气小程序，

package com.leadingsoft.liuw.controller; import lombok.extern.slf4j.Slf4j; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RestController; import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.InputStream; import java.io.InputStreamReader; import java.net.HttpURLConnection; import java.net.URL; /** * Created by liuw on 2017/4/19. */ @Slf4j @RestController @RequestMapping("/w/weather") public class WeatherController { @RequestMapping(method = RequestMethod.GET) public String get(){ String result = ""; try { URL url = new URL("http://api.openweathermap.org/data/2.5/weather?q=Dalian&appid=dafef1a9be486b5015eb92330a0add7d"); HttpURLConnection connection = (HttpURLConnection)url.openConnection(); connection.setDoInput(true); connection.setDoOutput(true); connection.setRequestMethod("GET"); connection.setUseCaches(false); connection.setInstanceFollowRedirects(true); connection.connect(); InputStream in = connection.getInputStream(); BufferedReader read = new BufferedReader(new InputStreamReader(in, "UTF-8")); String line=""; int i=0; while ( (line=read.readLine())!= null ) { result += line; i++; } // 断开连接 read.close(); in.close(); connection.disconnect(); } catch (Exception e) { WeatherController.log.error("取得天气数据失败", e); } return result; } }

节目显示