手把手教你写一个微信小程序(附源码)

以下内容来自公众号逆锋起笔,关注每日干货及时送达9fb3614c5632fe75d0505c01b9df2481.png

来源:blog.csdn.net/zwb19940216/

article/details/81023191

前言

现在微信小程序越来越火了,相信不少人都通过各种途径学习过微信小程序或者尝试开发,作者就是曾经由于兴趣了解开发过微信小程序,最终自己的毕业设计也是开发一个微信小程序。所以现在用这篇博客记录我之前开发的一些经验和一些心得吧。

主要内容

  • springboot后端架构构建

  • 小程序项目构建

  • 小程序api调用

  • 后台resetful接口编写

  • 小程序调用后台接口

  • 免费的https申请

  • linux下部署上线

微信小程序项目构建

这些基础的东西我就不过多介绍,大家在刚开始开发的时候一般都没有自己的服务器及域名,所以大家在本地编写的时候,在“详细”下的“项目设置”里面将“不校验域名安全性”勾选。

902056b55e5f171ee914fbf875efc5da.png

至于微信小程序的组件,即前端页面的开发希望大家耐住寂寞认真在微信开发平台上研究。

  • 组件:https://developers.weixin.qq.com/miniprogram/dev/component/

  • api:https://developers.weixin.qq.com/miniprogram/dev/api/

后端详解

我在后端编写主要是用java,当然对其他开发语言熟悉的也可以使用其他语言开发后端。现在我就java编写后端api的讲解。主要框架springboot,开发工具myeclipse,服务器阿里云服务器。

创建一个maven项目,导入相关依赖:

pom.xml依赖

<!-- 统一版本控制 -->
<parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>1.5.9.RELEASE</version>
</parent>
<dependencies><!-- freemarker渲染页面 --><!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-freemarker --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-freemarker</artifactId></dependency><!-- spring boot 核心 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!-- springboot整合jsp --><!-- tomcat 的支持. --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId><exclusions><exclusion><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-tomcat</artifactId></exclusion></exclusions></dependency><dependency><groupId>org.apache.tomcat.embed</groupId><artifactId>tomcat-embed-jasper</artifactId></dependency>
</dependencies>

在配置文件src/main/resources/下创建application.properties文件可以修改一些配置参数等。

#jsp支持
spring.mvc.view.suffix=.jsp
spring.mvc.view.prefix=/WEB-INF/jsp/
#this is set port
#server.port=80
server.port=443
#添加ssl证书
#ssl证书文件名
server.ssl.key-store=classpath:xxxxxxx.pfx
server.ssl.key-store-password=xxxxxxxx
server.ssl.keyStoreType=xxxxxxxx

在实际项目中可能涉及数据库,还要整合mybatis,在文章中,我仅仅做测试就不做使用数据库的测试。

首先创建springboot的入口程序:app.class下面贴上代码:

@ComponentScan(basePackages= "com.bin")//添加扫包@ComponentScan(basePackages= "")
@EnableAutoConfiguration
public class App{//启动springbootpublic static void main(String[] args) {SpringApplication.run(App.class, args);}
}

启动项目时直接右击run即可。

在写一个测试的controller进行微信小程序与java后端实现通信,controller代码如下:

@RestController
@SpringBootApplication
public class ControllerText {@RequestMapping("getUser")public Map<String, Object> getUser(){System.out.println("微信小程序正在调用。。。");Map<String, Object> map = new HashMap<String, Object>();List<String> list = new ArrayList<String>();list.add("zhangsan");list.add("lisi");list.add("wanger");list.add("mazi");map.put("list",list);System.out.println("微信小程序调用完成。。。");return map;}@RequestMapping("getWord")public Map<String, Object> getText(String word){Map<String, Object> map = new HashMap<String, Object>();String message = "我能力有限,不要为难我";if ("后来".equals(word)) {message="正在热映的后来的我们是刘若英的处女作。";}else if("微信小程序".equals(word)){message= "想获取更多微信小程序相关知识,请更多的阅读微信官方文档,还有其他更多微信开发相关的内容,学无止境。";}else if("西安工业大学".equals(word)){message="西安工业大学(Xi'an Technological University)简称”西安工大“,位于世界历史名城古都西安,是中国西北地区唯一一所以兵工为特色,以工为主,理、文、经、管、法协调发展的教学研究型大学。原中华人民共和国兵器工业部直属的七所本科院校之一(“兵工七子”),陕西省重点建设的高水平教学研究型大学、陕西省人民政府与中国兵器工业集团、国防科技工业局共建高校、教育部“卓越工程师教育培养计划”试点高校、陕西省大学生创新能力培养综合改革试点学校。国家二级保密资格单位,是一所以\"军民结合,寓军于民\"的国防科研高校。";}map.put("message", message);return map;}@RequestMapping("")public String getText(){return "hello world";}}

至此简易的后端框架及测试基本完成。

说明:@RestController与@Controller注解的区别@RestController相当于两个注解,它能实现将后端得到的数据在前端页面(网页)中以json串的形式传递。而微信小程序与后台之间的数据传递就是以json报文的形式传递。所以这就是选择springboot框架开发小程序后端的主要原因之一。可以方面我们进行小程序的后端开发。

小程序发起网络请求

在完成了小程序的后端开发,下面进行小程序端发起网络请求。

下面以一个简单的按钮请求数据为例:

wxml文件

<button bindtap='houduanButton1'>点击发起请求</button>
<view wx:for="{{list}}">姓名:{{item}}</view>

js文件

/*** 页面的初始数据*/data: {list: '',word: '',message:''},houduanButton1: function () {var that = this;wx.request({url: 'http://localhost:443/getUser',method: 'GET',header: {'content-type': 'application/json' // 默认值},success: function (res) {console.log(res.data)//打印到控制台var list = res.data.list;if (list == null) {var toastText = '数据获取失败';wx.showToast({title: toastText,icon: '',duration: 2000});} else {that.setData({list: list})}}})}

主要调用的api就是wx.request,想知道将详细的介绍大家可以去微信公众平台。微信搜索readdot,关注后回复编程资源获取23种精品资料

接下来以搜索类型的请求为例:

wxml文件:

<input type="text" class="houduanTab_input" placeholder="请输入你要查询的内容" bindinput='houduanTab_input'></input><button bindtap='houduanButton2'>查询</button><view wx:if="{{message!=''}}">{{message}}</view>

js文件:变量的定义见上一个js文件

//获取输入框的内容houduanTab_input: function (e) {this.setData({word: e.detail.value})},// houduanButton2的网络请求houduanButton2: function () {var that = this;wx.request({url: 'http://localhost:443/getWord',data:{word: that.data.word},method: 'GET',header: {'content-type': 'application/json' // 默认值},success: function (res) {console.log(res.data)//打印到控制台var message = res.data.message;if (message == null) {var toastText = '数据获取失败';wx.showToast({title: toastText,icon: '',duration: 2000});} else {that.setData({message: message})}}})}

至此已经完成了简易的微信小程序端与java后端进行通信。

现在可以在启动后端项目在微信开发工具上进行测试。

演示效果:

7f9a2eabceadd7979b9a443951491cf0.gif

f855b5418c3fef1d3507a9128e5e32b1.gif

所以至此已经完成了小程序的前后端通信。

https申请

其实也不算什么申请,在购买域名之后可以申请免费的ssl证书,在前面的配置文件application.properties中有证书的配置,将证书的pfx文件直接添加到后端项目下即可。

购买服务器部署后端api代码

对于springboot项目,本人建议打jar,直接在服务器上部署即可,在服务器上只需要安装对应版本的jdk即可。项目部署命令:

我购买的是阿里云的轻量级应用服务器部署的。比较划算吧。

运行命令:nohup java -jar helloworld.jar &

nohup的意思不挂服务,常驻的意思,除非云服务器重启,那就没法了;最后一个&表示执行命令后要生成日志文件nohup.out

当然还可以使用java -jar helloworld.jar

源码:

链接: https://www.aliyundrive.com/s/QMQJXXFYVcT

逆锋起笔专注于程序员圈子,你不但可以学习到javapython等主流技术干货,还可以第一时间获悉最新技术动态内测资格BAT大佬的经验精品视频教程副业赚钱经验,微信搜索readdot关注!

一款微信小程序商城项目(附源码)

H5 小程序直播教程,一看就会!

下载!《美团机器学习实践》.pdf

完整的外卖系统,手机端 + 后台管理(附源码)

mini Project 微信小程序 120.50G 教程分享

4ccd23fa3a34ff6597e052c4a01799dc.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/71886.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

为什么复制粘贴时html,为什么我粘贴文本的时候发现和复制时的不一样

2008-05-12 在新浪博客里&#xff0c;看到好多人博客里的每篇文章后面都有一些很个性的链接或者图片&#xff0c;就像QQ空间里的签名一样&#xff0c;应该怎样做 一、我的个性名片的代码如下&#xff1a;CRL南宁市欢迎你的光临说明&#xff1a;其余的蓝色部分你可以更换为自己的…

最新HTML微信聊天对话生成器网页源码+实测可用

正文: 用来装X_OR制作抖音幽默段子还是不错的&#xff08;如果需要的人多&#xff0c;有时间的话后面可能会考虑出一个高级点的&#xff09;。 下载源码后双击 index.html 运行即可&#xff0c;不需要服务器。 程序: wwgrlu.lanzouy.com/iMwK00grrvhe 图片:

会员信息管理系统

欢迎大佬指点&#xff01;&#xff01; 亲测可用&#xff01; 改了 几个bug 更新 之后的代码 会员信息管理系统文本说明 功能&#xff1a; 消费 ①从vipinf.txt的文本文件中LOAD()建立一个链表&#xff0c;之后的操作全部在链表中进行。在链表中修改消费信息&#xff0c;并将…

积分运营系列—一款优秀积分商城产品需具备的准则与功能梳理

我们常说的商业积分的应用&#xff0c;往往有两个核心目的&#xff1a; 给予商业预期的用户行为予回报&#xff0c;导向更深入、更频繁的核心业务。维护用户&#xff08;客户&#xff09;&#xff0c;绑定客户&#xff0c;引导低价值用户转化为高价值用户。 积分体系是否能够…

分享小程序会员积分管理系统的优势_会员积分管理系统的作用

商场、超市对用户进行管理&#xff0c;基本上都是采用积分管理&#xff0c;通过用户注册&#xff0c;施行积分积累制度&#xff0c;不仅能够有效吸引消费者消费更多商品或者服务&#xff0c;商家还能采用会员营销的方式&#xff0c;开展会员日活动&#xff0c;通过积分管理模式…

第三方支付-手续费系统设计与实现

1、手续费中的概念 1.1 手续费的定义 根据百度百科的定义&#xff0c;“手续费&#xff1a;办事过程中所产生的费用”&#xff0c;“手续费”可以这样解释&#xff1a;为代理他人办理有关事项所收取的一种劳务补偿&#xff1b;或对委托人来讲&#xff0c;是属于因他人代为办理…

盛世昊通董车长APP新功能上线,看视频获收益

近日,盛世昊通董车长APP新功能上线,新版本中首次加入视频广告“任务中心”,看视频广告就能获取收益,通过该功能,用户只要在董车长APP中邀请好友一起看视频做任务即可获取高额视频豆。积累的视频豆可以在董车长APP兑换分红收益,这个既能开开心心看广告又能获取丰厚收益的功…

CRM原型、协同办公APP高保真原型/审批管理、办公申请、工单管理、任务管理、日程管理、工作报告、签到考勤、客户管理、销售线索、商机管理、订单管理、账务管理、统计报表、回款管理、发票管理、报销管理

CRM及协同办公APP高保真原型/审批管理、办公申请、工单管理、任务管理、日程管理、工作报告、签到考勤、客户管理、销售线索、商机管理、订单管理、账务管理、统计报表、回款管理、发票管理、报销管理 Axure原型演示及下载地址&#xff1a;Axure Cloud - Generating Project A…

电子不停车收费系统(ETC)专题(1)——系统概述

我国道路交通普遍较为拥堵已经在国人的脑海中留下了深刻的印象&#xff0c;每当车辆通过收费站时都要停下来缴费&#xff0c;既耽误了司机和乘客的时间&#xff0c;又消耗了交通管理部门的人力、物力和财力&#xff0c;更重要的时候&#xff0c;加剧了交通拥挤。因此&#xff0…

互融云汽车融资租赁系统-汽车金融软件开发

汽车融资租赁作为汽车金融中典型的业务模式&#xff0c;是一种依托现金分期付款的方式&#xff0c;在此基础之上引入出租服务中所有权和使用权分离的特性&#xff0c;租赁结束后将所有权转移给承租人的现代营销方式。即在租赁期内&#xff0c;用户以分期支付租金的方式获得车辆…

酷信即时通讯开放平台和支付系统简述

一、通过网页申请成为开发者&#xff0c;审核通过后集成开放平台SDK到自己的APP或游戏中&#xff0c;运行时如果未安装酷信IM则提示安装&#xff0c;否则提示是否授权使用酷信IM帐号登录。 二、登录后&#xff0c;可分享给酷信即时通讯的好友、群组、生活圈&#xff0c;比如分享…

免费会员管理管理系统

csdn下载链接&#xff1a; https://download.csdn.net/download/zhupengfei/11422345 本软件可免费使用&#xff0c;无限制。需要的可以直接下载安装。本软件win10可直接使用&#xff0c;其他版本的可能需要安装.net4.0组件。安装时有提示。 最近比较忙&#xff0c;软件已免…

开发CRM客户关系管理系统需要多少钱

现阶段各个领域都少不了和客户相处&#xff0c;所以也必须对住户关联进行监管&#xff0c;跟踪业务流程进度情况&#xff0c;促使协作。伴随着现代科技的高速发展&#xff0c;及其管理模式的兴起&#xff0c;CRM客户关系管理系统开发逐步完善&#xff0c;而且在销售工作普及化。…

恒溢会员管理系统使用说明

恒溢会员管理系统是这样一款专业的会员管理软件&#xff0c;可针对不同行业&#xff08;理发店、美容院、美甲店、休闲、娱乐、汽车服务、洗衣店等&#xff09;&#xff0c;可实现对会员基本信息、充值、套餐、消费、优惠、提成、统计、报表等综合性的管理&#xff0c;可选配短…

免费的图书管图书借阅管理系统

百宝云图书借阅系统 基于百宝云在线表单设计的图书借阅系统&#xff0c;实现了三个基本功能。主要运用到了百宝云表单系统的数据联动和计算公式。这样借书还书只要扫一个条形码&#xff0c;图书资料会自动显示。本套系统免费使用&#xff0c;适合中小型图书借阅机构和简单图书…

CRM系统多少钱一套?盘点主流各大CRM系统价格

阅读本文你将了解&#xff1a;1.CRM定价规则&#xff1b;2.各大CRM系统报价&#xff08;CRM系统多少钱一套&#xff09;;3.CRM系统费用构成。 一、CRM定价规则 很多企业都寻求使用CRM系统来管理客户关系&#xff0c;从而优化管理流程&#xff0c;提升业绩。 对于企业而言&…

开发一套CRM系统要花多少钱?收费标准又是怎么样?

如今&#xff0c;越来越多的企业开始选择定制开发CRM客户管理系统。那么开发一套CRM系统要花多少钱&#xff1f;收费标准又是怎么样的呢&#xff1f; CRM企业管理软件&#xff0c;在90年代末美国落地初期&#xff0c;通用型CRM软件因更易学习、费用较便宜等原因曾风靡一时。 …

快鲸写字楼物业管理软件收费标准如何?

快鲸写字楼物业管理软件介绍 快鲸写字楼物业管理软件是快鲸科技有限公司旗下产品&#xff0c;有着强大的系统功能优势&#xff0c;能助力商住不动产快速招商&#xff0c;智能租赁管理和高效的资产管理。适用于写字楼、商场、公寓、办公园区、创客空间、商业楼宇等业态。 软件自…

CRM系统多少钱一套?一文了解国内9家价格费用

国内CRM的大概价位是多少&#xff1f;针对这个问题&#xff0c;我只能给到各家企业的标准套餐的报价&#xff0c;实际购买中的价格受多种因素影响&#xff0c;例如&#xff1a;购买人数、使用功能、是否个性化定制、是否需要实施服务等等。因此这篇文章会分为两部分来说明价位&…

云借阅图书管理系统

前言 基于SSM&#xff08;Spring Spring MVC Mybatis&#xff09;框架开发的一个较为简单的云借阅图书管理系统&#xff0c;虽然比较简单&#xff0c;但是耐心的做完会对 Spring框架 和 Spring MVC框架 以及 Mybatis框架 这三个框架的整合开发有一个较好的理解。下面我就来简…