如何开发微信小程序，数据获取和逻辑处理如何实现
发表时间：2023-09-08 09:34:15
文章来源：炫佑科技
浏览次数：170
菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技
如何开发微信小程序，数据获取和逻辑处理如何实现
文章目录
微信小程序
微信小程序现在很流行，网上的学习资源也很多，但是源码资源还是很少。 事实上，如果我们在学习开发微信小程序时有源码可供借鉴，学习效率将会成倍提升。
无论是前端开发还是后端开发，时间长了，你总能总结出它的一些规律。 对于前端开发来说，主要有两个，页面显示和逻辑处理。 如果是全流程开发，即如何创建项目、如何实现页面、如何实现数据获取和逻辑处理、如何打包上线。 对于移动端或者前端来说微信小程序开发软件下载，基本的开发流程就是由这四个步骤组成。 所以说在学习前端新的开发技术的时候，只要解决了这四个问题，就万事大吉了。
通过查看这些微信小程序的源码，可以了解如何控制页面跳转、如何注册页面、页面设计、js中数据的绑定等，这些小程序很多都有后端，可以直接搭配一起学习与前端和后端。
后端语言包括Java和PHP。
源码获取
只有部分源码包含后端，很多都只能以微信小程序方式供我们查看。
微信搜索公众号“开小白学编程”，回复微信小程序即可获取
种类很多，比如天气预报小程序 、购物小程序 、外卖小程序等。
因为很大，好几个G，网盘连接不会被释放。
您可以通过电子邮件联系我
或者到我博客的问答社区留言（我会收到消息通知）我的博客
开发
首先介绍一下如何开发微信小程序。
注册账户
进入微信公众平台，点击立即注册，选择微信小程序
注册成功后，登录小程序后台，修改小程序的服务类别、头像等。
上图是访问域名的配置。 如果您不使用云开发，而是使用自己的服务器进行开发如何开发微信小程序，数据获取和逻辑处理如何实现，则需要配置安全域名来释放访问。 域名必须可以通过 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后台的天气小程序，
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;
}
}
节目显示
