1. 全栈程序员必看首页

1000个微信小程序源码分享[通俗易懂]

全栈程序员-用户IM • • 未分类

1000个微信小程序源码分享[通俗易懂]文章目录微信小程序源代码获取开发账号注册小程序部分源码展示程序展示微信小程序现在的微信小程序非常火爆，网上也有很多学习资源，但是源码资源还是很少的。其实在学习开发微信小程序的时候如果有源码可以供我们借鉴，学习效率也会成倍的增加。无论是前端开发，还是后端开发，时间长了，你总会能总结出它的一些规律的，对于前端开发主要就两条，页面展现，逻辑处理。如果是全流程开发的话，那就是，如何创建项目，页面如何实现，数据获取和逻辑处理如何实现，如何打包上线。移动端或者前端，基本开发流程就这个四个步骤。所以在在前端方面去学

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

文章目录

微信小程序

现在的微信小程序非常火爆，网上也有很多学习资源，但是源码资源还是很少的。其实在学习开发微信小程序的时候如果有源码可以供我们借鉴，学习效率也会成倍的增加。
无论是前端开发，还是后端开发，时间长了，你总会能总结出它的一些规律的，对于前端开发主要就两条，页面展现，逻辑处理。如果是全流程开发的话，那就是，如何创建项目，页面如何实现，数据获取和逻辑处理如何实现，如何打包上线。移动端或者前端，基本开发流程就这个四个步骤。所以在在前端方面去学习新一门开发技术，只要你解决了这四个问题，那一切就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;
}
}

程序展示

在这里插入图片描述
在这里插入图片描述

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/192445.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

赞 (0)
全栈程序员-用户IM全栈程序员-用户IM
0 0
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号