1000个微信小程序源码分享

2023.07.14 | admin | 132次围观

文章目录

现在的微信小程序非常火爆，网上也有很多学习资源，但是源码资源还是很少的。其实在学习开发微信小程序的时候如果有源码可以供我们借鉴，学习效率也会成倍的增加。

无论是前端开发，还是后端开发，时间长了，你总会能总结出它的一些规律的，对于前端开发主要就两条，页面展现，逻辑处理。如果是全流程开发的话，那就是，如何创建项目，页面如何实现，数据获取和逻辑处理如何实现，如何打包上线。移动端或者前端，基本开发流程就这个四个步骤。所以在在前端方面去学习新一门开发技术，只要你解决了这四个问题，那一切就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="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;
    }
}

程序展示

版权声明

本文仅代表作者观点。
本文系作者授权发表，未经许可，不得转载。

标签: 源码微信小程序源码分享微信分享 php源码

1000个微信小程序源码分享

版权声明

发表评论

作者其它文章

微机控制与接口技术形成性考核册答案

手机百度浏览器如何翻译网页？

如何重置小米摄像头（如何重置小米摄像头云台版）

热门文章

随机文章

最近发表

标签列表

1000个微信小程序源码分享

版权声明

相关阅读

发表评论

作者其它文章

微机控制与接口技术形成性考核册答案

手机百度浏览器如何翻译网页？

如何重置小米摄像头（如何重置小米摄像头云台版）

热门文章

随机文章

最近发表

标签列表