微信小程序

现在的微信小程序非常火爆，网上也有很多学习资源，但是源码资源还是很少的。其实在学习开发微信小程序的时候如果有源码可以供我们借鉴，学习效率也会成倍的增加。
无论是前端开发，还是后端开发，时间长了，你总会能总结出它的一些规律的，对于前端开发主要就两条，页面展现，逻辑处理。如果是全流程开发的话，那就是，如何创建项目，页面如何实现，数据获取和逻辑处理如何实现，如何打包上线。移动端或者前端，基本开发流程就这个四个步骤。所以在在前端方面去学习新一门开发技术，只要你解决了这四个问题，那一切就OK了。
通过查看这些微信小程序的源码就可以学校到如何控制页面的跳转，如何注册页面，以及页面的设计，js内数据的绑定之类，其中有不少小程序还有后台，可以直接搭配着前端后台一起学习。
后台语言有Java也有php。

源代码获取

源代码，只有一部分含有后台，也有很多是只有微信小程序样式可以供我们查看。
微信搜索公众号 “凯小白学编程” 回复微信小程序即可获得
类型有很多，像是天气预报小程序，购物小程序，外卖小程序等等
因为很大，好几个G，网盘连接就不放出来了。
可以联系我的邮箱liukai@bbbca.cn
或者去我的博客的问答社区留言（我会接到留言通知）我的博客

开发

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

账号注册

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

注册成功之后登录小程序后台，修改小程序的服务类目啊头像啊之类的。
上面的图为配置访问域名，如果不使用云开发而是使用自己的服务器进行开发，则需要配置上安全域名才能发布访问，域名一定要可以https访问。

小程序部分源码展示

一个抽奖小程序部分页面

<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="content"> --><!-- 王牌产品列表 --><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后台，controller

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;}
}

程序展示

1000个微信小程序源码分享相关推荐

【源码分享】一键打开禅意生活——电子木鱼微信小程序源码分享
为大家推荐一个在线的AI聊天:魔术AI-8080n点cn界面简洁精美,免费点开即用在快节奏的现代生活中,我们需要一种方式来减轻压力和焦虑,让我们的身心得到放松和平静.电子木鱼微信小程序是一款专门为人 ...
130个免费微信小程序源码分享
130个免费微信小程序源码分享 - AppleMusic - B站首页界面设计:附详细教程 - FlexLayout布局 - HIapp - IT-EBOOK - LOL战绩查询 - Railay: ...
【小程序源码】王者战力查询改名工具箱微信小程序源码分享下载，战力查询小程序
介绍今天分享一款战力查询小程序源码, 微端Q苹卓四端战力查询带改名工具,空白名.重复名.符号名改名小程序源码界面精美,无需服务器后台. 至于更多,就大家自行研究咯! 小编测试演示图小程序源码下 ...
1000套微信小程序源码源代码带后台带运行截图预览图学习资料网盘下载
1000多套微信小程序源码带后台+教程+不同行业的源码集合 o2o行业 | - 盒马鲜生 | - 轻客洗衣互联网行业 | - 云文档 | - 仿ofo共享单车 | - 仿美团外卖 | - 仿饿了么 ...
微信小程序源码分享合集-4
微信小程序源码源码下载微信小程序源码,包含:3C手机商城.kindle图书商城.大宅小屋拼团.球鞋商城.扫码购物.一元夺宝.喜茶店铺.京东首页.京东白条.小米商城等35个商城类源码. 关注微信公 ...
最新上班摸鱼打卡模拟器微信小程序源码分享
正文: 俗话说,摸鱼摸的好,上班没烦恼,毕竟谁能拒绝带薪拉屎呢(手动狗头),这是一个云开发职场打工人专属上班摸鱼划水微信小程序源码,没有后台,直接导入微信开发者工具即可运行,UI简约大气漂亮,只需登录 ...
微信小程序源码分享合集-5
微信小程序源码微信小程序源码,包含:豆瓣.微信.论坛.停车.房贷计算.股票.蜗牛生活.物品回收.学车预约.住房装修.斗鱼直播.水利.快拍.同城等源码. CSDN 免积分下载下载地关注微信公众号 ...
微信小程序源码分享合集-3
微信小程序源码门店店铺汤总便利小程序门店展示茶铺门店小程序拼车源码滴滴拼车同城拼车(完整带PHP后台) 企业应用企业应用兵马俑小程序企业展示房地产公司展示华云智慧园区信息科技 ...
十款入门级微信小程序源码分享之三
刷小程序是快乐的,能够撸小程序是幸福的.以下分享10个经典的小程序源码,后面几期也会相继推出其余小程序源码. 只愿你能够点个关注点个赞,后期的小程序源码会第一时间推送给你. 目录一.地图定位之滴滴作 ...

1000个微信小程序源码分享

文章目录